WordPress에서 블록 하위 테마를 만드는 방법

게시 됨: 2023-07-14

이 시나리오를 상상해 보십시오. 웹 사이트에서 사용할 거의 완벽한 테마를 방금 찾았습니다. 디자인이 잘 되어 있고 원하는 레이아웃이 포함되어 있지만 색상 팔레트를 변경하고 클라이언트가 일부 영역을 수정하지 못하도록 제한하려고 합니다. 안타깝게도 사용 중인 테마에서는 기본 색상을 제거하거나 블록을 잠글 수 없습니다.

테마 파일을 직접 편집할 수 있지만 테마 업데이트를 실행하면 모든 수정 사항이 손실됩니다. 코드 스니펫 플러그인을 사용하여 약간의 맞춤 CSS를 추가할 수 있지만 로그인한 사용자가 사용할 수 있는 스타일 옵션은 변경되지 않습니다.

그래서 당신은 무엇을 할 수 있습니까? 전역 스타일 사용 가능한 옵션을 어떻게 변경합니까? 이를 위해서는 블록 하위 테마가 필요합니다.

워드프레스 차일드 테마란?

WordPress 개발자 설명서에 따르면:

자식 테마는 부모 테마의 모양과 느낌과 모든 기능을 상속하지만 테마의 모든 부분을 수정하는 데 사용할 수 있습니다. 이러한 방식으로 사용자 정의는 상위 테마의 파일과 별도로 유지됩니다. 하위 테마를 사용하면 사이트에 적용한 사용자 정의에 영향을 주지 않고 상위 테마를 업그레이드할 수 있습니다.

따라서 워드프레스에서 자식 테마를 사용하려면 부모 테마도 설치해야 합니다. 하위 테마는 몇 가지 변형이 추가된 상위 테마의 모든 것을 상속합니다.

자식 테마를 만드는 방법

사이트의 스타일을 맞춤설정하는 코드 옵션을 원하십니까? 다른 WordPress 테마를 재정의하는 것처럼 자식 테마를 사용하는 것이 코드를 재정의하는 가장 좋은 방법입니다. 테마가 업데이트되면 하위 테마 코드는 그대로 유지됩니다.

이 기사에서는 좋은 WordPress 자식 테마를 만드는 주요 구성 요소를 다루고 심층 읽기 리소스를 제공합니다.

1. 블록차일드 테마를 사용하는 경우

하위 테마는 종종 훌륭한 솔루션입니다. 그러나 약간의 CSS 코드만 추가하려는 경우 전체 하위 테마가 과도할 수 있습니다. 약간의 사용자 정의를 추가하기 위해 Code Snippets와 같은 플러그인을 고려하십시오.

클라이언트 사이트 사용자 지정

고객을 위한 사이트를 구축할 때 제공할 수 있는 몇 가지 추가 사용자 지정이 있습니다.

사용자가 새 블록을 삽입하거나 기존 블록을 이동하거나 블록을 삭제할 수 있는 기능을 제어하려면 블록 잠금을 구현해야 할 수 있습니다. 이 소개 튜토리얼에서 블록을 잠그는 방법 등을 배울 수 있습니다.

테마 변형 만들기

테마 레이아웃 클라이언트가 수정할 수 있는 영역을 정의하는 것 외에도 색상 팔레트 옵션을 변경하여 테마 또는 WordPress와 함께 기본적으로 제공되는 항목을 생략하고 고유한 옵션을 추가할 수도 있습니다. 테마에서도 사용할 수 있는 그라디언트 및 이중톤 옵션을 정의할 수도 있습니다.

2. 좋은 WordPress 테마 선택

모든 테마가 똑같이 생성되는 것은 아닙니다. 테마 디자인에 표시되는 것 외에도 상위 테마 선택에는 업데이트 빈도, 지원 품질, 문서 및 테마 개발자의 평판과 같은 추가 요소가 포함됩니다. WordPress 테마를 사용하여 웹사이트를 구축하는 방법에서 자세히 알아보세요.

3. 테스트 환경 만들기

지금까지 상위 테마를 선택하고 브랜드 자산을 수집했으며 재정의할 설정을 결정했습니다. 다음으로 테스트 환경을 설정해야 합니다.

GoDaddy의 관리형 WordPress 호스팅과 같은 관리형 WordPress 호스팅 공급자를 사용하는 경우 원클릭 준비 사이트를 개발 환경으로 사용할 수 있습니다. 호스팅을 위해 cPanel 또는 VPS와 같은 것을 사용하는 경우 별도의 WordPress 설치를 설정하고 기존 사이트를 새 설치로 복제하거나 복사할 수 있습니다.

기존 사이트에 자식 테마를 적용하지 않거나 처음부터 새로 구축하려는 경우 ServerPress의 MAMP 또는 DesktopServer와 같은 도구를 사용하여 컴퓨터에 로컬 WordPress 개발 환경을 만들 수 있습니다.

4. 테마 디렉토리 생성

먼저 부모 테마를 설치해야 합니다. 그런 다음 FTP 클라이언트를 사용하여 개발 환경에 연결하고 WordPress 파일이 있는 위치로 이동합니다.

다음 폴더를 찾고 있습니다.

 /wp-콘텐츠/테마/

여기에서 설치된 모든 WordPress 테마를 찾을 수 있습니다. 각 테마에는 테마의 모든 파일이 들어 있는 자체 폴더 또는 디렉토리가 있습니다. 하위 테마를 포함할 새 디렉토리를 목록에 추가할 것입니다. 다음과 같이 끝납니다.

 /wp-content/themes/your-child-theme/

5. 테마 파일 만들기

이 예에서는 Twenty Twenty Two 테마를 사용한다고 가정합니다. 하위 테마를 다시 참조하려면 해당 테마를 설치해야 합니다.

