워드프레스 강좌 #5. 한국형 게시판 추가

워드프레스로 웹사이트를 구축하려던 어느 한국인의 이야기

워드프레스를 설치했을 때에 게시판이 기본적으로 제공되지 않는다는 점에서 처음으로 당황합니다.
그렇지만 정신을 차리고 워드프레스에 제공되는 다양한 플러그인을 찾아보면 되겠다고 생각합니다.
플러그인 설치 페이지에서 board, forum 등을 검색해 보고 수많은 플러그인의 목록과 영어로 된 설명 때문에 막막함을 느낍니다.
무작정 평가가 좋은 플러그인을 하나씩 설치하고 테스트해보지만 겉모습부터 한국형 게시판과 많이 다르기 때문에 이건 아니라고 판단하고 삭제합니다.
몇 번 해보다가 이건 아닌 것 같다는 생각이 들어 네이버에서 워드프레스 한국형 게시판을 검색해 봅니다.
한국인들이 개발한 몇몇 게시판 플러그인들을 찾아서 설치해 봅니다.
다른 문제들을 다 떠나, 포럼이 아니라 한국형 게시판의 형태로 출력된다는 것에 만족합니다.
예전에 사용하던 제로보드나 그누보드 등에 비교하면 아쉬운 것은 사실이지만 아쉬운대로 사용해야겠다고 생각합니다.
게시판을 테스트하기 위해서 게시물을 작성하고 댓글을 달아보고 수정하다 보니 예상치 못한 곳에서 버그가 발생합니다.
그런데 무엇이 문제인지, 어떻게 해결해야 하는지 알 방법이 없습니다.
또 다른 한국형 게시판 플러그인을 설치해 보고 같은 과정을 반복합니다.
그러다 보면 애초에 워드프레스로 웹사이트 제작하는 게 아니었다는 후회가 밀려옵니다.

…는 제 이야기였습니다.

한국형 게시판 vs 포럼

웹사이트에는 고객센터, 질문과 답변 등과 같이 의사소통을 위한 페이지가 필요합니다.
이러한 기능을 구현하기 위해서는 흔히 게시판을 이용하게 됩니다.

우리나라에서 사용하는 게시판(이하 한국형 게시판)은 기본적으로는 글번호, 제목, 댓글수, 작성자, 작성시각을 목록으로 표시해 주고, 글을 클릭하면 내용과 댓글을 보여주는 형태입니다.
한국형 게시판의 중요한 특징은 최초에 작성된 순서대로 글을 정렬한다는 것입니다.

그런데 외국에서는 이런 게시판을 대신하여 포럼을 사용합니다.
포럼에서도 글의 목록을 보여주고, 글을 클릭하면 글의 내용과 댓글 목록을 보여준다는 점에서는 한국형 게시판과 큰 차이가 없습니다.
그러나 글의 목록을 정렬하는 기준이 최초 작성 시간이 아니라 신선도(freshness)라는 점이 중요한 차이점입니다.
신선도란 글이 최종적으로 수정된 시간 또는 마지막 댓글이 달린 시간을 의미합니다.
이 개념은 페이스북의 뉴스피드를 예로 들면 이해하기 쉬운데, 예전에 작성된 글에 좋아요 버튼을 클릭하거나 댓글을 달면 최근 소식으로 취급되어 글 목록의 상단에 노출되게 됩니다.

포럼의 이러한 기능은 게시판에 비해 여러 가지 장점을 가지고 있습니다.
같은 주제의 글은 하나의 스레드에 작성하면 되므로 불필요하게 새로운 글이 올라올 필요성이 줄어듭니다.
따라서 포럼에 올라오는 글은 대개 주제(topic) 라고 불립니다.
또한, 같은 내용의 글을 반복해서 작성하여 게시판을 도배할 필요가 없어집니다.
이 방식이 악용되어 오래된 글을 목록의 상단으로 끌어올리기 위해 무의미한 댓글을 달기도 하는데(bumping), 이에 대응하여 관리자는 특정 주제에 더 이상 댓글을 달지 못하도록 글을 잠금(lock) 처리할 수 있습니다.

