자식 테마를 만들고 사용자 지정하는 방법

WordPress 사이트의 테마를 변경하려는 경우 사람들이 WordPress 하위 테마를 사용하라고 말하는 것을 본 적이 있을 것입니다.

그러나 하위 테마는 무엇이며 왜 하위 테마가 그렇게 중요한가요?

이 게시물에서는 어린이 테마에 대한 소개와 함께 이러한 질문에 대한 답변을 제공하고 이것이 귀하에게 어떤 이점이 있는지 알려드립니다.

그런 다음 플러그인이나 코드를 사용하여 자신만의 하위 테마를 만들고 사용자 지정하는 방법을 단계별로 보여 드리겠습니다.

파헤쳐 봅시다.

WordPress 자식 테마는 독립 실행형 테마가 아닙니다. 기존 부모 테마의 "자식"이므로 이름이 지정됩니다.

상위 테마와 함께 설치하지만 상위 테마 자체를 편집할 필요 없이 상위 테마를 안전하게 변경할 수 있는 기회를 제공합니다.

자식 테마는 부모 테마에서 대부분의/모든 디자인 설정을 가져옵니다. 그러나 하위 테마를 변경하는 상황에서는 해당 변경 사항이 상위 테마의 설정보다 우선 적용됩니다.

이 시점에서 왜 부모 테마를 직접 변경할 수 없는지 궁금할 것입니다.

그것이 좋은 생각이 아닌 주된 이유는 테마 업데이트 입니다.

WordPress 사이트를 안전하고 제대로 작동하도록 유지하려면 테마 업데이트를 포함하여 업데이트가 나오면 즉시 적용해야 합니다.

하위 테마 없이 테마를 직접 편집하여 사이트를 사용자 지정하면 테마를 업데이트할 때마다 모든 변경 사항을 덮어쓰게 됩니다.

이는 다음 중 하나를 의미합니다.

• 테마를 업데이트하고 작업을 잃게 됩니다. 별로 재미있는 경험은 아니겠죠?
• 작업을 잃지 않도록 테마를 업데이트하지 마십시오. 이는 사이트 보안 및 기능에 좋지 않습니다.

WordPress 하위 테마를 사용하면 하위 테마에서 모든 변경을 수행할 수 있습니다. 그러면 작업 내용을 잃지 않고 상위 테마를 업데이트할 수 있습니다.

안전한 업데이트를 돕는 것 외에도 자식 테마를 사용하는 것은 일반적으로 사용자 지정을 만드는 데 편리합니다. 모든 변경 사항을 한 곳에서 분리하기 때문에 모든 편집 내용을 쉽게 추적하고 필요에 따라 조정할 수 있습니다.

역주행도 쉽게 해줍니다. 예를 들어 편집 사용을 중단하고 "바닐라" 상위 테마로 돌아가려면 하위 테마를 비활성화하기만 하면 됩니다.

일부 기성 WordPress 테마는 기본적으로 이 부모/자식 접근 방식을 사용합니다. 예를 들어, Genesis Framework를 사용하려면 디자인을 제어하기 위해 부모 테마(기본 프레임워크)와 자식 테마가 모두 필요합니다.

아래에 나열할 몇 가지 예외를 제외하고 기존 WordPress 테마를 직접 편집하려는 경우 항상 하위 테마를 사용해야 합니다.

일반적으로 WordPress 테마를 사용자 지정할 때마다 자식 테마를 사용하는 것이 좋은 모범 사례입니다.

그러나 하위 테마를 사용하는 것보다 더 나은 옵션이 있을 수 있는 규칙에 대한 몇 가지 예외가 있습니다.

첫째, CSS를 약간만 수정하려는 경우 몇 가지 조정을 위해 하위 테마를 만드는 것은 과도할 수 있습니다.

대신 WordPress Customizer에 내장된 추가 CSS 기능을 사용하여 사용자 정의 CSS를 추가할 수 있습니다. 또는 Tom Usborne의 Simple CSS 플러그인과 같은 무료 플러그인을 사용할 수 있습니다.

