【WordPress】ブロックパターンをテンプレートにする方法を解説

ブロックエディタ以前からある「カスタムフィールド」でも同様なことはできますが､今回だけ少し追加､変更したいとか､少し見た目を変えたいという対応は難しいです｡

逆にブロックパターンだと全体がひとつの文章､HTMLとして認識されるため､カスタムフィールド(データベース)のように､必要な情報だけを取り出して､表示するというようなことが難しいです｡

WordPressの投稿を建築会社などでつくる「施工事例」ページとして使う場合のテンプレートを設定してみます｡

以下のコードをfunctions.phpにコピペします｡

これでブロックパターンとして登録されます｡

add_action( "init", "add_custom_block_pattern" );
function add_custom_block_pattern(){
  $content = '
<!-- wp:heading -->
<h2>ご相談内容</h2>
<!-- /wp:heading -->

<!-- wp:group {"style":{"color":{"background":"#eeeeee"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-background" style="background-color:#eeeeee">
<!-- wp:list -->
<ul>
<!-- wp:list-item {"placeholder":"相談･依頼された内容を箇条書きで記入してください"} -->
<li></li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->
</div>
<!-- /wp:group -->

<!-- wp:heading -->
<h2>施工概要</h2>
<!-- /wp:heading -->

<!-- wp:table {"className":"is-style-stripes"} -->
<figure class="wp-block-table is-style-stripes">
<table>
<tbody>
<tr>
	<td>施工現場責任者</td>
	<td></td>
</tr>
<tr>
	<td>施工日</td>
	<td></td>
</tr>
<tr>
	<td>施工箇所</td>
	<td></td>
</tr>
<tr>
	<td>施工内容</td>
	<td></td>
</tr>
</tbody>
</table>
</figure>
<!-- /wp:table -->

<!-- wp:heading -->
<h2>施工詳細</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"placeholder":"実際におこなった施工の詳細な説明を記入してください｡"} -->
<p></p>
<!-- /wp:paragraph  -->

<!-- wp:heading -->
<h2>施工画像</h2>
<!-- /wp:heading -->

<!-- wp:gallery {"columns":4,"linkTo":"media","sizeSlug":"thumbnail"} -->
<figure class="wp-block-gallery has-nested-images columns-4 is-cropped"></figure>
<!-- /wp:gallery -->
  ';

  register_block_pattern(
		"works-pattern",
		array(
			"title" => "施工実績",
			"content" => $content,
			"categories" => "", 
			"postTypes" => [ "post" ]
		)
  );
}

add_action( "init", "add_custom_block_pattern" );
function add_custom_block_pattern(){

}

  $content = '
<!-- wp:heading -->
<h2>ご相談内容</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"placeholder":"実際におこなった施工の詳細な説明を記入してください｡"} -->
<p></p>
<!-- /wp:paragraph  -->

<!-- wp:gallery {"columns":4,"linkTo":"media","sizeSlug":"thumbnail"} -->
<figure class="wp-block-gallery has-nested-images columns-4 is-cropped"></figure>
<!-- /wp:gallery -->
  ';

register_block_pattern(
  "works-pattern",
  array(
    "title" => "施工実績",
    "content" => $content,
    "categories" => "", 
    "postTypes" => [ "post" ]
  )
);

登録したブロックパターンを新規投稿時に自動的に設定されるようにします｡

以下のコードをfunctions.phpにコピペします｡

add_action( "init", "new_post_template" );
function new_post_template() {
	$post_type_object = get_post_type_object( "post" );
	$post_type_object->template = [
		[
			"core/pattern",
			[
				"slug" => "works-pattern",
			]
		]
	];
}

add_action( "init", "new_post_template" );
function new_post_template() {

}

$post_type_object = get_post_type_object( "post" );

$post_type_object->template = [

];
}

[
  "core/pattern",
  [
    "slug" => "works-pattern",
  ]
]

ブロックパターンをテンプレートにする方法を解説しました｡

ブロックエディタのギャラリーブロックをfoncyboxに対応してポップアップ表示させる方法はこちらの記事で解説しています｡

【WordPress】ギャラリーブロックで拡大画像をポップアップ表示させる方法を解説

WordPressでギャラリーブロックの拡大表示をポップアップにしたいですか？この記事では、ギャラリーブロックの拡大画像をJavaScriptを使ってfancyboxに対応したポップアップで表示させる方法を解説しています。ぜひご覧ください。