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

[워드프레스] Twenty Twelve 테마에서 사이드바 없애기

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



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.