자식 테마 만들기 — 헤더 한 줄과 로드 순서

자식 테마는 파일 두 개로 시작합니다. style.css 와 functions.php 입니다. 두 파일 모두 처음에는 아주 짧고, 그 짧은 내용 안에 실수하기 쉬운 지점이 정확히 두 개 있습니다.

폴더와 style.css 헤더

wp-content/themes/ 아래에 새 폴더를 만듭니다. 이름은 부모 테마 폴더 이름 뒤에 -child 를 붙이는 것이 관행입니다. 그 안에 style.css 를 만들고 맨 위에 주석 블록을 넣습니다.

/*
Theme Name: Acme Child
Template:   acme
Version:    1.0.0
*/

여기서 Template 한 줄이 전부를 결정합니다. 이 값은 부모 테마의 폴더 이름이어야 하고, 화면에 표시되는 테마 이름이 아닙니다. 대소문자까지 정확히 같아야 합니다. 이 줄이 틀리면 워드프레스는 부모를 찾지 못하고, 테마 목록에서 “부모 테마가 없습니다” 라는 경고와 함께 활성화가 막힙니다.

테마 목록에 썸네일이 필요하면 같은 폴더에 screenshot.png 를 넣습니다. 없어도 동작에는 아무 영향이 없습니다.

스타일 로드 순서 — 여기서 대부분 막힙니다

자식 테마의 style.css 는 저절로 로드되지 않습니다. 예전 자료에는 @import 로 부모 스타일을 불러오라는 설명이 남아 있는데, 지금은 쓰지 않습니다 — @import 는 브라우저가 첫 파일을 다 읽은 뒤에야 두 번째 요청을 시작하게 만들어 화면이 그려지는 시점을 늦춥니다.

대신 functions.php 에서 워드프레스의 스타일 등록 함수를 씁니다. 핵심은 세 번째 인자인 의존성 배열입니다.

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'acme-child',
        get_stylesheet_uri(),
        [ 'acme-parent' ],   // 부모가 등록한 핸들 이름
        '1.0.0'
    );
}, 20 );

의존성 배열에 부모의 핸들을 적으면 워드프레스가 부모 스타일을 먼저 출력한 뒤 우리 것을 출력합니다. 이 순서가 다음 회차들의 전제입니다 — 같은 특정도의 규칙이 둘 있으면 나중에 온 쪽이 이기기 때문입니다.

부모의 핸들 이름은 테마마다 다릅니다. 부모 테마의 functions.php 에서 wp_enqueue_style 을 찾으면 첫 번째 인자가 그 이름입니다. 부모가 자기 style.css 를 등록하지 않는 테마라면, 우리가 get_template_directory_uri() 로 부모 스타일을 먼저 등록한 뒤 그것에 의존시킵니다.

활성화한 뒤 확인할 것

자식 테마를 활성화하면 워드프레스는 이것을 다른 테마로 취급합니다. 그래서 부모 테마에서 설정해 둔 커스터마이저 값 · 메뉴 위치 · 위젯 배치가 그대로 따라오지 않는 경우가 많습니다. 값이 지워진 것이 아니라 새 테마 자리에 아직 없는 것이므로, 활성화는 콘텐츠 작업을 많이 쌓기 전에 해 두는 편이 훨씬 편합니다.

활성화 직후에는 세 가지를 봅니다. 화면이 부모 테마와 똑같이 보이는가(스타일이 로드되고 있다는 뜻), 메뉴가 제자리에 있는가, 그리고 자식 CSS 에 눈에 띄는 규칙을 하나 넣어 실제로 적용되는가입니다. 마지막 확인이 로드 순서를 검증하는 가장 빠른 방법입니다.

테마 구조를 정리하는 작업 자체를 맡기고 싶다면 작업 과정에 절차가 공개돼 있고, 관련 글은 테마 · 플러그인 아카이브에 모여 있습니다.

다음 회차

자식 테마가 생겼으니 이제 어디에 무엇을 쓸지 정할 차례입니다. 다음 회차는 커스터마이저와 CSS 의 경계 — 기준은 취향이 아니라 “다음 사람이 찾을 수 있는가” 입니다.