워드프레스 강좌 #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]

관련 포스트

워드프레스 강좌 #3. 테마 적용, 자식 테마 제작

워드프레스의 핵심 개념 중 하나는 테마입니다.
테마라는 것은 웹사이트 유지관리를 쉽게 하기 위한 개념입니다.

테마를 사용하지 않은 기존 BBS, CMS의 문제점

워드프레스 이외의 기존의 많은 웹사이트 제작은 프레임워크를 뜯어고치는 방식으로 진행되었습니다.
예를 들어 그누보드를 기반으로 웹사이트를 제작할 경우 게시판, 회원관리 등의 스킨을 만들고 헤더(head.php)와 푸터(tail.php) 파일을 수정하는 방식으로 진행되었습니다.

이 방식은 중급 이상의 실력을 가진 사람들이 자신이 원하는 방식대로 금방 웹사이트를 제작할 수 있다는 점에서 환영받았지만 심각한 문제점을 내포하고 있었습니다.
그것은 바로 보안 결함이 발견되어 그누보드의 버전이 업그레이드 될 때입니다.
그누보드 내부의 파일들을 직접 수정하는 경우가 많기 때문에 새로운 버전의 그누보드로 업그레이드 하는 작업이 수작업으로 이루어져야 하고, 이는 불필요한 노력과 시간 낭비를 초래합니다.
또한 수작업으로 진행하다 보니 실수가 생길 수도 있습니다.

테마를 사용하는 워드프레스

워드프레스에서는 테마, 플러그인 등 개발자/사용자가 따로 추가한 파일들과 워드프레스 기본(코어)  파일들을 엄격하게 구분하고 있습니다.
워드프레스의 폴더 구조는 다음과 같습니다.

/wp-admin: 관리 페이지
/wp-content: 플러그인, 테마, 언어팩, 업그레이드, 업로드 등 사용자가 추가한 파일들
/wp-includes: 워드프레스 코어 파일

이 중에서 개발자가 건드릴 수 있는 부분은 wp-content 폴더 내의 파일뿐이고, 나머지 부분은 손대지 않도록 되어 있습니다.
따라서 워드프레스의 코어 파일을 새 버전으로 업그레이드를 할 때에 테마와 플러그인, 언어팩 등은 그대로 두고 워드프레스 버전만 업그레이드 되는 것이 가능합니다.

테마에 포함된 템플릿 파일의 개념

워드프레스로 구축된 웹사이트의 외양을 담당하는 것은 테마입니다.
이 테마는 그누보드와 같이 단순히 게시판의 스킨을 담당하는 것이 아닙니다.
해당 파일이 없음을 알려주는 404 오류 페이지부터 특정 카테고리로 분류된 포스트들을 보여주는 카테고리 페이지까지 테마에 존재할 수 있습니다.
페이지의 종류별로 워드프레스 테마에 사용되는 파일명의 계층도를 표시하면 다음과 같습니다.(출처: 워드프레스 제대로 파기)

하나의 워드프레스 웹사이트에서는 하나의 테마를 사용합니다.
특정 유형의 페이지를 보여주도록 요청받은 상황이 되면, 현재 사용중인 테마 폴더에서 필요한 파일을 찾게 됩니다.
이렇게 테마 내에 포함되어 특정 유형의 페이지를 보여줄 수 있는 .php 파일을 템플릿이라고 부릅니다.

예를 들어 wordpress라는 태그가 포함된 포스트들을 나열해야 하는 상황에서는 tag-wordpress.php 라는 템플릿 파일이 현재 테마 폴더 내에 있는지 찾습니다.
해당 템플릿 파일이 있다면 그 파일에 몇 가지 정보를 넘겨주어 실행하고 그 결과를 출력합니다.
만약 tag-wordpress.php라는 파일이 없다면 다음으로는 wordpress라는 태그의 id에 해당하는 파일을 찾습니다.
wordpress라는 태그의 id가 13이라면 tag-13.php 파일을 찾게 되는 것입니다.
있으면 그 템플릿 파일을 실행한 결과물을 출력하게 되고, 없다면 tag.php, archive.php, index.php 순서대로 차례대로 찾아서 실행하고 결과물을 출력합니다.

어떤 테마는 템플릿 파일로 index.php 파일만을 포함할 수 있는 것이고, 다른 어떤 테마는 home.php, archive.php, single.php 으로 구성될 수 있는 것이고, 혹은 더 많은 템플릿 파일을 포함한 테마도 존재할 수 있습니다.
그러나 어떤 경우에라도 다음 3개의 파일은 테마에 기본적으로 포함되어야 합니다.(용량이 0 byte이더라도 파일이 있어야 합니다.)

index.php
style.css
functions.php

기본 템플릿 파일(index.php) 이외에도 스타일시트(style.css) 파일과 테마에서 사용하는 함수(functions.php)파일이 필요하다는 점에 유의해야 합니다.

자식 테마의 개념

워드프레스 코어 파일 뿐 아니라 테마도 업그레이드가 될 수 있습니다.
만약에 다른 사람이 만든 테마를 직접 수정해서 사용하고 있었는데, 그 테마가 업그레이드된다면 기존에 수정해 놓은 부분들이 유실되게 됩니다.

