스타터 테마 언더스코어스(underscores) 분석

스타터 테마 언더스코어스 분석

워드프레스 제작진이 워드프레스 사용자 및 테마 개발자들을 위해서 배포하고 있는 스타터 테마인 언더스코어스 테마를 구성하는 템플릿 파일(PHP 파일)들을 살펴보고 분석합니다. 테마 계층 구조를 통해서 알게 된 지식을 떠올리면 테마를 구성하고 있는 PHP 파일들의 용도를 쉽게 예상할 수 있을 것입니다.

_S 테마 다운로드

링크 : 언더스코어스 홈페이지

언더스코어스 홈페이지

Advanced Options를 열어서 생성할 테마에 대한 정보를 보다 자세히 입력할 수도 있습니다.

확장 옵션을 통해 테마 정보 입력 가능

입력란에 테마 이름으로 사용할 단어를 넣고 GENERATE 버튼을 클릭하여 테마 파일을 다운로드 받습니다.

지정한 이름의 _S 스타터 테마 생성 및 다운로드

_S 테마 설치

다운로드 받은 _S 테마 파일을 워드프레스에 설치합니다.

_S 테마 파일 설치

_S테마 파일이 등록된 것을 확인합니다. 썸네일 이미지 파일(screenshot.png)이 비어있기 때문에 아직 그림이 나타나지는 않습니다.

테마 관리 화면에서 _S 테마 설치 확인

테마를 활성화하고 Theme Editor에서 구성 파일을 봅니다.

_S 테마 구성 파일 전체

_S 테마 파일 구조 및 역할

_S를 구성하고 있는 파일들은 워드프레스 테마 구성 파일들 중에서 Primary Template 들이 주로 사용되었고, 커스텀 템플릿 파일을 불러오는 방식으로 여러 형식의 컨텐츠를 표시합니다.

[ROOT] 디렉토리

• 404.php : 페이지가 없는 경우 출력되는 에러 페이지 템플릿
• archive.php : 아카이브(전체 글 목록) 템플릿
• comments.php : 댓글 출력 템플릿
• footer.php : 푸터 출력 템플릿
• functions.php : 함수 정의 템플릿 - 기능 구현
• header.php : 헤더 출력 템플릿
• index.php : 인덱스 템플릿
• page.php : 개별 페이지 출력 템플릿
• rtl.css : 우측~좌측 글쓰기 언어용 스타일시트
• screenshot.png : 테마 모양 미리보기용 스크린샷 파일
• search.php : 검색 결과 페이지 출력 템플릿
• sidebar.php : 사이드바 출력 템플릿
• single.php : 개별 글 출력 템플릿
• style.css : 스타일 시트

[inc] 디렉토리

참고 : inc = include
• custom-header.php : 헤더 이미지 추가 기능
• customizer.php : 테마 사용자 정의 옵션
• extras.php : 테마 템플릿 독립 사용자 정의 기능
• jetpack.php : 제트팩 호환성 파일 (무한 스크롤을 위한 테마 지원 추가)
• template-tags.php : 이 테마를 위한 사용자 정의 템플릿 태그들

[js] 디렉토리

참고 : js = javascript
• customizer.js : 테마 사용자 정의 기능 향상
• navigation.js : 작은 화면용 내비게이션 및 드롭다운 지원
• skip-link-focus-fix.js : 키보드 내비게이션을 위한 사용성 향상

[languages] 디렉토리

언어 파일 디렉토리
• readme.txt : 언어 파일 도움말
• 테마명.pot : 언어 파일 - poeditor 라는 프로그램에서 편집 가능

[layouts] 디렉토리

페이지 레이아웃 스타일 디렉토리
• content-sidebar.css : 컨텐츠 좌측, 사이드바 우측 스타일
• sidebar-content.css : 사이드바 좌측, 컨텐츠 우측 스타일

[template-parts] 디렉토리

개별 컨텐츠(페이지, 글 등) 템플릿 파일 디렉토리
• content-none.php : 컨텐츠가 없는 경우 사용되는 템플릿(search.php, archive.php, index.php에서 연동)
• content-page.php : 컨텐츠가 정적 페이지인 경우 사용되는 템플릿(page.php에서 연동)
• content-search.php : 컨텐츠가 검색 결과 페이지인 경우 사용되는 템플릿(search.php에서 연동)
• content-single.php : 컨텐츠가 개별 글인 경우 사용되는 템플릿(single.php에서 연동)
• content.php : 컨텐츠가 archive, index 인 경우 사용되는 템플릿