WordPress 블록 패턴: 정의 및 사용 방법

이 가이드는 블록 패턴을 만들고, 등록하고, 사용하는 방법을 포함하여 블록 패턴에 대해 알아야 할 모든 것을 탐색합니다. 시작하자!

WordPress 블록 패턴의 개요(및 사용을 고려하는 이유)

WordPress 블록 패턴은 단일 템플릿으로 그룹화된 블록 시퀀스입니다. 블록 패턴은 WordPress 5.5(Eckstine)에서 처음 도입되었으며 버튼, 열 및 텍스트를 비롯한 다양한 범주에 걸쳐 있습니다.

WordPress 블록 패턴 디렉토리에서 다음 요소를 찾을 수 있습니다.

WordPress 블록 패턴은 재사용 가능한 블록과 유사하게 들릴 수 있습니다. 그러나 그들은 매우 다른 목적을 수행합니다.

• 블록 패턴 은 디자인의 출발점과 같습니다. 블록 패턴을 기본으로 가져온 다음 각 디자인에 대한 모든 콘텐츠를 사용자 정의합니다. 두 개의 다른 게시물에서 동일한 블록 패턴을 사용할 수 있지만 함께 연결할 수 있는 것은 없습니다.
• 재사용 가능한 블록 은 해당 블록의 모든 인스턴스에서 정확히 동일한 내용을 표시합니다. 예를 들어 블로그 게시물 끝에 일관된 CTA를 추가하고 싶을 수 있습니다. 재사용 가능한 블록으로 그렇게 할 것입니다. 나중에 해당 재사용 가능한 블록을 업데이트한 경우 업데이트는 해당 재사용 가능한 블록의 모든 인스턴스에 적용됩니다.

WordPress 블록 패턴을 사용하면 페이지 디자인 프로세스의 속도를 높일 수 있습니다. 페이지에 다른 블록을 끌어다 놓는 대신 미리 만들어진 레이아웃에서 선택할 수 있습니다.

블록 패턴은 개발 관점에서도 편리할 수 있습니다. 다른 WordPress 테마를 만드는 경우 이러한 템플릿을 사용하면 작업 속도를 높일 수 있습니다. 또한 특정 요구 사항에 맞게 고유한 블록 패턴을 만들고 등록할 수도 있습니다.

WordPress 블록 패턴을 사용하는 방법(3가지 방법)

블록 패턴을 쉽게 찾고, 삽입하고, 편집할 수 있습니다. 세 가지 다른 방법을 살펴봅시다!

1. 블록 패턴 디렉토리에서 패턴 복사 및 붙여넣기
2. 블록 편집기에서 직접 패턴 삽입
3. 블록 패턴 제출

1. 블록 패턴 디렉토리에서 패턴 복사 및 붙여넣기

첫째, WordPress 디렉토리에서 직접 블록 패턴을 복사하여 붙여넣을 수 있습니다. 이 방법을 사용하면 여러 레이아웃을 탐색하고 영감을 얻기 위해 미리보기를 볼 수 있습니다.

블록 패턴 디렉토리로 이동하여 시작하십시오. 그런 다음 패턴을 클릭하고 이름 아래에서 패턴 복사 를 선택합니다.

또는 즐겨찾기에 추가를 클릭하여 컬렉션에 패턴을 저장할 수 있습니다. 그러나 WordPress.org 계정에 로그인해야 합니다.

다음으로 WordPress 게시물 또는 페이지로 이동하여 블록 패턴에 붙여넣습니다.

이제 필요에 맞게 개별 블록이나 전체 패턴을 편집할 수 있습니다.

2. 블록 편집기에서 직접 패턴 삽입

블록 편집기에서 직접 블록 패턴을 추가할 수도 있습니다. 이 방법은 블록 패턴 디렉토리에서 앞뒤로 탐색할 필요가 없기 때문에 더 빠릅니다. 그러나 미리 보기는 더 작아지고 보기가 더 어려워집니다.

게시물이나 페이지를 열고 왼쪽 상단 모서리에 있는 + 아이콘을 클릭합니다. 패턴 을 선택하면 사용 가능한 템플릿 목록이 표시됩니다.

원하는 레이아웃을 클릭하면 게시물이나 페이지에 즉시 추가됩니다. 드롭다운 메뉴를 사용하여 범주별로 블록 패턴을 검색할 수도 있습니다.

3. 블록 패턴 제출

공식 디렉토리에 있는 많은 블록 패턴이 사용자가 제출한 것임을 이미 눈치채셨을 것입니다. 나만의 패턴을 만들어 제출하면 기여할 수 있습니다.

먼저 WordPress.org 계정에 로그인해야 합니다. 다음으로 새 패턴 페이지로 이동하여 블록을 고유한 레이아웃으로 정렬합니다.