그 동안에 한국형 게시판의 단점들을 해결하기 위한 노력이 없었던 것은 아닙니다.
각종 커뮤니티들에 사용되는 게시판이나 댓글 시스템을 살펴보면 여러 가지 발전된 모습을 찾아볼 수 있습니다.
인기 있는 글을 따로 모아 보기 위한 추천 기능이 있고, 최근 글과 최근 댓글을 따로 모아 보여주는 기능을 제공하기도 합니다.
게시판 내에 태그, 카테고리를 도입하여 글을 주제별로 나열할 수 있도록 하기도 합니다.
또한 작성시간 뿐 아니라 작성자, 제목, 조회수, 댓글수 등을 기준으로 글을 정렬할 수 있도록 했습니다.
그러나 이러한 발전에도 불구하고 한국형 게시판에 아쉬운 점이 없는 것은 아닙니다.

포럼과 한국형 게시판의 차이에 관한 보다 자세한 설명은 네이버 블로그의 아래의 글을 참조하세요.

포럼과 게시판

왜, 언제부터 이런 차이가 생겼는지, 한국형 게시판도 미래에는 포럼 형태로 바뀌게 될지는 알 수 없습니다.
그러나 분명한 사실은 이러한 국내외의 차이 때문에 한국형 게시판 플러그인을 구하기 어렵다는 것과, 이러한 점이 워드프레스를 이용하여 국내 웹사이트를 구축하는 사람들에게 걸림돌로 작용한다는 것입니다.

한국형 게시판을 구현하는 방법

워드프레스에서는 기본적으로 한국형 게시판을 제공하지 않습니다.
따라서 이를 구현하기 위해서는 다양한 방법을 찾을 수 있습니다.

크게 다음 2가지 방법을 생각할 수 있습니다.

1. 워드프레스 이외의 다른 게시판을 추가 설치
2. 워드프레스 플러그인 이용

한국형 게시판을 구현하는 방법 #1. 워드프레스 이외의 다른 게시판을 추가 설치

워드프레스가 설치된 상태에서 제로보드(XE)나 그누보드 등을 추가로 설치하는 방법입니다.
그런 뒤에 워드프레스의 헤더, 사이드바, 푸터 등을 각 페이지마다 include하거나, iframe으로 게시판만 보여주도록 설정하면 됩니다.

이 방식에는 다음과 같은 장점이 있습니다.

기존에 사용하던 게시판을 사용하므로 개발자가 원하는 기능과 디자인을 구현하기 쉽습니다.
웹사이트의 방문자에게 익숙한 UX를 제공할 수 있습니다.

이 방식에는 다음과 같은 단점이 있습니다.

회원 연동이 기본적으로 이루어지지 않고, 이를 위해서는 추가 작업이 필요합니다.
하나의 데이터베이스에 많은 테이블이 존재하여 유지관리가 어려워지고 자료가 중복됩니다.
게시판 내에 작성한 글은 워드프레스 내의 컨텐츠로 간주되지 않기 때문에 검색에서 노출되지 않습니다.
include로 구현한 경우 워드프레스 웹사이트의 테마를 변경하면 수동으로 헤더, 사이드바, 푸터에 관한 .php 파일을 수정해 주어야 합니다.
iframe으로 구현한 경우 iframe의 가로폭은 조절하기 쉽지만 세로폭 조절은 까다롭습니다.
iframe으로 구현한 경우 외부에서 게시물의 링크를 클릭하면 헤더와 푸터 없이 게시판만 보입니다.

결국 저는 이 방식들을 사용하지 않았습니다.

한국형 게시판을 구현하는 방법 #2. 워드프레스 플러그인 이용

절대적인 숫자는 부족하지만, 우리나라에서 사용하는 워드프레스 한국형 게시판 플러그인은 꾸준히 개발되고 있고, 질과 양에서 성장하고 있습니다.

다음과 같은 플러그인들이 대표적입니다.

MH Board

LH Board

Amumu Board

이 플러그인들은 게시물을 작성 순서대로 나열하는 한국형 게시판의 목록 방식을 따르고 있습니다.
그러나 저는 한국형 게시판에 비해 포럼 방식이 더 나은 방식이고, 앞으로의 한국형 게시판이 포럼 형태로 발전해야 한다고 생각하기 때문에 이 방식을 사용하지 않았습니다.

대신에 bbPress 플러그인을 사용하여 포럼을 만들고, 이를 변형하여 사람들에게 익숙한 한국형 게시판 형태로 만들기로 하였습니다.
이 강좌의 제목은 한국형 게시판 추가이지만, 실제로는 겉모습만 한국형 게시판이고 내부 작동 방식은 포럼 방식을 따르도록 bbPress 플러그인을 변형하여 게시판 형태로 만드는 방법을 다룹니다.

bbPress를 한국형 게시판 형태로 변형하기 #1. 플러그인 설치

