Divi 자식 테마 만들기 가이드

Divi 자식 테마 만들기 가이드
Ultimate Guide to Creating a Divi Child Theme
차일드 테마 예시

용어

자식 테마(=Child 테마 =차일드 테마 =하위 테마)

부모 테마(=Parent 테마 =상위 테마)

Divi 자식(=Child =차일드 =하위) 테마를 만드는 것은 Divi 테마를 업데이트할 때마다 변경 사항이 지워지는 걱정할 필요 없이 테마에 고급 사용자 정의를 추가할 수 있는 좋은 방법입니다.

Divi 자식 테마는 많은 이점이 있습니다. 이를 통해 모든 사용자 정의 CSS/코드를 한 곳에서 더 잘 구성할 수 있으므로 다른 사람들과 더 쉽게 공동 작업할 수 있습니다. 이것은 또한 테마 사용자 정의 및 설정 내에서 사용자 정의 코드에 액세스할 수 있는 클라이언트로부터 코드를 보호하는데 도움이 됩니다.

이번 포스팅에서는 Divi 자식 테마를 만드는 방법을 알려드리겠습니다. 이 프로세스가 Divi를 처음 시작하는 사람들과 고객을 위해 완전한 Divi 자식 테마를 공개하려는 개발자에게 도움이 되기를 바랍니다.

시작합니다!

Divi 자식 테마가 필요한 이유

new version
Dici 업데이트 표시

Divi는 워드프레스 테마입니다. WordPress 테마를 수정할 때마다 해당 상위 테마의 디자인과 기능을 상속하는 자식 테마를 만드는 것이 가장 좋습니다. 자식 테마를 만드는 중요한 이유 중 하나는 부모 테마를 업데이트할 때 수정한 내용을 유지하기 위해서 입니다.

Divi를 업데이트할 때마다 모든 테마 파일이 업데이트되므로 이러한 파일을 변경하면 해당 변경 사항이 지워집니다. 따라서 Divi의 테마 파일을 직접 수정하는 대신 자식 테마내에 추가 테마 파일을 생성하여 Divi가 업데이트될 때 해당 자식 테마 파일이 변경되지 않은 상태로 유지되도록 할 수 있습니다.

따라서 페이지 템플릿 수정, 많은 양의 CSS/JavaScript 추가 또는 새로운 기능 추가와 같은 고급 사용자 지정을 테마에 적용하려는 경우 만질 필요 없이 자식 테마를 변경하는 것이 가장 좋습니다.

자식 테마 없이 Divi를 사용할 수 있나요?

need a child theme
사용자 정의 CSS 적용 모습

이유를 이해하기만 하면 Divi 자식 테마를 만들지 않고도 Divi를 사용할 수 있습니다.

Divi를 사용하면 Divi 빌더, 테마 커스터마이저, 테마 설정과 같은 위치에 사용자 정의 CSS 및 코드를 추가할 수 있습니다. 사실 Divi는 이 목적을 위해 코드 편집을 개선했습니다. 그리고 이 코드는 Divi 테마를 업데이트할 때 보존됩니다. 따라서 사용자가 약간만 수정하려는 경우 자식 테마가 필요하지 않다는 주장이 있습니다. 또한 Divi는 정적 CSS 파일을 자동으로 축소하고 캐시하므로 페이지 로드 속도에 문제가 없습니다.

일을 단순화하기 위해 Divi 자식 테마를 사용해야 하는 상황과 사용하지 말아야 하는 상황을 분석해 보겠습니다.

다음과 같은 경우 Divi 자식 테마를 사용해야 합니다.
  1. 특정 테마 파일의 코드를 변경할 계획입니다(여기에는 페이지 템플릿 및 functions.php와 같은 항목이 포함됨)
  2. 수백 줄의 코드(CSS, JavaScript 등)를 추가할 계획입니다. 테마 설정과 같은 위치에 추가하는 것은 가능하지만 CSS가 많으면 관리하기가 더 어려워집니다.
  3. 다른 사람들과 협업하고 모든 것을 하나의 조직화된 공간에 보관하여 개발 시간을 단축하고자 합니다.
  4. 고객이 테마 커스터마이저/설정을 어지럽히고 코드를 바꾸는 것을 원하지 않습니다. 자식 테마에 넣어두면 안전하게 보호됩니다.
