이 블로그에서는 다양한 워드프레스 테마의 사이드바 고정 방법에 대하여 다루고 있습니다. OnePress 테마에서도 비슷한 방법으로 사이드바를 고정할 수 있습니다. 이 글에서는 OnePress 테마의 사이드바를 고정하는 방법에 대하여 살펴보겠습니다.
워드프레스 OnePress 테마 사이드바 고정 방법
간단한 CSS를 사용하여 워드프레스나 티스토리 블로그의 사이드바를 고정할 수 있습니다.
기본적으로 position: sticky 속성을 사용하여 사이드바를 붙박이로 고정할 수 있습니다.
/* CSS for making the sidebar sticky */
#secondary {
position: -webkit-sticky; /* For Safari */
position: sticky;
top: 0;
}
하지만 테스트를 해보면 OnePress 테마에서는 sticky 속성을 사용한 위의 코드가 작동하지 않습니다. sticky 속성이 작동하지 않는 이유에 대하여 Stackoverflow 포럼 글을 참고해 보시기 바랍니다.
OnePress 테마를 사용하는 경우 이 블로그에서 소개한 적이 있는 GeneratePress 테마의 사이드바 고정에 사용되는 CSS 코드를 응용할 수 있습니다. 다음과 같은 CSS 코드를 사용하면 잘 작동하는 것을 확인했습니다.
/* OnePress 테마에서 사이드바를 고정(sticky)하는 방법 */
/* Fix the top of the sidebar in OnePress theme and scroll the sidebar to the bottom when content is scrolled down */
@media (min-width: 1025px) {
#content-inside {
display: flex;
justify-content: space-around;
align-items: flex-start;
}
#primary {
flex: 1;
}
#secondary {
position: -webkit-sticky; /* 사파리용 */
position: sticky;
top: 75px; /* 필요에 따라 이 값을 조정하세요 */
align-self: flex-start; /* 사이드바가 상단에 고정되도록 설정 */
}
.admin-bar #secondary {
top: 105px; /* 관리자 바 높이에 따라 이 값을 조정하세요 */
}
}
위의 코드를 적용하면 본문을 아래로 스크롤하면 사이드바가 사이드바 영역에서 상단 부분이 고정되고, 본문 콘텐츠를 맨 아래로 스크롤 하면 사이드바도 아래로 스크롤되어 하단이 고정됩니다.
로그인 상태와 로그아웃 상태에서 테스트하여 top 값을 적절히 수정하시기 바랍니다. 헤더 높이 등에 따라 숫자를 적절히 조정해야 할 수 있습니다.
상기 코드는 모양 » 사용자 정의 » 추가 CSS(구버전의 워드프레스에서는 외모 » 사용자 정의하기 » 추가 CSS)에 입력하거나 OnePress 테마의 차일드 테마 폴더 내에 있는 스타일시트 파일(style.css)에 추가하시기 바랍니다.
본문을 아래로 스크롤할 때 사이드바도 아래로 스크롤되다가 사이드바 콘텐츠의 하단 부분이 사이드바 영역의 하단에 고정되도록 하고 싶은 경우에는 #secondary 부분을 변경하면 됩니다.
#secondary {
position: -webkit-sticky;
position: sticky;
bottom: 2rem; /* 사이드바 하단과 사이트 하단과의 간격을 지정. 적절히 수정하세요 */
align-self: flex-end;
}간단한 방법: 플러그인 사용
상기의 CSS 코드를 사용하면 별도의 플러그인이나 자바스크립트(JavaScript)를 사용하지 않고도 사이드바를 효과적으로 고정할 수 있습니다. 이 블로그는 현재 GeneratePress 테마를 사용하고 있는데, CSS를 사용하여 사이드바를 고정시켰습니다.
위에 설명한 방법이 이해가 되지 않는다면 플러그인을 사용할 수 있습니다.
메뉴와 헤더를 고정하는 방법에 대하여 설명하고 있지만, 사이드바를 비롯한 모든 요소를 고정할 수 있습니다.
간단한 플러그인이라서 사이트 속도에 약간의 영향만 미치지 않을 것 같지만, 이런 기능을 위해 플러그인을 사용하는 것은 추천하지는 않습니다. 하지만 보다 정교하게 사이드바나 특정 요소를 고정하고 싶은 경우 괜찮은 선택일 수 있습니다.
댓글 남기기