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

관련 포스트

워드프레스 강좌 #2. 영어 버전 한국어화

우리나라 사람에게 워드프레스가 낯선 이유 중 하나는 영어를 기본으로 하기 때문입니다.
그러나 워드프레스는 국제적으로 사용되는 것을 염두에 두고 설계되었기 때문에 몇 가지 간단한 방법으로 쉽게 지역화(예: 한국어, 일본어, 중국어 등으로 번역)를 할 수 있습니다.

한국어 버전의 워드프레스를 사용하는 방법에는 크게 3가지가 있습니다.

1. 한국어 버전의 워드프레스를 다운 받기

2. 영어 버전의 워드프레스를 다운 받고 최신 버전의 한국어 팩을 적용하기

3. 영어 버전의 워드프레스를 다운 받고 직접 한국어화하기

이 중에서 가장 쉬운 것은 1번이고, 가장 번거로운 것은 3번입니다.
그러나 다른 사람의 번역이 마음에 들지 않아 수정해야 하는 경우도 있기 때문에 이번 강좌에서 각각의 방법을 전부 다루겠습니다.

워드프레스 한국어화 #1. 한국어 버전의 워드프레스를 다운 받기

워드프레스 홈페이지에서 최신 버전의 워드프레스를 다운받으려 하면 다음과 같은 링크가 보입니다.

노란 박스 안에 WordPress is also available in 한국어. 라고 써 있습니다.
그 링크를 클릭하면 한국어 버전의 워드프레스를 다운 받을 수 있습니다.

한국어 버전의 워드프레스 .zip 파일을 다운 받은 뒤에는 아래의 포스트에서 다룬 순서대로 설치하면 됩니다.

개발환경 준비, 설치, 환경설정

워드프레스 한국어화 #2. 영어 버전의 워드프레스를 다운 받고 최신 버전의 한국어 팩을 적용하기

워드프레스는 국제화/지역화를 염두에 두고 설계되었기 때문에 각종 언어로의 번역을 지원합니다.
포털 사이트 등에서 워드프레스 한글화 등으로 검색하면 한국어 팩을 구할 수 있습니다.
영문 버전의 워드프레스가 설치된 상태에서 한국어 팩을 구했다면 이를 적용할 수 있습니다.

또는 가장 최신 버전의 한국어 버전의 워드프레스 .zip 파일을 다운 받은 뒤에 /wordpress/wp-content/languages 폴더 내의 파일들만 추출해도 됩니다.

제 블로그에 적용한 언어팩은 아래의 링크에서 다운받을 수 있습니다.

wordpress-3.5-ko_KR

워드프레스 한국어 팩의 내용물은 다음과 같습니다.

admin-ko_KR.mo
admin-ko_KR.po
admin-network-ko_KR.mo
admin-network-ko_KR.po
continents-cities-ko_KR.mo
continents-cities-ko_KR.po
ko_KR.mo
ko_KR.po

한국어 언어팩 파일들은 모두 ko_KR로 끝나는 규칙이 있습니다.
또한 언어의 종류에 상관없이 워드프레스 언어팩은 같은 파일명을 가진 한 쌍의 .po 파일과 .mo 파일로 이루어져 있습니다.
여기에서 .po 파일은 원문과 번역문을 그대로 저장하고 있는 소스 파일에 해당합니다.
.mo 파일은 .po 파일을 컴파일하여 만들어지는 바이너리 파일에 해당합니다.
따라서 .po 파일만 있으면 이로부터 .mo 파일을 생성할 수 있습니다(반대로도 가능은 합니다).

워드프레스 설치 경로에 보면 /wp-content/languages/ 폴더가 있습니다.
languages 폴더가 없는 경우 해당 폴더를 생성하면 됩니다.
이 폴더 내에 앞에서 구한 한국어 팩을 넣어 두면 워드프레스를 한국어화할 준비가 끝난 것입니다.

마지막으로 wp-config.php 파일에서 워드프레스의 기본 언어를 한국어로 지정해 주어야 합니다.

define('WPLANG', '');

라고 되어 있는 부분을

define('WPLANG', 'ko_KR');

로 수정하고 저장합니다.
워드프레스에 다시 접속해 보면 메뉴와 메시지 등이 한국어로 보여지는 것을 확인할 수 있습니다.

워드프레스 한국어화 #3. 영어 버전의 워드프레스를 다운 받고 직접 한국어화하기

가장 복잡하지만 가장 확실한 방법입니다.
최신 버전의 워드프레스 버전으로 업그레이드 한 이후에 아직 한국어 언어팩이 나와 있지 않은 상황에 적용할 수 있는 방법입니다.

아래의 POEDIT 공식 웹사이트에서 Download 메뉴를 클릭하여 POEDIT를 다운받아 설치합니다.

http://www.poedit.net/

언어팩의 템플릿에 해당하는 .pot 파일을 구한 경우에는 POEDIT에서 편집한 뒤에 .po, .mo 파일로 저장할 수 있습니다.
그렇지 못한 경우에는 기존에 사용하던 언어팩의 .po 파일을 수정하고 저장하는 데에 사용하면 됩니다.

