Word Cracker의 잡다한 정보 모음

워드프레스에서 페이지 템플릿 만들기

7

들어가며

워드프레스에서는 기본적으로 글(Post)과 페이지(Page)를 만들 수 있습니다. 워드프레스 테마에서는 페이지를 page.php라는 템플릿을 사용하여 페이지의 레이아웃을 제어합니다.

이 템플릿 파일은 워드프레스에서 사용자가 작성하는 모든 단일 페이지에 영향을 미칩니다. 즉, 기본적인 페이지의 틀은 동일합니다. 하지만 모든 페이지가 동일한 것은 것은 아닙니다. 가령 일반적인 페이지 외에 전체 폭 페이지(Full-width Page)를 이용하고 싶은 경우가 있을 수 있습니다.

다음과 같은 페이지 템플릿 유형이 테마에서 사용될 수 있습니다.

  • 컨택트 폼(문의 폼)
  • 사이드바가 없는 페이지(전체 너비 페이지)
  • 랜딩 페이지
  • 블로그 index 파일

* 참고: 유료 테마의 경우 테마에 따라 여러 가지 페이지 템플릿을 제공합니다. 예를 들어, 가장 많은 판매를 기록하고 있는 아바다(AVADA) 테마에서는 다음과 같은 다양한 페이지 템플릿이 기본적으로 탑재되어 있습니다.

Avada page templates

무료 테마의 경우 별도의 페이지 템플릿이 없거나 제한적인 경우가 많습니다.

페이지 템플릿 만들기

사용자 정의 페이지를 만들려면 HTML, CSS, PHP에 대한 기본적인 이해가 바탕이 되어야 합니다. 테마에서 제공하는 템플릿 외에 새로운 템플릿을 만들려면, 테마에서 새로운 파일을 만들고 맨 위에 다음과 같이 시작하도록 합니다.

<?php
/*
Template Name: 새로운 커스텀 페이지 이름
*/

기본적인 페이지 레이아웃에서 조금 수정하려는 경우 page.php 파일의 내용을 그대로 복사하고 맨 위부분을 위와 같이 수정해주면 됩니다.

예를 들어 기본 테마 중 하나인 Twenty Sixteen 테마에서 page.php 파일의 내용을 그대로 복사하여 새로운 파일 page-custom.php 파일을 만들어 복사한 내용을 붙여넣기 하고, 맨 위부분에 템플릿 이름을 지정해주면:

New Custom Page Template

새로운 파일의 윗부분이 위와 같이 됩니다. 이제 새로운 레이아웃에 맞게 파일을 적절히 수정하도록 합니다. 개별 페이지 편집 화면에서 오른쪽의 “페이지 속성” 부분의 “템플릿” 선택 부분을 보면 그림과 같이 새롭게 추가한 템플릿 이름이 목록에 추가되어 있음을 알 수 있습니다.

Page Properties

참고로 가급적 차일드 테마를 만들어서 작업하시는 것이 좋습니다. 그러면 테마가 업데이트되더라도 수정하거나 추가한 사항이 사라지지 않습니다. 차일드 테마를 만드는 방법은 이 글을 참고하시기 바랍니다.

사용자 정의 페이지 템플릿에 대한 보다 자세한 내용은 Elegant Themes Blog의 An Introduction To WordPress Page Templates(워드프레스 페이지 템플릿) 글을 참고하시면 많은 도움이 될 것입니다.

참고

글과 페이지는 기본적인 글 유형입니다. 사용자 정의 글 유형(커스텀 포스트 타입)을 만드는 것에 관심이 있다면 다음 두 글을 참고해보시기 바랍니다.

Related Posts

7 Comments
  1. says

    안녕하세요 좋은정보 감사합니다. 그런데 페이지가 아니라 게시물에서 템플릿을 설정할수는 없을까요? 전체너비 페이지를 카테고리 안에 넣고 싶거든요..

    1. Word says

      안녕하세요?
      특정 카테고리에 대해 전체너비 페이지를 만들려는 경우 굳이 템플릿을 수정할 필요가 없이 간단한 CSS로 가능할 것 같습니다.

      워드프레스에서는 카테고리별, 개별 글 등을 구분해주는 class가 제공됩니다.

      CSS를 조금 아시면 별 어려움 없이 원하는 대로 레이아웃을 변경하실 수 있을 것입니다.

  2. MP TeamK says

    템플릿을 만들기는 성공하였는데 그 템플릿을 쓰게되면 이상하게 숏코드가 먹히지않네요 ㅠㅠ 어떡해해야할까요

    1. Word says

      안녕하세요? 기존 페이지 템플릿을 가지고 수정하면 문제가 없을 것 같습니다. 수정하는 과정에 문제가 있는 것은 아닐까요?

      그리고 숏코드를 php 내에서는 echo do_shortcode(‘[…] );를 사용해야 합니다.

  3. MOO says

    안녕하세요. 글 잘읽었습니다!

    워드프레스를 알게된지 3일째라 모르는것도 많고 고민도 많습니다…

    혹시 페이지마다 템플릿을 달리 하듯이

    특정 템플릿마다 다른 style.css를 읽어 들여올 수 있나요?

    page-test.php라는 템플릿을 만들고 그 안에 style을 작성하면 우선순위때문인지
    적용이 잘 되지 않습니다 ㅠㅠ

    1. Word says

      안녕하세요?

      http://www.thewordcracker.com/intermediate/add-a-second-style-sheet-to-wordpress-theme/ 글에 원하는 내용이 설명되어 있습니다.

      1. MOO says

        딱 제가 원하는 내용이에요! 고맙습니다!

Leave A Reply

Your email address will not be published.