page 포스트 타입과 페이지 템플릿, 메뉴 구성

사이트를 보면 메뉴가 출력되어 있습니다. 메뉴를 구성한다고 했지만, 미리 작업한 테마에 제공하였습니다.

메뉴는 있지만, 메뉴에 해당하는 페이지는 아직 생성하지 않았으므로 page 포스트로 페이지를 생성하고, 페이지 템플릿과 연결하여 미리 구성합니다. 테마 루트에서 다음 두 파일을 엽니다.

header.php
template-parts/navigation/navigation-top.php

메뉴

먼저 header.php 파일 32번 줄을 보면 다음의 코드가 있는데, 워드프레스의 기본 인클루드 함수로 메뉴 파일을 불러옵니다.

// header.php 32번 줄
get_template_part( 'template-parts/navigation/navigation', 'top' );

다음으로 navigation-top.php 파일을 보면 간단한 마크업으로 메뉴마다 퍼머링크^Permalink를 추가하였는데, 각 퍼머링크는 page 포스트의 퍼머링크입니다. 물론 page 포스트는 지금 생성할 것입니다.

사이트 메뉴가 간단하며 변경 가능성이 작을 때는 워드프레스 메뉴 시스템을 사용하여 서버의 자원을 소모할 필요가 없다고 생각합니다. 앞의 과정에서 말한 바 있는데, 테마에서 정의한 메뉴(Menu Location)도 없으므로 관리페이지에서 메뉴 관리 페이지도 나오지 않습니다.

페이지 템플릿

테마 루트 page-templates 디렉터리를 보면 다음 7개 파일이 있습니다. 워드프레스 페이지 템플릿 파일이며, 파일만 미리 만들어 둔 것으로 지금은 내용이 없습니다.

page-templates/
├── _imgDownload.php
├── _note.php
├── album-page.php
├── front-page.php
├── posts-page.php
├── trace-page.php
└── user-history.php

각 페이지 템플릿 파일의 역할 또는 기능은 예제 구성 과정에서 알 수 있으므로 설명은 생략합니다. 지금은 파일 하나만 열어 페이지 템플릿에 관하여 간단하게 알아봅니다. 위의 파일 중 front-page.php 파일을 열어봅니다.

<?php
/**
 * Template Name: 프런트 페이지
 */

파일을 열면 위의 헤더 텍스트를 볼 수 있습니다. 이처럼 선언하면 워드프레스가 자동으로 페이지 템플릿으로 인식하며, 해당 페이지 템플릿을 사용할 포스트 타입을 지정하지 않으면 기본으로 page 포스트 타입에서만 페이지 템플릿 선택 메타박스가 나옵니다. 따라서 위의 헤더 텍스트는 다음과 같습니다.

<?php
/**
 * Template Name: 프런트 페이지
 * Template Post Type: page
 */

워드프레스 4.7 버전부터 모든 포스트 타입에서 페이지 템플릿 기능을 사용할 수 있도록 변경되었으며, 만약 post 포스트 타입에서도 위의 페이지 템플릿을 사용하려면 간단하게 다음처럼 선언하면 됩니다.

<?php
/**
 * Template Name: 프런트 페이지
 * Template Post Type: post, page
 */

페이지 템플릿은 워드프레스에서 사용자가 직접 콘텐츠 출력 또는 기능을 개인화하는 기본의 방법이며, 기본이라해도 가장 편리한 방법입니다.

page 포스트 생성

이제 page 포스트를 생성하고, 페이지 템플릿과 연결하며, 사이트 메뉴의 각 링크를 확인합니다. 워드프레스 page 포스트 생성 및 퍼머링크 변경은 기초적 내용이므로 글로만 안내합니다. 지금 이 글을 보는 독자의 수준이면 자세한 설명은 ‘실례’라 판단합니다. 다만, 안내하는 정보 그대로 진행하세요. 예제에서 페이지 템플릿 파일은 7개, page 포스트는 8개입니다.

먼저, 관리페이지 페이지 메뉴로 접근한 후 새 페이지 추가 화면에 접근합니다. 다음처럼 입력, 선택한 후에 저장(공개)하세요.

제목: ‘front page’
페이지 속성 메타박스의 템플릿: ‘프런트 페이지’ 선택
저장(공개하기)

다시 화면 위의 ‘새 페이지 추가’ 버튼을 클릭하고, 다음의 내용을 입력 후 저장합니다.

제목: ‘Pics’
저장(공개하기)

계속해서 ‘새 페이지 추가’ 버튼을 클릭하고 다음 정보를 등록합니다.

제목: ‘블로그’
퍼머링크(고유주소): ‘blog’ 입력
템플릿: ‘블로그 페이지’ 선택
저장(공개하기)

다시 ‘새 페이지 추가’ 버튼을 클릭하고 다음 정보를 등록합니다.

제목: ‘발자국’
퍼머링크(고유주소): ‘trace’ 입력
템플릿: ‘발자국’ 선택
저장(공개하기)

계속 ‘새 페이지 추가’ 버튼을 클릭하고 다음 정보를 등록합니다.

제목: ‘앨범’
퍼머링크(고유주소): ‘album’ 입력
템플릿: ‘앨범’ 선택
저장(공개하기)

이어서 ‘새 페이지 추가’ 버튼을 클릭하고 다음 정보를 등록합니다.

