Onepress 테마는 심플하고 디자인이 깔끔해서 제가 줄곧 사용하고 있는 테마이지만, 한 가지 아쉬운 점이 있었는데요. 바로 화면 스크롤 시 사이드바가 고정되지 않는다는 것입니다. 이 글에서는 워드프레스 Onepress 테마에서 화면 스크롤 시 사이드바 고정 방법에 대해 알아보겠습니다.
워드프레스 Onepress 테마에서 화면 스크롤 시 사이드바 고정 방법
먼저 Onepress 테마의 화면 구성을 보면, 아래 그림과 같이 타이틀과 메뉴가 위치한 ‘masthead’ 영역, 그 아래 메인 콘텐츠가 표시되는 ‘primary’ 영역, 그리고 사이드바가 위치한 ‘secondary’ 영역으로 구분되며, 이 둘을 아우르는 영역을 ‘content’라고 합니다.
오늘 적용시킬 내용은 primary 영역의 내용이 길어 스크롤되더라도 secondary 영역은 고정되도록 하는 것입니다.
1. Onepress 테마 비고정 사이드바
Onepress 테마를 적용하면 메인 콘텐츠 영역을 스크롤할 때 사이드바도 함께 스크롤됩니다. 아래 그림에서 보시는 것처럼, 현재 화면을 스크롤하면 오른쪽 사이드바가 메인 콘텐츠와 함께 이동합니다. 이러한 레이아웃으로도 블로그 운영에는 큰 지장은 없습니다. 하지만 사이드바에 광고, 최신 글, 이메일 등을 배치하고 화면에 계속 노출되도록 한다면, 방문자들이 메인 콘텐츠를 읽는 동안에도 사이드바에 있는 다른 콘텐츠에도 지속적으로 접근할 수 있게 되므로, 블로그의 사용성과 수익성 향상에 도움이 됩니다.
2. Onepress 테마에서 사이드바 고정하기
Onepress 테마에서 사이드바를 고정시키려면 CSS를 사용해야 합니다. 아래는 해당 기능을 구현하는 코드이며, 화면의 너비가 768px 이상일 때 적용되도록 하였습니다. 메인 콘텐츠가 맨 아래까지 스크롤되면 사이드바도 함께 스크롤되어 하단이 고정됩니다.
만약 메인 콘텐츠가 스크롤될 때 사이드바도 스크롤되다가, 사이드바의 하단 부분이 화면 하단에 고정되기를 원한다면, 아래 코드에서 top: 75px;와 align-self: flex-start; 부분을 bottom: 2rem;과 align-self: flex-end;로 각각 변경하면 됩니다. 이렇게 하면 사이드바가 메인 콘텐츠와 함께 스크롤되다가, 사이드바의 하단이 화면 하단에 고정됩니다.
아래 코드에서 /* ~ */ 부분은 코드의 이해를 돕기 위한 주석이며, 지저분하게 느껴지시면 모두 제거한 후 사용하시기 바랍니다.
/* 미디어 쿼리: 화면의 너비가 768px 이상일 때 아래 스타일을 적용 */
@media (min-width: 768px) {
/* #content-inside 요소에 대한 스타일 설정 */
#content-inside {
display: flex; /* flexbox를 사용하여 내부 요소들을 효율적으로 배치 */
justify-content: space-around; /* 내부 요소들 사이의 간격을 동일하게 조정 */
align-items: flex-start; /* 내부 요소들을 컨테이너의 상단에 맞춰 정렬 */
}
/* #primary 요소에 대한 스타일 설정 */
#primary {
flex: 1; /* 가용 공간을 모두 차지하도록 flex-grow 값을 1로 설정 */
}
/* #secondary 요소에 대한 스타일 설정 */
#secondary {
position: sticky; /* 스크롤 시 특정 위치에서 고정되도록 sticky 위치 설정 */
top: 75px; /* 스크롤 시, 뷰포트 상단에서 75px 아래에 #secondary 요소를 고정 */
align-self: flex-start; /* 컨테이너의 상단과 일치하도록 자기 자신을 정렬 */
}
/* 관리자 바가 있을 때 #secondary 요소의 스타일 */
.admin-bar #secondary {
top: 105px; /* 관리자 바가 있을 경우, 뷰포트 상단에서 105px 아래에 #secondary 요소를 고정 */
}
}
이제 준비한 CSS 코드를 워드프레스에 적용해 보겠습니다. 먼저 워드프레스 관리자 화면으로 이동한 후, ‘디자인’ → ‘사용자 정의하기’를 순서대로 클릭한 다음, 오른쪽에 있는 메뉴에서 ‘추가 CSS’를 찾아 클릭합니다. ‘추가 CSS’ 의 맨 아래로 스크롤한 후, 위의 코드를 복사하여 붙여넣기 하고 ‘공개’를 클릭하여 적용시킵니다.
이제 수정된 CSS 코드를 적용한 결과를 확인해 보겠습니다. 아래 이미지는 CSS 코드를 워드프레스에 추가한 후의 화면입니다. 보시는 바와 같이, 메인 콘텐츠 영역을 아래로 스크롤하더라도 오른쪽의 사이드바는 항상 고정되어 화면에 나타나는 것을 볼 수 있습니다.
오늘은 워드프레스 Onepress 테마에서 화면 스크롤 시 사이드바 고정 방법에 대해 알아보았습니다. 사이드바를 고정하면 광고나 중요한 콘텐츠를 사이드바에 배치하여 지속적으로 노출시킬 수 있어 블로그의 효과를 높이는 데에 도움이 됩니다. 이 글이 Onepress 테마를 사용하는 분들이나 워드프레스에서 사이드바를 고정하는 방법을 찾고 계신 분들께 유용한 정보가 되었기를 바랍니다.