패턴이 WordPress의 요구 사항을 준수하는지 확인하십시오. 그런 다음 제출 을 클릭합니다. 이제 패턴의 제목과 설명을 입력하라는 메시지가 표시됩니다.

마지막으로 블록 패턴에 대한 관련 카테고리를 선택하고 마침 을 클릭합니다. 이제 검토를 위해 레이아웃이 제출됩니다.

신규 블록 패턴 생성 및 등록 방법(테마 및 플러그인 개발용)

이 섹션에서는 디자인 및 개발 목적으로 자신의 블록 패턴을 만들고 등록하는 방법을 설명합니다. 한 번 보자!

• 1단계 : 블록 패턴 등록
• 2단계 : 블록 마크업 및 CSS 마크업 추가
• 3단계 : 새 블록 패턴 범주 선택 또는 만들기

1단계: 블록 패턴 등록

먼저 페이지에 다른 블록을 구성하여 블록 패턴을 만들어야 합니다. 디자인이 마음에 들면 초기화 후크와 함께 register_block_pattern PHP 함수를 사용할 차례입니다.

기본 형태는 다음과 같습니다.

 function prefix_block_pattern ( ) { register_block_pattern( ... ); } add_action( 'init' , 'prefix_block_pattern' );
 코드 언어: JavaScript ( javascript )

이제 테마에 새 폴더를 만들고 " patterns.php"라고 부릅니다. 또한 새 패턴을 등록하기 위해 추가 PHP 파일을 만드는 것이 좋습니다. 올바르게 작동하려면 functions.php 파일의 PHP가 필요합니다.

새 블록 패턴에는 다음 속성이 필요합니다.

• 제목 : 블록 패턴의 이름입니다.
• content : 블록의 마크업에 대한 컨테이너입니다.

다음 속성을 추가할 수도 있습니다.

• 설명 : 스크린 리더 및 유사한 장치에서 볼 수 있는 블록 패턴에 대한 숨겨진 설명입니다.
• category : 블록 패턴에 대한 카테고리입니다(이에 대해서는 나중에 더 논의하겠습니다).
• 키워드 : 사용자가 블록 패턴을 찾는 데 도움이 되는 핵심 구문입니다.
• viewportWidth : 패턴의 너비입니다.
• blockTypes : 이 패턴에 대한 이상적인 블록 유형에 대한 설명입니다.
• 삽입기 : 삽입기에서 블록 패턴을 보이지 않게 하려면 "거짓"을 사용합니다.

블록 패턴 등록은 다음과 같아야 합니다.

