워드프레스 하위 테마를 만드는 방법

워드프레스 테마를 사용자 정의하고 싶지만 보안을 강화하고 싶으신가요? 걱정하지 마세요. 저희가 도와드리겠습니다. 다음 글을 읽으면 워드프레스 하위 테마를 사용하여 워드프레스 테마를 사용자 정의할 수 있습니다. 워드프레스 하위 테마는 사용자 정의한 내용을 다른 폴더에 저장하여 부모 테마를 업데이트해도 영향을 받지 않도록 하는 기능을 합니다.

서브테마는 무엇을 의미하나요?

기본적으로 하위 테마는 모든 테마를 반영합니다. 하위 테마를 변경해도 상위 테마는 영향을 받지 않지만 상위 테마에서 변경한 내용은 하위 테마에 반영된다는 개념입니다.

하위 테마를 사용해야 하는지 여부

하위 테마를 사용하는 것이 테마를 수정하는 가장 안전한 방법이라는 것은 의심할 여지가 없습니다. 가장 좋은 점은 부모 테마가 업데이트되더라도 변경 내용은 삭제되지 않는다는 것입니다. 하위 테마를 수정하는 데 문제가 있는 경우 쉽게 삭제하여 상위 테마로 돌아갈 수 있습니다.

워드프레스 하위 테마 설정하기

워드프레스 하위 테마는 수동으로 설정하거나 플러그인을 사용하여 설정할 수 있습니다.

한 가지 기억해야 할 것은 부모 테마가 테마 페이지의 모양 아래에 표시될 때까지는 작동하지 않는다는 것입니다.

방법 1: 수동으로 하위 테마 만들기

#1먼저 새 폴더를 만들고 원하는 대로 이름을 지정해야 합니다(예: “twenty-four-child”).

#2:다음으로 파일을 만들고 이름을 “style.css”로 지정해야 하며, 이 파일은 반드시 존재해야 합니다.

#3：이제 최근에 만든 이 파일을 열고 다음 정보를 입력해야 합니다.

/*
Theme Name:     Twenty Twenty-Four Child
Theme URI:      https://example.com/twentytwentyfour-child/
Description:    This is a child theme for Twenty Twenty-Four, created by me.
Author:         Your Name
Author URI:     https://example.com
Template:       twentytwentyfour
Version:        1.0.0
*/

주요 매개변수에 대한 설명입니다.

Theme Name:.(필수)자녀 테마의 이름입니다.
Template:.(필수)이것은가장 중요한를 입력합니다. 반드시완벽한 대응상위 토픽의 디렉터리 이름입니다. 예를 들어 상위 주제는 twentytwentyfour여기에 빈칸을 채우세요. twentytwentyfour상위 테마는 다음과 같습니다. Divi여기에 빈칸을 채우세요. Divi.대소문자가 일치해야 합니다.。
Description하위 테마에 대한 간단한 설명입니다.
Author귀하의 이름.
Author URI: 웹사이트 주소.
Version하위 주제의 버전 번호입니다.

하위 테마의 CSS가 자동으로 로드되기는 하지만상위 테마의 모든 스타일을 자동으로 상속하지는 않습니다.. 하위 주제에 대한 완전하고 신뢰할 수 있는 시작점을 갖기 위해 매우 일반적이고 권장되는 방법은 다음과 같습니다.먼저 상위 테마의 전체 스타일시트를 가져옵니다.。

사용자 정의 CSS를 추가할 수 있습니다.미리사용 @import 규칙을 만들어야 합니다.

/*
Theme Name:     Twenty Twenty-Four Child
Theme URI:      https://www.likacloud.com/twentytwentyfour-child/
Description:    This is a child theme for Twenty Twenty-Four, created by me.
Author:         Your Name
Author URI:     https://example.com
Template:       twentytwentyfour
Version:        1.0.0
*/

/* 导入父主题的样式以确保设计基础一致 */
@import url("../twentytwentyfour/style.css");

/* 自定义样式从这里开始 */

/* 1. 更改文章标题颜色 */
.wp-block-post-title {
    color: #1a4f6e;
    font-weight: 700;
}

/* 2. 更改网站背景色 */
body {
    background-color: #f8f9fa;
}

/* 3. 更改主内容区域的宽度 */
.wp-block-group.alignwide {
    max-width: 1280px;
}

/* 4. 自定义链接颜色 */
a {
    color: #d14545;
}
a:hover {
    color: #a23434;
    text-decoration: none;
}

다음 사항에 유의하십시오.

비록 @import 가 가장 간단한 접근 방식이지만 성능 측면에서는 최적이 아닙니다(병렬 로딩을 방지하므로). 보다 고급 접근 방식은 wp_enqueue_style() 하위 주제의 functions.php 파일은 상위 테마의 스타일시트를 대기열에 추가합니다. 그러나 우선은 @import 완전히 실현 가능하고 이해하기 쉽습니다.

이렇게요:

<?php
// 确保在正确的钩子上加载样式
add_action('wp_enqueue_scripts', 'enqueue_parent_and_child_styles');

function enqueue_parent_and_child_styles() {
    // 加载父主题样式
    wp_enqueue_style('parent-style', get_template_directory_uri() . 'https://www.likacloud.com/style.css');
    
    // 加载子主题样式，并指定依赖于父主题样式
    // 这样可以确保子主题样式在父主题样式之后加载，保证样式覆盖生效
    wp_enqueue_style('child-style', 
                     get_stylesheet_directory_uri() . 'https://www.likacloud.com/style.css',
                     array('parent-style'), // 依赖关系
                     wp_get_theme()->get('Version') // 版本号，可选
                    );
}

코드 설명:

add_action('wp_enqueue_scripts', 'enqueue_parent_and_child_styles')워드프레스 스타일 로드 훅에 커스텀 함수 마운트하기
get_template_directory_uri()상위 주제 디렉터리의 URL 가져오기
get_stylesheet_directory_uri()하위 주제 디렉토리의 URL 가져오기(하위 주제가 활성화된 경우)
array('parent-style')올바른 로딩 순서를 보장하기 위해 하위 테마 스타일을 상위 테마 스타일에 종속된 것으로 선언합니다.

이 접근 방식은 다음과 비교하면 유리합니다. @import 는 브라우저에서 스타일시트를 병렬로 로드하고 스타일 간의 종속성을 더 잘 관리할 수 있기 때문에 더 효율적입니다.

이 코드를 하위 테마의 functions.php 파일(또는 파일이 없는 경우 새로 생성)을 열고 이미 가지고 있는 하위 테마를 그대로 유지합니다. style.css 헤더 주석 정보로 충분합니다.

다른 모든 세부 사항은 원하는 대로 변경할 수 있습니다.

이 작업을 완료한 후에는 모양 >> 테마로 이동하여 하위 테마가 생성되었는지 확인해야 합니다. 생성되었다면 축하하며 활성화하여 부모 테마의 디자인을 상속하는지 테스트할 수 있습니다.

방법 2: 플러그인을 사용하여 하위 테마 만들기

이 작업을 수동으로 하는 것이 마음에 들지 않는다면 무료 워드프레스 플러그인을 사용하여 작업을 대신할 수 있습니다. 시중에는 하위 테마를 생성하고 이 모든 작업을 수동으로 수행하지 않아도 되는 무료 플러그인이 많이 있습니다. 다음 플러그인을 사용하겠습니다.하위 테마 구성 관리자플러그인을 사용해야 하지만, 사용 가능한 모든 플러그인을 자유롭게 사용할 수 있습니다.