자녀 테마를 활용하여 워드프레스 커스터마이징을 안전하게 하자

by

왜 자녀 테마(Child Theme)을 이용해야 하는가

워드프레스는 다양한 테마와 플러그인을 통해 운영자의 입맛에 맞는 블로그나 고객의 요구에 맞는 홈페이지를 구축할 수 있는 유연성을 제공합니다. 하지만 테마를 직접 수정하거나, 테마 폴더 안의 특정 파일을 수정할 경우 테마 업데이트 시 애써 한 작업이 모두 초기화될 위험이 있습니다. 이를 방지하기 위해 자녀 테마(Child Theme)를 사용하는 것은 매우 안전하고 권장되는 방법입니다. 자녀 테마를 사용하면 기본 테마(부모 테마)의 업데이트에도 커스터마이징한 요소들을 안전하게 유지할 수 있습니다. 이번에는 자녀 테마를 이용해 워드프레스 커스터마이징을 안전하게 진행하는 방법을 소개하겠습니다.

1. 자녀 테마(Child Theme)란?

자녀 테마는 부모 테마의 모든 기능과 디자인을 상속받으며, 그 위에 자유롭게 커스터마이징을 추가할 수 있는 테마입니다. 부모 테마를 업데이트해도 자녀 테마에서 수정했던 사항들은 유지되기 때문에, 사이트 유지보수와 커스터마이징 작업을 더욱 안전하고 효율적으로 관리할 수 있습니다. 자녀 테마를 사용하면 원본 테마 파일을 직접 수정할 필요 없이, CSS, 템플릿 파일, 기능 등을 커스터마이징할 수 있습니다.

2. 자녀 테마의 기본 구조

자녀 테마는 wp-content/themes 디렉토리 안에 있습니다.
다음의 구조는 일반적인 워드프레스 디렉토리 안에 있는 부모 테마 (twentytwentyone) 와 함께 자녀 테마의 위치를​​ 보여줍니다

  • public_html
    • wp-content
      • themes (모든 테마는 이 디렉토리에 있습니다)
        • twentyten (부모 테마 디렉토리 입니다)
        • twentyten-child (자녀 테마 디렉토리 입니다, 이름은 아무거나 할 수 있습니다)
          • style.css (자녀 테마에 필요한 파일입니다, 반드시 이름을 style.css로 해야합니다)

자녀 테마는 최소한 style.css 파일이 있어야 하며, 필요한 만큼 다른 파일을 넣을 수 있습니다

  • style.css (필수) : 부모 테마의 스타일을 가져오고, 추가적인 CSS를 작성하여 디자인을 수정할 수 있습니다.
  • functions.php (옵션) : 자녀 테마의 기능을 정의하거나 부모 테마의 함수를 확장할 수 있습니다.
  • Template files (옵션)
  • Other files (옵션)

3. 자녀 테마 생성하기

자녀 테마를 생성하려면, 먼저 wp-content/themes 디렉터리 내에 자녀 테마 폴더를 새로 만들어야 합니다. 예를 들어, 부모 테마의 이름이 “TwentyTwentyOne“이라면, 자녀 테마 폴더의 이름은 “twentytwentyone-child“와 같이 설정할 수 있습니다.

그다음, 자녀 테마 폴더 안에 style.css 파일을 생성하고, 아래와 같은 주석을 추가해야 합니다.

/*
Theme Name:     TwentyTwentyOne Child
Theme URI:      http: //example.com/
Description:    Child theme for the TwentyTwentyOne theme 
Author:         Your name here
Author URI:     http: //example.com/about/
Template:       twentytwentyone
Version:        0.1.0
*/
PHP
  • Theme Name: (필수) 자녀 테마의 이름
  • Theme URI: (옵션) 자녀 테마의 주소
  • Description: (옵션) 테마의 설명, 예시) 나의 첫 번째 자녀 테마
  • Author URI: (옵션) 사이트 제작자
  • Author: (옵션) 제작자 이름
  • Template: (필수) 부모 테마 디렉토리 이름, 대소문자를 구분합니다.
    • 주의❗ 이 라인을 수정할 때에는 다른 테마로 바꾼 후, 다시 자식 테마로 전환해야 합니다.
  • Version: (옵션) Child 테마 버전. 예: 0.1, 3.0, 등.

이후, 부모 테마의 스타일을 불러오기 위해 자녀 테마의 style.css 파일에 아래 코드를 추가합니다.

@import url("../twentytwentyone/style.css");
PHP

설명 : @import 로 부모 테마의 스타일시트 규칙을 가져옵니다.

이제 자녀 테마가 부모 테마의 스타일을 상속받으면서도 추가적인 스타일을 적용할 수 있습니다.
테마 파일 수정은 모양 > 테마 파일 편집기 에서 하실 수 있습니다.

자녀 테마를 활용하여 워드프레스 커스터마이징을 안전하게 하자 - 테마 파일 편집기
자녀 테마를 활용하여 워드프레스 커스터마이징을 안전하게 하자 - 테마 파일 편집기 예시 (GeneratePress의 자녀 테마)
테마 파일 편집기 예시 (GeneratePress의 자녀 테마)

