워드프레스 차일드 테마 설치 방법

차일드 테마(Child Theme)

초보자를 위한 워드프레스 차일드 테마 설치 방법에 대한 글입니다. 자식 테마(Child Theme)가 무엇이며 설치 목적과 방법에 대해 정리해 봤습니다. 자식 테마를 직접 만들어 설치하는 방법과 플러그인을 사용하는 법에 대해서도 간략히 적어봅니다.

부모 테마와 자식 테마

부모 테마(Parent Theme)은 워드프레스 사이트를 제작 시 설치하는 테마입니다. 부모 테마를 상위 혹은 기존 테마로도 부르는 데 워드프레스 템플릿 파일과 에셋(asset), 즉 테마가 작동하는 데 필요한 모든 구성요소를 포함합니다.

워드프레스 사이트를 제작하면 추가적으로 설치하는 테마를 자식 테마(Child Theme), 하위 또는 추가 테마로도 불립니다. 자식 테마는 상위 테마의 외형이나 기능을 상속하지만 부모 테마의 파일과 별도로 관리를 할 수 있는 기능을 갖춥니다.

차일드 테마(Child Theme)

워드프레스 테마는 보안과 기능 개선 등을 위해 계속적으로 업데이트가 이뤄지는 데 이때 사용자가 테마의 파일을 변경한 부분이 있다면 모두 초기화됩니다. 따라서 사용자는 테마를 업데이트 전 상태로 돌리기 위해 재작업을 해야 하는 상황이 발생할 수 있습니다.

하지만 자식 테마를 설치해 두면 사용자의 파일 변경 사항을 그대로 유지하여 업데이트된 테마에 적용할 수 있습니다. 즉, 테마가 업데이트된다고 해도 사용자가 설정한 CSS 파일이나 PHP 파일은 그대로 유지가 됩니다.

차일드 테마 필요성

워드프레스로 사이트를 제작 시 테마 파일을 변경해야 될 경우가 발생합니다. 만약 사이트 제작과 운영을 위해 CSS를 조정하거나 지속적으로 PHP 코드를 삽입해야 한다면 반드시 자식 테마를 설치하고 활용할 필요가 있습니다. 테마 변경을 위해 지나친 테마 파일의 수정은 문제가 될 수도 있으니 주의를 기울여야 합니다.

만약 코딩에 익숙하지 않거나 CSS와 PHP 파일을 변경할 가능성이 높지 않다면 자식 테마 설치가 필요 없을 수도 있습니다. 사실 워드프레스 테마가 잘 만들어진 완성에 가깝고 코드 작업을 하지 않더라도 테마를 변경할 수 있습니다. 즉, 자식 테마가 중요한 역할을 하지만 모든 사용자에게 자식 테마가 필요한 것은 아닙니다.

차일드 테마 설치방법

자식 테마 지원

우선, 자식 테마 설치에 들어가기 전에 자신의 테마가 자식 테마를 제공하는 지를 먼저 확인할 필요가 있습니다. 사용자가 많은 무료 테마 그리고 유료 테마는 자식 테마를 지원하고 있습니다. 따라서, 직접 만들거나 플러그인을 설치할 필요가 없습니다.

oceanwp 차일드 테마 다운로드
OceanWP Child Theme

OceanWP 테마를 이미 설치했다면 알림판에서 OceanWP 테마 패널로 들어가면 자식 테마를 설치할 수 있습니다. Astra 테마의 경우 해당 사이트에서 자식 테마를 생성해서 Zip 파일로 다운로드 받을 수 있습니다.

Astra 사이트_차일드 테마 생성
Astra Child Theme

플러그인 활용 차일드 테마 설치

테마가 자식 테마를 지원하지 않는다면 자식 테마를 만들어 설치하면 됩니다. 간단한 작업이지만 파일을 만들어 파일질라 등을 이용해 업로드하는 작업이 낯설고 번거롭게 느껴진다면 플러그인을 사용하면 됩니다. 가장 많이 사용하는 자식 테마 플러그인은 Child Theme Configurator이며 그외에도 Child Theme WIzard, Generate Child Theme 플러그인을 주로 활용합니다.

