WordPress 테마 개발 입문 가이드: 제로에서 시작하여 첫 번째 서브테마를 만들어보세요

WordPress는 전 세계에서 가장 인기 있는 콘텐츠 관리 시스템(CMS)으로, 그 강력한 사용자 정의 기능은 주로 테마 시스템 덕분입니다. 웹사이트의 외관을 개성화하고 싶지만 핵심 코드를 직접 수정하는 것을 꺼리는 개발자들에게는 ‘자식 테마(Child Theme)’가 완벽한 해결책입니다. 자식 테마를 사용하면 부모 테마의 모든 기능을 안전하게 상속받으면서도 필요한 부분만 수정할 수 있으므로, 부모 테마가 업데이트되더라도 자신이 만든 변경 사항이 삭제되지 않습니다. 이 글에서는 처음부터 시작하여 완전히 사용 가능한 WordPress 자식 테마를 만드는 방법을 안내해 드리겠습니다.

자주제(subtopic)란 무엇이며 그 핵심적인 장점은 무엇인가요?

자주제(subtheme)는 독립적인 WordPress 테마로, 다른 테마(부모 테마, parent theme라고 함)에 의존하여 작동합니다. 자주제의 핵심 개념은 “상속(inheritance)과 재정의(override)”입니다. 자주제는 일반적으로 스타일시트(style sheet)와 기능 파일(function file) 하나만을 포함하지만, 이 두 파일을 통해 부모 테마를 상당히 자세하게 커스터마이징할 수 있습니다.

자식 테마를 사용하여 개발하는 경우, 다음과 같은 대체 불가능한 장점들이 있습니다. 가장 중요한 장점은 업데이트의 안정성입니다. 부모 테마 파일을 직접 수정할 경우, 부모 테마가 업데이트되면 모든 사용자 정의 변경 사항이 덮어쓰여 웹사이트의 스타일이 손상되거나 기능이 제대로 작동하지 않을 수 있습니다. 하지만 자식 테마를 사용하면 사용자의 수정 사항이 자식 테마 디렉터리에 격리되어 부모 테마를 언제든지 원활하게 업데이트할 수 있으며, 두 테마가 서로 영향을 미치지 않습니다.

추천 읽기 WooCommerce 플러그인 입문 가이드: 제로에서 시작하여 온라인 상점을 구축하는 방법。

