워드프레스 블록 패턴
게시 됨: 2022-06-21블록 패턴이 도입된 이후 WordPress 생태계 내에서 블록 패턴에 대한 관심이 급증했습니다.
구텐베르크에 블록 패턴을 추가한 것은 워드프레스 사용자에게 상당히 유리했습니다. 이제 웹사이트를 디자인하는 동안 미리 만들어진 디자인을 사용하고 원하는 대로 조정할 수 있기 때문입니다. 이것은 사이트 페이지를 처음부터 디자인하는 것과 비교하여 시간을 절약하는 데 정말 도움이 됩니다.
이 기사에서 우리는 이러한 블록 패턴이 무엇인지, 어디서 찾을 수 있는지, 어떻게 사용하는지, 재사용 가능한 블록과 어떻게 비교하는지 살펴볼 것입니다.
목차
블록 패턴이란
기존 블록 패턴 사용
블록 패턴 대 재사용 가능한 블록
나만의 블록 패턴을 만드는 방법
- 수동 접근
- 패턴 디렉토리를 통해
사용자 정의 블록 패턴 플러그인을 만드는 방법
블록 패턴 등록 취소
블록 패턴 범주 등록 취소
결론
블록 패턴이란
블록 패턴은 미리 설계된 레이아웃을 만들기 위해 결합된 블록 모음입니다.
예를 들어 클릭 유도문안을 설정하려는 WordPress 사용자는 제목, 단락 및 버튼 블록과 같은 페이지에 여러 블록을 추가하여 그렇게 할 수 있습니다. 그러나 선호하는 디자인 레이아웃과 일치하도록 블록을 배치하는 것은 특히 초보자 WordPress 사용자에게 쉽지 않을 수 있습니다. 블록 패턴은 WordPress 사용자가 클릭 유도문안 블록 패턴을 추가할 수 있기 때문에 이러한 경우에 유용합니다. 그런 다음 블록 패턴을 원하는 보기로 편집할 수 있습니다.
기존 블록 패턴 사용
WordPress는 클래식 편집기를 대체하는 블록 편집기(Gutenberg)를 통합합니다. 편집기 내에서 페이지나 게시물에 패턴을 쉽게 추가할 수 있습니다. 시작하려면 먼저 블록 삽입기를 클릭해야 합니다.
클릭하면 아래 그림과 같이 패턴 탭으로 이동합니다.
그런 다음 "탐색"버튼을 클릭하십시오.
렌더링된 팝업에는 다양한 범주를 기반으로 그룹화된 여러 패턴이 있습니다.
페이지나 게시물에 패턴을 삽입하려면 패턴을 클릭하기만 하면 됩니다. 그러면 페이지나 게시물 내에서 렌더링되어야 합니다.
이 작업이 완료되면 패턴 내의 블록을 원하는 대로 추가로 사용자 지정할 수 있습니다.
wordpress.org 블록 패턴 디렉토리에서 더 많은 패턴을 찾을 수도 있습니다.
원하는 패턴을 찾으면 원하는 패턴에 마우스 오버 이벤트가 있을 때 표시되는 복사 버튼을 클릭하여 복사하면 됩니다.
이 작업을 완료하면 페이지 또는 게시물에 패턴을 붙여넣을 필요가 있습니다.
블록 패턴 대 재사용 가능한 블록
재사용 가능한 블록은 나중에 게시물이나 페이지에서 사용할 수 있는 하나 이상의 블록 모음입니다.
위의 정의에 따르면 재사용 가능한 블록은 둘 다 게시물이나 페이지 내에 미리 만들어진 블록을 추가하는 것을 포함한다는 점에서 블록 패턴과 매우 유사해 보입니다. 그러나 이 두 항목 사이에는 차이점이 있습니다.
재사용 가능한 블록과 관련하여 이러한 블록은 블록 패턴에 비해 그다지 유연하지 않습니다. 재사용 가능한 블록은 적용되는 페이지나 게시물에 관계없이 단일 인스턴스를 유지합니다. 즉, 재사용 가능 블록을 여러 페이지에 추가하고 페이지 중 하나에서 재사용 가능 블록을 사용자 정의하기로 결정하면 변경 사항이 모든 페이지에서 재사용 가능 블록의 모든 인스턴스에 적용됩니다.
반면에 블록 패턴의 경우 여러 페이지에 블록 패턴을 추가하고 특정 페이지의 블록 패턴에 대해 일부 사용자 정의를 수행하면 나머지 페이지의 블록 패턴에는 사용자 정의가 적용되지 않습니다. 따라서 블록 패턴 인스턴스는 다릅니다.
재사용 가능한 블록과 달리 블록 패턴은 테마 또는 플러그인 코드에도 등록할 수 있습니다.
블록 패턴은 여러 페이지 또는 게시물에 적용할 특정 레이아웃을 사용하려는 경우 이상적입니다. 여기에서 개별 페이지 또는 게시물에서 개별 페이지 또는 게시물의 컨텍스트와 일치하도록 맞춤화할 수 있습니다.
반면에 재사용 가능한 블록은 페이지 전체에서 정확한 콘텐츠를 복제하고 사용하려는 시나리오에 이상적입니다. 이것은 예를 들어 배너 광고에 있을 수 있습니다.
나만의 블록 패턴을 만드는 방법
자신만의 블록 패턴을 생성할 수 있는 다양한 방법이 있습니다. 이 기사에서는 다음과 같은 두 가지 방법에 대해 설명합니다.
- 수동 접근
- 패턴 디렉토리를 통해
수동 접근
이 접근 방식에서는 먼저 페이지 또는 게시물 내에서 블록 컬렉션을 만들고 나중에 패턴으로 등록해야 합니다.
블록 컬렉션 만들기
블록 컬렉션을 설정하려면 다음을 수행해야 합니다.
i) 먼저 새 페이지 또는 게시물을 만듭니다.
ii) 게시물 또는 페이지 내에서 패턴 또는 레이아웃을 형성할 원하는 블록을 추가합니다. 여기서는 미디어 및 텍스트 블록과 버튼 블록 및 일부 스타일을 추가할 것입니다.
다음은 블록의 샘플 디스플레이입니다.
블록 패턴 등록
블록 컬렉션을 블록 패턴으로 등록하려면 다음을 수행해야 합니다.
i) 블록 컬렉션이 있는 페이지 또는 게시물 내에서 코드 편집기로 전환합니다.
ii) 렌더링된 모든 코드를 복사하여 메모장 또는 Sublime Text와 같은 원하는 텍스트 편집기에 붙여넣습니다.
iii) 다음으로, 하위 테마의 functions.php 파일에 아래 코드를 추가합니다.
function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'featured' ), 'content' => 'Fill in your copied code here' ) ); } add_action( 'init', 'reg_block_patterns' );"Fill in your copyed code here" 내용을 위의 (ii)에서 복사한 코드로 교체해야 합니다.
아래는 우리 측의 최종 코드에 대한 샘플입니다.
function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'featured' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' );이 작업이 완료되면 페이지 또는 게시물을 방문할 수 있으며 패턴 섹션으로 이동하면 아래 그림과 같이 "추천" 섹션 내에서 새 패턴을 볼 수 있습니다.
패턴 카테고리 등록하기
WordPress는 패턴을 등록하는 동안 사용할 수 있는 몇 가지 기본 패턴 범주를 제공합니다. 여기에는 버튼, 열, 갤러리, 헤더, 텍스트, 쿼리 및 추천이 포함됩니다.
블록 패턴을 등록하는 동안 사용자 정의 범주에 패턴을 등록하는 것이 더 나은 접근 방식입니다. 이를 위해서는 먼저 패턴 카테고리를 등록해야 합니다.
패턴 카테고리를 등록하려면 하위 테마의 functions.php 파일에 다음 코드를 추가해야 합니다.
function register_category_pattern() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_category_pattern' );카테고리 레이블을 원하는 대로 변경할 수 있습니다. 위의 코드 샘플에서는 범주 레이블 "Custom"을 사용하고 있습니다.
사용자 정의 패턴 카테고리가 페이지 또는 게시물에 표시되도록 하려면 패턴과 연관시켜야 합니다. 여기서는 이 패턴 범주를 수용하도록 원래 패턴 등록 코드를 변경합니다. 이렇게 하려면 다음 코드 줄을 검색하십시오.
'categories' => array( 'featured' ),그런 다음 코드가 다음과 같이 읽히도록 "추천"에서 "사용자 지정"으로 범주를 변경해야 합니다.
'categories' => array( 'custom' ),우리의 경우 패턴 및 패턴 범주를 등록하는 최종 코드는 다음과 같습니다.
function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'custom' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' ); function register_pattern_categories() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_pattern_categories' );이제 페이지 또는 게시물에 액세스하여 패턴을 추가하려고 하면 아래와 같이 패턴이 새로 등록된 "사용자 지정" 범주에 렌더링됩니다.
패턴 디렉토리를 통해
WordPress 생태계의 모든 사람이 액세스할 수 있는 패턴을 생성하려는 경우 이제 Patterns Directory에서 이를 달성할 수 있습니다.
패턴 디렉토리에 액세스하면 다음을 수행해야 합니다.
i) 패턴 디렉토리에 로그인합니다.
ii) "새 패턴 만들기" 링크를 클릭합니다.
iii) 다음 화면에서 패턴 제목을 추가하고 원하는 블록을 추가하기 시작합니다. 최소 3개의 블록을 추가해야 합니다.
iv) 블록 추가가 완료되면 패턴을 초안으로 저장할 수 있습니다.
v) 다음으로 패턴이 여기에 설명된 지침을 위반하지 않는지 확인하십시오. 패턴 지침. 모든 것이 괜찮다면 패턴을 제출할 수 있습니다.
여기에 설명된 "내 패턴" 링크를 클릭하여 제자리에 있는 패턴을 볼 수 있습니다.
"내 패턴" 섹션에서 렌더링된 패턴은 초안, 제출한 패턴 및 검토 대기 중인 패턴입니다.
vi) 그런 다음 새 블록을 복사하여 페이지나 게시물에 붙여넣을 수 있습니다.
사용자 정의 블록 패턴 플러그인을 만드는 방법
functions.php 파일에 패턴과 카테고리를 등록하는 코드 대신 패턴과 패턴 카테고리를 추가하는 데 사용할 수 있는 사용자 정의 플러그인을 선택할 수 있습니다. 그렇게 하려면 다음을 수행해야 합니다.
i) 호스팅 패널을 통해 또는 Filezilla와 같은 FTP 소프트웨어를 사용하여 FTP를 통해 웹사이트 파일에 액세스
ii) wp-content > 플러그인 디렉토리 경로로 이동합니다.
iii) 플러그인 디렉토리 내에서 "custom-patterns"라는 이름의 폴더를 만듭니다.
iv) 폴더에서 custom-patterns.php라는 파일을 만듭니다.
v) 파일 내에 다음 헤더 주석을 추가합니다.
<?php /** * Plugin Name: Custom Patterns * Description: Adds a custom block pattern and category * Version: 1.1.0 * Requires at least: 6.0 * Requires PHP: 7.4 * Author: John Chris * License: GPL v2 or later * Text Domain: custom-patterns */원하는 플러그인 이름과 일치하도록 위의 헤더 주석을 사용자 정의할 수 있습니다.
vi) 헤더 주석 아래에 패턴과 카테고리를 등록하는 코드를 추가합니다. 여기서는 패턴과 사용자 정의 카테고리를 등록하기 위해 이전에 만든 코드를 사용합니다. 따라서 최종 코드는 다음과 같습니다.
<?php /** * Plugin Name: Custom Patterns * Description: Adds a custom block pattern and category * Version: 1.1.0 * Requires at least: 6.0 * Requires PHP: 7.4 * Author: John Chris * License: GPL v2 or later * Text Domain: custom-patterns */ function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'custom' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' ); function register_pattern_categories() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_pattern_categories' );vii) 대시보드의 플러그인 목록 내에서 이제 플러그인 목록에서 플러그인을 볼 수 있어야 합니다. 플러그인을 활성화하려면 플러그인 이름 옆에 있는 활성화 링크를 클릭하세요.
viii) 활성화되면 아래와 같이 블록 편집기 내에서 블록 패턴 및 사용자 정의 범주를 볼 수 있습니다.
블록 패턴 등록 취소
등록한 블록 패턴을 제거할 수 있습니다. 예를 들어 이전에 등록한 "my-plugin/media-text-pattern" 블록 패턴을 제거하려면 하위 테마의 functions.php 파일에 다음 코드를 추가해야 합니다.
function deregister_my_pattern() { unregister_block_pattern( 'my-plugin/media-text-pattern' ); } add_action( 'init', 'deregister_my_pattern' );위의 코드에서 "my-plugin/media-text-pattern"을 등록한 패턴의 이름으로 바꿔야 합니다.
블록 패턴 범주 등록 취소
패턴 카테고리만 등록 취소하고 패턴 자체를 유지하려면 하위 테마의 functions.php 파일에 다음 코드를 추가해야 합니다.
function deregister_pattern_category() { unregister_block_pattern_category( 'custom'); } add_action( 'init', 'deregister_pattern_category');위의 코드는 이전에 추가한 "custom" 카테고리를 등록 취소합니다. "custom"을 등록한 카테고리로 바꿔야 합니다.
결론
이 기사에서는 블록 패턴이 무엇인지, 어떻게 사용하는지, 블록 패턴과 카테고리를 등록 및 등록 해제하는지 살펴보았습니다. 블록 편집기로 웹사이트를 디자인할 때 블록 패턴은 매우 중요합니다. 그들은 적은 노력으로 웹 사이트에서 동적 페이지와 게시물을 쉽게 디자인할 수 있도록 합니다.
이 기사가 웹사이트에서 블록 패턴을 사용하는 방법에 대한 적절한 통찰력을 제공하기를 바랍니다. 질문이나 의견이 있는 경우 아래의 의견 섹션에 자유롭게 제출하십시오.