개발자 노트

템플릿 계층구조(Template Hierarchy)

워드프레스의 테마 폴더 안에는 여러 개의 파일이 있지만 사용하는 파일이 상황에 따라서 다릅니다. 이것은 사용자가 지정하는 것이 아니라 워드프레스가 알아서 파일을 지정합니다. 폴더안에 front-page.php 파일이 있으면 워드프레스는 이것을 웹페이지 초기화면으로 나타나도록 합니다. 이파일이 없으면 그다음 단계인 page.php파일을 초기화면으로 사용합니다. 만약 이것도 없다면 index.php파일을 초기화면으로 사용합니다. 이처럼 테마 폴더 안에 어떤 파일이 있느냐에 따라서 사용되는 파일이 달라지는 것을 템플릿 계층구조라고 합니다.

마찬가지로 카테고리 목록을 선택했을 때 category.php파일을 우선 사용하고 이 파일이 없으면 archive.php를 사용하며 최종적으로 index.php파일을 사용합니다. 그러므로 가장 근본이 되는 파일은 index.php파일입니다.아래의 그림은 워드프레스닷오그의 코덱스 페이지(http://codex.wordpress.org/Template_Hierarchy)에서 볼 수 있는 템플릿 계층 구조의 이미지입니다.

코덱스 페이지는 워드프레스 테마제작과 관련된 모든 내용이 망라돼 있으며 아주 상세한 설명이 있습니다.

하나의 테마를 만들기 위해서 위 그림과 같이 많은 파일이 필요한 것은 아닙니다. 복잡한 웹사이트를 만들면 파일이 많아질 것이고 블로그가 아닌 웹사이트를 만들면 수십개의 Page가 필요할 수도 있습니다. 그중에서 어떤 파일이 먼저 나타나도록 할 것인지 설계해야합니다. 페이지는 글(포스트)이 나타나는 페이지를 의미할 수도 있지만 2장에서 본 것처럼 글이 아닌 About 페이지나 Contact 페이지 등 글이 아닌 내용이 나타나는 장소를 의미합니다. 

페이지의 계층구조는 다음과 같습니다.

custom template – front-page.php처럼 사용자 정의된 페이지가 최우선적으로 나타납니다.

page-{slug}.php – 관리자 화면에서 페이지를 만들고 슬러그를 추가한 경우 이런 형태로 파일을 만들면custom template이 없는 경우 우선적으로 나타납니다.

page-{id}.php – 마찬가지로 관리자 화면에서 페이지를 만들 때 페이지 아이디가 나타나도록 만들고 이 아이디가 추가된 파일을 만들면 위의 파일들이 없을 때 우선적으로 나타납니다.

page.php – 위 파일들이 없을 때 우선적으로 나타나는 페이지입니다.

index.php – 위 파일들이 없을 때 나타나는 페이지가 됩니다.

시험삼아 파일이름을 front-page.php으로 하고 내용을 “초기화면”이라고 넣고 파일을 만들어 기본테마인Twenty-Eleven 폴더에 넣고 블로그 초기화면에서 보면 “초기화면”이라는 글자만 나타난 화면을 볼 수 있습니다.이처럼 템플릿 계층구조는 워드프레스가 파일의 계층구조를 정해놓고 순서에 의해 나타나도록 하고 있습니다. 이Front-page에 다른 글로 이동할 수 있도록 글 목록이나 이미지들을 조합하여 원하는 내용의 웹페이지를 만들면 관문역할을 하는 페이지가 됩니다.

템플릿 파일과 태그

워드프레스의 테마를 구성하는 파일을 템플릿 파일이라고 합니다. 템플릿이란 원하는 디자인을 만들기 위해서 기본적인 내용이 이미 만들어진 파일을 의미합니다. 한글로 “형판”이라고 번역할 수 있습니다. 그래픽 디자인을 위해서 포토샵 템플릿 파일을 구매해서 디자인을 하면 빠르게 디자인 할 수 있듯이 웹디자인을 위해서도 템플릿을 사용하면 웹사이트를 빠르게 구축할 수 있습니다. 워드프레스에서 템플릿은 이와 비슷한 의미가 담겨있지만 테마를 구성하는 파일을 의미합니다. 그러니 스타일시트 파일도 템플릿에 속합니다.

워드프레스에서 태그는 세가지 의미로 사용됩니다. 우선 HTML페이지를 만들기 위한 HTML 태그가 있고, 글의 키워드를 추출하여 방문자로 하여금 관련된 글을 볼 수 있도록하는 글 태그가 있으며, 세번째로 템플릿 파일에 사용되는 php 코드인 템플릿 태그입니다. 이런 태그의 의미는 “중요한 것”으로 함축될 수 있습니다. 태그의 원래 의미는 이름표입니다. 공항에서 수하물을 맡길 때 이름표를 붙여주죠. 이것을 태그라고 합니다. 옷에도 태그가 있고 남자가 군대를 가면 태그(인식표)를 달고 다닙니다. 이처럼 태그는 구성요소중 “중요한 무엇”을 의미합니다.

템플릿 태그는 단순한 코드가 아니라 어떤 정보를 담고 있습니다. 이 태그를 적재적소에 붙여넣으면 원하는 정보를 데이터베이스에서 가져와 보여줍니다. HTML의 <title></title> 태그 사이에 <?php bloginfo(‘name’); ?>라는 템플릿 태그를 사용하면 블로그 이름을 나타낼 수 있습니다. 이처럼 워드프레스에 사용되는 파일이나 코드는 레고블록으로 집을 짓거나 비행기를 만들 수 있는 것처럼 조립하여 사용할 수 있도록 돼 있습니다. 그러니 프로그래밍 언어인 php를 몰라도 되는 것입니다.

PHP 코드 블록

워드프레스는 기본적으로 php 프로그래밍 언어를 사용하기 때문에 템플릿 태그도 php로 돼 있습니다. Php 코드는 다음과 같은 구조로 돼 있으며 어느 하나라도 빠지면 에러가 발생합니다.

<?php 템플릿_태그_이름('매개변수'); ?>

Php 코드의 시작은 <?php로 시작하고 ?>로 끝이 납니다. 이부분을 코드블럭이라고 하며 이 안에 들어가는 것은 기본적으로 함수이며 글자와 글자 사이튼 밑줄(underscore)을 사용합니다. 함수는 괄호를 갖고 있으며 이 괄호 안에 매개변수를 사용할 수도 있습니다. 함수를 사용하지 않을 경우는 php에서는 echo라는 명령어를 사용하여 이 명령어 다음에 나오는 글자를 표시하도록 하지만 워드프레스의 템플릿 태그는 내용을 표시할 경우라도 echo를 사용하지 않고 템플릿 태그 자체에 내용을 표시하도록 설정돼 있습니다. 함수나 명령어 다음에는 명령이 끝났다는 의미로 세미콜론( ; )을 사용합니다. 이부분을 빠트려도 나오기는 하지만 꼭 입력하도록 합니다.

위와 같이 워드프레스에서 php의 함수를 사용하므로 워드프레스에서 정해진 템플릿 태그만 사용할 수 있는 것이 아니라 php의 기본 함수도 사용할 수 있습니다. 날짜를 나타낼 때는 다음과 같이 php의 기본 함수를 사용합니다.이것은 템플릿태그가 아닙니다.

<?php echo date("Y/m/d"); ?>

위 코드는 php의 기본 함수로 오늘 날짜를 표시하기 위해서 echo라는 명령어를 사용했습니다. 워드프레스는 고유의 함수인 템플릿 태그를 사용하는데 다음과 같이 echo를 사용하지 않고 함수만 있어도 날짜가 표시되며 이것은 오늘날짜가 아니라 글 발행일자입니다.

<?php the_time('F jS, Y'); ?>

이처럼 워드프레스에서만 사용할 수 있는 함수인 템플릿 태그는 다른 php 함수와 구별하기 위해서 the라는 영어의 정관사를 삽입하기도 합니다. 이러한 고유의 함수는 워드프레스 코어 파일에 정의돼 있습니다. 이처럼 워드프레스에서 정의된 고유의 함수뿐만 아니라 php의 기본 함수도 사용할 수 있어서 다양한 표현이 가능합니다.