워드프레스에서 테마 파일을 수정하는 경우 테마가 업데이트되면 수정 사항이 초기화되어 사라지게 됩니다. 이런 문제를 방지하기 위해 테마 파일을 수정하는 경우 자식 테마를 만들어 작업하는 것이 안전합니다.
자식 테마(차일드 테마 또는 하위 테마라고도 함)를 만드는 방법은 워드프레스 공식 문서에 잘 설명되어 있습니다.
참고로 한국어 버전도 있지만 이전 방법이 설명되어 있으므로 워드프레스 문서를 참고하는 경우 영어 버전을 보시기 바랍니다.
자식 테마를 만드는 방법
Twenty Seventeen 테마를 예를 들어 자식 테마를 만드는 방법을 설명해보겠습니다.
먼저 FTP에 접속하여 자식 테마 폴더를 만듭니다. 테마 폴더는 /wp-content/themes/ 폴더에 위치해 있습니다. Twenty Seventeen의 자식 테마의 경우 twentyseventeen-child 폴더를 만들 수 있습니다. 그러면 최종 경로는 /wp-content/themes/twentyseventeen-child가 됩니다. 폴더 이름은 임의로 지정할 수 있습니다.
FTP 사용법은 다음 글을 참고해보시기 바랍니다.
이제 자식 테마 폴더로 이동한 후에 다음과 같이 두 개의 파일을 만듭니다.
- style.css
- functions.php
style.css 파일에는 다음과 같은 내용을 복사합니다.
/*
Theme Name: Twenty Seventeen Child
Theme URI: https://wordpress.org/themes/twentyseventeen/
Description: Twenty Seventeen Child Theme
Author: the WordPress team
Author URI: https://wordpress.org/
Template: twentyseventeen
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: twenty-twentyseventeen-child
*/여기서 중요한 것은 Template 라인입니다. 부모 테마의 폴더(위의 경우 twentyseventeen)를 정확히 입력합니다.
나머지 내용은 원하는 대로 입력하도록 합니다.
자식 테마의 style.css 파일을 사용하지 않을 경우 functions.php 파일에는 다음과 같은 내용을 입력합니다.
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>만약 자식 테마의 style.css 파일에 실제 CSS 코드를 입력하는 경우 funcitons.php 파일에 다음과 같은 내용이 포함되어야 합니다.
<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>원하는 경우 부모 테마 디렉터리 내의 스크린샷 파일(screenshot.png)을 복사하여 자식 테마 디렉터리에 붙여넣어도 됩니다.
이제 워드프레스 관리자 페이지로 로그인하여 외모 > 테마로 이동하면 자식 테마가 추가되어 있는 것을 확인할 수 있습니다.
자식 테마를 활성화하도록 합니다.
header.php 파일을 수정해야 하는 경우, 부모 테마 폴더 내의 header.php 파일을 자식 테마 폴더로 복사한 다음에 수정하면 됩니다.
CSS 코드를 추가해야 하는 경우에는 자식 테마 폴더 내의 style.css 파일에 코드를 추가합니다. 예를 들어, 푸터의 Proudly powered by WordPress 문구를 숨기려면 다음과 같은 코드를 자식 테마 폴더 아래의 style.css 파일에 추가합니다.
.site-info {
display: none;
}간단하게 자식 테마를 만드는 방법
위의 과정이 복잡해 보이면 간단히 Child Theme Configurator 같은 플러그인을 하나 설치하면 간단히 자식 테마를 만들 수 있습니다.
저는 귀찮아서 이 플러그인을 사용하여 자식 테마를 만드는 편입니다.
아바다 등 일부 유료 테마에서 자식 테마 설치 파일을 함께 제공하기도 합니다. 그런 경우 테마에 포함된 자식 테마 설치 파일을 사용하여 자식 테마를 만들면 됩니다.
참고로 많은 글에서 자식 테마를 만들 때 다음과 같이 @import를 사용하여 부모 테마의 스타일시트 파일을 로드하는 방법을 소개하고 있습니다.
/*
Theme Name: Twenty Seventeeen Child
Template: twentyseventeen
*/
@import url(../twentyseventeen/style.css);이 방법은 예전에 사용되던 방법으로, 외부 스타일시트에서 CSS @import를 사용하면 웹 페이지 로드 중에 추가적인 딜레이(지연 현상)가 발생할 수 있어 이 방법은 권장되지 않습니다.
