Divi 차일드 테마를 만드는 방법

게시 됨: 2024-06-28

사이트를 구축할 때 선택할 수 있는 WordPress 테마가 수천 개(맞습니다, 수천 개입니다!)가 있습니다. 그러나 대부분의 웹 디자이너는 WordPress 테마가 좋은 시작점이지만 더 많은 사용자 정의를 원하며 하위 테마를 만드는 것이 이를 위한 좋은 방법이라는 것을 알고 있습니다.

하위 테마는 상위 테마를 기반으로 하며 사용자가 자신의 코드를 추가하거나 제거할 수 있습니다. WordPress 사이트를 실제로 사용자 정의하고 싶다면 하위 테마를 사용하는 것이 가장 좋은 방법이며 Divi는 최선의 선택 중 하나입니다.

크리에이티브가 Divi 하위 테마를 만드는 가장 큰 이유는 상위 테마가 업데이트될 때 사이트가 중단되지 않도록 하기 위함입니다. Divi에서 하위 테마를 만드는 것은 기본적으로 사이트가 중단되기 전에 항상 안전망 역할을 합니다! 하지만 너무 앞서 있으니 기본부터 시작하겠습니다.

이 기사에서는 다음 내용을 다룰 것입니다.

  • Divi란 무엇이고 어떤 기능이 있나요?
  • Divi 어린이 테마를 만드는 방법(+ 무료 어린이 다운로드!)
  • Divi 하위 테마가 작동하는지 테스트하는 방법

뛰어 들어 봅시다.

Divi 란 무엇이며 기능은 무엇입니까?

Divi는 Elegant Themes의 WordPress 테마로, 처음부터 다양한 구조 요소를 사용하여 페이지를 구축할 수 있습니다. 이는 뛰어난 시각적 편집기 덕분에 여러분이 구축하고 있는 사이트의 모든 것을 완벽하게 제어할 수 있다는 것을 의미합니다.

또한 수백 가지의 미리 만들어진 디자인이 함께 제공되므로 테마를 만들고 사용자 정의한 경험이 없더라도 걱정하지 마세요! 첫 번째 사이트를 사용자 정의하려는 초보자이든 숙련된 개발자이든 Divi는 아이디어를 실현할 수 있는 도구를 제공합니다.

Divi 하위 테마를 만드는 개발자

Divi에는 WordPress 프런트엔드의 시각적 편집기와 백엔드 빌더라는 두 가지 빌더 인터페이스가 있습니다. 비주얼 편집기에서는 페이지 자체를 편집하고 편집 내용을 실시간으로 볼 수 있기 때문에 고객을 위한 사이트 구축이 10배 더 쉽고 빠르며 더 즐겁습니다. 백엔드에서는 게시물 내부의 블록 기반 표현을 편집하고 있습니다. 그러나 여전히 새 모듈을 추가하고 시각적 편집기에서와 마찬가지로 기본적으로 모든 작업을 수행할 수 있습니다. 또한 선호도에 따라 편집자 사이를 왔다 갔다 하는 것도 쉽습니다.

Divi에는 있는 그대로 활용하거나 정확한 사양에 맞게 사용자 정의할 수 있는 섹션, 행 및 모듈이라는 세 가지 주요 구조 요소도 있습니다.

섹션: Divi 빌더의 가장 큰 구성 요소입니다. 콘텐츠를 시각적으로 구별할 수 있는 영역으로 그룹화할 수 있는 수평 스택 블록으로 생각할 수 있습니다. 당신이 만드는 모든 것은 섹션으로 시작됩니다.

행: 행은 섹션 내부에 배치할 수 있는 다양한 열 레이아웃입니다. 여기에는 행 왼쪽 상단에 있는 설정 아이콘을 클릭하여 액세스할 수 있는 다양한 설정이 있으며, 모듈이 들어 있는 구조를 생성하므로 Divi Builder로 구축된 레이아웃의 다양성을 크게 늘리는 데 사용할 수 있습니다.

모듈: 모듈에는 이미지, 콘텐츠, 슬라이더, 갤러리, 문의 양식, CTA, 블로그, 양식, 추천서 등과 같은 다양한 콘텐츠 요소가 포함되어 있습니다. 40개가 넘는 모듈 중에서 선택하고 원하는 방식으로 맞춤 설정할 수 있습니다.

이제 Divi를 좀 더 잘 이해했으니, 하위 테마를 만드는 방법을 살펴보겠습니다.

Divi 차일드 테마를 만드는 방법

