워드프레스를 쓰다 보면 테마를 조금씩 손보고 싶어집니다.
글꼴을 바꾸거나, 여백을 조정하거나, 없는 기능을 추가하고 싶어지죠.
그런데 여기서 많은 사람이 같은 실수를 합니다. 테마 파일을 직접 수정하는 것입니다.
그리고 얼마 뒤 테마 업데이트를 하고 나면, 애써 수정한 내용이 흔적도 없이 사라진
것을 발견하게 됩니다.
이 문제를 막아 주는 것이 차일드 테마(child theme) 입니다. 이 글에서는 차일드 테마가
무엇이고 왜 필요한지, 그리고 직접 만드는 방법을 정리했습니다.
왜 테마를 직접 수정하면 안 될까
테마 업데이트는 기존 파일을 새 버전으로 덮어쓰는 방식으로 이루어집니다. 내가 수정한
부분만 남겨 두고 나머지를 바꾸는 것이 아니라, 파일 전체를 새것으로 교체합니다.
그래서 원본 테마 파일을 수정해 두었다면, 업데이트하는 순간 그 내용이 모두 사라집니다.
그렇다고 업데이트를 안 할 수도 없습니다. 테마 업데이트에는 보안 문제 수정과 오류 해결이
포함되어 있어, 미루면 사이트가 위험해집니다.
즉 이런 딜레마가 생깁니다. 업데이트를 하면 수정한 게 날아가고, 안 하면 보안이 위험해집니다.
차일드 테마는 이 딜레마를 해결합니다.
차일드 테마란 무엇일까
차일드 테마는 기존 테마(부모 테마)를 그대로 물려받으면서, 내가 바꾸고 싶은 부분만 따로 담아 두는
별도의 테마입니다.
작동 방식은 이렇습니다. 워드프레스는 사이트를 보여줄 때 먼저 차일드 테마에 해당 설정이 있는지
확인합니다. 있으면 그것을 쓰고, 없으면 부모 테마의 것을 씁니다.
집으로 비유하면, 부모 테마는 기본 골조이고 차일드 테마는 그 위에 덧붙이는 내 취향의 인테리어입니다. 골조를 보수해도(부모 테마 업데이트) 내가 붙여 둔 인테리어는 그대로 남습니다.
이 구조 덕분에 부모 테마를 마음 놓고 업데이트할 수 있습니다.
차일드 테마 만들기
직접 만들어 보겠습니다. 여기서는 GeneratePress를 부모 테마로 예를 들지만, 다른 테마도 방식은
같습니다.
필요한 것은 폴더 하나와 파일 두 개뿐입니다.
1단계: 폴더 만들기
워드프레스가 설치된 위치에서 테마 폴더로 이동합니다. 경로는 다음과 같습니다.
/wp-content/themes/이 안에 새 폴더를 만듭니다. 이름은 보통 부모 테마 이름 뒤에 -child를 붙입니다.
generatepress-child파일 접근은 호스팅 업체가 제공하는 파일 관리자나 FTP 프로그램을 이용하면 됩니다.
2단계: style.css 파일 만들기
방금 만든 폴더 안에 style.css 파일을 만들고, 아래 내용을 넣습니다.
/*
Theme Name: GeneratePress Child
Template: generatepress
Version: 1.0.0
*/여기서 가장 중요한 것은 Template 항목입니다. 부모 테마의 폴더 이름을 정확히 적어야 합니다.
대소문자까지 정확해야 하며, 틀리면 차일드 테마가 작동하지 않습니다.
부모 테마의 폴더 이름은 /wp-content/themes/ 안에서 확인할 수 있습니다.
이 주석 아래에는 원하는 CSS를 자유롭게 추가하면 됩니다.
3단계: functions.php 파일 만들기
같은 폴더 안에 functions.php 파일을 만들고 아래 내용을 넣습니다.
<?php
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );
function child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}이 코드는 부모 테마의 스타일을 먼저 불러온 뒤, 차일드 테마의 스타일을 그 위에 적용하도록 합니다.
이 과정이 없으면 사이트 디자인이 깨져 보일 수 있습니다.
참고로 파일 마지막에 닫는 태그(?>)는 넣지 않는 것이 관례입니다. 뒤에 공백이 들어가면 오류가 생길 수
있기 때문입니다.
4단계: 활성화하기
워드프레스 관리자에서 외모 → 테마로 들어가면, 방금 만든 차일드 테마가 목록에 보입니다.
활성화를 클릭합니다.
활성화한 뒤 사이트를 열어 보세요. 부모 테마를 쓸 때와 똑같이 보이면 성공입니다. 차일드 테마는
부모 테마를 그대로 물려받기 때문에, 아직 아무것도 수정하지 않았다면 겉모습은 동일해야 합니다.
만약 디자인이 깨져 보인다면 3단계의 코드나 style.css의 Template 항목을 다시 확인해 보세요.
차일드 테마 활용하기
이제 마음 놓고 수정할 수 있습니다.
디자인 바꾸기
style.css 파일에 CSS를 추가하면 됩니다. 예를 들어 본문 글자 크기를 키우고 싶다면 이렇게 씁니다.
body {
font-size: 17px;
}차일드 테마의 CSS가 나중에 적용되므로 부모 테마의 설정을 덮어씁니다.
기능 추가하기
functions.php 파일에 PHP 코드를 추가하면 기능을 더할 수 있습니다.
템플릿 수정하기
부모 테마의 특정 파일을 수정하고 싶다면, 그 파일을 차일드 테마 폴더에 같은 이름으로 복사한 뒤 수정합니다. 워드프레스는 차일드 테마에 해당 파일이 있으면 그것을 우선 사용합니다.
이때 파일 전체를 복사할 필요는 없습니다. 수정할 파일만 가져오면 됩니다.
주의할 점
작업 전 백업하기
파일을 수정하다 실수하면 사이트가 열리지 않을 수 있습니다. 특히 functions.php는 PHP 코드라,
문법이 하나만 틀려도 화면이 하얗게 나오거나 오류가 표시됩니다.
작업 전에 백업을 해 두고, 문제가 생기면 수정한 파일을 원래대로 되돌리면 복구됩니다.
관리자 화면의 테마 편집기 주의
워드프레스 관리자에는 테마 파일을 직접 편집하는 기능이 있습니다. 편리해 보이지만, 여기서 코드를
잘못 저장하면 사이트에 접속조차 못 하게 될 수 있습니다. 가능하면 파일 관리자나 FTP로 작업하는 편이
안전합니다.
간단한 CSS만 필요하다면
색이나 여백 정도만 바꾸고 싶다면 차일드 테마까지 만들 필요가 없을 수도 있습니다. 워드프레스에는
외모 → 사용자 정의하기에 ‘추가 CSS’ 항목이 있어, 여기에 입력한 CSS는 테마를 업데이트해도 유지됩니다.
간단한 디자인 조정은 이 기능으로 충분하고, 템플릿 구조를 바꾸거나 기능을 추가하려면 차일드 테마가 필요하다고 이해하면 됩니다.
마무리
차일드 테마는 처음 들으면 복잡해 보이지만, 실제로는 폴더 하나에 파일 두 개를 만드는 것이 전부입니다. 한 번 만들어 두면 그 위에서 자유롭게 수정하면서도 부모 테마 업데이트를 마음 놓고 받을 수 있습니다.
테마를 조금이라도 손볼 계획이 있다면, 손대기 전에 차일드 테마부터 만들어 두세요. 나중에 수정한 내용이 사라지는 일을 겪지 않는 가장 확실한 방법입니다.