기존 WordPress 테마를 사용자 정의하는 것은 일반적인 요구 사항이지만 테마를 직접 편집하면 문제가 발생할 수 있습니다. 

테마가 업데이트되면 변경 사항이 덮어쓰여집니다! 더 좋은 방법은 상위 테마에서 상속된 하위 테마를 만드는 것입니다. 

하위 테마를 사용하면 테마를 안전하고 확실하게 수정하고 확장할 수 있습니다. 

이 세부 가이드에서는 WordPress에서 하위 테마를 만드는 방법에 대해 설명합니다. 하위 테마의 목적, 설정 방법, 상위 테마 디자인 및 기능을 재정의하기 위해 사용자 정의하는 방법을 배우게 됩니다. 

몇 가지 방법을 사용하면 상위 테마 파일을 건드리지 않고도 하위 테마를 만들고 변경 사항 적용을 시작할 수 있습니다. 

이제 더 이상 고민하지 않고 시작하겠습니다.

1 어린이 테마란 무엇입니까?

하위 테마는 상위 테마의 기능을 상속받은 WordPress 테마입니다. 상위 테마 파일을 변경하지 않고도 새 기능을 수정하거나 추가할 수 있습니다. 

상위 테마 파일을 직접 수정하면 테마가 업데이트될 때 변경 사항이 손실되므로 이는 유용합니다. 

하위 테마를 사용하면 상위 테마에 영향을 주지 않고 변경할 수 있으며 수정 사항을 잃지 않고 업데이트를 받을 수 있습니다.

이 섹션에서 상위 테마에 대해 언급했다는 것을 알 수 있습니다. 그런데 정확히 무엇입니까?

2 부모 테마란 무엇입니까?

상위 테마는 WordPress 웹 사이트의 기초 역할을 하는 사전 디자인된 테마입니다. 그것은 제공합니다 기본 구조, 사이트의 레이아웃 및 기능. 

상위 테마는 해당 기능을 추가하거나 수정하여 특정 웹 사이트의 요구 사항에 맞게 사용자 정의할 수 있습니다. 

상위 테마를 사용하면 웹 사이트 구축 시 시간과 노력을 절약할 수 있으며 디자인과 기능의 출발점을 제공할 수 있습니다.

이 시점에서 우리는 모든 WordPress 테마가 하위 테마로 특별히 설계되지 않은 한 기술적으로 상위 테마라고 말할 수 있습니다.

기억해야 할 핵심 사항은 다음과 같습니다. 상위 테마는 독립적으로 존재하고 기능할 수 있지만 하위 테마는 항상 상위 테마에 의존합니다. 핵심 기능과 기능을 제공합니다.

3 어린이 테마를 사용하는 이유는 무엇입니까?

테마를 직접 수정하는 대신 하위 테마를 사용하는 몇 가지 주요 이유가 있습니다.

• 하위 테마를 생성하면 수정 사항이 덮어쓰여지는 것을 방지할 수 있습니다. 상위 테마가 업데이트되었습니다..
• 상위 및 하위 테마 파일을 별도로 유지합니다. 이렇게 하면 파일이 정리되므로 혼란을 피하는 데 도움이 됩니다.
• 스타일이나 기능 변경과 같은 다양한 목적으로 여러 하위 테마를 사용할 수 있습니다. 그러나 웹사이트에는 한 번에 하나의 활성 테마만 있을 수 있습니다.
• 이는 새로운 전체 WordPress 테마 개발을 시작하는 좋은 방법이기도 합니다.

참고 : 하위 테마를 광범위하게 사용자 정의하면 관리 문제가 발생할 수 있습니다. 대규모 프로젝트의 경우 원래 테마를 기반으로 전체/상위 테마를 만드는 것이 하위 테마를 계속 수정하는 것보다 더 나은 경우가 많습니다.

4 하위 테마 생성을 위한 사전 요구 사항

하위 테마를 만들기 전에 몇 가지 요구 사항을 충족하는 것이 중요합니다. 

먼저, 작동하는 WordPress 설치와 하위 테마를 생성하려는 상위 테마가 필요합니다. 

