워드프레스를 사용할 때 child 테마를 사용하라는 조언은 늘 있습니다. 사용자가 원래의 테마를 수정하는 때가 많은데 그 테마 제작자가 업데이트한 테마를 제공하고 사용자가 업데이트한 테마를 적용하면 수정 내용이 없어지는 것을 막기 위한 것입니다. 물론, 업데이트하지 않으면 수정 내용은 유지되지만, 워드프레스 버전과 보안 등의 요소가 개선될 가능성이 크므로 업데이트하는 것이 좋습니다.
CSS를 위한 Child 테마
그런데, 대부분 사용자의 테마 수정(편집) 주 내용은 CSS 코드 추가로 볼 수 있습니다. 사이트의 모양, 폰트, 색 등을 원하는 형태로 바꾸기 위한 것인데, CSS 코드 추가는 워드프레스 custom_css 기본 포스트 타입에 의한 옵션을 사용하면 충분하며, 플러그인처럼 나중에 로드하여 설치한 플러그인의 스타일까지 변경할 수 있으므로 Child 테마를 만들어 사용할 필요가 없습니다.
CSS 코드 추가를 위한 기본 포스트 타입을 사용하지 않으려면, 저장소 플러그인이나 액션 훅(wp_head) 하나를 포함한 간단한 플러그인 구성으로 CSS 코드를 추가하여 스타일을 변경할 수 있으므로 역시 Child 테마를 사용할 필요가 없습니다. Child 테마 사용이 필요한 때는 사용자 마음이며, 조금 더 상세한 내용은 다음 글을 참고하세요.
어쨌든 이 포스트에서는 워드프레스 twentyfifteen 기본 테마를 예로 들어, CSS 코드, 코드 스니핏, 템플릿 파일 등을 추가할 목적으로 조금 더 개선한 Child 테마를 만들고, 어떤 테마의 Child 테마를 만들 때 편리를 도모하는 방법을 알아보고자 합니다.
Child 테마 만들기
특정 테마(Parent)의 Child 테마를 만들기 위해서는 Parent 테마의 정보를 먼저 파악해야 하는데, 제일 먼저 Parent 테마의 디렉터리 이름을 알아야 합니다.
Parent 테마의 디렉터리 이름 파악
기본 twentyfifteen 테마의 디렉터리 이름은 twentyfifteen로, 워드프레스 설치 루트의 wp-content/themes 경로를 보면 금방 알 수 있습니다. 다른 테마의 Child 테마를 만들 때도 마찬가지이며, Parent 테마의 디렉터리 이름은 Child 테마 구성에 필요한 style.css 파일의 헤더 텍스트에 입력하기 위한 것입니다. 디렉터리 이름을 사용하는 부분은 나중에 확인할 수 있습니다.
Child 테마의 디렉터리 이름 결정
Parent 테마 디렉터리 이름을 먼저 파악하는 것처럼 Child 테마를 만들 때 Child 테마 파일을 담을 디렉터리 이름을 먼저 결정하는 것이 좋습니다. 이 포스트에서는 twentyfifteenchild로 디렉터리 이름을 정하는데, 원하는 이름을 사용해도 됩니다.
style.css 파일 만들기
워드프레스 Parent 테마만이 아니라 Child 테마에도 style.css 파일이 있어야 하는데, 다음처럼 Child 테마의 style.css 파일 헤더 텍스트를 구성하여 twentyfifteen 테마의 Child 테마 twentyfifteenchild의 style.css 파일을 구성할 수 있습니다.
/*
Theme Name: Twenty Fifteen Child
Description: Twenty Fifteen Child Theme
Author: John Doe
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twentyfifteenchild
*/5번 줄 twentyfifteen에는 Parent 테마의 디렉터리 이름을 입력해야 하는데, 여기에 사용하기 위해 Parent 테마의 디렉터리 이름을 먼저 파악한 것입니다. 10번 줄 Text Domain의 twentyfifteenchild는 Child 테마의 디렉터리 이름이 아니라 프로그램적 사용을 위한 슬러그(Slug)로 보면 됩니다. 슬러그는 고유한 것이어야 하는데, 설명은 생략하며, 보통 테마의 슬러그는 테마의 디렉터리 이름(템플릿이름)과 같은 때가 많습니다. 테마 디렉터리 이름과 달라도 상관이 없고, 원하는 것으로 정하면 됩니다.
헤더 텍스트 나머지 요소는 원하는 것으로 정하여 입력하면 되고, 특정 요소는 생략해도 됩니다. 그러나, 특정 테마의 Child 테마를 만들 때 다른 생각하지 않고 위의 헤더 텍스트 정도만 사용하면서 5번 줄 Template의 Parent 테마 디렉터리 이름 사용에 주의하세요.
Parent, Child 테마의 디렉터리 이름은 데이터베이스에 저장되기에 파악의 필요가 있는데, _options 테이블을 보면 다음 그림의 데이터를 볼 수 있습니다. 그림은 Child 테마 twentyfifteenchild를 사용한 것입니다.
template 필드는 Parent 테마를 뜻하며, 디렉터리 이름을 값으로 저장합니다. stylesheet 필드는 Child 테마를 사용하지 않을 때는 Parent 테마와 같은 값을 가지므로 ‘현재 사용하는 테마’와 같은 뜻이며, Child 테마를 사용하면 Child 테마 디렉터리 이름이 값으로 저장되며, Child 테마를 사용한 때로 볼 수 있으므로 역시 ‘현재 사용하는 테마’와 같은 뜻입니다.
style.css 파일을 만드는 것으로 Child 테마 구성은 끝이며, CSS 코드 추가가 필요하다면 이 파일에 추가하면 됩니다. 그러나, CSS 코드 추가만을 위해서 Child 테마를 만들 필요가 없다고 말했으므로 추가 파일을 미리 만들어 Child 테마 사용 목적을 확장해봅니다. 당연히 나중에 필요할 때 만들어도 됩니다.
functions.php 파일
Child 테마를 만들어 사용하는 핵심 목적은 새로운 기능의 추가나 Parent 테마의 기능을 제어하기 위한 코드 스니핏 추가라고 생각합니다. 이때 필요한 파일이 functions이름의 파일이며, 이 이름을 사용해야 워드프레스가 자동으로 인식하는 파일이 됩니다.
functions.php 파일은 파일만 만들고 내용(코드)은 나중에 필요할 때 추가하면 되지만, Child 테마의 Parent 테마 의존 정의, CSS 파일 버전 추가로 캐시 파일 재생성, 사이트 전역 기본 폰트 추가 등, 보통의 사용자가 워드프레스 사용 시 원하는 최소한의 기본 요소를 정의하여 나중에 필요할 때 길잡이가 될 수 있도록 조금 더 개선하여 Child 테마를 만들어 봅니다.
이 포스트에서 사용하는 twentyfifteen 테마의 Child 테마 twentyfifteenchild를 위한 functions.php 파일은 다음처럼 구성할 수 있습니다.
<?php
/**
* 스타일, 스크립트 파일 대기열 등록
*/
add_action( 'wp_enqueue_scripts', 'custom_enqueue_script' );
function custom_enqueue_script() {
/* Parent theme 스타일과 Child theme 스타일 파일 대기열 등록 */
$child_style_ver = md5( filemtime( get_stylesheet_directory() . '/style.css' ) ); // Child 테마의 생성 시각
wp_enqueue_style( 'twentyfifteen-style', get_template_directory_uri() . '/style.css' ); // Parent 테마 대기열 등록
wp_enqueue_style( 'twentyfifteenchild-style',
get_stylesheet_directory_uri() . '/style.css',
array( 'twentyfifteen-style' ), // parent theme 의존
$child_style_ver
); // Parent 테마에 의존한 Child 테마 대기열 등록 및 버전(파일 생성 시각) 파라미터 추가
/* 구글 폰트 등록 */
wp_enqueue_style( 'twentyfifteenchild-style-google-fonts', '//fonts.googleapis.com/css?family=Raleway|Noto+Sans', array( 'twentyfifteenchild-style' ) ); // Child 테마에 의존한 구글 폰트 등록
}위의 코드는 워드프레스에서 스타일과 스크립트 파일을 등록하는 훅으로 특정 파일을 등록하는 것입니다. 11번 줄이 Parent 테마의 style.css 파일 대기열 등록 코드인데, 이 코드로 등록하지 않아도 기본으로 Parent 테마의 style.css 파일은 로드합니다. 그리고, 12번 줄 Child 테마의 style.css 파일도 마찬가지이며, Parent 테마의 style.css 파일에 이어 로드하므로 사이트의 스타일을 변경할 수 있습니다.
파일 대기열 등록 시 Parent 테마의 twentyfifteen-style 파일 ID(핸들러)는 twentyfifteen 테마 functions.php 파일을 열어 확인하거나 Child 테마 사용 전 사이트에서 소스를 확인하여 파악하면 됩니다. 만약, Parent 테마 정보와 다르면 같은 파일이 중복 출력됩니다.
그러나, Child, Parent 테마의 의존 관계를 정의하고, 파일의 생성 시각을 파일의 파라미터로 추가하여 사용자가 캐시 파일을 지우지 않아도 새로운 스타일을 적용한 사이트를 볼 수 있도록 구성하면 Child 테마 사용 명분을 확장할 수 있습니다. 대기열 등록은 중복 파일을 거르므로 코드 추가 전에 로드하는 style.css 파일을 반복 로드하지 않습니다.
19번 줄에서는 특정 구글 폰트를 외부에서 로드하여 사이트 폰트 변경에 빠르게 대처할 수 있으며, 폰트를 추가하려면 구글 폰트 사이트에 접근하여 원하는 폰트를 추가하면 됩니다. 예를 들어 나눔명조 폰트를 추가하려면 다음 코드를 참고하세요.
/* 구글 폰트 등록 */
wp_enqueue_style( 'twentyfifteenchild-style-google-fonts', '//fonts.googleapis.com/css?family=Raleway|Noto+Sans|Nanum+Myeongjo', array( 'twentyfifteenchild-style' ) );폰트 추가와 함께 CSS 코드 추가가 필요한데, 완성 Child 테마 style.css 파일에 다음 코드를 추가하였습니다.
body {
font-family: Raleway, 'Noto Sans', sans-serif;
}범용 functions.php 파일 만들기
앞의 단계까지 구성한 style.css, functions.php 파일만으로 Child 테마를 사용하는 데 전혀 문제가 없고, 필요할 때 특정 코드를 각 파일에 추가하면 됩니다. 그런데, 특정 테마의 Child 테마를 만들 때 style.css 파일은 Parent 테마의 정보 등을 파악하여 직접 변경해야 하지만, functions.php 파일은 변경하지 않아도 되도록 구성할 수 있습니다.
절대적이라고 말할 수 없지만, 앞에서 살핀 것처럼 데이터베이스의 데이터를 이용하면 됩니다. 긴 말은 생략하고, 범용 functions.php 파일 코드 전체는 다음처럼 정의할 수 있습니다.
<?php
/**
* 스타일, 스크립트 파일 대기열 등록
*/
add_action( 'wp_enqueue_scripts', 'custom_enqueue_script' );
function custom_enqueue_script() {
/* Parent theme 스타일과 Child theme 스타일 파일 대기열 등록 */
$parent_style = get_option( 'template' ) . '-style';
$child_style = get_option( 'stylesheet' ) . '-style';
$child_style_ver = md5( filemtime( get_stylesheet_directory() . '/style.css' ) ); // Child 테마의 생성 시각
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); // Parent 테마 대기열 등록
wp_enqueue_style( $child_style,
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ), // parent theme 의존
$child_style_ver
); // Parent 테마에 의존한 Child 테마 대기열 등록 및 버전(파일 생성 시각) 파라미터 추가
/* 구글 폰트 등록 */
wp_enqueue_style( $child_style . '-google-fonts', '//fonts.googleapis.com/css?family=Raleway|Noto+Sans', array( $child_style ) );
}코드는 단순하게 get_option 함수로 관리자페이지에서 테마를 활성화할 때 저장하는 데이터베이스의 데이터를 불러와 Parent, Child 테마의 템플릿 이름에 할당한 것입니다. 데이터베이스 데이터에 관하여 앞에서 그림으로 이미 안내하였습니다.
이렇게 정의하면 특정 테마의 Child 테마를 만들 때 디렉터리 이름 등의 파악과 결정 후 style.css 파일만 간단하게 일부 변경하고 functions.php 파일은 그대로 사용하면 되므로 편리합니다.
페이지 템플릿, 인클루드, screenshot.png
Child 테마를 만든다면, style.css, functions.php 파일 외에도 screenshot.png, 페이지 템플릿 디렉터리를 함께 만들면 편리합니다.
페이지 템플릿
워드프레스는 특정 포스트나 그룹(아카이브)에 사용자의 의도로 정의하여 사용할 수 있는 ‘페이지 템플릿’ 기능을 제공합니다. Child 테마를 사용할 때도 페이지 템플릿을 만들어 폼 요소를 특정 포스트에 출력하는 등의 페이지 템플릿을 만들 때가 있습니다. 페이지 템플릿은 필요할 때 만들면 되는데, Parent 또는 Child 테마 루트에 특정 헤더 텍스트로 파일을 만들면 자동으로 워드프레스가 인식합니다.
이때 page-templates 이름의 디렉터리를 만들어 페이지 템플릿을 파일을 넣으면 관리의 편리와 쉬운 파악에 도움이 되는데, 특히 이 디렉터리 이름은 워드프레스가 자동으로 인식하는 이름이므로 페이지 템플릿을 모은 디렉터리를 만들 때 이 이름을 사용하기 바랍니다.
screenshot.png
만들지 않아도 되지만, 가끔 관리페이지에서 Parent 테마와 착각할 때가 있으므로 Parent 테마의 screenshot.png 파일을 기준으로 간단하게 편집하여 함께 추가하면 좋습니다.
인클루드
워드프레스를 사용할 때 새로운 기능을 위한 스니핏 코드를 추가할 때가 있습니다. functions.php 파일에 추가해도 되지만, 테마의 범위를 벗어난 기능은 별도의 파일을 만들고, 그 파일을 functions.php 파일에 인클루드하면 관리가 더 편합니다.
이 포스트에서 제공하는 기본 테마의 완성 Child 테마에는 header-style.php 파일을 인클루드하였는데, 이 파일은 CSS 코드를 추가하여 사이트의 스타일을 변경할 때 사용하기 위해 추가한 것입니다. 파일의 코드는 다음과 같습니다.
add_action( 'wp_head', 'sitewide_header_style', 99 );
function sitewide_header_style() { ?>
<style>
/* 아래에 추가 */
</style>
<?php
}Child 테마를 만들 때 핵심 파일 style.css는 Child 테마를 구성할 때 필요한 파일이므로 만들지만, CSS 코드는 style.css 파일에 추가하는 것이 아니라 header-sytle.php 파일에 추가하여 사이트 전역에 적용하는 게 좋은 때가 많습니다. 로드 순서(99)를 늦춰 설치한 플러그인의 스타일도 변경할 수 있습니다. 이 파일에 추가한 CSS 코드는 Html 소스 </head> 위에 추가됩니다.
물론, 이 파일을 사용하지 않고 style.css 파일에 CSS 코드를 추가해도 됩니다. 또, 사이트 운용 중에 새로운 기능의 코드 추가가 필요하다면 파일을 추가 후 인클루드하여 적용해보세요.
자세한 구성은 완성 Child 테마를 받아 확인하면 쉽게 알 수 있습니다.
워드프레스 기본 테마의 완성 Child 테마
다음 목록은 twentyfifteen, twentysixteen, twentyseventeen 워드프레스 기본 테마 3종의 Child 테마를 받을 수 있는 페이지입니다. 필요할 때 받아서 사용하면 되고, 각 테마의 style.css 파일의 헤더 텍스트만 다르며, 나머지는 모두 같습니다.
기본 테마가 아니라 특정 테마의 Child 테마를 만든다면 위의 파일 중 아무거나 받은 후 (Child) 테마 디렉터리 이름을 정하여 변경하고, Parent 테마의 디렉터리 이름만 파악 후 style.css 헤더 텍스트 Template 항목을 기존 이름과 대체하고, 나머지는 원하는 것으로 설정하여 사용하면 됩니다.
정리
Child 테마를 만드는 데 Child 테마를 만드는 저장소 플러그인을 설치하여 만드는 것보다 이 포스트를 참고하거나 제공하는 완성 Child 테마를 받아 style.css 파일의 일부 글자만 변경하여 직접 만들어 사용하세요. 간단한 코드만 복사해서 추가하면 쉽게 구현할 수 있는 기능은 넘쳐납니다.