register_block_pattern( 'new-theme/amazing-block-pattern' , array ( 'title' => 'Amazing Block Pattern' , 'viewportWidth' => 'The pattern preview' s width ', ' categories ' => ' Your block pattern 's categories' , 'description' => 'An amazing block pattern description' , 'keywords' => 'Your block pattern' s keywords ', ' blockTypes ' => ' An array of blocks ', ' content ' => ' The block comment and markup ', ) );
 코드 언어: PHP ( php )

블록 패턴 마크업도 추가해야 합니다. 다음 단계에서 이에 대해 설명하겠습니다.

2단계: 블록 마크업 및 CSS 마크업 추가

WordPress 페이지에 모은 블록 모음으로 돌아가십시오. 블록 편집기에서 마크업(코드)을 복사해야 합니다. 이 예에서는 배경 이미지, 제목, 열 및 텍스트가 있는 블록 패턴의 마크업을 사용하고 있습니다.

예제 블록 패턴은 다음과 같습니다.

마크업을 복사하여 작은따옴표로 묶은 내용 줄에 붙여넣습니다.

 'content' => ' <!-- wp:cover {"url":"https://sworg/images/core/5.8/forest.jpg","dimRatio":60,"minHeight":800,"align":"full"} --> < div class = "wp-block-cover alignfull" style = "min-height:800px" > < span aria-hidden = "true" class = "has-background-dim-60 wp-block-cover__gradient-background has-background-dim" > </ span > < img class = "wp-block-cover__image-background" alt = "forest" src = "https://sworg/images/core/5.8/forest.jpg" data-object-fit = "cover" /> < div class = "wp-block-cover__inner-container" > <!-- wp:heading {"align":"wide","style":{"color":{"text":"#ffe074"},"typography":{"fontSize":"64px"}}} --> < h2 class = "alignwide has-text-color" style = "color:#ffe074;font-size:64px" > Forest. </ h2 > <!-- /wp:heading --> <!-- wp:columns {"align":"wide"} --> < div class = "wp-block-columns alignwide" > <!-- wp:column {"width":"55%"} --> < div class = "wp-block-column" style = "flex-basis:55%" > <!-- wp:spacer {"height":"330px"} --> < div style = "height:330px" aria-hidden = "true" class = "wp-block-spacer" > </ div > <!-- /wp:spacer --> <!-- wp:paragraph {"style":{"color":{"text":"#ffe074"},"typography":{"lineHeight":"1.3","fontSize":"12px"}}} --> < p class = "has-text-color" style = "color:#ffe074;font-size:12px;line-height:1.3" > < em > Even a child knows how valuable the forest is. </ em > </ p > <!-- /wp:paragraph --> </ div > <!-- /wp:column --> <!-- wp:column --> < div class = "wp-block-column" > </ div > <!-- /wp:column --> </ div > <!-- /wp:columns --> </ div > </ div > <!-- /wp:cover --> ',
 코드 언어: HTML, XML ( xml )

블록 패턴에 이미지가 포함된 경우 해당 그래픽도 액세스 가능하게 만들어야 합니다. 먼저 테마 폴더 내의 이미지 폴더에 그림을 추가합니다. 그런 다음 get_theme_file_uri를 사용합니다.

래퍼 요소 내의 className 속성을 사용하여 블록 패턴에 CSS 클래스를 추가할 수도 있습니다. 이 예에서는 커버 블록입니다.

따라서 CSS는 다음과 같이 보일 것입니다.

 <!-- wp:cover { "className" : "amazing-block-pattern" , ...
 코드 언어: JavaScript ( javascript )

"className"을 CSS 클래스로 바꾸는 것을 잊지 마십시오. 또한 클래스 이름이 포함된 래핑 div에 이 코드를 추가해야 합니다.

 <div class = "wp-block-cover prefix-amazing-block-pattern
 코드 언어: JavaScript ( javascript )

3단계: 새 블록 패턴 범주 선택 또는 만들기

이전에 범주 요소에 대해 간략하게 논의했습니다. WordPress의 블록 패턴 카테고리 중 하나를 선택하거나 직접 디자인해야 합니다.

WordPress에는 현재 다음 범주가 있습니다.

• 갤러리
• 열
• 버튼
• 텍스트
• 헤더
• 질문

새로운 블록 패턴 범주를 사용하려면 register_block_pattern_category 도우미 함수를 사용해야 합니다. 여기에는 새 카테고리의 이름과 블록 패턴의 레이블이 모두 포함됩니다.

if ( function_exists( 'register_block_pattern_category' ) ) { register_block_pattern_category( 'custom' , array ( 'label' => __( 'Custom' , 'text-domain' ) ) ); }
 코드 언어: PHP ( php )

일단 등록되면 이 카테고리를 블록 패턴의 카테고리 라인에 추가할 수 있습니다.

블록 패턴을 제거하고 숨기는 방법

사용자 정의 블록 패턴을 제거하려면 레이아웃의 접두어 및 슬러그와 함께 unregister_block_pattern 함수를 사용할 수 있습니다. 또한 init 후크를 사용해야 합니다. 다음과 같이 표시되어야 합니다.

 unregister_block_pattern( 'prefix/amazing-block-pattern' );
 코드 언어: JavaScript ( javascript )

블록 패턴 디렉토리에서 모든 블록 패턴을 숨길 수도 있습니다. 이 방법은 새 테마 내에서 이러한 템플릿을 활성화하지 않으려는 경우에 유용할 수 있습니다.

다음과 같은 should_load_remote_block_patterns 필터를 사용하면 됩니다.

 add_filter( 'should_load_remote_block_patterns' , '__return_false' );
 코드 언어: JavaScript ( javascript )

추가 지침이 필요한 경우 WordPress의 개발자 리소스에 문의하는 것이 좋습니다. 거기에서 블록 패턴 개발의 종류에 대한 자세한 문서를 찾을 수 있습니다.

코드 없이 WordPress 블록 패턴을 만드는 방법

블록 패턴 생성을 위한 코드 경로로 이동하지 않으려면 BlockMeister와 같은 플러그인을 설치할 수도 있습니다.

BlockMeister를 사용하면 편집기 내에서 블록 패턴을 빌드할 수 있습니다. 플러그인을 설치하면 재사용 가능한 블록과 마찬가지로 하나 이상의 블록을 선택한 다음 블록 패턴으로 저장할 수 있습니다.

또한 대시보드 내 인터페이스를 통해 모든 블록 패턴을 관리하고 카테고리로 구성할 수 있습니다.

결론

WordPress 블록 패턴은 응집력 있는 템플릿을 형성하는 개별 블록의 모음입니다. 이를 사용하여 게시물과 페이지를 보다 빠르게 디자인할 수 있습니다. 또한 사용자 정의가 쉽고 고유한 레이아웃을 만들고 제출할 수도 있습니다.

워드프레스 블록 패턴에 대해 궁금한 점이 있으신가요? 아래 의견 섹션에서 알려주십시오!