하위 테마를 사용자 정의하기 위해 코드를 변경하므로 HTML, CSS 및 PHP를 이해하는 것도 도움이 됩니다. 

또한 다른 소스에서 코드 조각을 복사하여 붙여넣을 수 있어야 합니다. 

테스트 목적으로 더미 콘텐츠를 사용하거나 라이브 WordPress 사이트를 로컬 서버로 이동하여 로컬 개발 환경에서 연습하는 것이 좋습니다. 이를 통해 실제 사이트에 구현하기 전에 하위 테마를 테스트할 수 있습니다.

마지막으로, 웹 사이트 백업 그 과정에서 뭔가 문제가 생길 경우를 대비해.

따라서 이러한 요구 사항이 모두 설정되면 하위 테마를 만들 수 있습니다. 당신이 해야 할 일은 이 가이드에 설명된 하위 테마 설정 프로세스를 따르는 것뿐입니다.

하지만 이 가이드에서는 Twenty Twenty-four 기본 WordPress 테마를 사용합니다.

5 WordPress에서 하위 테마 만들기

이제 하위 테마의 개념을 이해했으므로 WordPress에서 하위 테마를 만드는 방법을 살펴보겠습니다. 

다양한 편안함 수준에 맞춰 선택할 수 있는 두 가지 일반적인 방법을 살펴보겠습니다.

5.1 코드를 사용하여 하위 테마 만들기

먼저, FTP나 호스팅 제어판에서 제공하는 파일 관리자를 통해 WordPress 설치에 액세스하세요. 다음으로 이동하세요. wp-content/themes 디렉토리를 만들고 하위 테마에 대한 고유한 이름을 가진 새 폴더를 만듭니다. 

이 튜토리얼에서는 하위 테마 폴더에 "mtschild"라는 이름을 사용합니다.

이 디렉터리는 하위 테마 구성 요소의 기본 저장 공간 역할을 합니다.

하위 테마 폴더 안에 다음과 같은 새 파일을 만듭니다. style.css. 이 파일에는 하위 테마를 인식하고 활성화하는 데 필요한 필수 세부 정보가 포함되어 있습니다. style.css 파일을 열고 다음 코드를 삽입하세요.

Theme Name: MTS Child Theme
Theme URI: https://www.mythemeshop.com/
Description: Child theme for the Twenty Twenty-Four Theme
Author: MyThemeShop
Author URI: https://www.mythemeshop.com
Template: twentytwentyfour
Version: 1.0.0
Text Domain: mtschild

이 코드는 하위 테마가 지정된 상위 테마를 확장한다는 것을 WordPress에 알립니다. "MTS 하위 테마"를 원하는 하위 테마 이름으로 대체하고 템플릿 필드를 상위 테마의 폴더 이름으로 대체하세요.

다음 단계에서는 하위 테마가 상위 테마의 스타일을 상속하는지 확인합니다. 이를 달성하려면 상위 테마의 스타일시트를 대기열에 추가해야 합니다.

이렇게 하려면 하위 테마 디렉터리에 있는 function.php 파일에 액세스하고(없는 경우 새로 생성) 다음 코드 중 하나를 구현하세요.

상위 테마가 스타일시트를 로드하지 않는 경우 다음 코드를 사용하여 function.php를 통해 style.css를 로드하세요.

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
wp_enqueue_style( 'mts_child_theme-style', get_stylesheet_uri() );
}

이 코드는 상위 테마가 스타일시트만 로드하는 경우에도 작동할 수 있습니다. 

그러나 상위 테마가 활성 테마의 스타일시트만 로드하는 경우 다음을 통해 상위 테마의 스타일시트를 추가로 대기열에 추가해야 합니다. functions.php 아래 코드를 사용하여 :

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
	wp_enqueue_style( 'mts-child-theme-parent-style', get_parent_theme_file_uri( 'style.css' ) );
}

이 가이드에 사용된 Twenty Twenty-Four 테마의 경우 테마가 스타일시트를 전혀 로드하지 않으므로 첫 번째 코드를 적용하겠습니다. 

