워드프레스 OnePress 테마 사이드바 고정 방법

Last Updated: 2024년 06월 06일 | , 댓글 남기기

이 블로그에서는 다양한 워드프레스 테마의 사이드바 고정 방법에 대하여 다루고 있습니다. 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; /* 관리자 바 높이에 따라 이 값을 조정하세요 */
    }
}

위의 코드를 적용하면 본문을 아래로 스크롤하면 사이드바가 사이드바 영역에서 상단 부분이 고정되고, 본문 콘텐츠를 맨 아래로 스크롤 하면 사이드바도 아래로 스크롤되어 하단이 고정됩니다.

워드프레스 OnePress 테마 사이드바 고정 방법

로그인 상태와 로그아웃 상태에서 테스트하여 top 값을 적절히 수정하시기 바랍니다. 헤더 높이 등에 따라 숫자를 적절히 조정해야 할 수 있습니다.

상기 코드는 디자인 » 사용자 정의하기 » 추가 CSS에 입력하거나 OnePress 테마의 차일드 테마 폴더 내에 있는 스타일시트 파일(style.css)에 추가하시기 바랍니다.

본문을 아래로 스크롤할 때 사이드바도 아래로 스크롤되다가 사이드바 콘텐츠의 하단 부분이 사이드바 영역의 하단에 고정되도록 하고 싶은 경우에는 #secondary 부분을 변경하면 됩니다.

#secondary  {
    position: -webkit-sticky;
    position: sticky;
    bottom: 2rem; /* 사이드바 하단과 사이트 하단과의 간격을 지정. 적절히 수정하세요 */
    align-self: flex-end;
}

간단한 방법: 플러그인 사용

상기의 CSS 코드를 사용하면 별도의 플러그인이나 자바스크립트(JavaScript)를 사용하지 않고도 사이드바를 효과적으로 고정할 수 있습니다. 이 블로그는 현재 GeneratePress 테마를 사용하고 있는데, CSS를 사용하여 사이드바를 고정시켰습니다.

위에 설명한 방법이 이해가 되지 않는다면 플러그인을 사용할 수 있습니다.

메뉴와 헤더를 고정하는 방법에 대하여 설명하고 있지만, 사이드바를 비롯한 모든 요소를 고정할 수 있습니다.

간단한 플러그인이라서 사이트 속도에 약간의 영향만 미치지 않을 것 같지만, 이런 기능을 위해 플러그인을 사용하는 것은 추천하지는 않습니다. 하지만 보다 정교하게 사이드바나 특정 요소를 고정하고 싶은 경우 괜찮은 선택일 수 있습니다.

참고


댓글 남기기

Leave a Comment