빌더 기본 사항: 블록 패턴을 만드는 방법

지난 달의 Builder Basics 기사에서 우리는 블록 패턴이 무엇이며 어떻게 사용할 수 있는지 살펴보았습니다. 우리는 블록 패턴이 단순히 특정 레이아웃을 형성하는 미리 정의된 블록 모음이라는 것을 배웠습니다. 우리는 패턴의 힘을 보여주고 이것이 어떻게 현대 WordPress 테마 개발의 초석인지에 대해 논의했습니다. 오늘은 우리만의 패턴을 디자인하고, 공유하고, 등록하는 방법에 대해 알아보겠습니다!

이 문서는 모든 예제에서 Twenty Twenty-Two 테마를 사용합니다. 이 블록 기반 테마는 WordPress 5.9와 함께 출시되었으며 60개 이상의 블록 패턴을 제공하는 환상적인 리소스입니다.

패턴 디자인

블록 패턴을 생성할 때 가장 어려운 부분은 어떻게 보일지 결정하는 것입니다. 비교적 간단한 것부터 시작해 보겠습니다. 항목 그리드, 3열 2행입니다. 이 디자인을 사용하여 다양한 비즈니스 서비스 또는 제품 기능을 선보일 수 있습니다.

빠른 팁: 패턴은 타사 블록을 포함한 모든 블록으로 만들 수 있습니다. 그러나 패턴을 광범위한 청중에게 배포하려는 경우 핵심 WordPress 블록만 사용해 보십시오. 그렇게 하면 사용자가 디자인을 사용하기 위해 추가 플러그인을 설치할 필요가 없습니다.

저에게 패턴 디자인은 에디터에서 시작됩니다. 패턴을 수동으로 코딩할 수 있지만 시각적으로 작업을 수행하는 것이 훨씬 쉽습니다. 먼저 그리드의 첫 번째 행에 대해 3개의 열이 있는 Columns 블록을 추가합니다. 다음으로 각 열에 Heading, Paragraph, Buttons 블록을 추가합니다. Columns 블록을 복제하여 두 번째 그리드 행을 만듭니다. 마지막으로 몇 가지 스타일 구성을 적용하고 두 Columns 블록을 배경색으로 Group 블록으로 래핑합니다. 결과는 다음과 같습니다.

위의 스크린샷에서 이 디자인을 구성하는 33개의 블록을 볼 수 있습니다!

그리드의 대체 "어두운" 버전을 생성하려면 원래 디자인을 복제하고 스타일을 조정하기만 하면 됩니다.

두 디자인 모두 비교적 간단하지만 처음부터 만드는 것은 지루할 수 있습니다. 이러한 블록 패턴을 공유 및/또는 저장할 수 있으면 많은 시간을 절약할 수 있습니다.

디자인 공유

패턴 디자인을 공유하는 것은 쉽습니다! 디자인을 웹사이트의 다른 페이지로 옮기거나 완전히 다른 웹사이트로 옮기고 싶다고 가정해 보겠습니다. 블록 마크업을 복사하여 붙여넣는 것만 큼 간단합니다. 이를 수행하는 방법에는 여러 가지가 있습니다.

패턴 디자인이 그룹, 표지 또는 열 블록과 같은 "컨테이너" 블록에 포함되어 있는 경우 가장 바깥쪽 컨테이너를 선택하고 도구 메뉴를 사용하여 "복사"를 선택합니다. 블록 마크업이 클립보드에 복사되고 원하는 곳에 붙여넣을 수 있습니다.

두 번째 옵션은 옵션 패널에서 액세스할 수 있는 코드 편집기를 사용하는 것입니다.

코드 편집기는 현재 페이지 또는 게시물의 모든 블록 마크업을 시각적으로 표시합니다. 정확히 어떤 코드가 복사되고 있는지 확인하기 쉽기 때문에 이 방법을 선호합니다.

패턴 등록

블록 마크업을 복사하여 붙여넣는 것은 쉬울 수 있지만 우리는 종종 패턴 디자인의 보다 영구적인 버전을 원합니다. 그렇게 하기 위해 Patterns API를 사용하여 사용자 정의 블록 패턴을 "등록"합니다. 이렇게 하면 WordPress 내의 삽입기와 패턴 탐색기에서 디자인을 사용할 수 있습니다.

패턴을 등록하기 위해 PHP 함수 register_block_pattern()을 사용합니다. 이 함수는 제목과 속성 배열이라는 두 개의 매개변수를 받습니다. 각각을 살펴보기 전에 예를 살펴보겠습니다.