다음으로 시작하는 것을 기억하세요. <?php 코드를 추가할 때 태그를 지정하세요. 요구 사항에 따라 이러한 코드를 수정하십시오. 특히 테마 이름이 mts_child_theme 활용됩니다.

위 단계를 완료한 후 WordPress 대시보드에 다시 로그인하여 다음 단계를 진행하세요. 외관 → 테마. 하위 테마 위에 마우스를 놓고 활성화 버튼을 클릭합니다.

아직 하위 테마를 변경하지 않았으므로 웹 사이트는 상위 테마의 기능과 모양을 유지합니다. 

그러나 추가 수정에 대비할 수 있도록 하위 테마를 사용자 정의하는 방법을 안내해 드리겠습니다.

WordPress에서 코드를 사용하여 하위 테마를 수동으로 만드는 과정입니다. 이 방법이 복잡해 보인다면 다음 섹션에서 다룰 플러그인 접근 방식을 탐색할 수 있습니다.

5.2 플러그인을 사용하여 하위 테마 만들기

플러그인을 사용하여 하위 테마를 만드는 것은 간단하고 쉽습니다. 먼저, 다음을 설치하고 활성화해야 합니다. 하위 테마 구성기 플러그인. 자세한 내용은 단계별 가이드를 참조하세요. WordPress 플러그인 설치 방법.

플러그인이 활성화되면 WordPress 대시보드로 이동하여 도구 → 하위 테마.

에 상위 테마 탭을 선택하고, 하위 테마 생성을 위한 드롭다운 메뉴에서 상위 테마를 선택합니다. 일반적으로 사이트의 활성 테마가 미리 선택되어 있습니다.

다음으로, 클릭 분석 단추. 플러그인은 선택된 상위 테마를 면밀히 조사하여 하위 테마를 생성할 수 있는지, 그리고 표시를 위해 style.css 파일이 필요한지 여부를 결정합니다.

다음으로, 자식 테마에 이름을 지정하세요. 스타일시트, 기능 및 기타 구성을 원하는 대로 조정할 수 있습니다. 

그러나 섹션 7에 도달할 때까지 설정을 변경하지 마십시오.

섹션 7에서 라벨이 붙은 버튼을 클릭하세요. 하위 테마 속성을 편집하려면 클릭하세요..

여기에서 자녀 테마의 세부정보를 입력할 수 있습니다.

하위 테마를 수동으로 만들면 상위 테마의 메뉴와 위젯이 손실될 수 있습니다. 

그러나 Child Theme Configurator 플러그인은 상위 테마에서 하위 테마로 전송할 수 있습니다. 

계속 진행하려면 섹션 8의 확인란을 선택하세요. 마지막으로 새 하위 테마 만들기 버튼을 눌러 자식 테마를 만듭니다.

완료되면 플러그인은 향후 사용자 정의를 위해 필수 style.css 및 function.php 파일이 포함된 하위 테마용 폴더를 생성합니다.

테마를 활성화하기 전에 화면 상단의 "자녀 테마 미리보기" 링크를 클릭하여 미리보기하여 모양을 확인하고 사이트에 부정적인 영향을 미치지 않는지 확인하세요.

모든 것이 올바르게 작동하는지 확인한 후 활성화 및 게시 단추. 그러면 귀하의 웹사이트에 귀하의 하위 테마가 활성화됩니다.

웹사이트에서 하위 테마를 활성화했다면 이제 사용자 정의를 시작할 차례입니다. 이에 대해서는 다음 섹션에서 다루겠습니다.

6 자녀 테마를 사용자 지정하는 방법

사용자 정의를 시작하기 전에 스타일, 템플릿, 기능, 위젯 영역, 사용자 정의 페이지 템플릿 등 수정하려는 웹사이트 요소를 식별하세요. 

목표에 대한 명확한 비전이 있으면 사용자 정의 프로세스가 간소화됩니다. 다음을 포함하여 하위 테마를 사용자 정의하는 다양한 방법이 있습니다.

6.1 CSS로 스타일 사용자 정의

