WordPress 생태계에서 서브테마(subtheme)는 웹사이트를 맞춤화하고 업그레이드 및 유지보수하는 데 있어 매우 중요한 기반입니다. 서브테마를 사용하면 부모 테마(parent theme)의 모든 기능, 스타일, 템플릿 파일을 상속받으면서도 독립적인 디렉터리 내에서 수정을 가할 수 있습니다. 이를 통해 부모 테마에 보안 패치나 새로운 기능이 업데이트될 때, 세심하게 작성된 사용자 정의 코드가 덮어쓰이는 것을 걱정하지 않고 한 번의 클릭으로 간편하게 업데이트할 수 있습니다. 색상을 조정하거나 레이아웃을 수정하거나 복잡한 기능을 추가하는 등의 작업을 할 때 서브테마를 활용하는 것이 최선의 방법입니다.
왜 반드시 하위 주제(subtopic)를 사용해야 할까요?
부모 테마 파일을 직접 수정하는 것은 매우 위험한 작업입니다. 부모 테마가 업데이트되면 모든 수정 사항이 손실되어 다시 수동으로 적용해야 하며, 이 과정은 오류가 발생하기 쉽고 시간과 노력이 많이 소요됩니다. 무엇보다도, 팀 협업이나 웹사이트 이전 시 명확한 수정 기록이 없으면 큰 문제가 발생할 수 있습니다.
자주제(subtheme)는 “덮어쓰기(override)” 메커니즘을 통해 이 문제를 해결합니다. WordPress가 페이지를 렌더링할 때, 먼저 자주제 디렉터리에서 해당 템플릿 파일을 찾습니다. 파일을 찾으면 자주제의 버전을 사용하고, 찾지 못하면 자동으로 상위 주제(parent theme)의 버전으로 돌아갑니다. 이러한 메커니즘 덕분에 필요한 부분만 수정하면서도 나머지 부분은 상위 주제의 업데이트와 유지보수 혜택을 그대로 누릴 수 있습니다.
추천 읽기 워드프레스 테마 개발 입문 가이드: 처음부터 첫 번째 테마를 만들기。
또한, 서브테마(subtheme)를 사용하는 것은 WordPress 공식적으로 추천하는 방법으로, 코드의 깔끔함과 유지보수성을 유지하는 데 도움이 되며, 전문적인 개발의 상징입니다.
자식 주제를 생성하는 기본 구조는 다음과 같습니다:
자식 주제를 만드는 것은 매우 간단합니다. 단 두 개의 기본 파일만 필요합니다: 스타일시트와 함수 파일입니다. 먼저, 다음과 같은 단계를 따라야 합니다: /wp-content/themes/ 디렉터리 내에 새로운 폴더를 생성할 때, 일반적으로 “부모 주제명-자식”과 같은 이름으로 명명합니다. 예를 들어, “projects-teams”와 같은 형태로요. twentytwentyfour-child。
핵심 스타일 시트 파일을 생성하세요.
자주제의 핵심은 그 스타일시트 파일입니다. style.css이 파일에는 CSS 규칙뿐만 아니라, 더 중요한 것은 파일 헤더에 있는 주석들입니다. 이 주석들은 WordPress에 이 파일이 서브테마(sub-theme)임을 알리고, 그 서브테마의 상위 테마(parent theme)가 무엇인지를 명시하는 데 사용됩니다.
/*
Theme Name: Twenty Twenty-Four Child
Theme URI: https://example.com/twentytwentyfour-child/
Description: Twenty Twenty-Four Child Theme
Author: Your Name
Author URI: https://example.com
Template: twentytwentyfour
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: twentytwentyfour-child
*/그중에서,Template: 이 줄은 매우 중요합니다. 그 값은 상위 테마의 디렉터리 이름과 정확히 일치해야 하며, 대소문자를 구분해야 합니다. 이것이 바로 WordPress가 부모-자식 관계를 인식하는 기준입니다.
부모 주제 스타일 시트를 가져오기
위 파일만으로는 서브테마가 상위 테마의 스타일을 로드할 수 없습니다. 서브테마의 함수 파일에서 필요한 설정을 추가해야 합니다. functions.php 중국에서 사용하세요. wp_enqueue_scripts 후크를 사용하여 상위 테마의 스타일시트를 순차적으로 로드합니다.
추천 읽기 전문 웹사이트를 만들기 위해 필수적인 것: WordPress 테마 개발 및 커스터마이징 완벽 가이드。
<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );
function my_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')
);
}
?>get_template_directory_uri() 이 함수는 상위 주제 디렉터리의 URL을 가져옵니다. get_stylesheet_directory_uri() 현재 활성 주제(하위 주제) 디렉터리의 URL을 가져옵니다. 이는 의존성 배열을 통해 이루어집니다. array( 'parent-style' ) 자식 주제의 스타일이 부모 주제의 스타일 이후에 로드되도록 하여, 사용자 정의 CSS 규칙이 부모 주제의 스타일을 올바르게 덮어쓸 수 있도록 해야 합니다.
확장된 하위 주제의 기능 (Functions of Extended Subtopics)
기본 구조를 만든 후에는 다음과 같은 방법으로 진행할 수 있습니다: functions.php 이 파일은 웹사이트의 기능을 무제한으로 확장해 줍니다. 이 파일에 포함된 코드는 부모 테마의 코드보다 먼저 실행됩니다. functions.php 파일 실행 기능을 통해 핵심 기능을 수정할 수 있는 훌륭한 방법을 얻을 수 있습니다.
커스텀 웹사이트 기능 (Custom Website Features)
예를 들어, 웹사이트에 새로운 사용자 정의 문서 유형인 “프로젝트”를 추가하고 싶을 수 있습니다. 이를 위해 하위 주제(subtopic)에서 설정을 변경할 수 있습니다. functions.php 파일에 그것을 등록하세요.
add_action( 'init', 'register_project_post_type' );
function register_project_post_type() {
$args = array(
'public' => true,
'label' => '项目',
'has_archive' => true,
'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
'menu_icon' => 'dashicons-portfolio',
);
register_post_type( 'project', $args );
}동시에, 불필요한 상위 테마 기능들도 제거할 수 있습니다. 예를 들어, 상위 테마가 특정 함수를 통해 원하지 않는 푸터 툴바를 추가했다면, 그 기능을 제거하면 됩니다. remove_action() 해제하려면… 부모 주제가 있다고 가정해 봅시다. init 훅에 사용하세요. parent_theme_footer_widgets 함수에 추가된 작은 도구를 이렇게 제거할 수 있습니다:
add_action( 'after_setup_theme', 'remove_parent_theme_features', 15 );
function remove_parent_theme_features() {
remove_action( 'init', 'parent_theme_footer_widgets' );
}주의: 여기서 사용되는 내용은… after_setup_theme 후크를 사용하고 약간 더 높은 우선순위(예: 15)를 설정하는 이유는 부모 주제의 코드가 이미 실행되었는지 확인하기 위함입니다. add_action이렇게 하면 우리의… remove_action 그렇게 해야만 효과가 발생합니다.
부모 주제 템플릿 파일을 덮어쓰기
자주제의 가장 강력한 기능 중 하나는 상위 주제의 템플릿 파일을 덮어쓰는 것입니다. 기사 단일 페이지의 표시 방식을 수정하고 싶다면, 상위 주제에 있는 파일을 수정하기만 하면 됩니다. single.php 자신의 하위 테마 디렉터리로 복사한 후 편집하세요. WordPress는 자동으로 사용 중인 버전을 인식하고 적용합니다.
추천 읽기 잠재력 해방: 고급 WordPress 테마를 구축하는 핵심 기술 및 최고 실천사례 탐구。
더 세밀한 제어를 원한다면 템플릿 부품(Template Parts)이나 특정 템플릿 섹션을 직접 수정할 수도 있습니다. 예를 들어, 글의 메타데이터 표시를 변경하고 싶다면 상위 테마(Parent Theme)에서 해당 부분을 복사하여 편집하면 됩니다. template-parts/content-post-meta.php 파일은 하위 주제의 동일한 경로에 저장됩니다.
자주제 개발의 고급 기술들
자식 테마 개발이 더 전문적인 단계에 이르면, 로컬라이제이션(l localization), 테마 옵션의 상속(inheritance), 자식 테마 자체의 업데이트 등과 같은 고급 주제들을 다루게 됩니다.
텍스트의 현지화 번역을 구현합니다.
자신의 서브테마가 다국어를 지원하도록 하려면, 텍스트 도메인(Text Domain)을 올바르게 설정하고 번역 함수를 사용해야 합니다. style.css 의 헤더와 functions.php 첫 번째 단계는 중간에 텍스트 필드를 로드하는 것입니다.
In functions.php 중, 사용 load_child_theme_textdomain 함수:
add_action( 'after_setup_theme', 'child_theme_localization_setup' );
function child_theme_localization_setup() {
load_child_theme_textdomain( 'twentytwentyfour-child', get_stylesheet_directory() . '/languages' );
}그 후, 번역이 필요한 문자열에 다음과 같은 방법을 사용하세요: esc_html__( 'Your Text', 'twentytwentyfour-child' ) 이런 함수를 감싸는 구조를 사용하면, Poedit와 같은 도구를 사용하여 코드를 생성할 수 있습니다. .po 그리고 .mo 변역된 파일을 해당 하위 주제의 폴더에 저장하세요. /languages/ 카탈로그.
핵심 함수를 안전하게 수정하는 방법
때때로, 부모 주제(Parent Theme) 내의 복잡한 함수를 수정해야 할 필요가 있을 수 있습니다. 하지만 이 함수가 훅(Hooks)을 통해 충분한 유연성을 제공하지 않는 경우가 있습니다. 만약 이 함수가 “플러그 가능”(Pluggable)하다면, 즉 다른 모듈이나 구성 요소와 쉽게 결합될 수 있다면 사용이 훨씬 용이해집니다. if ( ! function_exists( ... ) ) 패키지에 대해서는, 자세한 내용을 자식 주제(subtopic)에서 다룰 수 있습니다. functions.php 함수를 중간에 다시 선언함으로써 그 함수를 완전히 덮어쓸 수 있습니다.
이 작업을 시도하기 전에, 반드시 상위 테마(부모 테마) 내에서 함수가 어떻게 정의되어 있는지 확인하십시오. 해당 함수가 플러그인 형태로 사용할 수 없는 경우에 강제로 재선언하면 치명적인 오류가 발생할 수 있습니다. 이런 상황에서는 테마 개발자에게 연락하거나 다른 필터 후크(filter hook)를 찾아서 자신의 요구사항을 충족시키는 것이 더 안전한 방법입니다.
요약
WordPress 서브테마를 구축하는 것은 전문가가 반드시 익혀야 할 핵심 기술입니다. 이를 통해 안전하고 지속 가능한 커스터마이징 작업 흐름을 구축할 수 있으며, 사용자가 작성한 커스텀 코드와 테마의 기본 코드를 명확하게 분리할 수 있습니다. 올바른 헤더 정보를 포함하는 파일을 생성하는 것부터 시작하여… style.css 그리고 스타일을 로드하는 것도 포함됩니다. functions.php 시작부터 템플릿 파일의 수정, 기능 확장, 현지화 처리, 고급 설정에 이르기까지 모든 단계에서 WordPress의 모범 사례를 따릅니다. 자식 테마(subtheme)를 일관되게 사용하는 것은 여러분의 웹사이트가 향후 수년 동안 최신 업데이트를 쉽게 적용할 수 있으면서도 독특한 외관과 기능을 유지할 수 있는 확실한 기반이 됩니다.
자주 묻는 질문
자주제의 폴더 이름에는 어떤 요구 사항이 있나요?
자주제의 폴더 이름에는 엄격한 제한이 없지만, 명확성을 위해 일반적으로 “부모주제 이름-자주제 이름”의 형식을 사용하는 것이 권장됩니다. 예를 들어, “회사-영업-신규제품”과 같은 형식입니다. astra-child중요한 점은… style.css File header section Template: 이 필드의 값은 상위 주제의 폴더 이름과 대소문자를 포함하여 완전히 일치해야 합니다. 그렇지 않으면 WordPress가 부모-자식 관계를 올바르게 설정할 수 없습니다.
모든 상위 주제가 하위 주제를 생성하는 것을 지원하나요?
대부분의 현대적이고 WordPress 코딩 표준을 준수하는 테마들은 서브테마를 완전히 지원합니다. 이론적으로는 어떤 테마든지 부모 테마로 사용될 수 있습니다. 하지만 설계가 잘못되었거나 매우 오래된 테마의 경우, 리소스를 절대 경로로 참조하거나 필요한 템플릿 파일이 없어서 서브테마가 제대로 작동하지 않을 수 있습니다. 부모 테마를 선택할 때는 그 테마의 문서나 사용자 평가를 확인하는 것이 현명한 선택입니다.
어떻게 직접 수정한 상위 테마를 하위 테마로 마이그레이션할 수 있나요?
먼저, 로컬 환경이나 테스트 환경에서 수정되지 않은 원본 상위 테마를 기반으로 새로운 하위 테마를 생성하세요. 그런 다음, 이전에 수정했던 상위 테마 파일과 원본 파일 간의 차이점을 하나씩 비교하세요. 이러한 차이점이 있는 코드들(CSS, PHP, HTML 등)을 체계적으로 하위 테마의 해당 파일로 이전시키세요. CSS의 경우, 하위 테마의 파일에 해당 내용을 추가하거나 수정해야 합니다. style.css기능 코드를 여기에 넣으세요. functions.php수정된 템플릿 파일은 하위 테마 디렉터리에 복사한 후 변경을 적용합니다. 이는 세심한 작업 과정이지만, 한 번만 처리하면 모든 문제가 해결됩니다.
서브테마가 웹사이트의 속도에 영향을 미칠 수 있나요?
올바르게 생성된 서브테마는 웹사이트 속도에 거의 영향을 미치지 않습니다. 추가적인 CSS 및 JS 파일의 크기는 보통 매우 작으며, 적절한 순서로 로딩되면 효율적으로 병합 및 캐싱될 수 있습니다. 서브테마의 주요 부담은 아마도 다른 요소들에서 비롯될 것입니다. functions.php 중에 추가된 복잡한 PHP 로직 때문에, 하위 테마 코드의 간결성과 효율성을 유지하는 것이 필요합니다. 이는 상위 테마를 개발할 때 따랐던 원칙과 동일합니다. 캐싱 기술을 적절히 활용하면 잠재적인 성능 저하를 더욱 상쇄할 수 있습니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어