워드프레스 Newspaper 테마에서 사이드바 폭 크기 조정하기

Newspaper 테마는 매거진 레이아웃 테마 중에서 판매 1위를 기록하고 있는 인기 워드프레스 테마입니다.

Newspaper의 콘텐츠(content) 영역과 사이드바(sidebar) 영역은 기본적으로 66.66666667%와 33.33333333%로 2:1 비율입니다. 따라서 경우에 따라 사이드바 영역이 너무 커 보일 수 있습니다.

Newspaper에서 콘텐츠와 사이드바 비율이 2:1로 고정되어 있다.

Newspaper측에서는 너비가 고정되어 있고 변경할 계획이 없다고 하네요. 다만, 포스트 템플릿에 대해서는 그런 옵션을 업데이트에 포함시킬 수도 있다고 언급하고 있습니다. 하지만 Theme panel에서 옵션을 살펴보니 폭을 조정하는 옵션은 보이지 않네요. (어쩌면 못 찾는 것일 수도 있습니다.)

직접 사이드바 크기를 조정하려는 경우 다음과 같은 CSS 코드를 외모 > 사용자 정의하기 > 추가 CSS에 추가할 수 있습니다.

.td-pb-span8.td-main-content {
width: 73% !important;
}

.td-pb-span4.td-main-sidebar {
width: 27% !important;
}

화면 해상도에 따라 비율을 달리 설정해줄 수 있습니다. 숫자는 적절히 조정하도록 합니다. Newspaper에서는 다음과 같은 CSS 미디어 쿼리를 사용할 수 있습니다.

/* responsive phone */
@media (max-width: 767px) {

}
/* responsive portrait tablet */
@media (min-width: 768px) and (max-width: 1018px) {

}

/* responsive landscape tablet */
@media (min-width: 1019px) and (max-width: 1200px) {

}

/* responsive monitor */
@media (min-width: 1201px) {

}

원하는 화면 해상도에 대하여 비율을 적당히 조정하도록 합니다.

참고로 Newspaper와 비슷한 매거진/블로그용 테마인 Publisher에서는 테마 옵션을 통해 전체 폭과 사이드바 폭을 마우스로 끌어서 조정할 수 있습니다.

현재 워드프레스 정보꾸러미 블로그에서 Publisher 테마가 적용되어 있습니다. 비교적 최근에 출시되어서 그런지 버그가 조금씩 눈에 띄지만 기능면과 사용 편의성에서는 괜찮은 것 같습니다.

Publisher는 Visual Composer가 탑재되어 있습니다. 비주얼 컴포저는 사이트 속도에 부정적인 영향을 미칩니다. 비주얼 컴포저를 비활성화하고 테마에서 제공되는 템플릿을 사용해도 다양하게 구성이 가능합니다.

NewspaperVisual Composer와 자체 컴포저가 함께 제공됩니다. 가급적 비컴은 사용하지 말고 자체 컴포저인 tagDiv Composer를 사용하는 것이 속도면에서 더 좋을 것 같습니다.

참고:

Leave a Comment