WordPress 블록 테마 소개

일반적인 WordPress 테마를 구성하는 구성 요소는 수년 동안 크게 변경되지 않았습니다. 프로젝트 공동 설립자인 Matt Mullenweg는 구식 Kubrick 테마(2005년 출시)가 여전히 최신 버전의 콘텐츠 관리 시스템에서 작동한다고 비꼬았습니다.

물론, 테마 개발자는 자신의 추가 기능을 추가했습니다. 복잡한 설정 UI에서 통합 페이지 빌더에 이르기까지 모든 것을 살펴보았습니다. 그러나 핵심에서 테마는 일관된 구조를 유지했습니다. 즉, 블록 테마가 도입될 때까지입니다.

블록 테마는 WordPress의 미래가 될 것입니다. 그것들은 우리가 웹사이트를 만들고 유지하는 방식을 바꿀 것입니다. 또한 "고전적인" 대응물보다 Gutenberg 블록 편집기와 더 긴밀하게 통합됩니다.

모든 소란이 무엇인지 궁금하십니까? 오늘은 워드프레스 블록 테마의 기본에 대해 설명드리겠습니다. 그 과정에서 우리는 그것들이 전통적인 주제와 어떻게 비교되고 대조되는지 탐구할 것입니다. 시작하자!

왜 테마를 차단합니까?

처음 몇 년 동안 블록 편집기는 주로 콘텐츠의 스타일을 지정하고 구축하는 수단이었습니다. 클래식 테마와 결합하면 페이지와 게시물을 원하는 대로 만들 수 있습니다.

전체 테마에 영향을 주는 변경 작업과 관련하여 WordPress 사용자 지정 프로그램은 계속 사용되는 리소스입니다. 이 도구는 테마 작성자가 제공한 디자인 및 레이아웃 설정에 대한 액세스를 제공합니다. 사용자 지정 프로그램에 없으면 코드를 파헤쳐야 합니다.

그러나 블록 편집기의 핵심 원칙 중 하나는 WordPress 대시보드 내에서 보다 통합된 인터페이스를 만드는 것입니다. 위젯 화면이 블록 기반 UI로 이동하면서 이러한 현상이 발생하는 것을 이미 보았습니다. 커스터마이저는 이 틀에 맞지 않습니다.

전체 사이트 편집(FSE)의 도입은 이 프로세스의 다음 단계입니다. 단순히 페이지와 게시물을 스타일링하는 것 이상입니다. 이제 테마 디자인의 모든 측면(머리글, 바닥글, 페이지 템플릿 등)을 WordPress 내에서 직접 관리할 수 있습니다.

블록 테마는 이 기능의 관문 역할을 합니다. 따라서 블록을 염두에 두고 독점적으로 제작되었습니다.

WordPress 블록 테마의 내부 작동

클래식 테마와 블록 테마 사이에는 많은 유사점이 없습니다. 그러나 둘 다 메이크업을 안내하는 일련의 기본 규칙이 있습니다. 블록 테마를 다운로드하고 파일 구조를 탐색하는 경우 몇 가지 주요 대조가 눈에 띌 수 있습니다.

템플릿 파일은 PHP가 아닌 HTML입니다.

클래식 테마에서는 index.php 및 header.php 와 같은 이름을 가진 템플릿 파일을 찾을 수 있습니다. 차단 테마는 PHP를 없애고 대신 .html 파일 확장자를 사용합니다.

내부에서 템플릿 파일은 HTML과 블록 마크업의 조합을 포함합니다. 예를 들어 공식 WordPress 문서에서 이 템플릿을 살펴보겠습니다.

 <!-- wp:site-title /--> <!-- wp:image {"sizeSlug":"large"} --> <figure class="wp-block-image size-large"> <img src="https://cldup.com/0BNcqkoMdq.jpg" alt="" /> </figure> <!-- /wp:image --> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:post-title /--> <!-- wp:post-content /--> </div> <!-- /wp:group --> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:heading --> <h2>Footer</h2> <!-- /wp:heading --> </div> <!-- /wp:group -->

블록 마크업은 HTML 주석과 매우 흡사합니다. 그러나 특정 블록을 템플릿으로 호출하기 위한 구문이 포함되어 있습니다. WordPress 전체 사이트 편집 웹사이트에는 각 기본 블록에 대한 마크업이 포함된 편리한 참조가 있습니다.

그리고 이러한 유형의 코드가 친숙해 보인다면 Gutenberg의 코드 편집기 보기에서 유사한 것을 보았을 것입니다.

폴더 사용

클래식 테마는 폴더 내에 템플릿을 저장할 수 있지만 필수는 아닙니다. 블록 테마에는 몇 개의 하위 폴더가 필요합니다.

/parts
머리글, 바닥글 및 사이드바와 같은 재사용 가능한 항목을 포함합니다.