사용자 정의를 시작하기 전에 Divi가 설치되어 활성화되어 있는지 확인하고 싶을 것입니다. 이를 해결하는 방법에는 두 가지가 있습니다.

옵션 1: 빠르고 쉬운 설치를 위해 Flywheel + Divi를 사용하세요.

옵션 2: 수동 방법(이 두 단계를 따르세요)

1단계: 여기에서 Divi에 가입하고 다운로드하세요. 계정을 만들고 로그인하면 회원 영역으로 리디렉션되어 왼쪽으로 가서 "다운로드" 탭을 찾으세요. Divi를 찾아 “다운로드”를 클릭하세요. 이렇게 하면 Divi 다운로드가 zip 파일로 다운로드 폴더로 전송됩니다.

2단계: 이제 WordPress 사이트에 로그인할 차례입니다. 모양 > 테마로 이동합니다. 오른쪽에서 새로 추가 또는 새 테마 추가를 클릭합니다. 왼쪽 상단의 '테마 업로드' 버튼을 클릭하세요. 파일을 선택하고 해당 Divi zip 파일을 찾으세요. 참고: zip 파일로 보관하세요(압축을 풀지 마세요). 설치를 클릭합니다. 설치가 완료된 후 "활성화"를 클릭하면 사이트에 설치 및 활성화됩니다! ?

이제 Divi 어린이 테마를 만들 준비가 되었습니다! Divi 하위 테마를 만드는 방법에는 세 가지 주요 방법이 있습니다. 무료 하위 테마를 다운로드하거나, 플러그인을 사용하거나, 수동으로 코딩하는 것입니다.

옵션 1: 무료 Divi Child 테마 파일 다운로드

어린이 테마를 만드는 가장 빠르고 쉬운 방법 중 하나는 무료 Divi 어린이 테마를 다운로드하는 것입니다. 여기에는 시작하는 데 필요한 모든 것이 갖춰져 있을 뿐만 아니라 원하는 대로 맞춤 설정할 수 있는 공간도 있습니다! 아래에서 무료 Divi 어린이 테마를 다운로드하세요.

다운로드가 완료되면 Divi를 설치하고 활성화하면 됩니다! 그만큼 쉽습니다. Divi 하위 테마를 생성하는 다른 방법을 선호한다면 언제든지 플러그인을 사용해 볼 수 있습니다.

옵션 2: 플러그인을 사용하여 Divi 하위 테마 만들기

Divi 하위 테마를 만드는 데 도움이 되는 다양한 플러그인이 있습니다. 제가 개인적으로 좋아하는 몇 가지는 다음과 같습니다.

  • 디비 어린이
  • 하위 테마 구성자
  • Orbisius의 어린이 테마 생성기
두 손은 끝에 플러그인이 있는 코드를 잡고 있습니다.

디비 어린이

Divi Children은 Divi 사용자를 위해 특별히 개발된 무료 플러그인입니다. 어려운 작업은 자동으로 수행되므로 창의적인 측면에만 집중할 수 있습니다! Divi Children이 만든 모든 어린이 테마에는 WP Customizer를 통해 다양한 사용자 정의 기능이 포함되어 있습니다. 여기에서 이 플러그인을 설치하는 방법을 알아보세요.

하위 테마 구성자

이 플러그인은 하위 테마 스타일시트를 직접 사용자 정의할 수 있기를 원하는 WordPress 사용자를 위해 설계되었습니다. 이 플러그인을 사용하면 사용자 정의하려는 정확한 CSS 속성을 쉽게 식별하고 재정의할 수 있으며 분석기는 렌더링된 테마를 스캔하고 하위 테마를 자동으로 구성합니다. 여기에서 이 플러그인과 설치 방법에 대해 자세히 알아보세요.

Orbisius의 어린이 테마 생성기

이 플러그인을 사용하면 현재 사이트에 설치되어 있는 모든 테마에서 하위 테마를 빠르게 만들 수 있습니다. 이 플러그인을 사용하면 상위 테마에서 하위 테마를 무제한으로 생성할 수 있으므로 옵션이 무궁무진합니다. 두 개의 편집기가 있으며 한 테마에서 조각을 선택하여 다른 테마에 붙여넣을 수 있습니다. 사용자 정의에 대해 이야기하십시오! 여기에서 이 플러그인 설치에 대해 자세히 알아보세요.

마지막으로, 플러그인이 마음에 들지 않는다면 언제든지 Divi 하위 테마를 수동으로 생성할 수 있는 옵션이 있습니다!

