구텐베르크 템플릿을 만드는 방법

Gutenberg Blocks로 페이지와 게시물을 구축할 때의 장점 중 하나는 템플릿으로 저장할 수 있다는 것입니다. Gutenberg용 템플릿을 만드는 것은 게시 프로세스의 속도를 높이는 데 도움이 되는 좋은 방법입니다. 그것들을 만드는 방법에는 여러 가지가 있습니다. 이 기사에서는 구텐베르크 템플릿을 만드는 방법을 살펴보겠습니다.

우리는 그것들을 만드는 세 가지 방법을 다룰 것입니다:

1. 내보내거나 복제하기 위해 Gutenberg 라이브러리에 추가할 레이아웃 만들기.
2. 사용하고 싶을 때 복사하여 붙여 넣을 레이아웃을 만듭니다.
3. 페이지, 게시물 또는 사용자 정의 게시물 유형에 대한 기본 레이아웃으로 추가할 레이아웃 만들기.

이러한 방법을 사용하면 블록만 재사용할 수 있습니다. 다른 설정은 포함되지 않습니다.

구텐베르크 템플릿을 만드는 이유

페이지 또는 게시물 레이아웃을 디자인한 후에는 재사용할 속성과 함께 블록 목록을 저장할 수 있습니다. 이렇게 하면 레이아웃에 집중할 필요가 없기 때문에 콘텐츠 생성에 앞서 시작할 수 있습니다. 블록 템플릿을 사용하면 일관된 디자인을 유지할 수 있습니다.

블록 템플릿에는 자리 표시자 콘텐츠가 있을 수 있습니다. 정적 또는 동적일 수 있습니다. 편집기 세션의 기본 상태를 정의할 수 있습니다. 템플릿을 JSON 파일로 가져오거나 내보낼 수도 있으므로 여러 웹사이트에서 디자인을 재사용하거나 다른 사람들과 공유할 수 있습니다. 사용자가 콘텐츠를 추가할 수 있지만 블록을 변경할 수 없도록 잠글 수 있습니다.

방법 1: 레이아웃 템플릿 만들기

레이아웃 템플릿을 사용하면 원래 추가된 다중 선택 기능을 사용하여 동시에 여러 블록을 이동하거나 삭제할 수 있습니다.

한 번에 하나의 블록 또는 여러 블록을 선택하여 글로벌 재사용 가능한 블록 라이브러리에 추가할 수 있습니다. 이렇게 하면 JSON 파일로 쉽게 내보낼 수 있습니다.

레이아웃 템플릿 예

블로그 게시물, 제품 리뷰 등으로 사용할 수 있는 간단한 레이아웃을 만들었습니다. 재사용하기 위해 라이브러리에 저장하기 쉽습니다.

포함하려는 첫 번째 블록에 커서를 놓고 마지막 블록으로 마우스를 끌어 강조 표시합니다.

첫 번째 블록 위에서 왼쪽에 세 개의 점을 볼 수 있습니다. 점을 클릭하고 재사용 가능한 블록에 추가를 선택합니다.

상단의 녹색 메시지 표시줄은 블록이 생성되었음을 나타냅니다. 레이아웃에 이해하기 쉬운 이름을 지정하고 저장 을 선택합니다.

녹색 막대의 메시지는 블록이 업데이트되었음을 ​​나타냅니다. 레이아웃을 만들었습니다!

사용하려면 새 페이지 또는 게시물을 만들고 옵션(점 3개)을 여세요. 도구 에서 재사용 가능한 모든 블록 관리 를 선택합니다.

이것은 모든 블록의 목록을 보여줍니다. 여기에서 블록을 JSON 파일로 내보내고 가져올 수 있습니다. 재사용 가능한 블록은 전역적입니다. 수정하면 원본도 수정됩니다. 원본을 유지하고 레이아웃을 사용하여 새 게시물을 작성하려면 내보내기, 이름 변경, 레이아웃 가져오기가 필요합니다.

중복 게시물

다행히도 다른 옵션이 있습니다. Duplicate Post라는 플러그인은 Gutenberg 블록에 대한 복제 기능을 추가합니다.

Duplicate Posts 설정 에서 차단을 활성화합니다.

