テンプレートはどのように機能しますか?
誰かがあなたのサイトの任意のページを訪れると、WordPressはURLを確認し、内部でいくつかのロジックを実行し、訪問者が見ているページのタイプを特定します。これは非常に簡略化された説明です。テーマ開発において、このプロセスのこの部分がどのように機能するかを深く知る必要はありません—最終的な結果が何であるかを知っていれば十分です。
WordPressがページのタイプを特定すると、「テンプレートローダー」を通じて、ページタイプに一致するテンプレートを検索します。これは、ページタイプのテンプレート階層内でテンプレートを見つけようとすることによって行われ、これはテンプレート階層のドキュメントで詳細に説明されています。
WordPressは、優先順位の順に階層内のテンプレートを検索します。これらの場所のいずれかで一致するものが見つかると、階層内の検索を停止します:
- データベースに保存されたユーザーのテンプレート。
- 子テーマの
/templates
フォルダー内のテンプレート(子テーマがアクティブな場合)。 - テーマの
/templates
フォルダー内のテンプレート。
階層内でページタイプに一致するテンプレートが見つかると、そのテンプレートが読み込まれます。そのブロックマークアップが解析され、WordPressはブラウザが使用するための結果としてのHTMLマークアップを出力します。
テンプレートには何が含まれていますか?
ブロックテーマのテンプレートは、完全にブロックマークアップで構成されています。それだけです。本当に。
さて、もう少しニュアンスがあります。ブロックテンプレートでは、一般的に次のものが見られます:
- ブロックマークアップ
- テンプレートパーツへの参照
- ブロックパターンへの参照
最終的には、これらの各要素は依然としてブロックマークアップです。
こちらが/templates/404.html
テンプレートファイルの例で、すべての3つの要素が含まれています:
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
<!-- wp:pattern {"slug":"twentytwentythree/hidden-404"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
もちろん、ブロックテンプレートはそれよりもはるかに複雑になる可能性があります。ポイントは、WordPressがコードを正しく解析し、ブラウザ用に出力するためには、ブロックテンプレートが完全にブロックマークアップで構成されている必要があるということです。
ブロックのアーキテクチャについてより深く知りたい場合は、主要な概念のドキュメントをブロックエディターハンドブックで確認してください。
テンプレートの整理
ブロックテーマでは、ブロックテンプレートを配置できる場所は1つだけです: テーマの/templates
フォルダー内です。これは次のように構成されるべきです:
- `````404.html
archive.html
author.html
home.html
index.html
(必須)page.html
singular.html
最小限必要なテンプレートファイルはindex.html
です。このファイルの存在が、WordPressがテーマがブロックテーマであることを判断する方法です。
それ以外では、テーマデザインを達成するために必要な数だけテンプレートを含めることができます。
技術的には、WordPressは/block-templates
フォルダーも検索しますが、これは古いバージョンのWordPressとの後方互換性のためです。しかし、/templates
フォルダーを常に使用することが推奨されます。
テンプレートの構築
技術的には、テンプレートファイル内にすべてのブロックマークアップを入力することができますが、これはブロックテーマで作業する際の典型的な体験ではありません。ほとんどの場合、視覚インターフェースから作業し、ブロックコードをテンプレートファイルに移行します。
視覚インターフェースでの作業を探るには、サイトおよびテンプレートエディタの使用に関するサポートガイドを読んでください:
テンプレートの編集
WordPress管理からテンプレートにアクセスするには、管理メニューの外観 > エディタメニューを開きます。次に、サイドバーのテンプレート項目をクリックします:
この画面には、サイトの既存のすべてのテンプレートがリストされており、これらは3つの場所から来ることがあります:
- データベースに保存されたユーザー作成のテンプレート
- テーマの
/templates
フォルダーからのテンプレート - プラグインによって動的に追加されたテンプレート
そこから、既存のテンプレートにカスタマイズを加え、ブロックを好みに合わせて調整できます。
これらを保存すると、データベースに保存され、テーマ内の任意のテンプレートを上書きします。このテーマを他の人に配布したり、別のサイトで使用したりする予定がある場合は、テンプレートの紹介で説明されているように、/templates
フォルダー内の対応するテンプレートにブロックマークアップをコピーする必要があります。
新しいテンプレートの追加
新しいテンプレートを追加(テンプレート見出しの隣にある+アイコン)をクリックすることで、新しいテンプレートを作成できます。これにより、次のようなモーダルオーバーレイが作成されます:
そこから、完全にカスタムのテンプレートを作成できます(編集用に既に存在しない場合)。
再度、エディタを介して追加した新しいテンプレートはデータベースに保存されます。テーマを配布するつもりであれば、/templates
フォルダー内にテンプレートファイルを作成し、ブロックマークアップをそこにコピーする必要があります。テンプレートファイル名がテンプレート階層の有効なファイル名と一致することを確認してください(たとえば、ホームテンプレートファイル名はhome.html
です)。
カスタムテンプレート
カスタムテンプレートは、個々の投稿、ページ、またはカスタム投稿タイプのエントリに割り当てることができるテンプレートです。これらは、サイトのフロントエンドでの単一投稿ビューに使用されます。
あなたやテーマのユーザーは、投稿エディタのサイドバーにある投稿/ページパネルのテンプレート設定からカスタムテンプレートを選択できます:
これは、特定の状況に対してユニークなデザインを作成できる強力な機能です。たとえば、連絡フォームを含む異なるレイアウトのようなシンプルなものや、複数の投稿クエリや他のセクションを含むニュースマガジンレイアウトのような複雑なものを追加できます。
テンプレート画面から新しいテンプレートを追加する際にも、カスタムテンプレートを作成できます。テンプレートを追加オーバーレイには、カスタムテンプレートというオプションがあります。これをクリックすると、サイトのデータベース内に新しいカスタムテンプレートが追加されます。
しかし、テーマと共にテンプレートを配布するには、テーマの/templates
フォルダー内のカスタムテンプレートファイルに追加する必要があります。
カスタムテンプレートの素晴らしい点は、ファイル名を任意のものにできることです。標準のテンプレートファイル名(テンプレート階層から)を使用しないようにし、ユニークであることを確認してください。
カスタムテンプレートは何でも可能なので、どのブロックマークアップを含めるべきかに関する正確なルールはありません。しかし、投稿やページのコンテンツを表示したい場合は、その中のどこかで投稿コンテンツブロックを使用していることを確認してください。
もう1つのルールは、theme.json
ファイルを介してテンプレートを登録する必要があることです。これを行う方法は、カスタムテンプレートのドキュメントのグローバル設定とスタイルの章で説明されています。
元々、カスタムテンプレートは「ページテンプレート」と呼ばれていました。これは、最初の実装ではこの機能がページにのみ機能したためです。最終的に、投稿や他のカスタム投稿タイプもこの機能を使用できるようになったため、「カスタムテンプレート」として再ブランド化されました。しかし、他のドキュメントやサードパーティのサイトでは、これらがページテンプレートと呼ばれることがあります。