워드프레스 사이드바 고정하기(+아바다, 뉴스페이퍼, GeneratePress 테마)

일부 워드프레스 테마에서는 페이지를 아래로 스크롤할 때 사이드바를 고정하는 옵션을 제공합니다. 하지만 사이드바 고정 기능을 지원하지 않는 테마가 많습니다. 사이드 고정 옵션이 없는 경우 간단한 CSS 코드를 사용하거나, 워드프레스 플러그인을 사용하여 사이드바를 고정할 수 있습니다. 이 글에서는 아바다, 뉴스페이퍼, 엔폴드, GeneratePress 테마에서 사이드바를 고정하는 방법과 사이드바 고정 플러그인을 소개합니다.

워드프레스 사이드바 고정하기

아바다, 뉴스페이퍼 등 일부 테마에서는 사이드바를 고정하는 옵션을 제공합니다. 하지만 많은 테마에서 사이드바 고정 옵션을 지원하지 않습니다. 사이드바 고정 기능이 없는 경우 CSS나 자바스크립트 또는 플러그인을 사용하여 사이드바를 고정할 수 있습니다.

아바다 테마에서 사이드바 고정

베스트 셀링 테마인 아바다 테마에서는 알림판 > Avada > Options > Sidebars > Sidebar Styling 메뉴로 이동하여 Sticky Sidebars 옵션에서 고정하기를 원하는 사이드바를 지정하면 됩니다. (워드프레스 언어를 한국어로 설정하면 Options 내의 일부 메뉴가 한국어로 표시됩니다. 예: Sidebars -> 사이드바들)

뉴스페이퍼 테마에서 사이드바 고정(스마트 사이드바 옵션)

뉴스페이퍼 테마에서는 알림판 > Newspaper > Theme panel > Template Settings 페이지로 이동하여 Smart sidebar(스마트 사이드바) 옵션을 Enable(활성화)로 설정하면 됩니다.

참고로 뉴스페이퍼 테마의 Smart sidebar 섹션에는 사이드바에 구글 애드센스 광고를 배치하려는 경우 이 기능을 사용하지 않을 것을 경고하고 있습니다. 과거 구글 정책상 사이드바 등에 광고를 고정하면 정책 위반이 되었습니다. 하지만 최근 이 정책이 변경되어 고정된 사이드바에 애드센스 광고를 표시하는 것을 허용하는 것 같습니다.

워드프레스 GeneratePress 테마 사이드바 고정하기

저는 대부분의 사이트에 GeneratePress 테마를 사용하고 있습니다. 이 테마가 속도면에서 빠르기 때문에 수익형 블로그에서 많이 사용되고 있습니다.

GeneratePress 테마에서는 사이드바 고정 옵션이 없습니다. 정교하게 고정할 필요가 없다면 간단한 CSS 코드를 사용할 수 있습니다. 예를 들어, GeneratePress 테마에서는 다음 코드를 사용하여 사용자가 페이지를 아래로 스크롤해도 사이드바가 함께 따라가도록 할 수 있습니다.

/* 제너레이트 테마 사이드바 고정 */
/* Sticky Sidebar in GeneratePress */

@media (min-width: 769px) {
#right-sidebar {
position: -webkit-sticky;
position: sticky;
top: 0;
}
}

CSS position:sticky 속성은 IE를 비롯하여 일부 구형 브라우저에서는 지원되지 않습니다.

하지만 이제 IE는 지원이 중단되고 윈도에서 제거될 예정이며, 개발자 커뮤니티에서도 IE에 대한 대응은 하지 않는 것이 추세이므로 sticky를 사용해도 무방할 것 같습니다.

익스플로러를 포기해야 할까?

조금 더 효과적으로 고정하는 방법을 다음 코드를 사용할 수 있습니다.

/* GeneratePress 테마 사이드바 고정 */

@media (min-width: 769px) {
.site-content {
display: flex;
justify-content: space-around;
align-items: flex-start;
}

#right-sidebar {
position: -webkit-sticky;
position: sticky;
bottom: 0.1rem;
align-self: flex-end;
}
}

위의 코드를 사용하면 다음 동영상과 같이 스크롤 시 사이드바가 고정됩니다.

응용: Enfold 테마에서 사이드바 고정

다른 테마에서도 위의 코드를 적절히 응용할 수 있습니다. 예를 들어, 엔폴드 테마에서는 특정 페이지의 사이드바를 고정하는 방법으로 다음과 같은 코드를 제시하고 있습니다.

/* Sticky sidebar in Enfold theme */
@media only screen and (min-width: 767px){
.page-id-29934 .container_wrap.sidebar_right .container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

.page-id-29934 .sidebar  {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  align-self: flex-end;
  width: 25% !important
}
}

위의 코드에서는 사이드바 너비를 25%로 설정하는 코드가 추가되었습니다.

응용: 아스트라 테마에서 사이드바 고정

Astra 테마를 사용하는 경우 다음 코드를 사용하여 사이드바를 붙박이로 만들 수 있습니다.

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

[참고*GeneratePress 테마와 Astra 테마가 업데이트되면서 상기 코드가 잘 작동하지 않을 수도 있습니다. 그런 경우 이 글을 참고해보세요.*]

워드프레스 플러그인을 사용하여 사이드바 고정하기

쉬운 방법으로 플러그인을 사용하여 사이드바를 고정할 수 있습니다. 무료 워드프레스 플러그인으로 WP Sticky Sidebar – Floating Sidebar On Scroll for Any Theme가 있습니다.

CSS로 고정하는 방법이 정교하지 않을 수 있습니다. CSS를 이용한 방법에 만족하지 않으면 이와 같은 플러그인을 사용하거나 자바스크립트/jQuery를 사용하여 사이드바를 고정할 수 있습니다.

개인적으로는 CSS를 사용하여 고정하는 것을 선호합니다. 플러그인을 설치하거나 jQuery 스크립트를 추가하면 사이트 속도에 영향을 미칠 수 있습니다. 가능한 경우 플러그인 설치는 최소화하는 것이 바람직합니다.

참고

https://avada.tistory.com/2299

GeneratePress 테마로 워드프레스 블로그 세팅 예시 (How to Customize GP)

https://avada.tistory.com/2279

워드프레스 수익형 블로그 만들기