테마에 언어팩 적용하기

테마에도 언어팩을 적용할 수 있습니다.
테마 내의 languages 폴더를 찾고(없으면 생성하면 됩니다) 그 안에 해당되는 ko_KR.po, ko_KR.mo 파일을 넣어둡니다.

해당 테마에 필요한 ko_KR.po 파일을 구할 수 없는 경우에는 직접 번역하여 .po 파일을 생성해야 합니다.
공식 테마와 같이 국제화/지역화를 지원하는 테마의 경우에는 테마 내의 languages 폴더 내에 해당 테마의 언어팩 템플릿 파일(.pot 파일)이 포함되어 있습니다.
이 파일을 POEDIT에서 열어서 편집한 뒤에 .po 파일로 저장하면 됩니다.
대개의 경우에는 POEDIT 에서 열기 버튼을 누르면 .po 파일만 보여주기 때문에 .pot 파일이 보이지 않습니다.
파일 확장자 필터에서 모든 파일 (*.*)을 선택해야 .pot 파일을 열 수 있습니다.

.pot 파일을 처음 연 경우에는 대개 `필요한 Plural-Forms 헤더가 빠졌습니다.` 라는 메시지를 볼 수 있습니다.
이는 영어와 같이 단수와 복수의 구별이 엄격한 언어로부터 다른 언어로 번역하기 위해서는 단수/복수 처리에 관한 규칙을 설정해 주어야 하기 때문입니다.
해당 규칙을 설정해 주기 위해 메시지 오른쪽 끝에 위치한 `헤더 수정` 버튼을 클릭하면 다음과 같이 `카탈로그 속성`이라는 대화창을 볼 수 있습니다.

언어에는 Korean을 입력하고 문자코드는 둘다 UTF-8로 설정합니다.
마지막에 있는 문장내 복수 표시 형식에 다음 내용을 입력하는 것이 중요합니다.

nplurals=2; plural=(n != 1);

영어권을 한국어로 번역할 때에는 위와 같은 값을 입력해 줘야 합니다.
확인 버튼을 눌러 저장한 뒤에는 소스 텍스트를 참고하여 번역된 값을 입력해 줍니다.

번역이 어느 정도 마무리되었으면 메뉴 > 파일 > 다른 이름으로 저장 을 클릭하여 ko_KR.po 파일로 저장해 줍니다.
이 때에 자동으로 .mo 파일도 생성해 줍니다.

생성된 ko_KR.po 파일과 ko_KR.mo 파일을 /wp-content/themes/(해당 테마 이름)/languages/ 폴더 내에 업로드하고 워드프레스 웹사이트에 접속해 보면 자동으로 한국어가 적용된 것을 확인할 수 있습니다.

플러그인에 언어팩 적용하기

플러그인에는 두 가지 방식으로 언어팩을 적용할 수 있습니다.

하나는 워드프레스 언어팩 폴더 안에 언어팩 파일을 집어넣는 방식입니다.
플러그인 폴더를 삭제하더라도 워드프레스 언어팩 폴더 내의 파일이 남아있으므로 해당 플러그인을 다시 설치하면 언어팩이 다시 적용됩니다.

다른 한 가지 방식은 플러그인 폴더 안에 언어팩 파일을 집어넣는 방식입니다.
해당 플러그인을 업그레이드하거나 삭제하면 같이 삭제됩니다.

예: bbPress 플러그인
bbpress-ko_KR.po, bbpress-ko_KR.mo 파일을 다음 중 한 폴더에 넣어두면 언어팩이 적용됩니다.
1. /wp-content/languages/bbpress/
2. /wp-content/plugins/bbpress/bbp-languages/

각각의 방식에 장단점이 있으므로 두 방법 중에 자신의 개발 방식에 맞는 적절한 방법을 택하면 됩니다.

.po 파일 업데이트

처음 언어팩을 적용한 이후에 워드프레스 코어나 설치된 테마, 플러그인이 업데이트될 수 있습니다.
그러면서 새로 추가된 문장은 번역이 되지 않고 그대로 영어로 출력되는 경우가 있습니다.
이런 경우에는 기존의 .po 파일을 새로운 버전의 .pot 파일을 이용하여 업데이트하면 됩니다.

기존의 .po 파일과 새로 업데이트 된 버전의 .pot 파일을 준비합니다.
Poedit로 기존의 .po 파일을 엽니다.
메뉴 – 카탈로그 – POT 파일로부터 업데이트를 클릭합니다.

새로 업데이트 된 버전의 .pot 파일을 선택합니다.

기존 .po 파일과 새로 업데이트 된 버전의 .pot 파일을 분석하여 새로운 문자열과 제거된 문자열을 보여줍니다.

확인 버튼을 누르면 새로 추가된 문자열이 상단에 추가된 것을 확인할 수 있습니다.

새로 추가된 문자열을 번역하고 저장하여 .po 파일과 .mo 파일을 다시 서버에 업로드하면 됩니다.

워드프레스 한국어 팩 관련 추천 사이트

워드프레스 한글화 프로젝트

GlotPress

iNNiS.KR

관련 포스트