워드프레스 Jupiter 테마: 사이드바 너비 변경 방법

인기 워드프레스 테마 중 하나인 Jupiter 테마는 PC에서 사이드바 폭이 기본적으로 25%로 설정되어 있습니다. 사용자 정의하기에서 사이드바 너비를 조정하는 옵션을 찾아보니 해당 기능이 없는 것 같습니다. 저는 간단한 CSS 코드를 넣어 사이드바 폭을 30%로 늘렸습니다.

목차

워드프레스 Jupiter 테마에서 사이드바 너비 변경 방법

주피터 테마는 WPBakery Page Builder ('비주얼 컴포저')를 기본 페이지 빌더로 이용하다 Jupiter X로 업데이트되면서 기본 페이지 빌더를 Elementor로 변경했습니다.

주피터가 엘리멘터를 처음 도입할 때에는 엘리멘터 요소가 부족했지만, 최근 몇 가지 요소가 추가되어 기능이 많이 향상된 것 같습니다.

주피터는 최적화가 잘 되어 속도가 빠른 편이며 꾸준히 Top 10 베스트셀링 테마 리스트에 이름을 올리고 있습니다. Jupiter는 약 135,000개 판매를 기록하고 있습니다.

Jupiter X에서 컨테이너 너비는 워드프레스 알림판 > 테마 디자인 > 사용자 정의하기 > Site Settings에서 조정할 수 있습니다.

저는 살펴보니 Container Width가 기본적으로 1180px로 설정되어 있네요. 사이드바 폭을 조정하는 옵션이 있는지 살펴보았지만 보이지가 않네요. 제가 못 찾았을 수도 있지만, 전체적으로 그리 자세한 테마 옵션을 제공하지는 않는 것 같습니다.

사이드바 설정은 워드프레스 알림판 > 테마 디자인 > 사용자 정의하기 > Layout에서 지정할 수 있습니다.

 

Layout에서 No Sidebar (사이드바 없음), Single Sidebar Left (왼쪽 사이드바), Single Sidebar Right (오른쪽 사이드바), Double Sidebar Left (왼쪽 사이드바 2개), Double Sidebar Right (오른쪽 사이드바 2개), Opposing Sidebars (아마 좌우 사이드바) 중에서 선택이 가능합니다.

보통 Single Sidebar Right(오른쪽에 1개 사이드바 배치)가 무난한 것 같습니다.

오른쪽에 사이드바를 배치하는 경우 다음 CSS 코드를 워드프레스 알림판 > 테마 디자인 > 사용자 정의하기 > 추가 CSS에 추가하여 사이드바 폭을 조정할 수 있습니다.

/* 워드프레스 주피터 테마 사이드바 너비 변경 */
/* Change the sidebar width of Jupiter X WordPress theme */
@media screen and (min-width: 992px) {
.col-lg-9 {
    flex: 0 0 70%;
    max-width: 70%;
}

.col-lg-3 {
    flex: 0 0 30%;
    max-width: 30%;
}
}

위와 같은 코드를 적용하면 해상도 992px 이상의 기기에서 왼쪽 콘텐츠 영역은 70%, 오른쪽 사이드바 영역은 30%가 할당됩니다. 숫자를 적절히 변경하여 원하는 너비로 설정하시기 바랍니다.

가볍고 빠른 워드프레스 테마를 원하는 경우...

참고로 Jupiter X는 속도가 비교적 빠른 편이며, 심플하면서 빠른 워드프레스 테마를 원하는 경우 GeneratePress나 Astra 테마를 사용해볼 수 있습니다.

블로그 리뉴얼: GeneratePress 테마로 변경 - 워드프레스 기본

참고:

워드프레스 GeneratePress 테마 블로그 설정하기

 

티스토리 북클럽 Book Club 스킨에서 사이드바 고정하는 간단한 방법