워드프레스 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는 기능을 최소화하여 속도에 최적화된 테마로서 커스텀하여 사용하기에 좋은 테마 같습니다.

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

참고



댓글 남기기