Astra 테마: 사이드바 고정하는 방법 - 플로팅 사이드바

Astra 테마는 가볍고 빠른 워드프레스 중 하나로 평가받고 있습니다. 현재 이 블로그에 테스트 목적으로 Astra 테마를 설치했습니다. 속도적인 측면에서 이 블로그에서 잠시 테스트로 설치했던 GeneratePress 테마와 비슷한 수준으로 빠르지만, 기능적인 측면에서는 Astra가 약간 더 좋은 것 같습니다. (이 때문인지 유료 버전은 Astra가 가격이 더 높습니다.) 하지만 CSS와 워드프레스 사용법을 조금 안다면 어느 테마를 선택하든 괜찮을 것으로 보입니다.

Astra 테마: 사이드바 고정하기 (플로팅 사이드바)

유료 버전에서 사이드바를 고정하는 기능이 있는지 모르겠지만, 무료 버전에서는 마우스를 아래로 스크롤해도 사이드바가 고정되는 기능을 찾을 수가 없네요.

보통 무료 테마에서는 사이드바를 고정하는 붙박이(sticky) 기능을 제공하지 않습니다. 아바다, 뉴스페이퍼 등의 상용 테마에서는 사이드바 고정을 비롯한 다양한 옵션이 제공됩니다. 사실 불필요한 옵션이 많아서 편리하지만 속도면에서는 부정적인 영향을 미칩니다. 기능적인 측면과 속도의 조화를 이루기가 어려운 것 같습니다.

테마에서 사이드바를 고정하는 기능을 제공하지 않는 경우 사이드바를 고정하는 플러그인을 설치하면 편리합니다. 이 기능을 하는 다양한 플러그인이 있습니다. 무료 플러그인 중 하나를 선택하여 테스트해볼 수 있습니다.

하지만 플러그인을 사용하면 편리한 대신 사이트 속도에 조금 영향을 미칠 수 있습니다. 그런 영향이 싫은 경우 자바스크립트나 CSS로 고정하는 방법을 고려해볼 수 있습니다. Astra 테마에서는 다음과 같은 간단한 CSS 코드를 사용하여 사이드바를 고정할 수 있습니다.

// Fix sidebar in WordPress Astra theme
// 아스트라 테마에서 사이드바 고정
/* 사이드바 고정 */
@media screen and (min-width: 769px) {
#secondary {
    position: sticky;
    position: -webkit-sticky;
    top: 30px;
}
} Code language: PHP (php)

위의 코드에서 sticky가 작동하도록 하려면 반드시 top 값을 지정해야 합니다. 30px는 적절히 조정할 수 있습니다.

CSS 코드를 사용할 경우 사이트 속도에 영향을 최소화하므로 바람직하지만, 정교하게 작동하지는 않습니다. 특히 CSS position sticky는 IE에서 작동하지 않습니다.

사이드바 고정에 사용하는 sticky 요소는 IE에서 지원이 되지 않는다. 플로팅 사이드바 기능을 제공하지 않는 Astra 테마 등에서 sticky를 사용하여 사이드바를 간단히 고정할 수 있다.
Can I Use: CSS position:sticky. IE에서 지원이 되지 않는다.

다행스러운 점은 2020년 1월에 윈도우 7 지원이 종료되면서 IE의 점유율도 급속히 하락하고 있다는 점입니다.

우리나라 브라우저 점유율 추이
한국 브라우저 점유율 추이. IE 점유율이 급속히 하락하고 있다. (출처: Happist.com)

전세계 브라우저 점유율에서는 IE가 한국보다 더욱 하락하여 1.7% 수준입니다.

꼭 IE에서 사이드바가 고정되어야 한다고 고집하는 경우에는 sticky 요소를 사용할 수 없지만, 이제 대부분의 환경에서 CSS position sticky를 사용해도 무방할 것 같습니다.

워드프레스에서 기능을 확장하기 위해 플러그인을 사용하는 경우가 많습니다. 가능한 심플한 기능은 플러그인 사용을 자제하고 직접 코드를 추가하는 등의 방법을 모색하는 것이 바람직합니다. 플러그인을 사용하면 편리하지만, 플러그인을 많이 설치하면 사이트 속도에 부정적인 영향을 미치고 플러그인 충돌이 발생할 수도 있습니다.

마치며

이상으로 워드프레스 아스트라 테마에서 간단한 CSS 코드로 사이드바를 고정하는 방법에 대해 살펴보았습니다. 위에서 언급했듯이 이 방법은 인터넷 익스플로러를 지원하지 않으므로 IE에서 반드시 플로팅 사이드바 기능이 작동해야 하는 경우에는 플러그인을 사용하거나 javascript 또는 jQuery를 이용해 보시기 바랍니다.

참고:

댓글 남기기

프리미엄 테마 그래픽 동영상 템플릿 무료 다운로드