다음으로는 개발 효율성입니다. 테마의 모든 템플릿 파일을 처음부터 다시 만들 필요가 없으며, 수정이 필요한 부분만 자식 테마에서 생성하면 됩니다. 예를 들어, 웹사이트의 헤더만 변경하고 싶다면 자식 테마에서 해당 부분만 수정하면 됩니다. header.php 파일, 그리고 다른 모든 템플릿들(예: single.php、page.php모든 부분에서 부모 주제의 버전이 자동으로 사용됩니다. 이로 인해 개발 효율성이 크게 향상되었습니다.

마지막으로는 명확한 구조와 이식성입니다. 모든 사용자 정의 코드는 별도의 테마 폴더에 담겨 있어 구조가 쉽게 파악됩니다. 웹사이트를 새 서버로 이전하거나 팀원과 사용자 정의 내용을 공유해야 할 경우, 해당 테마 폴더를 복사하기만 하면 되므로 관리가 매우 편리합니다.

첫 번째 하위 주제 디렉터리와 파일을 생성하세요.

기술적으로 하위 테마를 구축하는 것은 간단합니다. 특정 파일 구조와 명명 규칙을 따르기만 하면 됩니다. 먼저, WordPress 테마 디렉터리로 이동해야 합니다. /wp-content/themes/ 아래에서 새로운 폴더를 생성하세요. 이 폴더의 이름은 여러분의 하위 주제 이름이 될 것이며, 소문자, 하이픈(-), 숫자를 사용하는 것이 좋습니다. 예를 들어, `my-subtopic-123`과 같은 형태로 지정하시기 바랍니다. my-first-child-theme。

이 폴더 내에서 반드시 만들어야 하는 첫 번째이자 가장 중요한 파일은 스타일시트 파일입니다. style.css이 파일은 스타일 규칙만을 담고 있는 것이 아니라, 파일 헤더에 포함된 주석도 WordPress가 서브테마를 인식하는 데 매우 중요합니다. 이 주석에는 반드시 특정 정보가 포함되어 있어야 합니다.

/*
 Theme Name:   My First Child Theme
 Theme URI:    https://example.com/my-first-child-theme/
 Description:  A child theme of the Twenty Twenty-Six theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentytwentysix
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  my-first-child-theme
*/

주의하세요Template: 이 줄은 매우 중요합니다. 이 줄의 내용은 부모 테마의 폴더 이름과 정확히 일치해야 하며, 대소문자를 구분해야 합니다. 예를 들어, WordPress의 기본 테마인 ‘Twenty Twenty-Six’를 사용하는 경우, 해당 테마의 폴더 이름은… twentytwentysix그렇다면 여기에 반드시 써야 합니다. twentytwentysix바로 이 선언을 통해 WordPress는 서브테마(subtheme)와 메인테마(main theme) 간의 상속 관계를 구축합니다.

추천 읽기 WordPress 테마 개발의 궁극적인 가이드: 제로에서 시작하여 전문 웹사이트 테마를 구축하는 방법。

자식 주제가 스타일을 제대로 로드할 수 있도록 하기 위해서는 보통 두 번째 핵심 파일을 생성해야 합니다: 기능 파일(function file)입니다. functions.php이 파일의 기능은 상위 주제의 기능과 동일합니다. functions.php 병렬로 로드해야 하며, 기존 파일을 덮어쓰면 안 됩니다. 사용자 정의 PHP 코드를 추가할 수 있으며, 가장 중요한 것은 이 코드를 통해 부모 테마와 자식 테마의 스타일시트를 올바르게 큐에 추가하는 것입니다.

기능 파일을 통해 스타일을 올바르게 로드합니다.

자세한 내용은 하위 주제(subtopic)에서 확인하실 수 있습니다.functions.php 파일의 주요 역할은 일반적으로 스타일시트의 로딩을 관리하는 것입니다. 하위 주제(subtopic)의 경우에도 마찬가지입니다. style.css WordPress가 자동으로 이를 인식하지만, 상위 테마의 스타일이 우선적이고 올바르게 로드되도록 하기 위해서는 WordPress 액션 훅을 사용하여 명시적으로 대기열을 관리하는 것이 가장 좋은 방법입니다.

You need to do something related to the sub-topic. functions.php 파일에 함수를 작성한 후, 그 함수를 사용하세요. wp_enqueue_scripts 이 액션 후크를 사용하여 해당 기능을 호출합니다. 이 방법을 통해 페이지 상단에 스타일시트가 올바르고 효율적으로 로드되도록 보장됩니다.

다음은 표준적인 구현 예시입니다:

<?php
/**
 * Enqueue parent and child theme stylesheets.
 */
function my_first_child_theme_enqueue_styles() {
    // 首先加载父主题样式表
    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', 'my_first_child_theme_enqueue_styles' );

위 코드에서,get_template_directory_uri() 이 함수는 상위 주제 디렉터리의 URI를 반환합니다. get_stylesheet_directory_uri() 이 함수는 현재 활성화된 테마(즉, 하위 테마)의 디렉터리 URI를 반환합니다. 하위 테마의 스타일시트가 상위 테마의 스타일시트에 의존하도록 설정함으로써, CSS의 적용 순서가 올바르게 보장됩니다. 먼저 상위 테마의 스타일이 적용되고, 그 다음에 하위 테마의 스타일이 그 기반 위에 추가되거나 수정됩니다.

실제로 흔히 사용되는 하위 주제(서브테마)의 사용자 정의 기능을 구현하는 것입니다.

기본 구조가 완성되면 이제 실제 사용자 정의 작업을 시작할 수 있습니다. 가장 흔한 사용자 정의는 스타일과 템플릿 파일 두 가지 측면에서 이루어집니다.

추천 읽기 WordPress 플러그인 개발에 대한 심층 분석: 제로에서 시작하여 사용자 정의 기능을 확장하는 방법。

스타일을 사용자 정의하려면, 서브테마(subtheme) 내에서 설정을 변경하기만 하면 됩니다. style.css 파일에 새로운 CSS 규칙을 추가하세요. 이 규칙은 상위 테마 스타일이 로드된 후에 적용되므로, 선택자의 특이성이 동일한 경우 더 높은 우선순위를 가집니다. 예를 들어, 전체 사이트의 링크 색상을 변경하고 싶다면 다음과 같이 규칙을 추가할 수 있습니다:

/* 在子主题的 style.css 文件中 */
a {
    color: #3498db; /* 覆盖父主题的链接颜色 */
}

.site-header {
    background-color: #2c3e50; /* 修改页头背景色 */
}

더 복잡한 레이아웃이나 기능을 수정하려면 상위 테마의 템플릿 파일을 재작성해야 합니다. 이는 자식 테마가 가진 가장 강력한 기능 중 하나입니다. 작업 방법은 다음과 같습니다: 수정하고자 하는 상위 테마의 템플릿 파일을 가져온 후… header.php、footer.php 또는 page.php자신의 서브테마 디렉터리로 해당 파일을 복사하세요. 그러면 WordPress가 자동으로 서브테마 디렉터리에 있는 복사본을 사용하게 되며, 상위 테마에 있는 원본 파일은 무시됩니다.

예를 들어, 푸터를 사용자 정의하려면 상위 테마의 설정을 수정하면 됩니다. footer.php 자식 주제 폴더로 복사한 다음, 복사된 파일을 열어 편집하세요. 저작권 정보를 수정하거나, 툴바 영역을 삭제하거나 추가하는 등의 작업을 할 수 있습니다. 필요한 파일만 복사해야 하며, 부모 주제 전체를 복사할 필요는 없다는 점을 기억하세요.

또한, 하위 주제(subtopic)에서도 해당 내용을 활용할 수 있습니다. functions.php 새로운 기능들을 추가할 수 있습니다. 예를 들어, 새로운 사이드바 툴바 영역을 등록하거나, 사용자 정의된 글 유형을 지원하도록 설정하거나, 특정 페이지에 추가적인 스크립트를 로드하는 것이 가능합니다. 이러한 코드들은 안전하게 여러분의 서브테마(subtheme) 내에 유지됩니다.

요약

이 문서의 단계를 따라가면서, 디렉터리 구조를 만들고 필요한 스타일시트 정보를 작성하는 것부터 기능 파일을 통해 스타일을 올바르게 로드하는 방법, 그리고 구체적인 스타일과 템플릿을 재작성하는 전체 프로세스를 익혔을 것입니다. 서브테마(subtheme)는 WordPress 개발에서 기본적이면서도 매우 중요한 모범 사례로, 사용자 정의한 내용을 코어 테마 코드와 명확하게 분리하여 웹사이트의 장기적인 유지보수성과 보안성을 보장합니다. 간단한 색상 조정을 하고 싶든, 심도 있는 레이아웃 재구성을 하고 싶든, 서브테마를 사용하는 것이 가장 현명하고 전문적인 출발점입니다.

자주 묻는 질문

모든 WordPress 테마에 서브테마를 생성할 수 있습니까?

이론적으로는, 어떤 테마든지 작성 규칙을 준수하고 WordPress의 코딩 표준을 따르고 있다면 상위 테마로 사용하여 하위 테마를 만들 수 있습니다. 단, 하위 테마를 생성할 때는 반드시 해당 상위 테마의 구조와 기능을 잘 이해하고 올바르게 적용해야 합니다. style.css 의 Template: 필드에 상위 주제의 폴더 이름을 정확하게 입력하시기만 하면 됩니다.

하지만, 디자인이 매우 단순하거나 구조가 특별한 테마(예: 표준 방식으로 스타일이 로드되지 않는 테마)의 경우 하위 테마가 제대로 작동하지 않을 수 있습니다. 부모 테마를 선택할 때는 인기가 많고 지속적으로 업데이트되며 문서가 잘 구성된 테마를 우선적으로 고려하는 것이 더 안전한 선택입니다.

하위 테마의 functions.php 파일은 상위 테마의 파일을 덮어쓰나요?

아니요. 이것은 하위 주제(subtopic)에 대한 가장 흔한 오해 중 하나입니다. 하위 주제에 대해서는… functions.php 파일은 상위 테마의 동일한 이름을 가진 파일을 덮어쓰지 않고, 상위 테마 내에 새로운 파일로 저장됩니다. functions.php 그 후에 로드됩니다.

이것은 두 파일에 있는 코드가 모두 실행될 것임을 의미합니다. 서브테마에서 해당 설정을 조정할 수 있습니다. functions.php 새로운 기능을 추가하거나 WordPress 훅을 사용하여 기존 동작을 수정할 수는 있지만, 동일한 이름의 함수를 생성하여 상위 테마의 함수를 직접 “덮어쓰면” PHP에서 치명적인 오류가 발생합니다. 상위 테마의 함수 동작을 수정하려면 일반적으로 액션 훅(Action Hook)이나 필터 훅(Filter Hook)을 사용해야 합니다.

서브테마를 활성화한 후에 웹사이트의 스타일이 엉망이 되었다면 어떻게 해야 할까요?

만약 서브테마를 활성화한 후 웹사이트의 외관이 완전히 이상해진다면, 이는 일반적으로 스타일시트가 제대로 로드되지 않았기 때문입니다. 다음 단계에 따라 문제를 확인해 보세요:

먼저, 하위 주제를 확인해 보세요. style.css File header section Template: 값이 상위 주제의 폴더 이름과 대소문자를 포함하여 완전히 일치하는지 확인하십시오. 이것이 가장 흔한 문제 원인입니다.

둘째, 귀하의…를 확인해 주세요. functions.php 파일 내의 코드, 특히… wp_enqueue_style 함수를 호출할 때는 경로와 의존 관계가 올바르게 설정되었는지, 그리고 PHP 문법 오류가 없는지 확인해야 합니다. 관련 오류 메시지가 있는지는 WordPress의 “대시보드 -> 도구 -> 사이트 건강”에서 확인할 수 있습니다.

마지막으로, 웹사이트와 브라우저의 모든 캐시를 삭제한 다음 페이지를 새로고침하여 확인해 보세요.

자주제(서브테마)에 사용자 정의 페이지 템플릿을 어떻게 추가하나요?

자식 테마에 사용자 정의 페이지 템플릿을 추가하는 방법은 일반 테마에 추가하는 방법과 완전히 동일합니다. 자식 테마 디렉터리 내에 새로운 PHP 파일을 생성한 다음, 해당 파일의 상단에 특정 주석을 추가하여 이 파일이 페이지 템플릿임을 명시하기만 하면 됩니다.

예를 들어, ‘example’이라는 이름의 파일을 생성하려면… my-full-width.php 해당 파일의 시작 부분에는 다음과 같은 내용이 포함되어야 합니다:

<?php
/**
 * Template Name: 我的全宽页面
 * Description: 一个没有侧边栏的全宽页面模板。
 */

그런 다음, 이 파일에 템플릿 코드를 작성하실 수 있습니다. 제작이 완료되면 WordPress 관리자에서 페이지를 생성하거나 수정할 때 “페이지 속성”의 “템플릿” 드롭다운 메뉴에서 “내 전체 너비 페이지(My Full-Width Page)” 옵션을 보실 수 있을 것입니다.