워드프레스 강좌 #4. 페이지 제작, 커스텀 테마 적용

워드프레스에서 컨텐츠의 개념

워드프레스는 컨텐츠를 저장하고 관리하고 제공하기 위한 다양한 방법을 제공하는 컨텐츠 관리 시스템(CMS)입니다.
워드프레스에서 기본적으로 사용하는 컨텐츠 종류로는 다음과 같이 여러 가지가 있습니다.

대표적인 것은 블로그에서 흔히 볼 수 있는 글(post)입니다.
이것은 제목, 카테고리, 태그 등을 설정할 수 있는 하나의 게시물에 해당합니다.
작성시각의 시간적 선후관계가 중요하여 블로그에서는 그 시간 순서에 따라 post를 나열하여 보여줍니다.
post는 집단으로 존재하는 개념이기 때문에, post 사이에서는 상하관계가 없고, 하나의 post에만 특정 템플릿을 적용하여 보여주는 것은 허용되지 않습니다.
예를 들면 지금 읽고 있는 이 워드프레스 강좌들도 전부 post입니다.
각각의 post은 독립적인 .php 파일로 존재하지 않고 데이터베이스에만 존재합니다.
데이터베이스에서는 wp_posts 테이블에 저장됩니다.

첨부파일(attachment)도 컨텐츠의 한 종류입니다.
post에는 사진 이외에도 음악, 동영상, 압축파일 등을 첨부할 수 있습니다.
각각의 첨부파일은 /wp-content/uploads/ 폴더 내에 연도/월 별로 나뉘어 실제 파일로 저장됩니다.
데이터베이스에서는 wp_posts 테이블 내에 post_type을 attachment로 지정하여 저장됩니다.

또 다른 컨텐츠에는 댓글(comment)가 있습니다.
이것은 하나의 post에 달린 답글 뿐 아니라 트랙백, 핑백에 해당합니다.
post와 마찬가지로 각각의 댓글은 실제 파일이 아니라 데이터베이스에만 존재합니다.
데이터베이스에서는 wp_comments 테이블에 저장됩니다.

워드프레스에서 기본적으로 제공하는 또 다른 컨텐츠의 종류로는 페이지(page)가 있습니다.
이것은 post와 유사하지만 몇 가지 차이점이 있습니다.
제목은 지정할 수 있지만 카테고리, 태그 등을 설정할 수 없습니다.
작성된 시간적 순서는 중요하지 않고 페이지별로 직접 설정할 수 있는 order에 따라 페이지를 나열할 수 있습니다.
또한 각각의 page는 독립된 개체이기 때문에 위젯이나 메뉴에 특정 page로 접속하는 링크를 직접 지정할 수 있고, 서로 다른 page와 상하관계를 설정할 수 있고, page별로 템플릿을 지정할 수 있습니다.
소개 페이지, 연락처 페이지 등이 대표적인 page 컨텐츠입니다.
각각의 page는 독립적인 .php 파일로 존재하지 않고 데이터베이스에 존재합니다.
데이터베이스에서는 wp_posts 테이블에 내에 post_type을 page로 지정하여 저장됩니다.
또한 테마 폴더 내에 page 템플릿 파일이 존재할 때에 특정 page에 적용할 .php 파일을 지정할 수 있습니다.
합니다.

이외에도 revision, nav_menu_item 등의 다양한 컨텐츠 종류가 있고, 플러그인을 설치하면 forum, topic 등의 또 다른 종류의 컨텐츠를 다룰 수도 있습니다.

페이지 제작 #1. 자기소개 페이지 생성

이 예제에서는 자기소개 페이지와 전체 글 페이지를 만들어 보겠습니다.
자기소개 페이지의 경우에는 워드프레스에서 제공하는 기본 페이지로 제작하겠습니다.

관리자 페이지에서 페이지 > 새 페이지 추가(Add New)를 클릭합니다.

제목을 자기소개라고 입력하고 내용을 입력합니다.

내용을 입력하고 몇 초가 지나면 제목과 내용 사이에 자동으로 생성된 고유주소를 볼 수 있습니다.
이 고유주소를 그대로 사용해도 좋고, 방문자의 편의를 위해서는 입력된 값을 intro와 같이 바꾸어 줄 수도 있습니다.

그러나 고유주소(permalink)에서 기본값(/wp?p=123)을 사용중인 경우에는 이 기능을 사용할 수 없습니다.
고유주소 설정을 바꾸어 주기 위해서는 아래와 같이 관리자 페이지에서 설정 > 고유주소를 클릭해서 기본(Default)가 아닌 다른 옵션을 선택하면 됩니다.

