サイトエディターの「パターンを選択」画面で選択できるテンプレートを増やす方法

「パターンを選択」画面で選択できるテンプレートを増やす方法

以下のコードを有効化しているテーマのfunctions.php、または自作プラグインから読み込まれるようにして追加し、必要な部分を修正することで機能します。

/* デフォルトテンプレート追加 */
function sample_default_template_pattern_init(){
$pattern = [
"title" => __('テンプレートの名前',''),
"templateTypes" => array("適用するテンプレートの種類"),
"content" => '
--- ここにブロック類を挿入 ---
',
];

register_block_pattern($pattern["title"], $pattern);
}
add_action('admin_init', 'sample_default_template_pattern_init');

コード内のパラメーターの設定方法など

「title」パラメーター

「テンプレートの名前」の部分を編集して、一意の名前を付けます。

「テンプレートの名前」は、半角英数字で空白のない文字列を指定したほうが無難です。日本語や空白等がある場合はエラーとなるかも知れません（テストはしていません）

「templateTypes」パラメーター

上記コードの「適用するテンプレートの種類」のところを編集し、どのテンプレートを作成する際の選択肢として表示させるのかを指定します。

以下が「templateTypes」パラメーターに設定できる値です（恐らくこの機能を使うシーンは固定ページとカスタム投稿タイプのテンプレート作成時位かと思いますが一応．．）。

※解釈に間違いがあるといけないので、プログラム内の英語説明文と日本語訳を両方掲載しています

参照：GitHub:block-template-utils.php

「— ここにブロック類を挿入 —」の部分

ここには、実際にテンプレートとして挿入する、ブロックをHTML化したものと入れ替えます。

ブロックのHTML化は、投稿編集画面などを使って以下の手順で行うとスムーズでしょう。

1. 必要なブロックを挿入してレイアウトやデザインまでをすべて完成させる
2. すべてのブロックを選択して、三点リーダーをクリック後「ブロックをコピー」をクリックする
3. パソコン上のテキストエディターを開き、コピーしたものを貼り付ける
4. 貼り付けたコード（HTML化されたブロック類）を「— ここにブロック類を挿入 —」の文字列に上書きする

すべての項目を編集して保存したら、サイトエディターへ行き、例えば「templateTypes」に「single」を指定した場合には、個別投稿テンプレートの追加をしてみて、選択肢が増えているかを確認ください。

ユーザー定義関数名（上記のコードでいえば先頭行と末尾行にある「sample_default_template_pattern_init」）を変えたものを追加して、パラメーター部分を変えれば、複数の選択肢を追加することもできますから、このコードを1つ覚えておけば便利に使えるようになりますね。

なお、この選択肢はテンプレート追加時にのみ適用されるものであり、WordPress6.3でいう「非同期パターン」と同じで、コード内の記述を変更しても次にそれを選択肢から選択しない限りはどこにも影響がありません（逆にコードを編集しても既に作成されたテンプレートには適用されません）ので、あくまでもテンプレート追加時のベースとなるものとなる点にご注意ください。

「wp:template-part」で呼び出す場合の不具合と対処方法

上記のコードを使ってテンプレート選択肢を作ろう！と、既存のテンプレートのHTMLを流用してコンテンツを作り、それを選択すると、標準の「header」や「footer」が出力される部分で以下のように「テンプレートパーツは削除されたか、利用できません:パーツ名」エラーが出ます。

これはずいぶん前から以下のページで議論されているのですが、WordPress 6.3 RC-3でも現象が出ました。

GitHub wp:pattern の wp:template-part のレンダリングが機能しない

議論にあるように、どのテーマのパーツなのかが明記されていないことでエラーとなるようで、上記ページに掲載してある対処方法を参考に、「”theme”:”themename”」属性を追加することで、改善できます。

例えば、Twenty Twenty-Twoテーマであれば、標準テンプレートに書かれている、ヘッダーを呼び出すHTMLは

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

なので、Twenty Twenty-Twoテーマのスラグである「twentytwentytwo」を属性として追加して以下のようにすれば、きちんと埋め込まれ、テーマのヘッダーを編集すればそれが反映されます。

<!-- wp:template-part {"theme":"twentytwentytwo","slug":"header","tagName":"header"} /-->

ただこれだと、使用するテーマが変わるたびにこの部分を書き換えなければならずちょっと使いにくいので、最初に紹介したテンプレート追加用コードにテーマ名を出力する変数を用意して渡してやると、自動で有効化しているテーマのテーマスラグを取得して埋め込んでくれます。

以下のコードの赤字部分が変数の設定と、ヘッダーテンプレートを呼び出す記述例です

/* デフォルトテンプレート追加 */
function sample_default_template_pattern_init(){
$theme_name = get_stylesheet();
$pattern = [
"title" => __('テンプレートの名前',''),
"templateTypes" => array("適用するテンプレートの種類"),
"content" => '
<!-- wp:template-part {"theme":"'.$theme_name.'","slug":"header","tagName":"header"} /-->
--- ここにブロック類を挿入 ---
<!-- wp:template-part {"theme":"'.$theme_name.'","slug":"footer","tagName":"footer"} /-->
',
];

register_block_pattern($pattern["title"], $pattern);
}
add_action('admin_init', 'sample_default_template_pattern_init');

テーマスラグを呼び出すためには、親テーマで使用する前提であれば「get_template()」で呼び出すのが望ましいようですが、子テーマ・親テーマどちらでも使えるよう「get_stylesheet()」を使って呼び出しています

WordPress公式上で参考にしたページ