child-theme-configurator

주의사항은 자식 테마 플러그인을 설치 전 반드시 현재 사용하고 있는 워드프레스 버전과 호환이 되는지, 최근 업데이트 날짜가 언제인지를 확인할 필요가 있습니다. 다음은 Child Theme Configurator 플러그인 설치 방법입니다.

Child Them Configurator 플러그인 설치 방법

a. Child Theme Configurator 플러그인을 설치하면 알림판의 도구(Tools)에 플러그인이 나타납니다. 도구에서 Child Theme을 선택하여 들어갑니다.

child theme configurator 설치_1

b. Child Theme Configurator의 첫 화면 2번 사항에서 부모 테마, 즉 자신의 테마를 선택해 주고 Analyze 버튼을 누르면 하단에 9가지 선택 사항이 나타납니다. 기존의 사항을 특별히 변경할 필요가 없으나 읽어보고 변경하고 싶은 사항을 선택합니다. 자식 테마의 이름은 사용자가 정하기 나름이니 변경하고 싶을 경우 7번에서 수정할 수 있습니다.

child theme configurator 설치_3

c. 제일 하단에 9번에서 Create New Child Theme 버튼을 누르면 자식 테마가 설치가 완성되었다는 문구가 최상단에 나타납니다. 문구 우측에 Preview Child Theme이 있으니 활용하기 바랍니다.

child theme configurator 설치_4

차일드 테마 제작 설치

자식 테마는 웹 관련 지식이 없더라도 어렵지 않게 만들어 설치할 수가 있습니다. 먼저 테마명-child 이름을 가진 폴더를 생성한 뒤 style.cssfunctions.php 파일을 만들어 넣어줍니다. 그리고 이 폴더를 FTP를 이용해 theme 폴더 안에 업로드해 주면 되는 간단한 작업입니다.

OceanWP 테마를 예시로 자식 테마를 만들어 설치하는 방법을 알아보겠습니다.

1. oceanwp-child라는 자식 테마 폴더를 만듭니다. 반드시 대, 소문자를 구별해야 하며 문자에 띄어쓰기가 없어야 합니다.

2. html 편집기나 메모장 등을 이용하여 아래 사항을 붙여 넣고 style.css 파일을 만듭니다. Theme NameTemplate만이 필수 사항이며 다른 항목은 생략하여도 무방합니다.

/*
Theme Name:    oceanwp
Theme URI:      http: //example.com/
Description:    Child theme for the OceanWP theme
Author:         Your name
Author URI:     http: //example.com/about/
Template:       oceanwp
Version:        0.1.0
*/

3. 다시 편집기를 활용하여 아래 사항을 넣고 functions.php 파일을 만들어 줍니다.

<?php
function oceanwp_enqueue_styles() {
     $parent_style = ‘parent-style’;
     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’, ‘oceanwp_enqueue_styles’ );
?>

4. 앞서 만든 style.css와 functions.php 두 파일을 oceanwp-child 폴더에 넣고 파일질라 혹은 호스팅 업체의 File Manager에 접속해 theme 폴더 아래 넣어주면 마무리됩니다.

아래는 일반적인 워드프레스 디렉토리 안에 있는 부모 테마와 자식 테마의 위치입니다. 만약 호스팅 서비스 File Manager에 접속하여 파일을 업로드할 경우 디렉토리 구조가 아래와 다소 다를 수 있습니다.

  • public_html
    • wp-content
      • themes 
        • oceanwp 
        • oceanwp-child 
          • style.css 

맺음말

워드프레스 제작과 운영 중에 테마 파일 변경을 위해 CSS 및 php 파일 작업을 할 경우 반드시 차일드 테마를 설치하길 추천드립니다. 자식 테마는 테마 파일 변경을 하지 않더라도 설치해 두면 테마 업데이트로 인한 오류 발생 시 안전장치가 될 수도 있습니다.

설치한 테마가 자식 테마를 지원되지 않더라도 자식 테마를 생성이 어렵지 않으니 만들어 보거나 혹은 플러그인을 이용해 설치하면 되겠습니다.

#워드프레스 무료 테마 추천