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


2개 댓글

  1. https://uploads.disquscdn.com/images/06fb75fc207485da9d99985b7b9b50b2552b3089db494d885f554d2c0a3b9b9a.png https://uploads.disquscdn.com/images/6dd1e6cb787f3a2d04bdbbaf57dcd84ba346242b8ab248f85842c121c5c053e9.png 안녕하세요 워드프레스 사이드바 관련해서 검색하다가 해당 페이지를 보게 되었습니다. 특정 페이지나 글이 아닌 "상품"에도 사이드바를 제거하고 상품 컨텐츠를 사이드바 영역까지 채울 수 있는 방법이 있을까요? 현재 사용중인 테마는 wp-store 입니다. 위에 글에서는 style.css를 수정하는 방법을 적어주셨는데 만약 저의 경우도 style.css를 수정해야된다면 제 상황에 맞는 혹시 코드 명령어를 알 수 있을까요? 초면부터 부탁을 드리게 되서 죄송합니다.

    1. 안녕하세요?

      블로그를 방문해주셔서 감사합니다.

      우선 테마 폴더 내의 style.css 파일을 직접 수정하시면 추후에 테마가 업데이트되면 수정 사항이 모두 사라지게 됩니다. 외모 > 사용자 정의하기 > 추가 CSS에 추가하거나 차일드 테마를 사용하시기 바랍니다.

      원하시는 내용은 두 가지 방식으로 가능하니다.
      1) 우커머스 템플릿 파일 수정
      2) CSS로 숨기기

      CSS로 숨기는 것이 아무래도 간단할 것입니다. CSS로 숨기는 방법은 위에서 제시한 방법과 원리가 동일합니다.

      사이트바 -> 표시되지 않도록 함
      컨텐츠 부분 -> 100%로 늘림

      다음 코드를 외모 > 사용자 정의하기 > 추가 CSS 란의 맨 아래에 추가해보시기 바랍니다.

      .product-template-default #primary, .tax-product_cat #primary {
      width: 100% !important;
      }

      실제로 테스트해보지 않았기 때문에 잘 될지 여부는 모르겠습니다. 그리고 다음 글도 참고해보시기 바랍니다.

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4%EC%97%90-css%EB%A5%BC-%EC%A0%81%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EA%B8%B0%EC%B4%88/

      문제가 잘 해결되기를 바라겠습니다. 도움이 되셨다면 "후원하기" 페이지에서 기부를 통해 이 블로그를 후원하실 수 있습니다.ㅎㅎ

      즐거운 저녁 시간 되세요^^

댓글 남기기

* 이메일 주소는 공개되지 않습니다.