제목: ‘다운로드 및 추천’
퍼머링크(고유주소): ‘download-and-favorite’ 입력
템플릿: ‘다운로드 및 추천 이미지’ 선택
저장(공개하기)

바로 ‘새 페이지 추가’ 버튼을 클릭하고 다음 정보를 등록합니다.

제목: ‘_이미지 다운로드’
템플릿: ‘_다운로드 페이지’ 선택
‘임시 글로 저장하기’ 버튼 클릭¹
퍼머링크(고유주소): ‘_imgdownload’ 입력
저장(공개하기)

마지막으로 ‘새 페이지 추가’ 버튼을 클릭하고 다음 정보를 등록합니다.

제목: ‘_연습장’
템플릿: ‘_연습장’ 선택
‘임시 글로 저장하기’ 버튼 클릭
퍼머링크(고유주소): ‘_note’ 입력
저장(공개하기)

사이트에서 위의 메뉴 5개를 클릭하여 404 에러가 나오는지 확인하고, 사이트 아래 ‘블로그’ 메뉴 링크도 클릭하여 ‘블로그 페이지’ 글자가 출력되는지 확인하세요.

사이트 ‘읽기’ 수정

관리페이지 설정 메뉴의 ‘읽기’ 메뉴를 클릭하면 이전에 없었던 ‘전면 페이지 표시’라는 옵션이 나옵니다. 이 옵션은 워드프레스 사이트에 page 포스트가 있을 때 나옵니다. 해당 페이지로 접근하여 다음처럼 선택 및 입력 후 변경 사항을 저장합니다.

‘정적인 페이지’ 옵션 선택
전면 페이지: ‘front page’ 선택
글 페이지: ‘Pics’ 선택
페이지당 보여줄 글의 수: ‘20’ 입력
‘변경 사항 저장’ 버튼 클릭

관리페이지 페이지 메뉴를 클릭하고, 다음 그림처럼 page 포스트 목록이 나오는지 확인하세요.

워드프레스 설치 후 관리페이지 고유주소 설정에서 사용자 정의 구조 /%post_id%를 지정하였지만, 기본 포스트 타입 post에 제한된 설정입니다. 그 이유로 page 포스트를 생성하면서 퍼머링크를 변경하였으며, page 포스트 타입에서 사용하는, 등록하는 콘텐츠의 특징이 있기에 변경하였습니다. 물론 사용자 마음입니다.

사이트에서 ‘PICSPRESS’ 사이트 제목을 클릭하여 ‘프런트 페이지’ 출력을 확인하고, ‘둘러보기’ 메뉴를 클릭하여 콘텐츠가 없을 때 나오는 ‘죄송합니다. 찾지 못했습니다.’ 글자가 출력되는지 확인하세요.

is_home, is_front_page

지금까지 진행한 상태에서 사이트의 프런트 페이지로 접근한 후 화면 위의 어드민바^{Admin bar}에 있는 Query Monitor 영역에 마우스를 올리면 is_front_page() 조건 태그^{Conditional Tags}가 나오는 것을 확인할 수 있습니다. 물론 다른 조건 태그도 있습니다.

기본의, 보통의 워드프레스 사이트는 특정 page 포스트를 프런트 페이지로 사용할 때 글 페이지(Blog Posts)도 특정 page 포스트를 지정하고, 기본 포스트 타입 ‘post’의 글이 출력되도록 설정합니다. 이때 프런트 페이지는 is_front_page 조건 태그를, 글 페이지는 is_home 조건 태그를 가집니다. 워드프레스는 post 포스트 타입의 글이 프런트 페이지에 나오는 것이 기본이므로 따로 설정하지 않으면 그 페이지가 is_front_page, is_home 2개의 조건 태그를 모두 가집니다.

앞에서 사이트의 ‘둘러보기’ 메뉴를 클릭했을 때 나오는 ‘Pics’ 페이지를 글 페이지로 설정했는데, Query Monitor 영역에 마우스를 올려 조건 태그를 확인하면 is_home()으로 나오는 것을 확인할 수 있습니다. 다만, 예제에서는 post 포스트 타입의 글을 출력하지 않고, ‘attachment’ 포스트 타입의 콘텐츠를 출력할 것입니다.

이때 둘러보기 메뉴 클릭 후 콘텐츠가 없다면 내용이 출력되는 것은, Pics 페이지를 읽기 설정에서 글 페이지로 지정한 후부터 테마의 ‘index.php’ 파일을 사용하며, 현재 사이트에 page 포스트 타입의 글을 제외하면 어떤 콘텐츠도 없고, 워드프레스는 글 목록 페이지에 post 포스트 타입의 글이 나오는 것이 기본이라는 것이 이유입니다. 또, 글 목록 페이지를 지정하기 위해 page 포스트 하나를 생성하였지만, 다른 페이지와 다르게 템플릿 페이지를 선택하지 않았다는 것도 특징입니다.

예제와 같이 직접 편집하여 워드프레스 웹사이트를 구성하기 위해서는 조건 태그에 관한 최소한의 정보는 알고 있어야 편리합니다. 그러나 앞의 조건 태그 2개는 조건 태그에 관한 내용보다 워드프레스 ‘프런트 페이지’와 ‘블로그 페이지’에 관하여 간단하게 짚어 본 것에 초점을 둡니다.

다음 장에서 한 번은 정리가 필요한 몇 가지 용어에 관하여 알아봅니다.