관리 페이지에서 플러그인 > 플러그인 추가하기를 클릭합니다.
bbPress를 검색하면 다음과 같은 검색 결과를 볼 수 있습니다.

bbPress 항목에서 지금 설치하기 링크를 클릭하여 플러그인을 설치합니다.
플러그인 설치가 완료되면 다음과 같은 화면을 볼 수 있습니다.

플러그인은 활성화(activate) 되기 전까지는 작동하지 않습니다.
따라서 플러그인을 활성화 라는 링크를 클릭해서 방금 설치된 bbPress 플러그인을 활성화시킵니다.
관리 페이지에서 좌측 메뉴 중간에 Forums, Topics, Replies 항목이 추가된 것이 보이면 설치가 완료된 것입니다.

bbPress를 한국형 게시판 형태로 변형하기 #2. 플러그인 한국어화

bbPress 플러그인은 기본적으로 영어로 제공됩니다.
게시판에 글을 쓰거나 읽을 때 뿐 아니라 관리 페이지도 영어로 되어 있기 때문에 불편합니다.
이를 해결하기 위해서는 bbPress를 한국어로 바꾸어 주어야 합니다.

제가 직접 번역하여 이 블로그에서 사용중인 bbPress 한국어 팩은 아래 링크에서 다운받을 수 있습니다.

bbpress-ko_KR.zip

또는 아래의 링크에서 다른 분이 만드신 bbPress 한국어 팩을 다운받을 수 있습니다.

내가 손본 bbPress 한국어 언어 파일을 공유한다 – 웹으로 말하기

bbPress 한국어 팩을 설치하는 방법은 이 블로그에 있는 아래의 글을 참조하세요.

영어 버전 한국어화

bbPress를 한국형 게시판 형태로 변형하기 #3. 설정, 게시판 생성

관리 페이지에서 설정 > 게시판(Forums)을 클릭하면 설치된 bbPress의 설정을 할 수 있습니다.
몇몇 중요한 설정 항목들은 다음과 같습니다.

글 편집 제한시간(Disallow editing after): 최초 글 작성 후 수정할 수 있는 제한시간
익명 글 작성(Anonymous posting): 로그인하지 않은 방문자에게 글 작성 허용 여부
글 태그(Topic tags): 글에 태그를 달 수 있는지 허용 여부

bbPress 설정이 끝나면 저장한 뒤에 게시판(포럼)을 추가합니다.

관리 페이지에서 Forums > New Forum을 클릭하여 게시판 이름을 입력하면 하나의 포럼(게시판)이 생성됩니다.
예를 들어 방명록이라는 이름의 게시판을 추가하고 게시판 보기를 클릭하면 다음과 같은 화면을 볼 수 있습니다.

bbPress를 한국형 게시판 형태로 변형하기 #4. UI 수정

생성된 게시판에 글을 작성해 보면 한국형 게시판과 여러 부분에서 차이가 나는 것을 발견할 수 있습니다.
UI를 한국형 게시판 형태로 수정하기 위해서는 우선 bbPress 플러그인이 작동하는 방식을 알아야 합니다.
bbPress 공식 웹사이트의 내용을 참조하면 bbPress이 템플릿을 사용한다는 사실을 알 수 있습니다.

/wp-content/plugins/bbpress/templates/default/ 폴더에는 다음과 같은 폴더와 파일들이 있습니다.

bbpress 폴더 내의 .php 파일들은 각종 페이지들을 보여주는 템플릿 역할을 합니다.
css 폴더 내의 .css 파일들은 웹페이지의 스타일을 지정합니다.
extras 폴더 내의 .php 파일들은 bbPress에서 기본적으로 제공되는 것 이외의 기능들을 제공하기 위한 커스텀 템플릿 파일들로서, 특정 page를 생성하고 커스텀 템플릿을 지정하면 사용할 수 있습니다.
js 폴더 내의 .js 파일들은 웹페이지에서 사용할 스크립트를 정의합니다.
bbpress-functions.php 파일은 bbp_로 시작하는 각종 bbPress 함수들을 정의합니다.

이 중에서 bbPress를 커스터마이즈하기 위해서 필요한 폴더는 bbpress와 css 입니다.

/wp-content/plugins/bbpress/templates/default/bbpress 폴더에서 커스터마이즈하려는 몇몇 .php 파일들을 복사해서 /wp-content/themes/(현재 사용중인 테마 폴더)/bbpress/ 폴더 내에 붙여넣기합니다.
그러면 테마 폴더 안에 있는 bbpress 템플릿 파일을 우선적으로 사용하고, 없는 경우에는 bbpres 기본 템플릿을 사용하여 게시판을 보여주게 됩니다.

