워드프레스 GeneratePress 테마 사이드바 너비 조정 방법

워드프레스 GeneratePress 테마의 기본 설정을 사용할 경우 사이드바 너비가 좁은 편입니다. GeneratePress 테마 사이드바 너비를 조정하는 몇 가지 방법에 대해 살펴보겠습니다.

워드프레스 GeneratePress 테마의 사이드바 너비 조정 방법

GeneratePress 테마 무료 버전

GeneratePress 테마의 사이드바 너비를 25%로 지정하고 싶은 경우 다음 코드 스니펫을 테마의 함수 파일에 추가하면 됩니다.

// 무료 GeneratePress 테마에서 콘텐츠와 사이드바의 너비 설정하기
add_filter( 'generate_right_sidebar_width','lh_right_sidebar_width' );
function lh_right_sidebar_width() {
        return '25';
}

부모 테마의 함수 파일에 코드를 추가하면 추후 테마 업데이트 시에 수정 사항이 사라지므로 반드시 차일드 테마(자식 테마)를 만들어서 차일드 테마 내의 함수 파일(functions.php)에 추가하시기 바랍니다.

무료 GeneratePress 테마를 사용하는 경우 위의 방법으로 사이드바 너비를 설정할 수 있습니다.

GeneratePress 유료 버전 (GP Premium 플러그인 설치)

유료 버전을 이용하는 경우 테마 사용자 정의하기에서 너비 비율을 설정할 수 있습니다. 워드프레스 관리자 페이지 > 테마 디자인 > 사용자 정의하기 > Layout > Sidebars에서 왼쪽 사이드바와 오른쪽 사이드바의 폭을 백분율 단위로 설정할 수 있습니다.

워드프레스 GeneratePress 테마 사이드바 너비 조정하기

Left Sidebar Width 또는 Right Sidebar Width를 원하는 너비로 설정해보시기 바랍니다.

참고로 컨테이너 폭은 테마 디자인 > 사용자 정의하기 > Layout > Container에서 조정할 수 있습니다.

고정 너비로 설정하는 방법

이 블로그에서는 현재 PC 기준으로 사이드바 너비를 340px로 고정되어 있습니다. 특정 값으로 고정하고 싶은 경우 다음과 같은 CSS 코드를 테마 디자인 > 사용자 정의하기 > 추가 CSS에 추가할 수 있습니다.

/* GeneratePress 테마 사이드바 폭을 340px으로 고정 */
@media (min-width: 769px) {
    #right-sidebar {
        width: 340px;
    }
    #primary {
        width: calc(100% - 340px);
    }
   }

CSS 코드를 추가해도 실제 사이트에 반영이 안 되는 경우에는 캐시 플러그인의 캐시와 브라우저 캐시를 삭제한 후에 확인하면 변경 사항이 적용될 것입니다.

마치며

이상으로 GeneratePress 테마에서 사이드바 크기를 조정하는 방법에 대해 살펴보았습니다. GeneratePress는 기능을 최소화하여 속도에 최적화된 테마로서 커스텀하여 사용하기에 좋은 테마 같습니다.

아바다와 같은 인기 다목적 테마는 많은 테마 옵션과 기능이 제공되므로 사용법을 익혀 웬만한 사이트를 만들 수 있지만 사이트가 최적화되지 않으면 무거워져 느려질 수 있습니다.

참고


3개 댓글

  1. 혹시 사이드바에 최신글, 최신댓글 글자 크기를 줄이는 방법은 알 수 없을까요? 너무 무식하게 큰데 글자 크기를 줄이는 방법을 모르겠어요..

    1. 사이드바의 위젯 타이틀(제목)의 폰트 크기를 조정하고 싶은 경우 외모 » 사용자 정의하기 » Typography (타이프그래피)에서 Add Typography 버튼을 눌러 "Widget Titles"에 대하여 글자 크기를 변경해보시기 바랍니다. 아래 스크린샷을 참고해보세요.

      https://app.screencast.com/n96P3S9U8HOw0?conversation=sq3H24IyQP39R9mSnajsJ9

      만약 위의 방법을 조정할 수 없다면 CSS 코드를 사용하여 조정해야 합니다. 위의 방법으로 조정이 안 되는 경우 다시 댓글로 알려주시면 제가 CSS 코드를 확인하여 알려드리겠습니다.

      1. 알려주셔서 Typography에서 소제목이랑 헤딩마다 크기를 줄일 수 있었어요 정말 감사합니다!!

댓글 남기기

* 이메일 주소는 공개되지 않습니다.