WordPressテンプレートエディターの使用方法【version5.8新機能】
ワードプレスはversion5.8からGutenberg（ブロックエディター）内でテンプレートエディター機能が使えるようになりました。
従来、テンプレートを作成するためには、PHPを使ってテンプレートファイルを作成する必要がありましたが、テンプレートエディターを使えば管理画面の中で作成できます。
本記事では、そんなテンプレートエディターの使い方について紹介します。
例としてテーマはTwenty Twenty-Oneを使用しますが、他のテーマでも同様です。
テンプレートエディターを使える設定とする
テンプレートエディターは、デフォルト状態では使用できるようになっていません。
使えるようにするには、functions.phpの中に次の記述をする必要があります。
add_theme_support( 'block-templates' );functions.phpの中にはadd_theme_support( )を記述しているところがあるので、そこに続けて加えてやればよいでしょう（親テーマをそのまま使用する場合）。
テーマTwenty Twenty-Oneの場合、functions.phpの次の箇所が該当箇所となります。
実際の手順としては、ダッシュボードメニューの外観＞テーマエディターと進めてfunctions.phpを開いてから、次のようにしてやります。
テンプレートエディターの使い方
ここから先は、Gutenberg（ブロックエディター）を開けて進めていきます。
（投稿でも固定ページでもどちらでも可能）
※テンプレートエディターはGutenbergエディターを使う必要があります。
テンプレートを作成する
例として、ヘッダー部の背景色を変更したテンプレートを作成します。
１．テンプレートの名前を入力する
①画面右の情報パネルの”テンプレート”を開ける
②”新規”をクリック
③作成するテンプレート名を入力（今回は”header”としました）
④”生成”をクリック
これでテンプレートエディターが開きます。
※functions.phpへの記述が有効でないと情報パネルに①”テンプレート”や②”新規”は表示されません。
※初めてテンプレートを生成する場合、”テンプレートエディターへようこそ”という表示が出ますが”始めてみよう”をクリックして次へ進めてください。
２．テンプレートを編集（headerに背景色をつける）
テンプレートエディターが開くと、次のような画面となります。
サイトタイトルとキャッチフレーズが上部に表示されています。
”マイブログ”＝サイトタイトル
”ちょうど別のWordPressサイト”＝キャッチフレーズ
ブロック構成を確認するため、リスト表示をしてみましょう。
画面左上の”アウトライン”をクリックするとリスト表示されます。
リスト表示を見れば、ヘッダー部のサイトタイトルとキャッチフレーズは、”サイトのタイトル”ブロックと”サイトのキャッチフレーズ”ブロックにより、それぞれ表示されていることがわかります。
したがって、ヘッダー部に背景色をつけるには、”サイトのタイトル”と”サイトのキャッチフレーズ”の入ったグループブロックに着色すればよいことになります。
（※もし、ヘッダーなしのテンプレートにしたい場合は、このグループブロックごと削除すればよいわけです。）
ヘッダーに背景色をつける具体的手順は次の通りです。
①リスト表示内のヘッダーに相当するグループブロックをクリック
②画面右パネルの”色”を開ける
③”背景色”の中から色をクリック
以上でヘッダー部に背景色が設定できました。
”投稿タイトル”と”投稿コンテンツ”ブロックは必須ブロック
もう一度リスト表示を見てみましょう。
”投稿タイトル”ブロックと”投稿コンテンツ”ブロックが存在しています。
| ブロック | 機能 |
|---|---|
| 投稿タイトル | 投稿や固定ページのタイトルを表示する |
| 投稿コンテンツ | 投稿や固定ページの本文を表示する |
ブロックの機能を見ればわかるように、”投稿タイトル”と”投稿コンテンツ”ブロックはテンプレートとしては必須のブロックとなります。
これらがないと、このテンプレートを使って投稿や固定ページを作成しても、ヘッダー部以外何も表示されないというわけです。
したがってこのまま”投稿タイトル”と”投稿コンテンツ”ブロックは残しておきましょう。
このほか、version5.8から新設されたブロックの”テーマ”グループの中には、コンテンツを表示することができるさまざまなブロックが準備されています。
例えば、アイキャッチ画像を表示させたいならば、”投稿のアイキャッチ画像”ブロックを挿入しておけばよいわけですね。
記事一覧表を表示するならば、次の記事が参考になります。
https://web-children.com/2021/07/24/query-loop-block/テンプレートを使う
作成したheaderテンプレートを使って記事を作成していきます。
Gutenbergエディターの中で作成したテンプレートを呼び出す
↓
記事を書く
↓
公開する
という流れになります。
１．投稿または固定ページで”新規追加”をクリックしてGutenbergエディターを開く
２．画面右パネルの”テンプレート”を開いて”header”をクリック
３．ページタイトルと記事本文を作成して”公開”
以下のようなタイトルと記事本文としました。
４．サイト表示
以下のように、背景色をつけたヘッダーの下に作成した記事内容が表示されます。
テンプレートの編集
テンプレートは後から編集変更することもできます。
先ほどのheaderテンプレートで作成した記事を見ると、ヘッダー部と記事タイトルが詰まり過ぎに見えるので、スペーサーブロックで余白を挿入しようと思います。
１．投稿または固定ページで”新規追加”をクリックしてGutenbergエディターを開く
２．画面右パネルでテンプレートの”編集”まですすめる
３．テンプレートを編集して公開
（”区切り”ブロックの下に”スペーサー”ブロックを挿入）
スペーサーの高さは30pxに調整しています。
以上でテンプレートの編集ができたので、先ほど作成した記事を再度表示させてみましょう。
テンプレートの編集が反映されて、ヘッダー部とタイトル間がいい感じになりました。
まとめ
テンプレートエディターを使って独自のテンプレートを作成する手順を紹介してきました。
初めて使う時に戸惑いがちなのが、”投稿タイトル”と”投稿コンテンツ”ブロックの取り扱いです。
これらはテンプレートとしては必須ブロックなので、必ず残すようにしましょう。
このほか、ワードプレスversion5.8で導入された新機能はこちらです。