하위 테마의 style.css 파일은 웹 사이트의 모양을 조정하기 위한 플랫폼 역할을 합니다. 여기에서 사용자 정의 CSS 규칙을 삽입하여 상위 테마의 스타일을 변경하거나 향상시킬 수 있습니다.

진행하기 전에 HTML과 CSS에 대한 기본적인 이해가 필요합니다. 

브라우저의 검사 도구를 효과적으로 활용하거나 상위 테마의 style.css 파일에서 스타일을 직접 복사할 수 있습니다.

브라우저를 사용하여 웹페이지의 CSS 코드에 액세스하려면 페이지를 마우스 오른쪽 버튼으로 클릭하고 시찰하다 나타나는 옵션에서 이 도구는 CSS 스타일 코드를 표시하므로 수정하려는 요소를 정확히 찾아낼 수 있습니다.

마우스 오른쪽 버튼을 클릭하고 '검사'를 선택하면 브라우저 화면이 두 개로 나뉘어 페이지의 HTML과 CSS가 표시됩니다. 

브라우저 설정에 따라 HTML 및 CSS 세부정보가 화면 오른쪽이나 하단에 나타날 수 있습니다.

다양한 HTML 줄 위로 마우스를 가져가면 Chrome 검사기가 요소 탭에서 해당 줄을 강조 표시하고 강조 표시된 요소와 관련된 해당 CSS 규칙을 표시합니다.

CSS를 직접 편집하여 CSS가 어떻게 표시되는지 미리 볼 수 있습니다. 예를 들어 Twenty Twenty-Four 테마 기본 홈페이지의 배경색을 #f9f9f9에서 #6841ea로 변경하려는 경우입니다.

브라우저 검사기에서 배경색을 조정하면 변경 사항은 일시적입니다. 영구적으로 적용하려면 이 CSS 규칙을 하위 테마의 style.css 파일로 전송해야 합니다.

body {
background-color: #6841ea;
}

코드를 삽입한 후 수정 사항을 저장하는 것을 잊지 마세요. 사용자 정의하려는 다른 웹 페이지 요소에 대해 이 프로세스를 복제할 수 있습니다.

예를 들어 웹사이트의 색상을 수정한다고 가정해 보겠습니다. 그렇게 할 수 있는 몇 가지 CSS 코드를 제공할 수 있습니다.

텍스트 색상을 어두운 회색으로 변경하려면 CSS 파일에 다음 코드를 추가하세요.

