커스텀 페이지를 만드는 3+1가지 방법

워드프레스를 사용하다보면 페이지(page)를 추가할 일들이 많습니다. 컨택 페이지나 회사소개 페이지, 제품 소개 페이지 등등. 그래서 워드프레스는 포스트(글)와는 별개로 페이지 만드는 공간을 제공하고 있죠.


페이지는 날짜별 카테고리별로 쌓아 나가는 포스트(글)와 달리 하나하나가 독립된 용도를 갖는 경우가 많습니다. 예를 들면 랜딩 페이지(landing page) 같은.

이렇게 독립적인 용도로 페이지를 사용하려 하다보면 종종 워드프레스의 기본 페이지 또는 테마에서 제공하는 페이지 유형들만으로는 마음에 맞는 페이지를 구성하기 어려운 경우가 생기게 됩니다.

이럴 경우 ‘커스텀(custom)’ 페이지를 만들게 되죠.

커스텀 페이지를 만드는 방법은 어떤 게 있을까요? 여기서 대표적인 방법들 3가지만 소개합니다.

페이지 빌더

예상 했겠지만, 가장 흔히 사용하는 방법은 페이지 빌더(Page Builder)를 사용하는 것입니다. 워드프레스 플러그인들 중에는 페이지 빌더 기능을 제공하는 다양한 플러그인이 있으며 이들 중 하나를 설치하여 페이지를 구성합니다.

페이지 빌더 플러그인

대부분의 페이지 빌더에는 ‘템플릿’ 기능이 들어 있습니다. 예를 들어 인기있는 페이지 빌더 중 하나인 Elementor의 경우 설치하면 템플릿을 직접 만들 수 있는 메뉴가 제공됩니다.


여기서 만든 템플릿은 워드프레스 페이지에서 선택하여 바로 적용할 수 있구요.


커스텀 페이지 템플릿

커스텀 페이지 템플릿(Custom Page Templates)은 말 그대로 워드프레스에서 ‘커스텀’ 페이지를 추가하는 기본적인 방법입니다.

이름은 어렵지만 원리는 간단합니다.

테마 파일 속에 PHP 파일을 하나 추가하고 그 속에 다음과 같이 간단한 주석문을 추가합니다. 파일명은 아무거나 주면 됩니다(영문으로!).

<?php
/**
 * Template Name: 멋진 데모 페이지
 */

그러면 워드프레스가 자동으로 이 파일을 읽어 페이지 편집창의 “페이지 속성” 박스에서 다음과 같이 페이지 템플릿을 선택할 수 있게 해 줍니다.


이 때 만약 직접 템플릿 파일(PHP파일) 만드는 게 귀찮으면 플러그인을 써도 됩니다. 예를 들어 Add-custom-page-template 플러그인은 관리자 메뉴에서 페이지 템플릿을 직접 만들 수 있도록 해주고, 실제로 어느 페이지 템플릿이 어느 페이지와 매핑되었는지 그 정보도 제공하기 때문에 편리합니다.


_wp_page_template 필드로 페이지 템플릿 설정

알려지지 않은 방법이긴 하지만, 커스텀 페이지 템플릿을 지정할 때 _wp_page_template 필드를 사용해서 템플릿을 지정할 수도 있습니다.


페이지 편집창에서 위와 같이 커스텀 필드를 지정한 다음, 테마 디렉터리에서 방금 지정한 템플릿 파일(hidden-singer.php) 을 만들어 주면 이 페이지는 이제 hidden-singer.php 템플릿과 연결됩니다. 참고로, _wp_page_template 필드는 워드프레스가 내부적으로 커스텀 페이지 템플릿을 할당할 때 사용하는 필드입니다.

템플릿 계층 구조에 따른 페이지 템플릿

앞서는 템플릿의 이름을 직접 지정해서 페이지 템플릿을 만들었지만, 워드프레스의 템플릿 계층 구조를 이용하여 페이지 템플릿을 만들 수도 있습니다.


위 템플릿 계층 구조는 워드프레스 사이트에서 어떤 웹페이지가 호출되었을 때 어떤 템플릿이 언제 어떻게 불러와 사용되는지를 도식화해 놓은 것입니다. 이 중 페이지 템플릿과 관련된 부분을 확대해 보면 아래와 같습니다.


실제로 페이지 템플릿은 다음과 같은 순서로 선택됩니다.

  1. 페이지 템플릿(Page Template) — 만약 페이지에 커스텀 페이지 템플릿이 할당되어 있으면 그 템플릿을 우선 사용.
  2. page-{slug}.php — 커스템 페이지 템플릿이 없고 페이지 슬러그(slug) 값을 가지는 파일명이 있으면 그 파일을 사용.
  3. page-{id}.php — 페이지 ID값을 가지는 템플릿 파일이 있으면 그 파일을 사용.
  4. page.php — 위 3가지 경우 모두 충족되지 않으면 page.php를 사용.
  5. singular.php — page.php 파일이 없으면 singular.php 사용.
  6. index.php — 아무 파일도 없으면 최종적으로 index.php 적용.

예를 들어, 내 페이지의 슬러그 값을 ‘wow’라고 주었다면, 이 페이지를 위한 템플릿으로 page-wow.php 파일을 하나 만들어 주면 되겠죠?


통상적으로 커스텀 페이지 템플릿은 웹사이트 전체에서 하나 이상의 페이지에 적용할 템플릿을 만들 때 주로 쓰고, page-{slug}.phppage-{id}.php 같은 계층 구조 기반 템플릿은 하나의 페이지에만 적용할 템플릿 용도로 주로 쓰입니다.

물론 이 밖에도 다른 여러 방법들이 있을 수 있습니다. (드물지만) PHP 파일을 직접 액세스할 수도 있겠고 워드프레스의 Rewrite API를 쓰거나 template_include 필터를 후킹할 수도 있을 것입니다. 하지만 이런 방법들은 플러그인 개발을 하는 게 아닌 다음에 굳이 쓸 일은 없기 때문에 여기서는 다루지 않습니다. 🙂

참고자료

0 thoughts on “커스텀 페이지를 만드는 3+1가지 방법”