/templates
다양한 유형의 콘텐츠에 대한 템플릿을 제공합니다. 페이지, 게시물 아카이브 및 단일 게시물과 같은 항목이 일반적인 예입니다. 이름 지정 규칙은 WordPress 템플릿 계층 구조를 따릅니다. 이는 클래식 테마와 또 다른 유사점입니다.

이 배열의 긍정적인 부작용 중 하나는 테마가 더 잘 구성된다는 것입니다. 표준화된 폴더 구조를 갖는다는 것은 특정 파일을 검색하는 데 소요되는 시간이 줄어든다는 것을 의미합니다.

Theme.json 스타일링

theme.json 파일은 블록 편집기에 기본 설정을 할당하는 데 사용됩니다. 이것은 무엇보다도 기본 색상 팔레트, 타이포그래피 및 간격을 설정할 수 있음을 의미합니다. 설정은 사이트 전체에 적용하거나 특정 블록에 적용할 수 있습니다.

theme.json 은 구성에 따라 적절한 CSS를 자동으로 생성하므로 테마의 style.css 파일을 많이 채울 필요가 없습니다. 이 시나리오에서 스타일시트는 몇 가지 기본 사항을 정의하는 데 사용되며 다른 모든 것은 이 새로운 파일에 의존합니다.

템플릿 생성 및 편집

WordPress는 오랫동안 대시보드 내에서 직접 테마의 템플릿 파일을 편집할 수 있는 기능을 제공했습니다. 작은 코딩 오류로도 웹사이트에 액세스할 수 없게 될 수 있으므로 권장하지 않는 경우가 많았습니다. 테마가 업데이트될 때 변경 사항을 덮어쓸 가능성은 말할 것도 없고(따라서 하위 테마를 사용하는 이유의 일부). 일부 개발자는 재앙의 원격 기회조차 피하기 위해 기능을 완전히 끕니다.

그러나 블록 테마는 대시보드 내 편집에 관한 것입니다. 테마에 포함된 템플릿은 블록 편집기를 통해 조정할 수 있으며 새로운 사용자 정의 템플릿도 생성할 수 있습니다.

예상할 수 있듯이 이 시나리오에서 코드는 완전히 선택 사항입니다. 블록 테마가 활성화되면 기존 사용자 지정 프로그램을 대체하는 새로운 사이트 편집기( 모양 > 편집기 – WordPress 5.9 이상 필요 )를 통해 모든 것을 편집할 수 있습니다. 그리고 사이트 에디터는 페이지나 포스트와 마찬가지로 친숙한 블록 에디터 UI를 사용합니다.

그게 다가 아닙니다. WordPress 내에서 변경한 사항은 무엇이든 내보낼 수 있습니다. 이렇게 하면 여러 웹사이트에서 맞춤형 블록 테마를 사용할 수 있습니다.

이렇게 하면 테마를 사용자 지정하거나 만들려는 사람들의 진입 장벽이 낮아집니다. 이제 디자인에 대한 기본적인 안목과 블록에 대한 실무 지식을 바탕으로 맞춤형 웹사이트를 만들 수 있습니다.

염두에 두어야 할 사항

블록 테마를 사용하도록 모든 웹사이트를 전환하기 전에 알아야 할 몇 가지 사항이 있습니다.

무엇보다도 블록 테마는 초기 기술 입니다. 모든 기능이 확정된 것은 아니며 일부 모범 사례를 수정해야 합니다. 또한 이러한 테마가 프로덕션 환경에서 어떻게 작동하는지 보기 시작했습니다. 상황이 발전함에 따라 여러 가지 변화가 예상됩니다.

클라이언트를 위한 사이트를 구축하고 향후 유연성을 유지하려는 경우 하이브리드 테마 가 유용할 수 있습니다. 그들은 여전히 ​​클래식 테마의 PHP 구조를 유지하면서 FSE 기능을 사용할 수 있습니다. 이 기능을 사용하기 위해 기존 테마를 개조할 수도 있습니다.

마지막으로 블록 테마는 클래식 테마의 끝을 나타내지 않습니다 . 적어도 가까운 미래에는 그렇지 않습니다. 이를 통해 이 새로운 테마 지정 방식으로의 전환이 즉각적일 필요는 없습니다. 예를 들어 프로덕션에서 가장 좋아하는 클래식 테마에 의존하면서 로컬 환경에서 블록을 실험하는 것은 괜찮습니다.

테마 리소스 차단

WordPress 블록 테마에 대해 더 알고 싶다면 몇 가지 뛰어난 리소스를 사용할 수 있습니다. 다음은 우리가 가장 좋아하는 몇 가지입니다.

• WordPress의 블록 테마 문서
• Automattic의 Blockbase 테마
• Carolina Nymark의 전체 사이트 편집
• Rich Tabor의 Gutenberg에서 WordPress 블록 템플릿에 대한 궁극적인 가이드
• 워드프레스 블록 테마 혁명이 조용히 모멘텀을 얻고 있다 Justin Tadlock
• WordPress의 WordPress 테마 실험