다음과 같은 경우 Divi 자식 테마를 사용하면 안 됩니다.
  1. 당신은 사소한 테마 수정을 할 계획입니다. 적은 양의 CSS(예: 100줄 미만)를 추가하거나 테마 설정/사용자 지정 프로그램에 몇 가지 스크립트를 추가하는 것은 당신이 만들 계획의 전부인 경우 자식 테마를 만들 필요가 없습니다.
  2. 팀과 협력할 계획이 없습니다.
  3. 고객이 테마 설정/사용자 정의에서 코드 수정 사항을 보는 것을 개의치 않습니다.

Divi 자식 테마를 만드는데 필요한 것

Divi 자식 테마를 만들려면 다음이 필요합니다.

  • Divi 테마 설치 및 활성화
  • 테마 파일 편집을 위한 텍스트 편집기. Windows 또는 Mac과 함께 제공되는 텍스트 편집기를 사용할 수 있지만 이러한 파일을 편집하는 습관을 만들 계획이라면 VS Code, Atom, Sublime, Notepad++ 등과 같은 보다 강력한 텍스트 편집기를 사용하는 것이 좋습니다.
  • FTP 클라이언트 – 하위 테마를 zip 파일로 WordPress에 업로드하려는 경우에는 필요하지 않습니다. 그러나 라이브 사이트의 테마 파일에 액세스하려는 경우 테마 파일에 액세스, 편집, 추가 또는 삭제할 수 있으려면 FileZilla와 같은 FTP 클라이언트가 필요합니다. 로컬 설치 작업을 하는 경우 하드 드라이브에서 직접 테마 파일에 액세스할 수 있어야 합니다.
  • 커피 또는 차 한잔(선택 사항)

자식 테마의 구성 요소

자식 테마 구성 요소

가장 기본적으로 자식 테마는 세 가지 요소로 구성되어야 합니다.
  1. 자식 테마 디렉토리(또는 폴더). 모든 테마와 마찬가지로 자식 테마 폴더는 하위 테마 파일이 있는 WordPress 테마 폴더 안에 있습니다.
  2. style.css 파일(자식 테마 CSS를 저장하는데 사용됨)
  3. functions.php 파일 – 이 파일은 상위 테마 스타일시트를 대기열에 넣을 wp_enqueue_scripts 작업을 보유합니다(자세한 내용은 나중에).

자식 테마 만드는 순서

1. 자식 테마 디렉토리 생성(폴더)

child theme folder
자식 테마 폴더

WordPress에 자식 테마 파일을 추가하는 방법에는 두 가지가 있습니다.

1. 자식 테마 폴더를 WordPress 테마 파일에 직접 추가하는 방법(FTP를 통해 또는 로컬로).

2. WordPress 외부에 폴더를 만들어 나중에 압축하여 새 테마로 WordPress에 업로드할 수 있습니다.

자식 테마를 위한 새 폴더를 WordPress에 직접 만들려면 wordpress 테마 폴더(wp-content/themes/)에 있는 테마 파일에 액세스해야 합니다. 그런 다음 테마 폴더 안에 새 폴더를 만들고 “divi-child”라는 이름을 지정합니다. 따라서 새 자식 테마 디렉토리는 wp-content/themes/divi-child가 됩니다.

new child theme folder
Divi 자식테마 디렉토리

두 번째 방법인 나중에 압축하여 WordPress에 업로드할 자식 테마 폴더를 생성하는 경우 컴퓨터에 새 폴더를 만들고 “divi-child”라는 이름을 지정하면 됩니다.

2. 사용자 지정 CSS를 추가하기 위해 자식 테마 Style.css 파일 만들기

CSS 추가

