워드프레스 강좌 / 자식 테마(Child Theme)의 뜻과 만드는 방법, 장단점

자식 테마의 뜻

어떤 테마의 디자인과 기능을 그대로 상속 받는 테마를 자식 테마(Child Theme)라 합니다. 이때 상속해주는 테마를 부모 테마(Parent Theme)라 합니다.

자식 테마 만드는 방법

워드프레스의 기본 테마 중 하나인 Twenty Seventeen의 자식 테마를 만들어보겠습니다.

방법 1

wp-content/themes 폴더에 twentyseventeen-child 폴더를 만듭니다. (폴더 이름은 다른 것으로 해도 상관없습니다.)

twentyseventeen-child 폴더 안에 다음의 내용을 가진 style.css 파일을 만듭니다.

/*
  Theme Name: Twenty Seventeen Child Theme
  Template: twentyseventeen
*/
@import url( "../twentyseventeen/style.css" );

• Theme Name : 테마의 이름을 값으로 입력합니다. 원하는 이름으로 만드세요.
• Template : 부모 테마의 폴더 이름을 값으로 입력합니다. 정확히 입력하세요.
• 마지막 줄에 있는 twentyseventeen은 부모 테마의 폴더 이름입니다.

방법 2

wp-content/themes 폴더에 twentyseventeen-child 폴더를 만듭니다. (폴더 이름은 다른 것으로 해도 상관없습니다.)

twentyseventeen-child 폴더 안에 다음의 내용을 가진 style.css 파일을 만듭니다.

/*
  Theme Name: Twenty Seventeen Child Theme
  Template: twentyseventeen
*/

• Theme Name : 테마의 이름을 값으로 입력합니다. 원하는 이름으로 만드세요.
• Template : 부모 테마의 폴더 이름을 값으로 입력합니다. 정확히 입력하세요.

twentyseventeen-child 폴더 안에 다음의 내용을 가진 functions.php 파일을 만듭니다.

<?php
  function theme_enqueue_styles() {
    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' ) );
  }
  add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

테마 활성화

이제 [테마 디자인 - 테마]로 가면 테마가 추가된 것을 확인할 수 있고, 활성화할 수 있습니다.

참고

썸네일

테마 목록에 썸네일이 나오게 하고 싶다면 부모 테마의 screenshot.png를 자식 테마로 복사해 넣으면 됩니다.

테마 정보

style.css에 추가할 수 있는 내용은 더 많습니다.

/*
  Theme Name:     xxxx
  Theme URI:      xxxx
  Description:    xxxx
  Author:         xxxx
  Author URI:     xxxx
  Template:       xxxx
  Version:        xxxx
*/

이 중에서 Theme Name과 Template만 필수이고, 나머지는 옵션입니다.

방법 1과 방법 2

방법 2가 만들기에는 번거롭지만, 방법 1보다 방법 2가 성능면에서 더 좋다고 합니다.

자식 테마 작동 방식

자식 테마에 없는 파일은 부모 테마의 것을 사용합니다.

• index.php 파일이 필요하다면 자식 테마에서 먼저 찾은 후, 없으면 부모 테마에서 찾습니다.
• header.php 파일이 필요하다면 자식 테마에서 먼저 찾은 후, 없으면 부모 테마에서 찾습니다.

단, functions.php는 예외입니다. 부모 테마의 functions.php에 자식 테마의 functions.php를 추가합니다.

자식 테마의 수정

스타일 수정

일반적으로 스타일만 수정할 것이라면 style.css에 수정할 코드를 넣으면 됩니다. (테마에 따라 수정할 곳이 다를 수 있습니다.)

템플릿

템플릿을 수정하고 싶다면, 수정하려는 템플릿을 자식 테마의 폴더로 복사한 후 수정합니다.

예를 들어 header.php를 수정하고 싶다면, 부모 테마에 있는 header.php를 자식 테마의 폴더로 복사한 후 수정합니다.

functions.php

자식 테마의 functions.php에 코드를 추가합니다.

부모 테마의 functions.php를 복사해오면 안됩니다. 부모 테마의 functions.php 내용에 자식 테마의 functions.php 내용을 추가하기 때문입니다.

장점

테마를 업데이트하면 기존 내용이 사라지고 새 테마가 설치됩니다. 따라서 부모 테마를 직접 수정했다면, 테마를 업데이트했을 때 수정했던 것이 다 사라집니다.

하지만 자식 테마를 사용하면, 수정은 자식 테마에서 하므로 수정한 내용을 유지할 수 있습니다.

단점

예를 들어 부모 테마에서 자식 테마로 header.php를 복사한 후, 부모 테마의 업데이트로 header.php가 변경되었을 때, 자식 테마에는 그 내용이 반영되지 않습니다.

따라서 템플릿 파일을 자식 테마에서 수정했다면 부모 테마를 업데이트했을 때 문제가 발생할 수 있습니다. 만약 문제가 발생하지 않더라도 보안 업데이트 등 중요한 변화를 놓칠 수 있습니다.

자식 테마를 사용할까 말까?

스타일을 수정하거나, 부모 테마에 없는 것을 추가하는 경우에는 자식 테마를 사용하는 게 좋습니다.

만약 부모 테마에 있는 템플릿 파일 등 주요 파일을 수정하는 경우라면 자식 테마 사용에 주의를 기울여야 합니다. 테스트 사이트를 만들어서, 부모 테마를 업데이트를 했을 때 문제가 없는지 꼭 확인해야 합니다.