WordPressのブロックエディタは最初受け入れられなかった人もいたと思うが、登場してからもう4年が経ち、みんなもうすっかり慣れた頃だと思う。
（フルサイト編集はまだ慣れないが・・・）
テーマ開発者がブロックパターンを使いこなすことで、クライアントにとって更新しやすいサイトを作ることができる。
functions.php等を使う方法
register_block_pattern(
'portfolio01/post-header-test',
array(
'title' => 'Post Header (TEST)', // タイトル（必須）
'description' => 'Theme Post Header', // 説明
'categories' => array( 'sm-portfolio', 'featured' ), // カテゴリ（別途登録が必要）
'keywords' => array( 'portfolio', 'shugo', 'matsuzawa', 'header', 'post', 'theme' ), // 挿入ツール内の検索キーワード
'postTypes' => array( 'post' ), // 特定の投稿タイプでのみ有効化する場合
'inserter' => true, // 挿入ツールに表示しない場合はfalse
'content' => <<< EOF
<!-- wp:post-terms {"term":"category","className":"cat-data"} /-->
<!-- wp:post-title /-->
<!-- wp:paragraph {"className":"client","placeholder":"クライアント名を入力してください。"} -->
<p class="client"></p>
<!-- /wp:paragraph -->
<!-- wp:post-date {"className":"post-date"} /-->
<!-- wp:post-terms {"term":"post_tag","className":"post-tag"} /-->
<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button {"style":{"border":{"radius":"0px"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#" style="border-radius:0px" target="_blank" rel="noreferrer noopener">作品を見る</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
EOF
,
)
);contentの中身を書くとき、ブロックテーマ開発の経験がない人もいると思う。
まずはブロックエディタで一度作ってみてからコードエディタに切り替えて、コードをコピーすればいい。
patternsディレクトリを使う方法（WordPress 6.0以降）
テーマディレクトリ内のpatternsディレクトリに下記のようなPHPファイルを入れておくと、パターンを登録できる。
パターンごとにファイルを小分けで管理できるので、こちらの方が便利かもしれない。templatesやpartsと違ってPHPファイルなので、echo get_template_directory_uri();みたいなPHPコードを含めることもできる。（もちろんフロントエンドはパターン使用時の結果で固定される。）
<?php
/**
* Title: Post Header (TEST)
* Slug: portfolio01/post-header-test
* Description: Theme Post Header
* Categories: sm-portfolio, featured
* Keywords: portfolio, shugo, matsuzawa, header, post, theme
* Inserter: yes
*/
?>
<!-- wp:post-terms {"term":"category","className":"cat-data"} /-->
<!-- wp:post-title /-->
<!-- wp:paragraph {"className":"client","placeholder":"クライアント名を入力してください。"} -->
<p class="client"></p>
<!-- /wp:paragraph -->
<!-- wp:post-date {"className":"post-date"} /-->
<!-- wp:post-terms {"term":"post_tag","className":"post-tag"} /-->
<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button {"style":{"border":{"radius":"0px"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#" style="border-radius:0px" target="_blank" rel="noreferrer noopener">作品を見る</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->ブロックパターンカテゴリを作る
ブロック挿入ツールには最初からたくさんのパターンが表示されている。
テーマで1つカテゴリを作っておくと探しやすい。
register_block_pattern_category(
'sm-portfolio',
array( 'label' => 'Shugo Matsuzawa Portfolio' )
);
コメント