4. 자녀 테마에서 CSS 수정

자녀 테마에서 가장 많이 사용하는 커스터마이징 방법 중 하나는 CSS를 수정하는 것입니다. style.css 파일에 추가된 CSS 코드는 부모 테마의 스타일을 덮어씁니다. 이렇게 하면 사이트의 디자인을 쉽게 변경할 수 있습니다. 예를 들어, 부모 테마에서 버튼의 기본 색상이 파란색일 때, 자녀 테마에서는 이를 빨간색으로 변경할 수 있습니다.

button {
    background-color: red;
}
CSS

위와 같이 자녀 테마의 style.css에 새로운 규칙을 추가하면, 부모 테마에서 설정된 스타일이 아닌 새로운 스타일이 적용됩니다.

5. PHP 함수 커스터마이징

부모 테마의 기능을 변경하거나 기능을 추가해서 적용하려면 functions.php 파일의 코드를 수정하거나 삽입하면 됩니다. functions.php는 테마의 주요 기능을 정의하는 파일로, 자녀 테마에서도 이를 활용해 부모 테마의 기능을 확장하거나 불필요한 기능은 제거할 수 있습니다. 예를 들어, 사이트에 새로운 위젯 영역을 추가하거나, 특정 기능을 비활성화하는 등의 작업을 할 수 있습니다.

// 새로운 위젯 영역 추가
function custom_sidebar() {
    register_sidebar(array(
        'name' => 'Custom Sidebar',
        'id' => 'custom-sidebar',
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));
}
add_action('widgets_init', 'custom_sidebar');
PHP

위 코드는 자녀 테마에서 새로운 위젯 영역을 추가합니다. 부모 테마의 위젯 영역과는 겹치지 않고 독립적으로 작동합니다.

6. 템플릿 파일 커스터마이징

자녀 테마에서는 부모 테마의 템플릿 파일도 수정할 수 있습니다. 이를 위해 부모 테마의 특정 템플릿 파일을 자녀 테마로 복사한 후, 필요한 부분을 수정하면 됩니다. 예를 들어, 헤더의 코드를 커스터마이징하려면 부모 테마의 header.php 파일을 자녀 테마 폴더로 복사한 후 수정하면 됩니다.

복사한 파일은 자녀 테마에서 우선하여 적용되며, 부모 테마의 파일 변경 없이 원하는 커스터마이징을 할 수 있습니다. 이 방법을 통해 부모 테마가 업데이트하더라도 수정 사항이 유지됩니다.

7. 자녀 테마 사용 시 주의할 점

자녀 테마를 사용할 때 주의해야 할 몇 가지 사항이 있습니다. 우선, 부모 테마가 업데이트되더라도 자녀 테마는 업데이트되지 않기 때문에, 자녀 테마의 style.css나 functions.php에서 문제가 발생하지 않도록 코드를 관리해야 합니다. 그뿐만 아니라 너무 많은 템플릿 파일을 복사하여 수정할 경우, 부모 테마의 업데이트에 따른 새로운 기능이 적용되지 않을 수 있으므로 필요한 부분만 수정하는 것이 좋습니다.

8. 플러그인과의 호환성 고려

자녀 테마에서 기능을 추가할 때는, 플러그인과의 호환성을 고려해야 합니다. 플러그인은 다양한 기능을 제공하지만 여러 가지 플러그인들을 설치하다 보면 자칫 자녀 테마의 functions.php에서 정의한 함수와 충돌이 발생할 수 있습니다. 이를 방지하기 위해 코드 작성 시 네임스페이스를 설정하거나, 조건문을 사용해 충돌을 최소화하는 방법을 고려해야 합니다.

// 네임스페이스 선언 예시 : 반드시 파일 시작 부분에 선언되어야 한다.
<?php
namespace Home;
?>
PHP

네임스페이스에 대해서 자세히 알고 싶으시다면 아래의 링크를 통해 확인하실 수 있습니다. 영문으로 되어 있기 때문에 크롬의 번역 기능을 사용하시면 편리하게 이해하실 수 있습니다.

W3Schools – PHP 네임스페이스 : https://www.w3schools.com/php/php_namespaces.asp

9. 끝으로

자녀 테마를 사용한 워드프레스 커스터마이징은 테마 업데이트의 안전성을 유지하면서 사이트의 기능성과 디자인을 자유롭게 변경할 수 있는 가장 적합한 유지관리 방법입니다. CSS와 PHP 코드를 이용한 자녀 테마 커스터마이징으로 테마 개발이 능숙하지 않아도 사이트를 자신만의 스타일로 손쉽게 변경할 수 있습니다. 무엇보다 자녀 테마를 사용함으로써 부모 테마의 변경 사항을 반영하면서도 자신만의 맞춤형 기능을 지속해서 유지할 수 있습니다.

관련 글

댓글 남기기