옵션 3: Divi 하위 테마를 수동으로 생성

WordPress 개발자이거나 좋은 도전을 좋아한다면 Divi 하위 테마를 만들 수 있는 좋은 방법입니다.

자신의 사이트에 도움이 되는 새로운 도구를 찾고 있는 개발자입니다.

1단계: style.CSS 파일 만들기

아시다시피 style.css 파일은 WordPress에 하위 테마의 세부 정보를 알려주기 위한 것이며 사용자 정의 CSS를 추가하는 데 사용할 수 있습니다! 이렇게 하려면 컴퓨터에 폴더를 만들고 이름을 지정합니다(Divi 하위 테마용임을 알 수 있는 이름). 거기에서 해당 폴더에 파일을 만들고 이름을 style.css로 지정합니다.

참고: 텍스트 또는 코드 편집기 도구가 있는지 확인하십시오. 그렇지 않으면 해당 파일의 이름을 지정하기가 어려울 것입니다!

2단계: style.css 파일에 다음을 추가합니다.

 /*
 테마 이름: Divi Child 테마
 테마 URI: https://www.elegantthemes.com/gallery/divi/
 설명: Divi용 어린이 테마
 작가 : 당신의 이름
 작성자 URI: https://getflywheel.com/
 템플릿: 디비
 버전: 1.0.0
*/

테마 이름, 테마 URI, 설명, 작성자, 작성자 URI 및 버전을 모두 편집할 수 있습니다. 템플릿 이름을 그대로 유지하세요! 더 많은 사용자 정의를 원하고 Divi 하위 테마가 작동하는지 확인하려면 여기에 사용자 정의 CSS를 추가하세요.

3단계: function.php 파일 생성

이미 생성한 폴더에 다른 파일을 생성하고 이름을 function.php로 지정하세요.

그런 다음 이 코드를 새 파일에 추가하고 마지막 줄 아래에 원하는 사용자 정의 함수를 추가하세요.

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

4단계: 스크린샷 만들기

이는 WordPress 테마 페이지에서 이미지가 있어야 할 빈 공간이 사이트에 없도록 하는 중요한 단계이므로 빠른 스크린샷을 찍는 것이 여기서 중요한 단계입니다! 스크린샷을 찍은 후 크기가 880x660px인지, .png 또는 .jpeg(둘 중 하나)인지, 이름이 [screenshot.png] 또는 [screenshot.jpeg]인지 확인하세요. 그런 다음 스크린샷 이미지를 기본 폴더에 추가합니다.

5단계: 폴더를 압축하고 업로드하세요.

마지막으로 폴더를 zip 파일 형식으로 압축하여 워드프레스에 업로드하세요! 모양 > 테마 > 업로드 로 이동한 다음 활성화를 클릭합니다.

짜잔! Divi 어린이 테마를 성공적으로 생성했으며 원하는 대로 사용자 정의할 준비가 되었습니다.

Divi Child 테마가 작동하는지 테스트하는 방법

하위 테마가 올바르게 작동하는지 테스트하려면 하위 테마 style.css 파일에 일부 CSS를 추가하고 변경 사항을 저장하세요. 라이브 사이트에서 이러한 변경 사항을 확인해야 하며 이를 통해 작동하는지 알 수 있습니다!

참고: 페이지가 캐시된 경우 개인 브라우저에서 페이지를 열어야 할 수도 있습니다.

기억하세요: 뭔가 문제가 생길 경우를 대비해 라이브 사이트를 절대로 변경해서는 안 됩니다! 무료 로컬 개발 앱인 Local을 사용하면 로컬 환경 디버깅을 중단하고 아름다운 WordPress 사이트를 시작하는 데 더 많은 시간을 할애할 수 있습니다. 여기에서 로컬에 대해 자세히 알아보세요.

결론

사용자 정의는 WordPress를 사용하여 사이트를 만들 때 가장 좋은 부분 중 하나이며 테마는 훌륭한 시작 장소이지만 Divi와 같은 하위 테마를 마음대로 사용하는 것이 좋습니다.

무료 Divi 어린이 테마 다운로드

어린이 테마를 만드는 가장 빠르고 쉬운 방법 중 하나는 무료 Divi 어린이 테마를 다운로드하는 것입니다. 여기에는 시작하는 데 필요한 모든 것이 갖춰져 있을 뿐만 아니라 원하는 대로 맞춤 설정할 수 있는 공간도 있습니다! 아래에서 무료 Divi 어린이 테마를 다운로드하세요.