새 자식 테마 디렉터리 폴더 내에서 두 개의 새 파일을 만듭니다.

 스타일.css
테마.json

이 두 파일은 모두 특정 용도로 사용됩니다. style.css 파일은 WordPress에 이름, 작성자, 태그 및 상위 테마 ID와 같은 테마에 대한 정보를 제공하는 데 사용됩니다.

theme.json 파일은 전역 스타일 등의 많은 설정을 정의하는 데 사용됩니다. 개발자 핸드북에서 theme.json에 대해 자세히 알아보세요.

이전 클래식 테마에서는 하위 테마에 functions.php 파일이 필요했습니다. 블록 하위 테마에는 이 단계가 필요하지 않습니다.

스타일.css

style.css 파일에 속한 항목은 무엇입니까? 개발자 설명서는 다음과 같이 말합니다.

스타일시트는 파일 맨 위에 아래의 필수 헤더 주석을 포함해야 합니다. 이는 WordPress에 특정 부모가 있는 자식 테마라는 사실을 포함하여 테마에 대한 기본 정보를 알려줍니다.

헤더 정보가 포함된 style.css 파일에 상용구를 포함해야 합니다. 템플릿 이름: 위에 구축하려는 상위 테마의 폴더(디렉토리) 이름에 해당합니다. 텍스트 도메인 : 이름은 WordPress 하위 테마에 고유합니다.

다음은 Twenty Twenty Two를 사용하는 하위 테마의 예입니다.

 /*
테마 이름: Twenty Twenty-Two Child
테마 URI: https://example.com/
저자: 당신의 이름
작성자 URI: https://example.com/
설명: Twenty Twenty Two 아동 테마
최소 요구 사항: 5.8
최대 테스트: 5.9
PHP 필요: 5.6
버전: 0.1
라이선스: GNU General Public License v2 이상
라이선스 URI: http://www.gnu.org/licenses/gpl-2.0.html
텍스트 도메인: Twentytwentytwo-child
템플릿: 스물트웬티투
태그: 사용자 정의 색상, 사용자 정의 메뉴, 사용자 정의 로고, 편집기 스타일, 추천 이미지, 전체 사이트 편집, 블록 패턴

Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two Child는 GNU GPL 조건에 따라 배포됩니다.
*/

Theme.json

theme.json에 대한 자세한 내용은 개발자 문서를 참조하세요. Twenty Twenty Two theme.json 파일을 살펴보겠습니다.

 {
 "버전": 2,
 "설정": {},
 "스타일": {},
 "customTemplates": {},
 "templateParts": {}
}

이들 각각에는 사용할 수 있는 추가 스타일이 있습니다. 예를 들어 스타일 영역에서 Twenty Twenty Two는 다음을 사용합니다.

 {
 "설정": {
 "appearanceTools": 참,
 "색상": {
 "듀오톤": [
 {
 "색상": [
 "#000000",
 "#ffffff"
 ],
 "slug": "전경 및 배경",
 "name": "전경 및 배경"
}

theme.json 파일을 만드는 데 도움이 필요하십니까? theme.json 파일에 대한 많은 선택 항목을 생성하는 가이드는 themegen.app을 확인하세요.

6. 블록 하위 테마 사용자 정의

theme.json 파일을 쉽게 만들고 테마에 추가할 수 있지만 몇 가지 다른 선택 사항이 남아 있습니다. 하위 테마와 블록 테마는 WordPress의 새로운 영역입니다. 사이트 편집기에는 이 게시물 작성 시점에 분명히 베타 레이블이 있습니다. 템플릿 부분과 같은 하위 테마에서 아직 작동하지 않는 것이 무엇인지 다시 참조하고 싶을 것입니다.

또한 전역 스타일 및 theme.json이 아직 지원하지 않는 설정을 찾을 수 있습니다. 상자 그림자가 있는 그룹 블록 테두리와 같은 추가 CSS를 추가하는 경우 style.css 파일에 추가할 수 있습니다.

 .has-primary-border-color {
 상자 그림자: .1rem .1rem .05rem #647BAF ;
}

7. 자녀 테마 테스트

현재 개발 환경에서 사이트가 좋아 보인다고 생각되면 라이브 사이트에 업로드하기 전에 테스트를 수행할 때입니다.

  • 모바일 뷰포트와 같은 다양한 브라우저 크기에서 테스트
  • 다른 브라우저에서 테스트하거나 BrowserStack과 같은 도구 사용
  • 접근성 표준을 검토합니다. WebAim 시작하기

8. 블록 하위 테마 업로드 준비

스테이징 사이트에서 개발 중이라면 파일은 정확히 있어야 할 위치에 있습니다. 호스팅 옵션을 방문하여 스테이징 사이트를 활성화할 수 있습니다. 로컬 개발자 환경에서 파일을 생성했다면 style.css 및 theme.json 파일을 하나의 zip 파일로 함께 압축하고 사이트에 업로드할 차례입니다.

블록 하위 테마 만들기 요약

  1. 블록 하위 테마가 필요한지 결정
  2. 상위 테마 선택
  3. 테스트 환경 구성
  4. 테마 디렉토리 만들기
  5. 테마 파일 만들기
  6. 블록 하위 테마 사용자 정의
  7. 자녀 테마 테스트
  8. 라이브 사이트에 업로드

WordPress의 클래식 테마와 마찬가지로 블록 테마에는 상위 테마가 업데이트될 때 덮어쓰지 않는 사용자 지정을 저장할 장소가 여전히 필요합니다. 블록 하위 테마를 만들면 사이트의 다른 사용자가 사용할 수 있는 옵션을 추가, 잠그거나 생략할 수 있습니다.