register_block_pattern(

'예시/기능 그리드 라이트',

정렬(

'title' => __( '피처 그리드 – 라이트', 'textdomain' ),

'description' => __( '밝은 배경의 그리드에 6개의 주요 항목을 표시합니다.', 'textdomain' ),

'카테고리' => 배열( '추천', '열' ),

'키워드' => 배열( '기능', '그리드'),

'뷰포트폭' => 1400,

'블록 유형' => 배열( '코어/열'),

'콘텐츠' => '패턴 콘텐츠'

)

);

여기에 우리가 이전에 디자인한 Feature Grid 패턴을 등록합니다. 제목은 네임스페이스/제목 명명 규칙을 따릅니다. 동일한 프로젝트에 여러 패턴을 등록할 때 네임스페이스를 일관되게 유지하는 것이 가장 좋습니다.

속성 배열의 제목 및 콘텐츠 매개변수만 기술적으로 필요합니다. 간결함을 위해 위의 예에서는 패턴 내용을 제외했습니다. 그러나 이것은 이전 섹션에서 복사하여 붙여넣은 것과 동일한 코드입니다. 범주는 범주 필드를 사용하여 설정되며 패턴은 여러 개일 수 있습니다. Editor에서 패턴은 범주별로 구성됩니다. 나머지 속성의 경우 블록 편집기 핸드북에 환상적인 분석이 제공됩니다.

피처 그리드 패턴을 어두운 배경으로 등록하려면 등록 코드를 복제하고 그에 따라 업데이트하십시오. 마지막으로 두 함수를 이렇게 래핑하고 테마의 functions.php 파일에 모든 것을 배치합니다.

함수 my_pattern_library_register_block_patterns() {

register_block_pattern(

'예시/기능 그리드 라이트',

배열( … )

);

register_block_pattern(

'예시/기능-격자-다크,

배열( … )

);

}

add_action( '초기화', 'example_register_block_patterns' );

전체 코드는 GitHub의 Gist에서 사용할 수 있습니다.

코드가 추가되면 새로 등록된 패턴이 이제 삽입기와 패턴 탐색기에 표시됩니다.

패턴 카테고리 등록하기

사용자 정의 패턴으로 작업할 때 사용자 정의 카테고리에 배치하는 것이 종종 도움이 됩니다. WordPress는 register_block_pattern_category()를 사용하여 간단합니다. 이 기능은 패턴을 등록하는 데 사용한 것과 유사합니다. 카테고리 제목과 속성 배열을 제공하기만 하면 됩니다. 워드프레스 5.9부터는 레이블이 유일하게 지원되는 속성이지만 앞으로 더 많이 지원될 예정입니다.

다음 예는 "Custom" 카테고리를 custom이라는 제목으로 등록합니다. 패턴 등록 예제와 함께 테마의 functions.php 파일에 이 코드를 배치하십시오.

function example_register_block_pattern_categories() {

register_block_pattern_category(

'커스텀',

배열( '레이블' => __( '사용자 정의', '텍스트 도메인' ) )

);

}

add_action( '초기화', 'example_register_block_pattern_categories' );

패턴 범주는 연관된 패턴이 있는 경우에만 편집기에 표시됩니다. 따라서 앞서 등록한 두 개의 피쳐 그리드 패턴에 사용자 지정을 추가하면 "사용자 지정" 범주가 다음과 같이 표시됩니다.

패턴 라이브러리 플러그인 생성

이전 섹션에서는 테마의 functions.php 파일에 코드를 배치하여 패턴과 패턴 범주를 등록했습니다. 이것은 효과가 있지만 장기적으로는 이상적이지 않습니다. 테마를 업데이트해야 한다고 가정해 봅시다. 다른 웹사이트에서 패턴을 사용하고 싶습니까?

WordPress는 아직 사용자 지정 패턴 관리를 위한 기본 솔루션을 제공하지 않으므로 다른 솔루션을 찾아야 합니다. 또한 보다 이식 가능한 형식의 패턴을 사용하는 것이 더 나은 경우가 많습니다.

내가 찾은 가장 좋은 방법은 사용자 지정 패턴 모음을 저장할 간단한 WordPress 플러그인을 만드는 것입니다. 플러그인은 최대한의 다양성을 제공하며 테마에 구애받지 않습니다. 다음 단계에서 나만의 패턴 라이브러리 플러그인을 만드는 방법을 보여 드리겠습니다.

빠른 팁: 다음 단계를 건너뛰고 싶다면 나만의 라이브러리를 위한 훌륭한 출발점을 제공할 완전한 "내 패턴 라이브러리" 플러그인을 준비했습니다. 코드는 GitHub에서 Gist로 사용할 수 있습니다.

1단계: 설정 가져오기