페이지에서 제목과 내용 입력, 고유주소 설정이 끝났으면 오른쪽에 있는 페이지 속성은 그대로 두고 공개하기(Publish) 버튼을 클릭하여 저장합니다.
다음과 같은 메시지가 화면 상단에 출력되면 성공입니다.

페이지 보기 링크를 클릭하면 저장된 페이지를 확인할 수 있습니다.
이 페이지를 저장할 때에 페이지 속성에서 별다른 템플릿을 지정하지 않았기 때문에 테마 내에 있는 page.php 템플릿 파일(없으면 index.php 파일)을 사용해서 페이지를 출력하게 됩니다.

페이지 제작 #2. 전체 글 목록보기 페이지 생성

일반 게시판들처럼 페이지를 나누어 post들의 제목만 보여주는 페이지를 제작해 보겠습니다.
이러한 전체 글 목록보기는 워드프레스에서 기본적으로 제공하지 않는 기능이기 때문에 테마 폴더 안에 특정 페이지에 적용되는 템플릿을 제작해야 합니다.
그런 뒤 전체 글 목록보기 페이지를 생성하고, 제작한 페이지 템플릿을 지정하면 됩니다.
이것이 가능한 이유는 앞에서 언급한 것처럼 page는 독립된 개체이기 때문에 개별 템플릿을 적용할 수 있기 때문입니다.
완성된 결과물을 미리 보면 다음과 같습니다.

우선 현재 사용중인 테마 내에 적당한 이름의 .php 파일을 생성합니다.
본 강좌에서는 page-archives.php 라는 파일을 생성하겠습니다.

경로는 /wp-content/themes/(현재 사용중인 테마 폴더)/page-archives.php 입니다.

방금 생성한 page-archives.php 파일을 열어 수정합니다.
우선 파일의 첫 부분에 아래의 내용을 입력합니다.

<?php
/*
Template name: All pages
*/
get_header();

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array( 'post_type' => 'post', 'posts_per_page' => 10, 'paged' => $paged );
$wp_query = new WP_Query($args);
?>

주석 내의 Template name은 꼭 지정해 주어야 합니다.
name 다음에 공백 없이 콜론(:)을 입력하는 것에 주의해야 합니다.
Template name에 지정해 준 값이 나중에 페이지에 사용할 템플릿 목록에 출력됩니다.

get_header() 함수는 헤더에 해당합니다.
워드프레스 사이트 테마에서 사용중인 제목, 배너, 메뉴 등을 자동으로 출력해 줍니다.

그 이후 부분은 주소 표시줄에서 지정된 페이지 번호를 확인하고 없으면 1로 지정한 뒤에 10개씩 끊어서 최근 post들을 가져온다는 의미입니다.

이후의 .php 파일의 내용은 일반적인 워드프레스 테마 파일 출력과 마찬가지로 작성하면 됩니다.
간단한 예는 아래와 같습니다.

<?php if ( have_posts() ) : ?>
<?php  while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" >
<?php the_time(get_option('date_format')); ?>
<?php the_title(); ?>
</a><br />
<?php endwhile; ?>
<?php
next_posts_link( " &larr; 예전 글 " );
previous_posts_link( " 최근 글 &rarr; " );
else : ?>
저장된 포스트가 없습니다.
<?php endif; ?>

앞서 생성한 wp_query에 해당하는 post가 있는 경우에는 while 루프를 돌면서 post를 출력해 주고, 해당되는 post가 없는 경우에는 저장된 포스트가 없다는 메시지를 출력합니다.

the_post();는 while 루프 내에서 사용되어서 post의 시작을 알립니다.
the_time(get_option(‘date_format’));는 게시물의 작성 시각을 날짜 형태로 출력해 줍니다.
the_date();를 사용할 수도 있지만 같은 날짜에 생성된 post가 있으면 날짜 출력이 안 되는 경우가 있습니다.
the_title();은 해당 post의 제목을 출력해 줍니다.
the_permalink();는 해당 post로 접속하는 url을 출력해 줍니다.

루프가 끝나면 이전 페이지(예전 10개의 게시물)로 가는 링크와 다음 페이지(최근 10개의 게시물)로 가는 링크를 출력해 줍니다.

위에서 든 예는 강좌를 위해 작성된 단순한 예이고, 실제로는 <span>, <ul>, <li> 등의 태그를 사용해서 보다 보기 좋게 꾸며줄 수 있습니다.

.php 파일의 끝에는 아래의 내용을 입력해서 사이드바와 푸터를 출력해 줍니다.

<?php get_sidebar(); ?>
<?php get_footer(); ?>

작성된 page-archives.php 파일을 저장하면 템플릿 제작이 완료됩니다.

