전 세계 웹사이트의 약 23%가 워드프레스로 운영되고 있으며, 많은 사용자가 자신이 사용하는 테마를 다양한 방식으로 커스터마이징해야 하는 상황에 직면합니다. 일부 사용자는 테마 파일을 직접 수정하는 방법을 선택하지만, 이 방식에는 큰 문제가 있습니다. 바로 테마가 업데이트되면 모든 수정 사항이 사라진다는 점입니다. 이때 필요한 것이 바로 '하위 테마(차일드 테마)'입니다.
하위 테마란 무엇인가?
하위 테마는 부모 테마의 기능과 스타일을 그대로 물려받는 커스텀 테마입니다. 하위 테마를 만들어 두면 부모 테마를 손쉽게 수정할 수 있을 뿐만 아니라, 부모 테마가 업데이트되더라도 변경 사항이 그대로 유지됩니다.
하위 테마의 개념을 이해했다면, 이제 하위 테마를 만드는 몇 가지 방법과 따라야 할 모범 사례를 살펴보겠습니다.
시작하기
이 튜토리얼에서는 Twenty Fifteen 테마를 예로 들지만, 어떤 테마를 사용하더라도 동일한 방법으로 적용할 수 있습니다.
하위 테마를 만들려면 먼저 "wp-content/themes" 디렉터리로 이동한 뒤, 하위 테마용 새 폴더를 생성합니다. 폴더 이름은 "twentyfifteen-child"처럼 지정하면 됩니다.
다음으로, 새로 만든 하위 테마 폴더 안에 "style.css" 파일을 생성하고 아래 내용을 입력합니다:
/* Theme Name: Twenty Fifteen Child Theme URI: https://www.maketecheasier.com Description: Twenty Fifteen Child Author: Ayo Isaiah URI: https://www.maketecheasier.com/author/ayoisaiah Template: twentyfifteen Version: 1.0.0 */
테마 이름, URI, 설명, 작성자 이름은 자신의 하위 테마에 맞게 자유롭게 수정할 수 있습니다. 단, "Template" 항목은 반드시 부모 테마의 디렉터리 이름과 동일하게 작성해야 합니다.
이 예제에서 부모 테마의 디렉터리 이름은 "twentyfifteen"이므로 Template 값도 "twentyfifteen"으로 설정합니다. 다른 테마를 사용한다면 Template 값을 해당 테마 이름에 맞게 변경해야 하며, 그렇지 않으면 하위 테마가 정상적으로 작동하지 않습니다.
다음 단계는 부모 테마의 스타일시트를 올바르게 불러오는(enqueue) 것입니다. 이렇게 해야 하위 테마가 부모 테마의 스타일을 상속받아 그 위에 원하는 스타일을 추가할 수 있습니다. 일부 사이트에서는 @import를 사용하라고 안내하지만, 이제는 권장되지 않는 방식이므로 피하는 것이 좋습니다.
부모 테마 스타일을 불러오는 가장 좋은 방법은 하위 테마 폴더에 "functions.php" 파일을 만들고 아래 코드를 추가하는 것입니다:
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
여기서 핵심은 "parent-style"을 부모 테마 디렉터리 이름 뒤에 "-css"를 붙인 형태로 바꾸는 것입니다. 이 예제에서는 "twentyfifteen-css"가 됩니다.
이것으로 끝입니다. 이제 하위 테마를 활성화할 준비가 되었습니다.
하위 테마 활성화하기
하위 테마를 활성화하는 과정은 일반 테마와 완전히 동일합니다. 워드프레스 관리자 화면에서 "외모 → 테마(Appearance → Themes)" 메뉴로 이동한 후 하위 테마를 활성화하면 됩니다.
플러그인으로 하위 테마 만들기
하위 테마 생성 과정을 더 빠르게 처리하고 싶다면 무료 플러그인을 활용해 자동으로 만들 수도 있습니다. One-Click Child Theme 플러그인을 사용하면 버튼 클릭 한 번으로 간단히 완료됩니다. 플러그인을 설치하고 활성화한 뒤, 관리자 화면에서 "외모 → 차일드 테마(Appearance → Child Theme)" 메뉴로 이동하여 하위 테마 관련 정보를 양식에 입력합니다. 모두 입력한 후 "Create Child" 버튼을 누르면 하위 테마가 생성되고 자동으로 활성화됩니다.
커스터마이징 시작하기
테마가 활성화되면 웹사이트에 접속해 화면이 어떻게 표시되는지 확인해 보세요. 모든 과정을 올바르게 진행했다면 부모 테마와 완전히 동일하게 보일 것입니다. 이 시점부터 하위 테마의 style.css 파일에 커스텀 CSS를 추가해 부모 테마의 스타일을 덮어쓸 수 있습니다. 하위 테마에서 선언한 스타일이 부모 테마의 스타일보다 우선 적용되므로, 이제는 작업 내용을 잃어버릴 걱정 없이 부모 테마를 마음껏 업데이트할 수 있습니다.
웹사이트에 새로운 기능을 추가하고 싶다면 하위 테마의 "functions.php" 파일에 함수를 선언하면 됩니다. 이 파일은 부모 테마의 "functions.php" 파일과 함께 로드됩니다.
그 외 템플릿 파일 다루기
functions.php 외의 다른 PHP 파일은 하위 테마 디렉터리로 복사한 후 그곳에서 수정해야 합니다. functions.php와 달리, 다른 템플릿 파일은 부모 테마의 동일한 파일 대신 하위 테마의 파일이 우선 적용되기 때문입니다. 따라서 모든 것이 원활하게 작동하도록 하위 테마 내에서 부모 테마와 동일한 경로 위치에 원본 파일을 배치해야 합니다.
마무리
이제 웹사이트 커스터마이징에 하위 테마가 왜 필요한지, 그리고 어떻게 만드는지 알게 되었으니 더 이상 테마 파일을 직접 수정할 이유가 없습니다. 추가로 궁금한 점이 있다면 아래에 댓글을 남기거나 WordPress Codex를 참고해 하위 테마에 대한 더 자세한 정보를 확인하세요.