* 이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
(워드프레스 해부 ㉛) 패턴
자주 쓰는 레이아웃 — “이미지 + 제목 + 버튼” 카드 같은 걸 매번 새로 짜긴 번거롭다. 블록 패턴(block pattern)은 블록(23편) 묶음을 하나의 재사용 조각으로 등록해, 삽입기에서 클릭 한 번으로 꺼내 쓰게 한다.
등록은 register_block_pattern(). 패턴의 내용은 그냥 블록 마크업 문자열이다.
직접 해보기
add_action( 'init', function() {
register_block_pattern( 'my/cta', array(
'title' => '콜투액션 카드',
'categories' => array( 'featured' ),
'content' => '<!-- wp:group --><div class="wp-block-group">'
. '<!-- wp:heading --><h2 class="wp-block-heading">지금 시작하세요</h2><!-- /wp:heading -->'
. '<!-- wp:buttons --><div class="wp-block-buttons">'
. '<!-- wp:button --><div class="wp-block-button">'
. '<a class="wp-block-button__link">구독</a></div><!-- /wp:button -->'
. '</div><!-- /wp:buttons --></div><!-- /wp:group -->',
) );
} );✅ 확인 — 등록 후 블록 삽입기에서 패턴 탭을 열어 “콜투액션 카드”를 검색하면 나온다. 클릭하면 그 블록 묶음이 통째로 삽입된다. 자주 쓰는 구조를 이렇게 자산화하면 편집이 빨라진다.
카테고리를 붙여 삽입기에서 찾기 쉽게
패턴이 늘면 삽입기에서 찾기 어려워진다. register_block_pattern_category로 카테고리를 먼저 만들고, 패턴 등록 시 categories에 지정하면 삽입기의 패턴 탭에 묶여서 보인다.
register_block_pattern_category( 'cozlab', array( 'label' => '코즈랩' ) );
register_block_pattern( 'cozlab/cta', array(
'title' => '콜투액션 카드',
'categories' => array( 'cozlab' ),
'content' => '<!-- wp:paragraph -->...<!-- /wp:paragraph -->',
) );패턴의 실체 — 마크업 전문 한 벌
‘내용은 블록 마크업 문자열’이 감이 안 오면 전문을 보자. 콜투액션 카드 패턴의 content는 이렇게 생겼다 — 23편에서 본 블록 주석 문법 그대로다.
<!-- wp:group {"style":{"spacing":{"padding":"32px"}},
"backgroundColor":"accent-2","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-accent-2-background-color">
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">뉴스레터 구독</h3>
<!-- /wp:heading -->
<!-- wp:paragraph --><p>새 글을 메일로 받아보세요.</p><!-- /wp:paragraph -->
<!-- wp:buttons --><div class="wp-block-buttons">
<!-- wp:button --><div class="wp-block-button">
<a class="wp-block-button__link">구독하기</a></div>
<!-- /wp:button --></div><!-- /wp:buttons -->
</div><!-- /wp:group -->삽입기에서 이 패턴을 클릭하면 위 마크업이 통째로 글에 복사되고, 그때부터 각 블록을 자유롭게 편집한다. 쉽게 만드는 요령: 편집기에서 원하는 레이아웃을 먼저 조립하고, 코드 편집기 보기(⋮ 메뉴)로 마크업을 복사해 패턴의 content에 붙이면 된다 — 손으로 짤 필요가 없다.
패턴 vs 동기 패턴(옛 재사용 블록) — 결정적 차이
가장 헷갈리는 지점이다. 일반 패턴은 삽입하는 순간 복사된다 — 이후 각자 자유롭게 편집하고 원본과 무관하다. 반면 동기 패턴(예전의 ‘재사용 블록’)은 한 곳을 고치면 그걸 쓴 모든 곳이 함께 바뀐다. 용도가 다르다.
| 일반 패턴 | 동기 패턴 | |
|---|---|---|
| 삽입 후 | 복사됨(각자 편집) | 원본과 연결됨 |
| 한 곳 수정 시 | 그 자리만 바뀜 | 쓰인 모든 곳이 바뀜 |
| 적합한 용도 | 레이아웃 출발점 | 영업시간·공지 등 공통 조각 |
코드 없이 — 디렉터리와 테마 등록
코드로 등록하는 것 말고도, 워드프레스 공식 패턴 디렉터리에서 남이 만든 패턴을 복사해 붙일 수 있다. 또 요즘 블록 테마는 patterns/ 폴더에 PHP 파일 하나로 패턴을 등록한다 — 파일 상단 주석에 제목·슬러그·카테고리를 적으면 자동 등록된다. 이게 현재 테마의 표준 방식이다.
<?php
/**
* Title: 콜투액션 카드
* Slug: cozlab/cta
* Categories: cozlab
*/
?>
<!-- wp:paragraph --><p>여기에 블록 마크업</p><!-- /wp:paragraph -->한 걸음 더 — 값을 데이터에 연결(블록 바인딩)
최근 워드프레스는 패턴 속 값을 고정 텍스트가 아니라 데이터에 연결(Block Bindings)할 수 있다. 예컨대 문단 하나를 글 메타에 바인딩하는 마크업은 이렇다.
<!-- wp:paragraph {"metadata":{"bindings":{
"content":{"source":"core/post-meta","args":{"key":"event_date"}}
}}} -->
<p>자리표시자</p>
<!-- /wp:paragraph -->이 패턴을 쓴 글마다 event_date 메타 값이 문단에 대신 나온다(메타는 register_post_meta로 show_in_rest 등록 필요 — 9편). 같은 패턴이 글마다 다른 값을 보여주는 것이다. 정적인 레이아웃 조각을 넘어, 데이터와 맞물린 재사용 부품으로 쓸 수 있게 된 것이다. 블록 자체가 궁금하면 블록(23편)을 먼저 보자.
이걸로 테마 모듈 끝. 클래식·블록 테마, theme.json, 템플릿 파트, 자식 테마, 패턴까지 겉모습을 다루는 법을 봤다. 마지막 모듈은 사이트를 운영하는 실무 — 디버깅·성능·백업·멀티사이트·WP-CLI다. 시작은 디버깅부터.
자주 묻는 질문 (FAQ)
블록 패턴이 뭔가요?
여러 블록을 묶은 재사용 레이아웃입니다. register_block_pattern으로 등록하면 삽입기에서 한 번에 넣을 수 있습니다.
재사용 블록과 패턴은 뭐가 다른가요?
패턴은 삽입 후 독립 복사본이 되고, 동기화(재사용) 블록은 하나를 고치면 모든 곳이 함께 바뀝니다.
답글 남기기