body { color: #3b3b3b; } 

제목 색상을 파란색으로 변경하려면 다음 코드를 사용하십시오.

h1, h2, h3 { color: #007bff; }

헤더의 배경색에는 다음 코드를 사용하십시오.

#header { background-color: #f5f5f5; } /* Light grey background for header */

콘텐츠 영역의 경우 다음 코드를 사용하여 배경색을 흰색으로 설정합니다.

.site-container { background-color: #fff; } 

웹사이트의 하위 테마 디렉토리나 WordPress 대시보드를 통해 이러한 CSS 스타일을 하위 테마의 style.css 파일에 복사할 수 있습니다.

CSS 코드를 추가하면 다음 형식과 비슷해집니다.

변경 사항을 저장한 후 웹사이트 페이지를 새로 고쳐보세요. 변경 사항이 표시되지 않으면 브라우저 캐시를 지워 최신 버전의 CSS를 보고 있는지 확인하세요.

6.2 템플릿 파일 재정의

CSS 사용자 정의는 웹 사이트의 모양을 제어하지만 하위 테마는 템플릿 파일 재정의라는 보다 강력한 기능을 제공합니다.

이 고급 기능을 사용하면 레이아웃을 재구성하고 웹사이트 페이지의 구조 그리고 요소. 그러나 WordPress 템플릿, HTML 및 PHP에 대한 더 깊은 이해가 필요하므로 주의하십시오.

템플릿을 재정의하려면 원본 .php 파일을 상위 테마 폴더에서 하위 테마로 복사하고 정확한 파일 이름을 유지하세요. 

예를 들어, header.php를 재정의하려면 /parent-theme/ 디렉터리에서 header.php 파일을 복사하여 /child-theme/ 디렉터리에 header.php로 붙여넣어야 합니다.

이제 하위 테마에서 header.php를 편집할 수 있습니다.

재정의할 몇 가지 일반적인 템플릿은 다음과 같습니다.

• header.php – 포함 태그 및 사이트 브랜딩, 탐색 등
• footer.php – 마무리 태그와 마크업.
• page.php - 페이지의 기본 템플릿입니다.
• Single.php – 단일 게시물에 사용되는 템플릿입니다.
• index.php – 홈페이지 템플릿.

예를 들어 사이트에 대한 사용자 정의 저작권을 표시하여 footer.php를 수정할 수 있습니다.

<!-- Modified child footer.php -->

<footer>
  <p>&copy; <?php echo date('Y'); ?> My Company</p>

  <?php if ( is_active_sidebar('footer-1') ) : ?>
    <?php dynamic_sidebar('footer-1'); ?>
  <?php endif; ?>

</footer>

6.3 기능 확장

XNUMXD덴탈의 functions.php 하위 테마의 파일을 사용하면 새로운 PHP 함수, ​​후크, 필터 및 코드를 도입하여 상위 테마의 기본 기능을 확장할 수 있습니다.

이러한 유연성을 통해 사용자 정의 게시물 유형을 등록하고, 사용자 정의 위젯을 통합하고, 새로운 단축 코드를 생성하고, 추가 스크립트를 대기열에 추가하는 등의 작업을 수행할 수 있습니다.

예를 들어 WordPress 사이트에서 사용자 정의 위젯 전용 섹션을 원하는 경우 다음 코드 조각을 활용하여 "사용자 정의 위젯 영역"이라는 위젯 영역을 설정하세요.

function register_custom_widget() {
    register_sidebar( array(
        'name'          => 'Custom Widget Area',
        'id'            => 'custom_widget_area',
        'description'   => 'Add widgets here to appear in the custom widget area',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'register_custom_widget' );

이 코드를 하위 테마의 function.php 파일에 저장한 후 WordPress 사이트로 돌아가서 액세스하세요. 모양 → 위젯. 사용할 수 있는 "Custom Widget Area" 위젯이 표시됩니다.

7 자주하는 질문

8 결론

WordPress에서 하위 테마를 생성하는 것은 테마 업데이트 중에 변경 사항이 손실될 위험 없이 웹 사이트를 사용자 정의하는 데 도움이 되는 귀중한 기술입니다. 처음에는 어려워 보일 수도 있지만, 실수를 했다고 해서 너무 빨리 포기하지 마십시오. 

발생할 수 있는 가장 일반적인 오류는 코드에 누락된 항목으로 인해 발생하는 구문 오류입니다. 문제가 발생하면 언제든지 다시 시작할 수 있습니다. 

예를 들어, 상위 테마에 필요한 항목을 실수로 삭제한 경우 하위 테마에서 파일을 삭제하고 다시 시작할 수 있습니다. 

약간의 끈기를 갖고 하위 테마를 만들면 상위 테마의 안정성과 보안을 유지하면서 웹 사이트에 대한 고유한 모양과 느낌을 만들 수 있는 유연성을 얻을 수 있다는 점을 기억하십시오.

따라서 시도해 보고 WordPress 웹 사이트에 가져올 수 있는 차이점을 확인하십시오.

이 가이드가 귀하의 웹사이트에 대한 하위 테마를 만드는 데 도움이 되기를 바랍니다. 그렇다면 다음을 통해 알려주십시오. 트윗 @rankmathseo.

• SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
• PlatoData.Network 수직 생성 Ai. 자신에게 권한을 부여하십시오. 여기에서 액세스하십시오.
• PlatoAiStream. 웹3 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
• 플라톤ESG. 탄소, 클린테크, 에너지, 환경, 태양광, 폐기물 관리. 여기에서 액세스하십시오.
• PlatoHealth. 생명 공학 및 임상 시험 인텔리전스. 여기에서 액세스하십시오.
• 출처: https://rankmath.com/blog/wordpress-child-theme/