새 테마 폴더 내에서 텍스트 편집기를 사용하여 style.css라는 파일을 만들고(이름이 정확히 이 이름이어야 하며 그렇지 않으면 WordPress에서 인식하지 못합니다) 아래에 설명된 대로 정보를 입력합니다.

/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */

모든 정보를 입력하는 방법을 아는데 어려움을 겪고 있다면 걱정하지 마십시오. 자식 테마를 공개할 계획이 없다면 테마 이름과 템플릿만 입력하면 됩니다.

required header contents
테마 이름, 템플릿은 필수

“Template:” 매개변수가 “Divi”인 상위 테마의 디렉토리 이름을 올바르게 식별하는지 확인해야 합니다. 테마 이름, URI, 설명 및 작성자는 전적으로 당신에게 달려 있습니다. 고객 요구 사항에 맞게 이 헤더 정보를 사용자 정의할 수 있습니다. 예를 들어 WordPress 대시보드에서 테마를 방문할 때 표시되는 이름이므로 테마 이름에 클라이언트 회사 이름을 추가할 수 있습니다.

3. 자식 테마 Functions.php 생성

자식 테마 functions.php 생성

이제 자식 테마에 대한 style.css 파일이 준비되었으므로 Divi(상위 테마) 내부에 이미 있는 스타일을 빠뜨리지 않도록 해야 합니다. 즉, 먼저 Divi의 부모 스타일시트를 사용한 다음 새 스타일시트를 사용해야 합니다. CSS에 익숙하다면, 맨 아래에 입력하는 코드가 맨 위에 있는 코드보다 우선되는 것을 알겁니다. 이 순서가 중요합니다. 부모 스타일시트 코드가 먼저 로드된 다음 자식 스타일시트 코드가 마지막에 로드되기를 원합니다.

이렇게 하려면 부모 테마의 스타일시트를 대기열에 넣어야 합니다. Enqueue는 말 그대로 “대기열에 추가”를 의미하는 멋진 단어이므로 이 경우에는 자식 테마 스타일시트보다 먼저 대기할 부모 스타일시트를 추가합니다. 즉, 자식 테마 스타일시트에 추가하는 모든 항목은 부모 테마에 추가되고 대체됩니다.

Divi는 처음 출시된 이후로 원래 WordPress에서 권장하는 자식 테마 설정 방법을 따르도록 설정되었습니다. 자식 테마를 만드는 전통적인 방법은 자식 테마 style.css 파일 내에서 부모 테마 스타일시트의 CSS @import를 사용하는 것이었습니다.

많은 테마가 여전히 이러한 방식으로 설정되어 있으며 자식 테마는 고유한 style.css를 정의하는 간단한 작업을 남겨두고 @import -ing Divi의 style.css 및 Divi는 해당 파일을 자동으로 로드합니다. 이것은 기본 스타일시트를 대기열에 넣을 때 get_stylesheet_directory_uri() 함수를 사용하여 Divi에서 작동합니다.

이것이 의미하는 바는 Divi가 자체 스타일시트 또는 자식 테마의 스타일시트(둘 중 활성화된 것)를 호출하도록 설정되어 있다는 것입니다. 기본적으로 get_stylesheet_directory_uri()를 사용하여 자식 테마를 활성화한 경우 WordPress는 uri를 상위 테마 디렉토리가 아닌 하위 테마 디렉토리로 반환합니다.

이제 WordPress가 이에 접근하는 권장 방법을 업데이트했으므로 Divi 자식 테마의 스타일을 쉽게 설정할 수 있습니다. Divi는 이미 자식 테마의 style.css를 대기열에 추가하도록 설정되어 있으므로 Divi의 기본 style.css를 명시적으로 대기열에 추가하기만 하면 됩니다.

이렇게 하려면 텍스트 편집기를 사용하여 자식 테마 폴더 내에 다른 파일을 만들어야 합니다. 이름 functions.php로 파일을 저장하고(이름은 정확히 다음과 같아야 함) 다음 코드를 파일에 추가합니다.