플러그인 빌드를 시작하기 전에 작동하는 WordPress 버전과 다양한 텍스트 편집기가 필요합니다. 로컬 WordPress 설치를 생성하기 위해 Local을 적극 권장하며 수년 동안 독점적으로 사용해 왔습니다. 텍스트 편집에 Atom을 사용하지만 훌륭한 옵션이 많이 있습니다. 운영 체제와 함께 제공되는 기본 텍스트 편집기도 가능합니다.

로컬 또는 유사한 애플리케이션을 사용하여 로컬 WordPress 사이트를 설정합니다. WordPress가 버전 5.9 이상으로 업데이트되었는지 확인하십시오. 패턴은 5.5 이상에서 작동하지만 가능하면 항상 최신 버전의 WordPress를 사용하는 것이 가장 좋습니다.

2단계: 플러그인 생성

다음으로 해야 할 일은 플러그인의 "기반"을 만드는 것입니다. 플러그인 개발이 처음이라면 두려워하지 마십시오. 그것보다 더 무섭게 들립니다.

로컬 WordPress 설치에서 wp-content → plugins 디렉토리로 이동하고 my-pattern-library라는 새 디렉토리를 만듭니다. 디렉토리 이름은 원하는 대로 지정할 수 있습니다. 모든 후속 단계에서 "my-pattern-library"를 사용자 정의 이름으로 바꾸십시오.

새로운 wp-content → plugins → my-pattern-library 디렉토리 안에 my-pattern-library.php라는 PHP 파일을 생성합니다. 텍스트 편집기에서 파일을 열고 파일 상단에 다음 플러그인 헤더 주석을 추가합니다. 선행 <?php.ini를 잊지 마십시오. 이 튜토리얼에서는 헤더를 단순화했습니다.

<?php

/**

* 플러그인 이름: 내 패턴 라이브러리

* 설명: 블록 패턴의 간단한 라이브러리입니다.

* 버전: 0.1.0

* 최소 요구 사항: 5.8

* PHP 필요: 7.0

* 저자: 당신의 이름

* 라이선스: GPL v2 이상

* 텍스트 도메인: my-pattern-library

*/

적절하다고 생각되는 대로 헤더 정보를 자유롭게 변경하십시오. 그런 다음 파일을 저장합니다. 이제 완전한 기능을 갖춘 WordPress 플러그인이 생겼습니다. 관리자 플러그인 페이지에 표시되는지 확인하고 "활성화"를 클릭합니다. 다음과 같이 보여야 합니다.

이제 플러그인이 작동하지만 실제로는 아무 것도 하지 않습니다. 바꿔봅시다.

3단계: 패턴 및 카테고리 등록

이 마지막 단계에서는 이 기사 앞부분의 패턴 및 패턴 범주 등록 코드를 새 플러그인에 복사하기만 하면 됩니다. 우리는 이전에 이 코드를 테마의 functions.php 파일에 넣었습니다. 이제 my-pattern-library.php 파일의 헤더 주석 아래에 붙여넣습니다.

파일을 저장한 다음 WordPress의 편집기로 이동합니다. 삽입기를 열고 패턴 탭을 클릭한 다음 사용자 정의 카테고리를 선택하십시오. 플러그인에 의해 등록된 두 개의 패턴이 표시되어야 합니다.

이제 패턴 라이브러리가 작동합니다! 새로운 사용자 정의 패턴이나 카테고리가 필요할 때 플러그인에 추가하기만 하면 됩니다. 전체 코드 예제는 GitHub에서 Gist로 사용할 수 있습니다.

마무리하기 전에 이 예제는 개인적인 용도를 위한 것임을 언급하는 것이 중요합니다. 플러그인을 공개적으로 배포하려면 더 많은 기능을 포함하고 싶을 것입니다. 현지화가 떠오릅니다. 즉, 이 튜토리얼은 사용자 정의 블록 패턴을 저장하는 간단한 플러그인을 만드는 것이 얼마나 쉬운지 보여줍니다.

마무리

이 기사에서는 블록 패턴을 설계, 공유 및 등록하는 방법을 배웠습니다. 당신은 당신만의 패턴 라이브러리를 담기 위해 간단한 WordPress 플러그인을 만드는 방법을 배웠습니다. 저는 블록 패턴이 현대 테마 개발에 필수적이라고 굳게 믿으며, 미래가 어떻게 될지 기대됩니다. 아직 패턴 탐색을 시작하지 않았다면 이 기사에서 시작하는 데 도움이 되기를 바랍니다. Learn WordPress는 추가 학습을 위한 환상적인 리소스입니다. 질문이 있으면 댓글로 알려주세요.