제가 bbPress를 커스터마이즈하기위해 테마 폴더 안에 있는 bbpress 폴더로 복사한 템플릿 파일들은 아래와 같습니다.

파일 이름을 보면 각각의 기능을 추측할 수 있습니다.
.php 파일을 열어 불필요한 기능을 주석처리하고 필요한 기능을 추가하는 방식으로 한국형 게시판 형태로 만들어 줍니다.

또한 스타일을 커스터마이즈하기 위해서 /wp-content/plugins/bbpress/templates/default/css/ 폴더 안에 있는 bbpress.css 파일을 테마 폴더로 복사해야 합니다.
즉, /wp-content/themes/(현재 사용중인 테마 폴더)/css/ 폴더에 bbpress.css 파일을 복사/붙여넣기한 뒤에, 원하는 스타일로 수정합니다.
유지관리를 쉽게 하기 위해서는 자식 테마에서 .css 파일을 제작할 때와 마찬가지로 부모 css 파일을 import하는 방식을 추천합니다.

이러한 작업을 완료하여 한국형 게시판처럼 보이는 bbPress 테마를 만들었습니다.
첨부된 압축 파일은 아래 링크에서 다운받을 수 있습니다.

theme-bbpress.zip

bbpress 플러그인이 설치된 상태에서 테마를 적용하기 위해서는 다운받은 압축파일을 풀고, bbpress 폴더와 css 폴더를 사용중인 테마 폴더 안에 복사/붙여넣기하면 됩니다.

그 외에

커스텀 페이지 템플릿을 이용하여 게시판 형태를 만들수도 있습니다.
이 블로그에 적용한 것은 아래 링크와 같습니다.

http://www.nam.or.kr/board

강좌를 마치며

이상으로 짧았던 워드프레스 웹사이트 제작 강좌를 마치겠습니다.
이 강좌를 통해서 고기를 잡아드리지는 못했지만, 고기를 잡는 방법을 얻어가셨으면 좋겠습니다.
우리나라에서 워드프레스가 보다 활성화되기를 기대합니다.

참고 자료

Bump (Internet) – 위키피디아

포럼과 게시판 – 네이버 블로그

워드프레스 한국형 게시판 모음 – 티스토리

bbPress 공식 웹사이트

bbPress 함수 레퍼런스

관련 포스트

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

관련 포스트

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

우리나라 웹사이트에서 주로 사용하는 CMS는 워드프레스, XE, 그누보드 정도입니다.
이번 포스팅에서는 그누보드와 워드프레스에서 외부 페이지를 연동하는 방법을 다룹니다.

그누보드 외부페이지 연동

그누보드에서 외부페이지를 연동시키기 위해서는 적당한 디렉토리를 만들고 그 안에 _common.php 파일을 작성합니다.
그 내용은 대개의 경우 다음과 같습니다.

<?php 
$g4_path = "./../gnu"; // common.php 의 상대 경로 
include_once("$g4_path/common.php"); 
?>

그런 뒤에 같은 디렉토리 내에 적당한 php 파일을 생성하고 첫 줄에 include_once(“./_common.php”);를 입력해 주면 그 php 파일은 그누보드와 연동됩니다.
즉 그누보드에서 제공하는 함수들(alert, goto_url, sql_query 등)을 사용할 수 있고, 현재 접속자의 id, 권한 등도 알 수 있습니다.
그누보드에서 제공하는 대표적인 변수들은 다음과 같습니다.

  • $g4: 그누보드 경로, 테이블 이름, 현재시각 등에 관한 정보
  • $config: 그누보드 설정값들에 관한 정보
  • $board: 접속 중인 게시판에 관한 정보
  • $member: 현재 접속자의 정보
  • $is_guest: 현재 접속자가 손님인지에 관한 정보
  • $is_member: 현재 접속자가 회원인지에 관한 정보
  • $is_admin: 현재 접속자가 관리자인지에 관한 정보

워드프레스 외부페이지 연동

