워드프레스의 기본 테마 중 하나인 Twenty Twelve는 심플하여 쉽게 커스터마이징이 가능합니다. 이전 글에서 Twenty Twelve 테마에 위젯 영역과 검색 상자를 추가하는 방법을 살펴보았습니다. 이 글에서는 사이드바를 없애고 Full-width 페이지로 만드는 방법을 살펴보겠습니다.

Twenty Twelve 테마의 테마 옵션(외모 > 사용자 정의하기)에서 사이드바를 없애는 옵션이 있는지 확인해보니 그런 옵션이 없네요. 하지만 사이드바에 있는 위젯을 모두 제거하면 Full-width 페이지 형식으로 표시됩니다.

만약 사이드바를 그대로 두어야 하는 경우에는 사이드바를 숨기고 메인 컨텐츠 영역의 너비를 100%로 변경하면 됩니다. 예를 들어, 특정 페이지에서만 사이드바를 숨기거나 특정 글에서만 사이드바를 숨기려고 하는 경우에는 사이드바 위젯을 그대로 두고 다음과 같은 코드를 스타일시트 파일(style.css)에 추가하도록 합니다.

.single.single-post #primary {
width: 100%;
}

.single.single-post .site {
max-width: 57.14rem;
}
.single.single-post #secondary {
display:none;
}

위의 경우 단일 포스트(Single Post)에서만 사이드바가 없는 전면 페이지 레이아웃으로 표시됩니다. 여기에서 실제 작동 예를 볼 수 있습니다. 원하는 경우 푸터 위젯 영역을 추가하거나 사이드바 위젯을 푸터 위젯으로 사용하도록 CSS를 조정해줄 수 있습니다.

Twenty Twelve 테마에서 사이드바를 없앤 레이아웃

Twenty Twelve 테마의 레이아웃을 Full-width로 바꾼 후의 모양

예를 들어 다음과 같은 코드를 스타일시트 파일에 추가하고 사이드바 위젯에 3개의 위젯을 추가하면 사이드바 위젯이 푸터 위젯처럼 작동합니다.

.single.single-post #primary {
width: 100%;
}

.single.single-post .site {
max-width: 57.14rem;
}
.single.single-post #secondary {
width: 100%;
}

@media screen and (min-width: 960px) {
.single.single-post #secondary aside {
width: 32%;
display: inline-block;
float: left;
padding: 5px;
}
}

.site { … } 부분은 body의 최대 너비를 지정해주는 부분입니다. 사이드바가 사용되지 않기 때문에 body의 최대 폭을 적절히 조정하도록 합니다. 사이드바를 CSS로 숨기지 않고 테마 소스에서 <?php get_sidebar(); ?> 부분을 주석 처리하거나 삭제하여 제거하는 것도 가능합니다. 사이드바 위젯에서 위젯을 모두 제거하는 방법을 사용하는 경우에는 body 너비만 지정해주면 됩니다.

Twenty Twelve 등과 같은 기본 테마를 잘 활용해도 깔끔한 스타일의 블로그를 만들 수 있을 것 같습니다. 기본 테마를 사용하면 쓸데 없는(?) 플러그인들이 없어서 속도면에서도 장점이 있습니다. 그리고 비교적 수월하게 커스터마이징이 가능합니다. 너무 화려한 효과를 원하지 않는 경우 기본 테마를 활용하는 것도 좋은 방법입니다.

워드프레스와 관련하여 문의사항이 있나요?

워드프레스와 관련하여 문제가 있는 경우 서비스(유료) 문의란을 통해 문제 해결을 요청하실 수 있습니다.

Service Request