Home테마 개발테마 제작#3. 테마 파일 세분화 및 functions.php 활용

#3. 테마 파일 세분화 및 functions.php 활용

전 시간까지 html로 퍼블리싱된 사이트를 테마 형태로의 전환을 하는 과정을 알아 보았습니다. 이번에는 기본적인 테마의 구조적인 형태에서, 좀 더 테마의 기능적인 형태에 맞는 방식으로 전환하는 방법, 그리고 자식테마나 커스텀을 하기 용이한 구조로 세분화를 하는 방법 및 functions.php를 활용해서 여러가지 설정들을 하는 방법을 알아보겠습니다.

 

■ 주요 테마 파일들의 변경 내용들에 대한 소개

1. header.php

스타일쉬트(style.css)연결 부분 및 사이트 정보에 해당하는 타이틀 표시 부분은 functions.php 파일에서 정의하는 것으로 변경. 사이트 메인 네비게이션 요소 추가(외모 > 메뉴 에서 설정 가능). 상단의 메인 사진 영역은 탬플릿화 하여 따로 관리가 가능토록 하였습니다.

 

2. index.php

컨텐츠 표시 루프문에서, 섬네일 처리 부분을 보완하여 섬네일이 없는 상황을 고려하였습니다. 반응형 사이즈에 이미지를 알맞게 표시하기 위해 대표 이미지를 img 태그가 아닌 background style 로 처리하였습니다.

 

3. sidebar.php

사이드바 위젯 영역에 위젯이 하나도 없을 경우를 대비하였고(css 스타일로 본문 영역을 full로 변경), 사이드바에 어드민>외모>위젯에 위젯을 등록 시 표시되는 구조로 변경을 하였습니다.

 

4. footer.php

푸터는 커스텀 루프를 이용하여 사이트에 작성이 돼 있던 상품들(product 포스트 타입)이 5개 노출이 되는 형태로 변경이 됐습니다. (섬네일 5개 노출)

 

■ functions.php 에 등록된 내용들

1. 스타일쉬트 연결

head 태그 내에 스타일쉬트를 직접 연결하지 않고, 이 곳에 적는 것으로 변경.  스타일파일간의 우선 순위를 설정할 수 있고, 특정 페이지에서만 작동시키는 조건을 줄 수도 있습니다.

 

2. 테마 세팅 후 작동되어야 할 기본 내용들 정의 (※ 주석 참조)

 

3. 위젯 영역, 위젯 등록 방법

위젯 영역 및 외부에 표시될 때 감싸게 될 html 태그 구조도 미리 세팅이 가능. 등록된 위젯 영역의 표시 방법은 아래와 같습니다.

추가로, WP_Widget 위젯 클래스를 확장하여 나의 위젯을 등록할 수 있고, 이후 외모 > 위젯에서 원하는 위젯 영역에 마우스로 끌어다 놓으면 해당 요소가 표시됩니다.

 

위 내용들을 참고하셔서 앞의 #1, #2 과정의 코드들을 직접 수정을 해 보시면, 테마가 전체적으로 어떻게 구성이 되고 functions.php에 정의된 코드에 의해 어떻게 동작이 되는지 좀 더 정확히 알 수 있습니다.

(※ 전체 파일 참고 : http://git.082net.com/studykopress/theme.v1)

 

끝.

Was this article helpful to you? Yes No 1