워드프레스에서 외부페이지를 연동시키기 위해서는 적당한 디렉토리 안에 적당한 php 파일을 생성하고 첫 줄에 include_once(“(워드프레스의 상대경로)/wp-config.php”);를 입력해 주면 그 php 파일은 워드프레스와 연동됩니다.
즉 워드프레스에서 제공하는 객체들($wpdb 등)을 사용할 수 있고, 현재 접속자의 id, 권한 등도 알 수 있습니다.
워드프레스에서 제공하는 대표적인 함수들은 다음과 같습니다.

  • new WP_Query(): 해당 조건에 맞는 포스트에 관한 정보
  • wp_get_current_user(): 현재 접속자에 관한 정보
  • get_header(): 헤더 출력
  • get_sidebar(): 사이드바 출력
  • get_footer(): 푸터 출력

그누보드와 워드프레스의 로그인 연동(SSO; Single sign-on)

그누보드나 워드프레스 중 하나에 로그인하면 다른 하나에도 로그인이 되도록 하는 개념입니다.
php 파일을 작성하여 그누보드와 워드프레스의 로그인을 한꺼번에 처리하도록 할 수도 있고, 로그인 후에 redirect를 통해 순차적으로 로그인이 이루어지도록 할 수도 있습니다.

그누보드 로그인의 경우에는 /bbs/login_check.php 파일의 소스를 참고하여 로그인을 구현하면 됩니다.
워드프레스 로그인의 경우에는 wp_set_current_user 함수와 wp_validate_auth_cookie 함수를 사용하여 로그인을 구현하면 됩니다.

다만 로그인이 이루어진 이후의 문제점이 있습니다.
하나의 php 페이지에서는 그누보드와 워드프레스의 변수/함수를 한꺼번에 이용할 수 없고 둘 중 하나를 선택해야만 합니다.
그누보드와 연동시킬 경우 워드프레스와 연동시킬 수 없고, 그 반대의 경우에도 마찬가지입니다.
이런 현상이 일어나는 것은 function_exists 함수를 사용하지 않고 정의된 함수 중에서 이름이 중복되는 함수인 is_admin()이 그누보드와 워드프레스에 공통적으로 존재하기 때문입니다.
따라서 그누보드나 워드프레스 중 한쪽에서 is_admin 함수를 재정의하거나 function_exists 구문을 사용해서 정의한다면 문제를 해결할 수 있습니다.

그러나 함수 중복 오류 문제가 해결되어도 성능 문제가 존재합니다.
한 php 파일에서 그누보드와 워드프레스를 한꺼번에 사용하게 된다면, 그누보드와 워드프레스가 모두 실행되어야 하므로 실행속도가 느려집니다.

이러한 점들을 고려한다면, 꼭 필요한 경우가 아닌 경우라면 하나의 php 파일에서는 그누보드나 워드프레스 중 하나만 선택해서 실행하도록 하는 것이 좋습니다.

관련 포스트

워드프레스 블로그 개설

그누보드와 킴스큐를 거쳐, 결국에는 워드프레스로 블로그를 개설했습니다.

그누보드를 사용하면서 확장성에는 만족했지만 기능이 부족하고 업데이트하기 어렵고 모바일 환경과 블로그 체계에 최적화되지 않았다는 점이 아쉬웠습니다.
킴스큐를 사용하면서 사용자 편의성과 모듈을 사용한 사이트 구성에는 만족했지만 기능이 부족하고 사용자가 적어 테마와 모듈 등의 자료가 부족하다는 점이 아쉬웠습니다.
텍스트큐브를 잠시 설치하여 테스트하면서 국내 설치형 블로그 중에서 가장 완성도가 높다고 느껴졌지만 전체적으로 조잡하고 정돈되지 않은 느낌을 받아 사용이 망설여졌습니다.

결국 만족스러운 설치형 블로그를 국내에서 찾지 못해 주변 사람들의 의견을 구한 결과 워드프레스를 적극 추천받았습니다.
아직 워드프레스의 장점들을 다 파악하지는 못했지만, 원하는 테마를 찾아 설정하는 과정에서 전세계에서 가장 많이 사용되는 설치형 블로그라는 장점을 실감할 수 있었습니다.

한편, 이전에 그누보드에서 킴스큐로 블로그를 전환할 때에 자료를 함께 이전하면서 여러 문제가 발생했습니다.
새로운 블로그의 네이버 블로그 검색 등록은 1달째 보류되었고, 구글 애드센스 계정은 정책 위반으로 계정이 정지되었습니다.
이번에는 그런 문제를 다시 겪지 않기 위해 이전 블로그의 자료를 이전하지 않기로 결정했습니다.
처음부터 시작하는 만큼, 보다 체계적으로 IT와 모바일에 관한 주제를 다룰 예정입니다.

관련 포스트