둘째, 테마와 무관하게 변경하려는 경우 하위 테마가 최선의 선택이 아닐 수 있습니다.

예를 들어 사용자 정의 분류 또는 사용자 정의 게시물 유형을 등록하는 경우 하위 테마의 functions.php 파일을 사용하고 싶지 않을 것입니다(테마를 전환하더라도 해당 파일을 유지하기를 원하기 때문). 대신 코드 조각과 같은 플러그인이나 사용자 정의 플러그인을 사용하여 테마 외부에 코드를 완전히 추가해야 합니다.

1. 무료 WordPress 자식 테마 생성기 플러그인을 사용하세요.
2. 수동으로 자신의 자식 테마를 만듭니다.

하위 테마 생성기 플러그인을 사용하면 WordPress 대시보드를 떠나지 않고 하위 테마를 만들 수 있습니다.

여기에서 가장 인기 있는 옵션은 300,000개 이상의 사이트에서 활성화된 무료 Child Theme Configurator 플러그인입니다.

Child Theme Configurator는 기본 자식 테마 파일을 만드는 데 도움이 될 뿐만 아니라 사용 중인 테마를 검색하고 필요에 따라 테마 및 글꼴 스타일 시트를 대기열에 추가합니다.

이미 콘텐츠를 추가한 사이트에서 하위 테마를 만들려는 경우 다른 유용한 기능도 포함되어 있습니다. 예를 들어, 기존 위젯과 사용자 정의 옵션을 하위 테마로 복사할 수 있습니다.

그러나 라이브 웹사이트 에서 플러그인 을 사용할 계획이라면 계속 진행하기 전에 전체 백업을 수행하는 것이 좋습니다. 또는 이상적으로는 스테이징 사이트에서 모든 것을 설정합니다.

백업이 준비되면 WordPress.org에서 무료 Child Theme Configurator 플러그인을 설치하고 활성화하여 시작하세요. 그런 다음 도구 → 하위 테마 로 이동하여 하위 테마 를 만듭니다.

상위 테마 선택 드롭다운에서 하위 테마를 만들 테마를 선택합니다. 그런 다음 분석을 클릭합니다.

그런 다음 플러그인은 종속성에 대한 상위 테마를 분석합니다.

완료되면 하위 테마를 만드는 방법을 구성하는 몇 가지 추가 옵션이 표시됩니다. 특정 설정이 무엇을 의미하는지 확실하지 않은 경우 기본값으로 그대로 둘 수 있습니다.

선택을 마쳤으면 하단에 있는 버튼을 클릭하여 새 하위 테마 만들기 를 클릭합니다 .

그리고 그게 다야! 그러면 플러그인이 자식 테마를 생성합니다. 그러나 하위 테마는 활성화 되지 않습니다 .

활성화하려면:

• 외모 → 테마로 이동합니다 .
• 하위 테마로 사이트가 어떻게 보이는지 미리 봅니다(작동하는지 확인하기 위해 – 사이트가 이상하게 보이면 CSS 문제 때문일 수 있음).
• 다른 WordPress 테마와 마찬가지로 하위 테마를 활성화하십시오. 그래도 부모 테마는 설치된 상태로 두십시오.

하위 테마를 활성화하면 하위 테마 구성기 플러그인에 하위 테마를 관리하는 데 도움이 되는 다른 유용한 도구도 포함됩니다. 예를 들어 플러그인 설정의 파일 탭으로 이동하면 상위 테마와 하위 테마에서 연결된 모든 파일을 볼 수 있습니다.

그런 다음 상위 테마에서 하위 테마로 파일을 복사할 수 있습니다.

예를 들어 single.php 를 수정하고 싶다면 해당 파일을 자식 테마에 복사하여 안전하게 수정할 수 있습니다.

또한 CSS 작업에 도움이 되는 다른 많은 도구도 찾을 수 있습니다.

이러한 도구가 유용한 이유는 나중에 다룰 것입니다.

