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

관련 포스트

“워드프레스 강좌 #3. 테마 적용, 자식 테마 제작”에 대한 4개의 댓글

답글 남기기

이메일 주소를 발행하지 않을 것입니다.