워드프레스를 사용하실 때 많은 분들이 Generatepress 테마, 스킨을 많이 사용하실 겁니다. 그 중 수익형 블로그의 경우 사이드바를 고정시켜서 광고를 최대한으로 노출시키는 경우가 많습니다.
이렇게 사이드바를 고정시키는 것을 Sticky Sidebar라고 합니다.
오늘은 워드프레스에서 스크롤을 내리더라도 사이드바의 위치를 고정시켜줄 수 있는 Sticky Sidebar를 적용시키는 방법에 대해서 알아보도록 하겠습니다.
워드프레스 사이드바 고정하기 Sticky Sidebar Generatepress
사이드바를 고정 시키는 방법은 여러가지가 있습니다. 그 중 가장 간단한 방법은 사이드바 고정 플러그인을 사용하는 것이겠지만, 플러그인은 사이트를 무겁게해서 SEO 관점에서는 좋지 않을 수 있습니다. 그래서 오늘은 사용자정의 CSS로 수정해 보도록 하겠습니다.
먼저 기본 상태에서 스크롤을 내려보시면 사이드바가 스크롤에 따라서 내려가는 것을 볼 수 있습니다.
사이드바 고정을 사용하시면 특정 위치에서 사이드바를 고정시킬 수 있습니다. 광고 위치에서 멈춰주시면 광고를 오랜 시간동안 노출이 가능해집니다.
워드프레스 관리자 메뉴로 이동합니다.
외모 > 사용자 정의하기 > 추가 CSS 메뉴로 들어가줍니다.
이쪽에서 내가 운영하는 워드프레스 사이트의 CSS를 추가로 등록해줄 수 있습니다. 사이트를 꾸미고 싶으시다면 필수로 이용해야하는 부분입니다.
아래의 코드를 적당한 위치에 붙여넣어줍니다.
/* Stick sidebars / @media(min-width: 769px) { / stick right sidebar */
.inside-right-sidebar,
.inside-left-sidebar {
position: -webkit-sticky;
position: sticky;
top: -300px;
}
}
그리고 우측에 사이트 미리보기를 보시면 사이드바가 고정되어 있으실 겁니다. top 부분의 숫자를 수정하시면 사이드바 높이를 수정할 수 있습니다.