이런 상황을 방지하기 위해서 자식 테마라는 개념이 등장했습니다.
객체 지향 프로그래밍에서 클래스 상속과 비슷한 개념이라고 생각하면 됩니다.
자식 테마에서 수정한 부분이 있으면 그 부분은 자식 테마의 설정을 따르고, 그렇지 않은 부분은 부모 테마의 설정을 따르게 됩니다.
다시 말해 템플릿 파일을 찾을 때에 자식 테마 내의 템플릿 파일을 우선적으로 찾는다는 뜻입니다.
다만 style.css 파일의 경우 자식 테마만 참조하게 되고, 부모 테마 내의 style.css 파일은 참조하지 않는다는 점에 유의해야 합니다.

자식 테마를 만드는 방법

/wp-content/themes/ 폴더 내에 적당한 이름의 자식 테마 폴더를 생성합니다.
자식 테마 이름 내에 부모 테마의 이름이 포함될 필요는 없습니다.

생성된 자식 테마 폴더 내에 style.css 파일을 생성하고 처음에 다음 내용을 입력합니다.

/*
Theme name: (자식 테마 이름)
Author: (자식 테마 작성자 이름)
Template: (부모 테마 폴더명)
*/
@import url("./../(부모 테마 폴더명)/style.css");

Theme name은 자유롭게 입력할 수 있고, 필수입니다.
Author는 자유롭게 입력할 수 있고, 반드시 입력할 필요는 없습니다.
Template는 부모 테마를 지정하는 것인데, 부모 테마의 이름(예: Twenty Twelve)이 아니라 부모 테마의 폴더명(twentytwelve)을 지정해 주어야 한다는 것에 주의해야 합니다.

또한 앞에서 언급한 것처럼 style.css 파일은 자식 테마에서만 불러오기 때문에, 부모 테마의 style.css 파일에 지정된 스타일을 사용하기 위해서는 @import 구문을 사용하여 부모 테마의 style.css 파일의 내용을 불러와야 합니다.
이 때에 자식 테마의 style.css 파일의 맨 처음에 @import 구문을 사용하는 것이 중요합니다.
그렇게 하는 이유는 stylesheet의 경우에는 마지막에 불러온 값을 사용하기 때문인데, 부모 테마와 자식 테마의 설정값이 충돌할 경우 자식 테마에서 설정한 값이 우선적으로 반영되도록 하기 위해서입니다.

부모 테마에서 스타일시트를 수정해야 할 부분들이 있다면 style.css에 스타일을 추가하여 저장합니다.
또한 비어 있더라도 functions.php 파일을 자식 테마 폴더 내에 생성해야 합니다.
자식 테마의 경우에는 독립된 테마와 달리 index.php 파일 없이 위의 두 파일(style.css, functions.php) 만으로도 테마로 인정됩니다.

작업이 끝난 뒤에 워드프레스 관리자 페이지에서 외모 > 테마 메뉴를 클릭해 보면 방금 생성한 자식 테마를 확인할 수 있습니다.
자식 테마를 활성화하여 사용하면서 자식 테마 내에 특정 템플릿 파일을 생성하거나 style.css 파일을 수정하는 방식으로 웹사이트를 꾸밀 수 있습니다.

자식 테마 제작의 주의사항

자식 테마는 부모 테마에 의존하기 때문에 워드프레스 내에 부모 테마와 자식 테마가 함께 설치되어 있어야 합니다.
자식 테마에서 너무 많은 부분을 수정할 경우 부모 테마를 상속하는 것이 별 의미가 없게 됩니다.
그런 경우에는 부모 테마의 추후 업그레이드를 통한 사후관리를 포기하고 부모 테마를 직접 수정해서 커스텀 테마를 사용하는 편이 낫습니다.

크롬 브라우저에서 한글 표현시 콜론(:)이 겹쳐 보이는 문제

워드프레스 기본 테마를 비롯한 외국 테마를 적용하고 한글을 출력하면 아래와 같이 콜론이 겹쳐 보이는 경우가 있습니다.

다양한 운영체제와 브라우저에서 테스트해본 결과, 몇몇 글꼴과 크롬 브라우저가 궁합이 맞지 않는 것이라는 결론을 내렸습니다.

문제의 원인은 글자에 적용된 text-rendering 속성 때문입니다.
굴림(Gulim)과 같은 기본 글꼴을 사용할 때에는 별 문제가 없지만, 다른 글꼴을 사용하면 한글을 표현할 때에 콜론이 겹쳐서 보이게 됩니다.

해결방법은 아래의 2가지 방법 중 하나를 택하면 됩니다.
1. 전체 웹사이트에 굴림, 돋움 등과 같은 기본 글꼴만 사용합니다.
2. css에서 text-rendering 속성을 auto로 지정해 줍니다.

제가 2번째 방법을 사용하여 문제를 해결한 결과는 아래와 같습니다.

더 이상 의도하지 않은 콜론이 출력되지 않는 것을 볼 수 있습니다.

참고 자료

크롬브라우져에서 워드프레스 사용 시 한글에 콜론(:)이 생길 때 – WPU

관련 포스트