이제 블록 라이브러리에 복제 옵션이 있습니다. 원하는 레이아웃을 복제한 후 편집하세요. 각 레이아웃은 전역이므로 레이아웃을 사용할 때마다 복제하고 편집해야 합니다.

방법 2: 구텐베르크 템플릿을 만드는 쉬운 대안 방법

이 방법은 단순한 치트이지만 효과가 있습니다. 먼저 모든 자리 표시자 콘텐츠와 함께 재사용할 레이아웃을 만듭니다.

다음으로 코드 편집기로 전환합니다. 이렇게 하려면 오른쪽 상단 모서리에 있는 세 개의 점을 선택합니다. 편집기 에서 코드 편집기 를 선택합니다.

코드를 강조 표시하고 복사합니다.

코드를 텍스트 편집기에 붙여넣고 재사용을 위해 저장합니다.

템플릿을 사용할 준비가 되면 새 게시물을 만들고 코드 편집기로 전환한 다음 코드를 붙여넣기만 하면 됩니다.

이제 콘텐츠를 추가할 수 있는 새 게시물이 있습니다.

방법 3: 사용자 정의 게시물 유형 만들기

블록 템플릿은 인수입니다. 페이지와 게시물에 인수를 추가하거나 새 게시물 유형을 만들 수 있습니다. 레이아웃은 해당 게시물 유형에 연결되므로 해당 게시물 유형을 만들 때 기본적으로 레이아웃이 표시됩니다.

이것은 다양한 유형의 기사에 대한 레이아웃을 만드는 데 유용합니다. 예를 들어, 제품 리뷰 게시물 유형, 휴가 요약 게시물 유형, 레시피 게시물 유형 등이 있을 수 있으며 게시물 유형을 로드하면 관련 레이아웃이 자동으로 제공됩니다.

템플릿 생성에는 다음이 포함됩니다.

• 기본 상태를 동적으로 설정합니다.
• 특정 게시물 유형에 대한 기본 레이아웃으로 등록합니다.

템플릿 선언

템플릿 자체는 blockType의 배열로 선언됩니다. 이것은 JavaScript 또는 PHP에서 수행됩니다. Gutenberg 개발자의 핸드북에서 볼 수 있듯이 다음과 같습니다.

const template = [

[ 'block/name', {} ], // [ blockName, attributes ]

];

아니면 이거:

'template' => array(

array( 'block/name' ),

),

사용자 정의 게시물 유형에 템플릿 등록

사용자 정의 게시물 유형은 템플릿을 등록할 수도 있습니다. 다음과 같이 보일 수 있습니다.

function myplugin_register_book_post_type() {

$args = array(

'public' => true,

'label'  => 'Books',

'show_in_rest' => true,

'template' => array(

array( 'core/image', array(

'align' => 'left',

) ),

array( 'core/heading', array(

'placeholder' => 'Add Author...',

) ),

array( 'core/paragraph', array(

'placeholder' => 'Add Description...',

) ),

),

);

register_post_type( 'book', $args );

}

add_action( 'init', 'myplugin_register_book_post_type' );

배열은 블록의 출처와 블록 이름을 식별합니다. 이 예에서 배열은 'core/paragraph'를 사용합니다. 이것은 블록이 WordPress 코어(플러그인과 반대)와 단락(사용할 블록 식별)이라는 이름에서 가져온 것임을 의미합니다.

페이지 및 게시물에 템플릿 등록

페이지나 게시물에 템플릿을 추가하면 페이지나 게시물을 만들 때마다 자동으로 로드됩니다. 더 많은 창의적 자유가 있고 템플릿을 더 쉽게 찾을 수 있어 콘텐츠 생성 프로세스를 간소화하기 때문에 특정 사용자 정의 게시물 유형에 추가하는 것을 선호합니다.

페이지나 게시물에 추가하기로 결정했다면 다음 코드를 사용할 수 있습니다.

function my_add_template_to_posts() {

$post_type_object = get_post_type_object( 'post' );

$post_type_object->template = array(

array( 'core/paragraph', array(

'placeholder' => 'Add Description...',

) ),

);

$post_type_object->template_lock = 'all';

}

add_action( 'init', 'my_add_template_to_posts' );

중첩 템플릿

컨테이너 블록(예: 열 블록) 내에 템플릿을 중첩할 수도 있습니다. 이것은 블록 자체에 중첩 템플릿을 할당하여 수행됩니다. 예를 들어:

$template = array(

array( 'core/paragraph', array(

'placeholder' => 'Add a root-level paragraph',

) ),

array( 'core/columns', array(), array(

array( 'core/column', array(), array(

array( 'core/image', array() ),

) ),

array( 'core/column', array(), array(

array( 'core/paragraph', array(

'placeholder' => 'Add a inner paragraph'

) ),

) ),

) )

);

템플릿 잠금

다음 코드를 사용하여 템플릿을 잠글 수 있습니다.

'template_lock' => 'all', // or 'insert' to allow moving

사용자 정의 게시물 유형이 있는 예제 템플릿

위에서 본 Books라는 사용자 정의 게시물 유형을 만들고 싶습니다. 레이아웃 템플릿이 표시되고 이미지, 제목 및 단락이 포함됩니다.

코드는 functions.php 파일에 붙여넣을 것입니다. PHP 파일에 코드를 추가할 때는 항상 자식 테마를 사용하세요. 그렇지 않으면 테마를 업데이트할 때 코드를 덮어씁니다.

코드를 직접 작성해야 합니다(내가 보여준 코드 예제를 사용하는 것이 좋습니다). 한 가지 옵션은 원하는 레이아웃을 만든 다음 코드를 보는 것입니다(오른쪽 상단 모서리에 있는 세 개의 점을 클릭하고 편집기 섹션에서 코드 편집기 선택). 이렇게 하면 이미 만든 레이아웃의 속성이 있는 블록이 표시되므로 코드에서 블록을 정렬하는 방법을 미리 알 수 있습니다.

테마 기능 (functions.php)으로 이동하여 코드를 붙여넣습니다. 맨 아래에 코드를 붙여넣었습니다. 이곳은 테스트 사이트이고 코드를 유지할 계획이 없으므로 자식 테마를 사용하지 않았습니다.

책이라는 대시보드 메뉴에 새 게시물 유형이 추가됩니다. 여기에는 목록과 새로 추가 링크가 포함됩니다. 새로 추가를 클릭하면 새 템플릿이 편집기에 추가되어 간단히 콘텐츠 추가를 시작할 수 있습니다.

블록은 코드에 나타나는 순서대로 배치되고 할당된 속성을 포함합니다. 코드에 원하는 만큼 블록을 배치하고 원하는 속성을 부여할 수 있습니다. 원하는 만큼 사용자 정의 게시물 유형을 만들 수 있으며 각각 고유한 기본 레이아웃을 가질 수 있습니다. 이 예에는 자리 표시자 텍스트가 포함되어 있습니다.

마무리 생각

구텐베르크 템플릿을 만드는 방법을 살펴보았습니다. 세 가지 방법 모두 훌륭하게 작동합니다. 재사용 가능한 템플릿이나 복제 방법 중 하나가 새로운 사용자 정의 게시물 유형을 생성하지 않으려는 경우 더 나은 선택일 수 있습니다. 만들고 싶은 콘텐츠 유형을 쉽게 선택할 수 있고 템플릿이 미리 정렬되어 있기 때문에 사용자 정의 게시물 유형이 마음에 듭니다.

사용자 정의 게시물 유형은 코드에 익숙하고 WordPress 내에서 사용하기에 가장 편리한 경우 쉽게 만들 수 있습니다. functions.php에 추가할 템플릿을 생성할 때의 주요 단점은 레이아웃을 구텐베르크 편집기가 아닌 코드로 생성하므로 시각적이지 않다는 것입니다.

템플릿에 미리 만들어진 콘텐츠를 추가할 수 있다는 점이 마음에 듭니다. 이것은 기여자에게 어떤 정보가 어디로 가는지 보여주는 자리 표시자 텍스트에 유용합니다. 재사용 가능한 템플릿은 워크플로 프로세스의 속도를 높이고 간소화하는 좋은 방법이며 공유할 페이지 및 게시물 레이아웃을 만드는 좋은 방법입니다.

우리는 당신의 의견을 듣고 싶습니다. 구텐베르크 템플릿을 만들었습니까? 아래 의견에 귀하의 경험에 대해 알려주십시오.

Nadia Snopek/Shutterstock.com을 통한 주요 이미지