이 섹션에서는 PHP와 CSS에 대해 약간 알고 있다고 가정합니다. 여기의 지침에 압도당하는 경우 이전 섹션의 무료 플러그인을 계속 사용하는 것이 좋습니다.

자식 테마를 수동으로 만들려면 두 개의 파일을 만들어야 합니다(하위 테마에 대한 최소한의 것입니다).

• style.css – 처음에는 약간의 상용구 코드만 추가하면 됩니다.

• functions.php – 상위 테마에서 스타일시트를 대기열에 넣을 수 있습니다. 이것이 없으면 자식 테마는 부모 테마의 CSS를 적용할 수 없으므로 사이트가 매우 보기 흉해 보입니다!

먼저 style.css 라는 파일을 만들고 다음 코드를 추가합니다.

/*

테마 이름: Hello Elementor Child

테마 URI: https://github.com/elementor/hello-theme/

설명: Hello Elementor Child는 Elementor 팀에서 만든 Hello Elementor의 자식 테마입니다.

저자: Elementor 팀

작성자 URI: https://elementor.com/

템플릿: hello-elementor

버전: 1.0.1

텍스트 도메인: hello-elementor-child

라이선스: GNU 일반 공중 라이선스 v3 이상.

라이선스 URI: https://www.gnu.org/licenses/gpl-3.0.html

*/

콜론 뒤에 오는 모든 것을 실제 정보로 바꾸십시오.

• 테마 이름 – 하위 테마의 이름입니다.

• 테마 URI – 테마 및 해당 문서에 대한 웹사이트입니다.

• 설명 – 테마에 대한 짧은 설명입니다.

• 작성자 – 테마 작성자의 이름입니다.

• 작성자 URI: – 테마 작성자의 웹사이트.

• 템플릿 – 상위 테마의 폴더 이름(wp-content/themes 폴더 내부에 이름이 지정됨). 이것이 없으면 자식 테마가 작동하지 않기 때문에 가장 중요한 줄입니다.

• 버전 – 하위 테마의 버전 번호입니다.

• 텍스트 도메인 – 국제화에 사용됩니다. 템플릿 이름 끝에 "-child"를 추가하면 됩니다.

• 라이선스 – 이것을 기본값으로 둡니다.

• 라이선스 URI - 이것을 기본값으로 둡니다.

템플릿 라인을 제외하고 입력하는 내용은 그다지 중요하지 않으니 너무 스트레스 받지 마세요. Template 에 대한 상위 테마의 폴더 이름을 올바르게 입력했는지 확인하십시오.

나중에 사용자 정의 스타일을 추가하려면 상용구 코드 아래 이 스타일시트에 추가할 수 있습니다.

다음으로, 당신은 당신의 자식 테마를 위한 functions.php 파일을 생성해야 합니다. 다시 말하지만, 이것은 부모 테마에서 전체 CSS 스타일시트를 대기열에 넣을 수 있게 해줍니다.

functions.php 파일에 다음 코드를 추가합니다.

<?php

/* 상위 테마에서 스타일시트를 대기열에 넣는 함수 */

함수 child_enqueue__parent_scripts() {

wp_enqueue_style( '부모', get_template_directory_uri().'/style.css' );

}

add_action( 'wp_enqueue_scripts', 'child_enqueue__parent_scripts');

style.css 파일과 functions.php 파일이 있으면 WordPress 사이트에 새 테마로 업로드해야 합니다.

이렇게 하려면 FTP를 사용하여 WordPress 사이트에 연결하십시오.

그런 다음 사이트의 테마 디렉토리( wp-content/themes )로 이동하여 하위 테마에 대한 새 폴더를 만듭니다.

예를 들어 상위 테마의 폴더가 hello-elementor 인 경우 기억하기 쉽 도록 하위 테마 폴더의 이름을 hello-elementor-child 로 지정할 수 있습니다.

그런 다음 해당 폴더 안에 style.css 및 functions.php 파일을 업로드합니다.

두 파일을 모두 업로드했으면 모양 → 테마 로 이동하여 다른 WordPress 테마와 마찬가지로 하위 테마를 활성화할 수 있습니다.