다음으로는 이 페이지 템플릿을 적용할 페이지를 생성하고 페이지와 페이지 템플릿을 연결해야 합니다.

1. 관리 페이지에서 페이지 > 새 페이지 추가를 클릭합니다.

2. 제목에는 전체 글 목록보기라고 입력합니다.
내용은 비워놓습니다.
자기소개 페이지를 작성할 때와 마찬가지로 적당한 고유주소를 입력합니다.

3. 우측에 있는 페이지 속성란에서 템플릿을 클릭해 보면 앞에서 저장한 All pages라는 템플릿을 선택할 수 있습니다.

All pages 템플릿을 선택하고 저장합니다.
그러면 앞으로 워드프레스에서 이 페이지를 보여줄 때에는 page-archives.php 파일을 사용하게 됩니다.

참고로, 커스텀 템플릿을 All pages라고 지정하지 않았더라도, 아래와 같이 페이지의 slug를 archives로 지정하면 템플릿 계층구조에 따라서 자동으로 page-archives.php 템플릿 파일이 page.php 템플릿보다 우선적으로 적용되게 됩니다.

위에 보이는 것처럼 page에는 댓글, 트랙백, 핑백 등의 허용 여부도 설정할 수 있습니다.

페이지 제작 #3. 메뉴 생성

워드프레스의 위력은 페이지와 연결된 메뉴를 생성할 때에 잘 드러납니다.
아직은 웹사이트에 생성된 메뉴가 없으므로 새 메뉴를 생성합시다.

관리 페이지에서 외모 > 메뉴를 클릭합니다.

메뉴 이름 입력칸에 적당한 메뉴 이름을 입력하고 메뉴 생성 버튼을 클릭합니다.
이번 강좌에서는 기본메뉴라는 이름을 사용하겠습니다.
이 이름은 웹사이트에 출력되는 것이 아니라 내부적으로 여러 버전의 메뉴들을 구분하여 관리하기 위한 용도입니다.

그런 뒤에는 방금 생성한 메뉴를 이 웹사이트에서 사용하기 위해서 지정을 해 주어야 합니다.

테마 위치 내의 기본 메뉴 목록에 방금 생성한 메뉴 이름이 있는 것을 확인할 수 있습니다.
기본 메뉴를 선택하고 저장하기 버튼을 클릭합니다.

다음으로는 메뉴에 링크를 추가해야 합니다.
왼쪽에는 다음과 같은 항목들이 있습니다.

사용자정의 링크는 직접 url을 입력하는 것입니다.
주로 다른 사이트에 있는 주소로 연결할 때에 사용합니다.
또한 특정 post를 메뉴에 연결하거나, 워드프레스의 외부페이지를 메뉴에 연결할 때에도 사용할 수 있습니다.

페이지는 직접 메뉴에 연결할 수 있습니다.
기본적으로는 최근에 추가된 페이지들을 추가할 수 있도록 되어 있습니다.
모두 보기 탭이나 검색 탭을 클릭하여 원하는 페이지를 직접 선택하여 메뉴에 추가할 수도 있습니다.

페이지와 마찬가지로 카테고리도 직접 메뉴에 연결할 수 있습니다.
관리 페이지에서 글 > 카테고리에 등록해 둔 카테고리들이 여기에 노출됩니다.

페이지 등을 메뉴에 추가한 뒤에는 드래그를 하여 메뉴를 편집할 수 있습니다.
메뉴의 순서를 조절하거나 아래와 같이 계층 구조를 설정할 수 있습니다.

위와 같이 설정한 경우 모든 글 목록이라는 페이지의 하위메뉴로 샘플페이지가 있는 것입니다.
메뉴 저장 버튼을 클릭하고 사이트를 확인해 보면 다음과 같이 메뉴가 적용된 것을 확인할 수 있습니다.

외부 페이지

마지막으로 외부 페이지를 설명하겠습니다.

일반 post와 page는 워드프레스의 컨텐츠로 관리된다는 것이 장점이자 단점입니다.
즉 post와 page 등의 컨텐츠는 테마 파일과 데이터베이스에 의존하기 때문에, 워드프레스의 테마를 교체하거나 데이터베이스를 조작하게 되면 영향을 받기 쉽습니다.

테마나 데이터베이스와 무관하게 작동하는 페이지를 작성하고 싶을 때에는 외부페이지를 생성하면 됩니다.
이에 대해서는 아래의 포스트를 참조하세요.

그누보드, 워드프레스 외부페이지 연동

추천 링크

http://codex.wordpress.org/Pages

[catlist categorypage=”yes” numberposts=5]

관련 포스트