<?php
function my_theme_enqueue_styles() { 
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

그런 다음 파일을 저장합니다.

이 코드는 Divi 전용이며 WordPress Codex에서 제안한 방법의 수정된 버전입니다.

팁: PHP 닫는 태그가 필요하지 않습니다. 이와 같은 PHP 문서는 항상 열린 php 태그로 시작해야 합니다(코드는 태그 없이는 작동하지 않습니다). 그러나 PHP 닫는 태그를 포함하지 않는 것이 가장 좋습니다. 이렇게 하면 잘못된 닫는 태그로 인해 PHP 코드가 잘리거나 포함하려고 할 때 코드를 손상시킬 수 있는 원치 않는 공백이 생성되지 않습니다.

그건 그렇고, (분명히) 이것이 작동하기 위해 이 PHP 코드의 내부 동작을 이해할 필요가 없습니다. 혼란스러워도 걱정하지 마십시오. 위의 코드를 복사하여 자식 테마의 functions.php 파일에 붙여넣으면 끝입니다.

4. Divi 자식 테마의 썸네일 만들기(선택 사항)

자식 테마 썸네일 위치

WordPress 대시보드에서 테마를 볼 때 테마 스크린샷 또는 브랜딩 이미지로 사용할 썸네일을 제공할 수 있습니다.

자식 테마의 썸네일을 만들려면 먼저 이미지를 만들고(워드프레스(WP) 권장 사이즈: 가로 1200px x 세로 900px) 파일 이름 screenshot.png로 저장합니다(파일 이름은 WP가 인식할 수 있도록 정확히 이 이름이어야 함). 그런 다음 자식 테마 폴더에 추가합니다.

다음은 Divi 자식 테마의 썸네일 예시입니다.

screenshot
Divi 자식 테마 썸네일 예시

지금까지 따라 오셨다면, 자식 테마 폴더에 있어야 하는 세 가지 파일입니다.

folder contents
자식 테마 구성 요소

5. 자식 테마 업로드 및 활성화

자식 테마 폴더, style.css 파일 및 functions.php 파일을 생성하면 자식 테마를 업로드하고 활성화할 준비가 됩니다.

Divi 테마가 업로드 되었는지 확인하여 활성화 후 자식 테마가 작동하도록 합니다.

  1. 자식 테마 폴더와 파일을 워드프레스 테마 디렉토리에 직접 추가했다면 테마를 워드프레스에 업로드할 필요가 없습니다. 이미 거기에 있습니다. WordPress 대시보드로 이동하여 외모 -> 테마로 이동하고 자식 테마 위로 마우스를 가져간 다음 활성화 버튼을 클릭하기만 하면 됩니다.
  2. 컴퓨터에 자식 테마 폴더와 파일을 만든 경우 WordPress에 업로드하기에 적절한 형식이 되도록 먼저 압축(ZIP)해야 합니다. 압축이 완료되면 자식 테마를 업로드하고 활성화하는 것은 일반 테마와 다르지 않습니다. WordPress 대시보드의 외모 -> 테마 페이지를 통해 업로드하고 활성화하기만 하면 됩니다.
upload child theme
자식 테마 업로드

그런 다음 평소처럼 테마를 활성화합니다.

new theme activated
Divi 자식 테마 활성화

자식 테마가 올바르게 작동하는지 테스트하려면 자식 테마 style.css 파일에 CSS를 추가하고 변경 사항을 저장하십시오. 라이브 사이트에서 이러한 변경 사항을 확인해야 합니다. 페이지가 캐시된 경우 개인 브라우저에서 페이지를 열어야 할 수 있습니다.

6. Divi의 Functions.php 파일 편집

Functions.php 파일은 Divi의 주요 기능이 저장되는 곳입니다. 자식 테마에 대한 사용자 정의 기능을 추가하기 위해 하위 테마 폴더에 functions.php 파일을 만들었습니다. 그러나 이 파일은 상위 테마의 기능을 완전히 무시하지는 않습니다. style.css 파일이 상위 스타일시트에 대해 수행하는 것처럼 새 기능을 추가합니다.

이것은 PHP 파일이기 때문에 모든 PHP 코드를 적절한 PHP 태그로 감싸는 것이 중요합니다. 그러나 자식 테마를 만들 때 functions.php 파일을 이미 추가하고 편집했으므로 이미 있는 코드 바로 뒤에 새 기능을 추가할 수 있습니다.

<?php
function my_theme_enqueue_styles() { 
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
 
 
//이 밑으로 새 코드 추가

6. Divi의 템플릿 파일 편집

style.css functions.php 파일 외에도 편집할 수 있습니다. 템플릿 파일이나 PHP 파일을 포함하여 상위 테마의 모든 파일을 추가하고 편집할 수 있습니다.

테마의 모든 부분을 완전히 재구성하고 조정할 수 있습니다(이 작업은 각별히 주의하십시오). functions.php를 편집하는 것과 달리 템플릿 파일은 완전히 새 파일로 교체해야 합니다. 상위 테마(Divi) 원본 파일을 무시하고 새 파일을 사용하기 때문입니다.

템플릿 파일을 편집하려면 수정을 시작하기 전에 먼저 이전 파일을 복제해야 합니다. 이렇게 하려면 테마의 원본 파일을 복사(잘라내기가 아님)하고 자식 테마 폴더에 붙여 넣으면 파일 이름과 위치가 정확히 동일합니다. 예를 들어, Divi/includes/navigation.php를 수정하려면 이 파일을 복사하여 divi-child/includes/navigation.php에 붙여 넣습니다.

navigation file
템플릿 복사

이름과 위치가 상위 테마와 정확히 같으면 WordPress는 이전 테마 대신 자식 테마 파일을 사용합니다.

현재 사용자 지정 CSS/코드를 자식 테마로 마이그레이션

Divi 자식 테마를 만든 후에는 모든 것이 한 곳에 있는지 확인하고 싶을 것입니다. 따라서 사용자 지정 CSS 또는 코드가 Divi에 이미 추가되어 있는 경우 이를 자식 테마로 마이그레이션합니다. 예를 들어 Divi -> 테마 커스터마이저 -> 추가 CSS에 사용자 지정 CSS가 있는 경우 CSS를 자식 테마의 style.css 파일로 이동시키기만 하면 됩니다.

paste css
테마 커스터마이저 마이그레이션

자식 테마 업데이트

Divi와 WordPress는 지속적으로 개선되고 적응하고 있습니다. 따라서 (많은 Divi 업데이트 후) Divi의 테마 파일 중 일부가 변경될 때가 올 수 있습니다. 그리고 변경된 파일을 재정의하는 자식 테마가 있는 경우 자식 테마가 어떤 식으로든 중단될 수 있습니다.

이는 자식 테마 내에서 오래된 코드를 사용하고 있고 Divi에서 사용 중인 새 코드와 일치하도록 업데이트해야 하기 때문입니다. 따라서 오랫동안 자식 테마를 사용했는데 문제가 발생하기 시작하면 코드를 업데이트해야 할 수 있습니다.

정리하며

자식 테마를 만드는 여러 가지 좋은 방법이 있습니다. 하지만 워드프레스 테마는 설정이 다른 경우가 많기 때문에 Divi 테마 전용의 자식 테마를 만드는데 집중하는 것이 가장 도움이 될 거라고 생각했습니다.

개발자의 경우 더 나은 성능을 위해 부모 및 자식 스타일시트를 대기열에 넣는 모범 사례를 아는 것이 도움이 될 수 있습니다. 초보자의 경우 이 튜토리얼이나 플러그인을 사용하여 하위 테마를 만들기 위해 모든 것이 어떻게 작동하는지 반드시 이해할 필요는 없습니다. 그리고 Divi에 내장된 스타일 설정만 있으면 되기 때문에 자식 테마가 필요하지 않다는 것을 알게 될 수도 있습니다. 어쨌든 이 게시물이 도움이 되길 바랍니다.

원문: https://www.elegantthemes.com/blog/divi-resources/divi-child-theme

코멘트 제출