작성일자
카테고리 워드프레스/워드프레스 일반

얼마 전에 방문자님이 워드프레스 새로운 기본 테마인 Twenty Fourteen의 콘텐츠 영역을 늘리는 방법을 알고 싶다고 했었습니다. "DIY! 워드프레스" 책에서 이 테마를 이용해서 전체적인 워드프레스 사용법을 설명했고 사용하면서 파악한 바로는 단순히 콘텐츠 영역만 늘릴 수는 없었습니다. 그래서 여러 곳을 수정해야 한다고 했습니다. 


실제로 콘텐츠 영역을 늘리는 작업을 해보니 여간 까다로운 게 아니었습니다. 가장 난감한 부분이 특성 콘텐츠의 슬라이더 부분이었습니다. 이 슬라이더 부분은 자바스크립트에 의해 반응형 디자인이 적용되도록 웹브라우저의 폭이 줄면 높이도 줄어들게 돼있었습니다. 그래서 억지로 높이를 고정시켰습니다. 또한 이로 인해서 functions.php 파일의 코드를 자식 테마에서 덮어쓰기도 안되더군요. 따라서 굳이 콘텐츠의 폭을 늘려서 사용하려면 테마의 함수 부분을 수정해서 사용하고 업데이트 되면 다시 수정해줘야 하는 불편함이 있습니다.


자식테마를 사용하기에 앞서 설정해야하는 부분은 설정-->미디어에서 중간 크기의 이미지 폭을 364px로 해야 하고 부모 테마의 functions.php 파일을 열고 78번째 줄에서 아래 코드 처럼 수정해줘야 합니다.


set_post_thumbnail_size( 814, 451, true );

add_image_size( 'twentyfourteen-full-width', 1238, 687, true );



twentyfourteen-child.zip


압축을 풀고 자식 테마를 활성화하면 관리자 화면에서 바뀌는 부분은 헤더 이미지의 폭입니다.



콘텐츠의 폭을 200 픽셀 늘려서 헤더 이미지도 1260에서 1460으로 늘어납니다.



좌측 사이드바의 폭은 그대로이고 중앙의 콘텐츠 영역과 우측 사이드바가 늘어납니다. 그래서 우측에 하루살이 위젯의 이미지를 사용하는 경우 폭이 300에서 364 픽셀로 늘어납니다. 그래서 이미지 설정에서 364로 변경해야 합니다. 또한 기존의 유투브 동영상이 반응형이 되지 않는 것을 수정했습니다.



특성 콘텐츠에서 그리드로 사용하는 경우 이미지 폭도 자동으로 조정됩니다. 



가장 난감한 부분인 슬라이더는 이미지 폭을 늘리니 높이도 같은 비율로 늘어나서 슬라이더가 아주 커지므로 높이는 원래의 높이로 고정했습니다. 높이를 강제로 고정하다보니 원래의 잘라진 이미지에서 보이지 않는 영역이 존재합니다. 이것은 웹브라우저의 폭을 줄이면서 반응형이 되는 모양을 보면 알 수 있습니다. 감춰진 이미지 하단 부분이 서서히 나타나죠.



글 전체 내용이 아닌 요약글과 더보기 링크가 나타나도록 했습니다. 따라서 설정-->읽기에서 보여줄 글의 수를 늘려야 합니다.



책에서 사용한 자식 테마를 그대로 수정한 것이므로 푸터 메뉴를 사용할 수 있습니다.



푸터 메뉴는 하단 우측에 나타납니다. 또한 스크롤해서 200픽셀 내려오면 상단으로 이동할 수 있는 버튼을 만들었습니다.


이 테마는 좌측을 기준으로 콘텐츠가 정렬돼있는 매거진 스타일입니다. 폭을 늘려서 사용할 경우 중앙 배치하면 보기 좋지 않습니다. 이미 다른 테마를 사용하고 있었다면 모든 이미지를 다시 만들어줘야 하므로 Regenerate Thumbnails을 사용하면 됩니다. 폭을 더 늘리거니 줄이고 싶다면 자식 테마의 스타일시트를 열고 직접 수정하세요. 그에 따라 함수 파일의 이미지 폭과 높이도 수정해야 합니다.


저작자 표시 비영리 변경 금지
신고

티스토리 툴바