워드프레스 자식 테마 (Child Theme) 만드는 법

자식 테마 (Child Theme) 란?

자식 테마 (Chile Theme)란 부모 테마 (Parent Theme)의 기능을 상속받는 테마를 말한다. (참고: WordPress Codex) 워드프레스에서 마음에 드는 테마를 찾아서 적용하다 보면 뭔가 아쉬운 부분이 있어 내가 직접 수정하고 싶다고 느낄 때가 있다. 이때 테마 파일을 직접 수정하면 나중에 해당 테마가 업데이트될 때 수정한 파일이 덮어 씌어 지기 때문에 그동안 노력한 것이 모두 사라질 위험이 있다. 실제로 워드프레스의 테마 편집기에서 현재 테마를 직접 수정하려고 할 경우 아래와 같은 경고 문구를 확인할 수 있다.

"같은 테마의 새 버전으로 업그레이드는 여기서 만들어진 변경사항을 덮어쓰기 합니다. 이를 피하려면 대신 자식테마사용을 검토해보세요."

자식 테마 만드는 방법

테마 디렉토리 구조

현재 이 블로그의 테마는 Neve 이기 때문에 Neve 테마 기준으로 작성한다. 워드프레스의 테마는 아래와 같은 디렉토리 구조를 갖는다. ($WP_HOME: wordpress의 root 디렉토리)

• $WP_HOME
  • wp-content
    • themes
      • neve (parent theme)
        • style.css
        • functions.php
        • ....
      • neve-child (child theme)
        • style.css
        • functions.php

style.css, functions.php 외에 template file 등 다른 파일들도 있지만 일반적인 경우 두 파일만 필요할 것이다.

자식 테마를 만들기 위해서는 themes 디렉토리에 neve-child와 같이 [parent_theme_name]-child 이름으로 디렉토리를 생성하고 style.css 파일을 작성해주면 된다. 참고로 style.css는 반드시 존재해야 하는 파일이며, functions.php는 작성할 필요가 없다면 굳이 만들지 않아도 된다.

style.css 파일

style.css 파일은 자식 테마 디렉토리에 반드시, 유일하게 존재해야 한다. style.css 파일의 헤더를 아래와 같이 작성해 주자. (예시)

@charset "UTF-8";
/*
Theme Name:     Neve Child
Theme URI:      https://themeisle.com/themes/neve/
Author:         author_name
Author URI:     author_uri
Description:    Child theme of Neve
Template:	    neve
Version:        0.1
*/

각 부분은 아래와 같은 의미를 갖는다.

• • Theme Name (필수) : 자식 테마의 이름.
  • Theme URI (옵션) : 자식 테마 사이트의 주소.
  • Author (옵션) : 테마 작성자의 이름.
  • Author URI (옵션) : 테마 작성자 사이트의 주소.
  • Description (옵션) : 테마에 대한 설명.
  • Template (필수) : 부모 테마 디렉토리의 이름. 대/소문자를 구분하며 이 예시에서는 neve에 해당한다.
  • Version (옵션) : 자식 테마 버전

헤더 뒤쪽에 본인이 원하는 대로 내용을 작성하면 된다. WordPress Codex 에 따르면 @import url(...) 로 부모 테마의 스타일시트 규칙을 가져오고 그 뒤쪽에 부모 테마의 규칙을 덮어쓰는 내용을 작성해야 한다고 하니 참고하자.

functions.php 파일

자식 테마의 functions.php 파일은 부모 테마의 functions.php 파일보다 먼저 로드되며, 사용자가 필요에 따라 사이트에 여러 가지 기능들을 추가/수정할 수 있도록 해준다. functions.php파일의 첫 부분에는 자식 테마와 부모 테마의 stylesheet (style.css)를 읽어오는 기능을 작성해야 한다. WordPress.org의 문서에 따르면 자식 테마의 functions.php 파일은 부모 테마가 stylesheet를 어떻게 불러들이는지에 따라 작성해야 하는 내용이 다르다. 크게 어렵지 않은 내용이니 아래 문서를 직접 참고해 작성하면 될 것 같다.

Child Themes | Theme Developer Handbook | WordPress Developer Resources

A child theme allows you to change small aspects of your site's appearance yet still preserve your theme's look and functionality. To…

WordPress Developer Resources

하지만 일반적인 경우에 그렇다는 것이고, 테마 작성자가 직접 자식 테마 생성법을 배포하고 있다면 그 것을 따르는 것이 가장 좋다. Neve 테마의 경우 자식 테마 생성에 필요한 파일들(style.css, function.php, screenshot.png)을 배포하고 있으니 안내 페이지에서 직접 다운로드 받아 function.php 파일을 작성하면 된다.

Neve에서 안내한 바에 따르면 functions.php 파일은 아래와 같이 작성해 준다.

<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
if ( ! function_exists( 'neve_child_load_css' ) ):
	/**
	 * Load CSS file.
	 */
	function neve_child_load_css() {
		wp_enqueue_style( 'neve-child-style', trailingslashit( get_stylesheet_directory_uri() ) . 'style.css', array( 'neve-style' ), NEVE_VERSION );
	}
endif;
add_action( 'wp_enqueue_scripts', 'neve_child_load_css', 20 );

뒤쪽에 본인이 추가/수정하고싶은 기능을 코드로 작성하면 된다.

screenshot.png 파일

부모 테마의 디렉토리에는 screenshot.png 파일이 있다. 워드프레스에서 테마 디자인 > 테마 에 들어갔을 때 보이는 썸네일을 지정해주는 역할을 한다. 이 파일이 없으며 화면이 심심하니까 부모 테마의 screenshot.png를 자식 테마 디렉토리에 복사해 주자.

자식 테마 적용

테마 디자인 > 테마 에서 새로 작성한 자식 테마를 적용해 주자.

아직 functions.php나 style.css를 수정하지 않았으므로 블로그에서 수정된 부분은 없을 것이다. 하지만 앞으로 블로그에 새로운 기능을 추가하고 싶을 때 간단하게 자식 테마의 파일들을 수정하면 된다.

끝.

• 2020.05.23 - Neve-child 공식 배포 파일 관련 내용 업데이트