テンプレートはどのように機能しますか?

誰かがあなたのサイトの任意のページを訪れると、WordPressはURLを確認し、内部でいくつかのロジックを実行し、訪問者が見ているページのタイプを特定します。これは非常に簡略化された説明です。テーマ開発において、このプロセスのこの部分がどのように機能するかを深く知る必要はありません—最終的な結果が何であるかを知っていれば十分です。

WordPressがページのタイプを特定すると、「テンプレートローダー」を通じて、ページタイプに一致するテンプレートを検索します。これは、ページタイプのテンプレート階層内でテンプレートを見つけようとすることによって行われ、これはテンプレート階層のドキュメントで詳細に説明されています。

WordPressは、優先順位の順に階層内のテンプレートを検索します。これらの場所のいずれかで一致するものが見つかると、階層内の検索を停止します:

  • データベースに保存されたユーザーのテンプレート。
  • 子テーマの/templatesフォルダー内のテンプレート(子テーマがアクティブな場合)。
  • テーマの/templatesフォルダー内のテンプレート。

階層内でページタイプに一致するテンプレートが見つかると、そのテンプレートが読み込まれます。そのブロックマークアップが解析され、WordPressはブラウザが使用するための結果としてのHTMLマークアップを出力します。

テンプレートには何が含まれていますか?

ブロックテーマのテンプレートは、完全にブロックマークアップで構成されています。それだけです。本当に。

さて、もう少しニュアンスがあります。ブロックテンプレートでは、一般的に次のものが見られます:

  • ブロックマークアップ
  • テンプレートパーツへの参照
  • ブロックパターンへの参照

最終的には、これらの各要素は依然としてブロックマークアップです。

こちらが/templates/404.htmlテンプレートファイルの例で、すべての3つの要素が含まれています:

  1. <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
  2. <!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
  3. <main class="wp-block-group">
  4. <!-- wp:pattern {"slug":"twentytwentythree/hidden-404"} /-->
  5. </main>
  6. <!-- /wp:group -->
  7. <!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

もちろん、ブロックテンプレートはそれよりもはるかに複雑になる可能性があります。ポイントは、WordPressがコードを正しく解析し、ブラウザ用に出力するためには、ブロックテンプレートが完全にブロックマークアップで構成されている必要があるということです。

ブロックのアーキテクチャについてより深く知りたい場合は、主要な概念のドキュメントをブロックエディターハンドブックで確認してください。

テンプレートの整理

ブロックテーマでは、ブロックテンプレートを配置できる場所は1つだけです: テーマの/templatesフォルダー内です。これは次のように構成されるべきです:

    1. - `````404.html
    • archive.html
    • author.html
    • home.html
    • index.html(必須)
    • page.html
    • singular.html

最小限必要なテンプレートファイルはindex.htmlです。このファイルの存在が、WordPressがテーマがブロックテーマであることを判断する方法です。

それ以外では、テーマデザインを達成するために必要な数だけテンプレートを含めることができます。

技術的には、WordPressは/block-templatesフォルダーも検索しますが、これは古いバージョンのWordPressとの後方互換性のためです。しかし、/templatesフォルダーを常に使用することが推奨されます。

テンプレートの構築

技術的には、テンプレートファイル内にすべてのブロックマークアップを入力することができますが、これはブロックテーマで作業する際の典型的な体験ではありません。ほとんどの場合、視覚インターフェースから作業し、ブロックコードをテンプレートファイルに移行します。

視覚インターフェースでの作業を探るには、サイトおよびテンプレートエディタの使用に関するサポートガイドを読んでください:

テンプレートの編集

WordPress管理からテンプレートにアクセスするには、管理メニューの外観 > エディタメニューを開きます。次に、サイドバーのテンプレート項目をクリックします:

WordPressのサイトエディタにおけるテンプレートインターフェース。左側にテンプレートオプション、右側にプレビューパネルが表示されています。

この画面には、サイトの既存のすべてのテンプレートがリストされており、これらは3つの場所から来ることがあります:

  • データベースに保存されたユーザー作成のテンプレート
  • テーマの/templatesフォルダーからのテンプレート
  • プラグインによって動的に追加されたテンプレート

そこから、既存のテンプレートにカスタマイズを加え、ブロックを好みに合わせて調整できます。

これらを保存すると、データベースに保存され、テーマ内の任意のテンプレートを上書きします。このテーマを他の人に配布したり、別のサイトで使用したりする予定がある場合は、テンプレートの紹介で説明されているように、/templatesフォルダー内の対応するテンプレートにブロックマークアップをコピーする必要があります。

新しいテンプレートの追加

新しいテンプレートを追加テンプレート見出しの隣にある+アイコン)をクリックすることで、新しいテンプレートを作成できます。これにより、次のようなモーダルオーバーレイが作成されます:

WordPressのサイトエディタに重ねられたテンプレート追加モーダル。

そこから、完全にカスタムのテンプレートを作成できます(編集用に既に存在しない場合)。

再度、エディタを介して追加した新しいテンプレートはデータベースに保存されます。テーマを配布するつもりであれば、/templatesフォルダー内にテンプレートファイルを作成し、ブロックマークアップをそこにコピーする必要があります。テンプレートファイル名がテンプレート階層の有効なファイル名と一致することを確認してください(たとえば、ホームテンプレートファイル名はhome.htmlです)。

カスタムテンプレート

カスタムテンプレートは、個々の投稿、ページ、またはカスタム投稿タイプのエントリに割り当てることができるテンプレートです。これらは、サイトのフロントエンドでの単一投稿ビューに使用されます。

あなたやテーマのユーザーは、投稿エディタのサイドバーにある投稿/ページパネルのテンプレート設定からカスタムテンプレートを選択できます:

サイドバーでテンプレートオプションが開いているWordPressの投稿エディタ。ブランクテンプレートオプションが強調表示されています。

これは、特定の状況に対してユニークなデザインを作成できる強力な機能です。たとえば、連絡フォームを含む異なるレイアウトのようなシンプルなものや、複数の投稿クエリや他のセクションを含むニュースマガジンレイアウトのような複雑なものを追加できます。

テンプレート画面から新しいテンプレートを追加する際にも、カスタムテンプレートを作成できます。テンプレートを追加オーバーレイには、カスタムテンプレートというオプションがあります。これをクリックすると、サイトのデータベース内に新しいカスタムテンプレートが追加されます。

しかし、テーマと共にテンプレートを配布するには、テーマの/templatesフォルダー内のカスタムテンプレートファイルに追加する必要があります。

カスタムテンプレートの素晴らしい点は、ファイル名を任意のものにできることです。標準のテンプレートファイル名(テンプレート階層から)を使用しないようにし、ユニークであることを確認してください。

カスタムテンプレートは何でも可能なので、どのブロックマークアップを含めるべきかに関する正確なルールはありません。しかし、投稿やページのコンテンツを表示したい場合は、その中のどこかで投稿コンテンツブロックを使用していることを確認してください。

もう1つのルールは、theme.jsonファイルを介してテンプレートを登録する必要があることです。これを行う方法は、カスタムテンプレートのドキュメントのグローバル設定とスタイルの章で説明されています。

元々、カスタムテンプレートは「ページテンプレート」と呼ばれていました。これは、最初の実装ではこの機能がページにのみ機能したためです。最終的に、投稿や他のカスタム投稿タイプもこの機能を使用できるようになったため、「カスタムテンプレート」として再ブランド化されました。しかし、他のドキュメントやサードパーティのサイトでは、これらがページテンプレートと呼ばれることがあります。