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

テンプレートのドキュメントで学んだように、WordPressは訪問者がウェブサイトで表示しているページに基づいて、トップレベルのテンプレートを特定します。この特定されたテンプレートが読み込まれ、WordPressはブロックマークアップを解析してブラウザに返します。

テンプレートとは異なり、パーツは現在表示されているページに基づいて自動的に読み込まれることはありません。これらは、テンプレートパートブロックを介してトップレベルのテンプレートのパートとして含める必要があります。

テンプレートパートブロックのマークアップは次のようになります： 

  1. <!-- wp:template-part {"slug":"your-template-part-slug"} /-->

含めることができるブロック設定はさらにありますが、slugプロパティは必ず正しいパートを読み込むために設定する必要があります。WordPressが解析プロセス中にテンプレートパートブロックのマークアップに遭遇すると、テーマフォルダー内の/parts/your-template-part-slug.htmlという名前のファイルを探します。見つかった場合、そのファイルを読み込み、そのブロックマークアップを解析します。

ヘッダーとフッターパートの両方を読み込むシンプルなテンプレートを見てみましょう： 

  1. <!-- wp:template-part {"slug":"header","tagName":"header"} /-->
  3. <!-- Other block markup goes here. -->
  5. <!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

ご覧のように、ヘッダーとフッターパートのためにtagName設定も含まれています。これにより、ラッピングコンテナ要素がそれぞれ<header>と<footer>に設定されます。

これがトップレベルのテンプレートに含まれるブロックマークアップである場合、WordPressは次のステップを実行します：

  • 1. /parts/header.htmlファイルを読み込み、そのブロックマークアップを解析します。
  • 2. テンプレートの他のブロックマークアップを解析します。
  • 3. /parts/footer.htmlファイルを読み込み、そのブロックマークアップを解析します。

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

ブロックテーマのテンプレートパーツには、ブロックマークアップのみが含まれています。

サイトタイトルブロックと「Powered by WordPress」メッセージを含む段落ブロックを表示するシンプルなフッターテンプレートパートを見てみましょう。これを再現するには、テーマに次のブロックマークアップを含む/parts/footer.htmlファイルを追加します： 

  1. <!-- wp:group {"align":"wide","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
  2. <div class="wp-block-group alignwide">
  3.     <!-- wp:site-title {"level":0} /-->
  5.     <!-- wp:paragraph -->
  6.         <p>Powered by WordPress.</p>
  7.     <!-- /wp:paragraph -->
  8. </div>
  9. <!-- /wp:group -->

これは、ブロックマークアップとそれがパート内でどのように見えるかを示す単なる例です。テンプレートパーツは、含めたい内容に応じて、さらにシンプルまたは非常に複雑にすることができます。

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

テンプレートパーツの整理

ブロックテーマでは、テンプレートパーツをテーマの/partsフォルダー内に配置する必要があります。構造は次のようになります： 

    1. - `````comments.html
    • footer.html
    • header.html
    • sidebar.html

これらはすべて必須ではありません。実際、テンプレートパーツをまったく含める必要はありません。

WordPressは現在、ネストされたテンプレートパーツをサポートしていません。たとえば、/parts/headerフォルダーを作成して、その中に複数のヘッダーパーツを配置することはできません。すべてのテンプレートパーツは、テーマの/partsフォルダー内に直接配置する必要があります。

技術的には、WordPressはテーマに/block-template-partsフォルダーが存在する場合にもそこを探します。これは、古いバージョンのWordPressとの後方互換性のためです。しかし、/partsフォルダーを常に使用することが推奨されます。

テンプレートパーツの構築

すべてのテンプレートパーツのブロックマークアップコードを手動で記述することは可能です。しかし、ほとんどの場合、WordPressの管理画面とそのビジュアルエディタ内で直接作業したいでしょう。その後、テンプレートの紹介で説明されているように、エディタからテンプレートパートファイルにブロックマークアップを移行します。

ビジュアルインターフェースでの作業を探るには、サイトおよびテンプレートエディタの使用に関するサポートガイドをお読みください：

テンプレートパーツの登録

必須ではありませんが、ほぼ常にtheme.jsonを介してテンプレートパーツを登録するべきです。そうすることで、サイトおよびテンプレートエディタで使用するためのユーザーインターフェースに、翻訳可能な良いラベルが表示されることが保証されます。

テンプレートパーツの登録は、テンプレートパーツドキュメントのグローバル設定とスタイル章で説明されています。

テンプレートパーツの編集

WordPress管理画面からテンプレートにアクセスするには、管理メニューの外観 > エディタメニューを開きます。次に、サイドバーのパターン項目をクリックし、テンプレートパーツセクションを見つけるまでスクロールします：

WordPressのサイトエディタ内のパターンライブラリの下にあるテンプレートパーツセクション。ポストメタとコメントパートが画面に表示されています。

テンプレートパーツは、テンプレートパートエリアによって分類されます（詳細については「テンプレートパートエリア」セクションを参照してください）。各エリアには、そのために登録されたパーツがリストされます（一般はuncategorizedエリアであることに注意してください）。

表示されるテンプレートパーツは、次の3つの場所から来ることがあります：

  • データベースに保存されたユーザー作成のテンプレートパーツ（これらはwp_template_part投稿タイプの投稿として保存されます）
  • テーマの/partsフォルダーからのテンプレートパーツ
  • プラグインによって動的に追加されたテンプレートパーツ

この画面から、パーツに対して希望するカスタマイズを行い、ビジョンに合わせて調整できます。

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

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

パターン見出しの隣にある+アイコンをクリックすることで、新しいテンプレートを作成できます。これにより、いくつかのオプションが表示されるドロップダウンが表示されます。ここに示すように、テンプレートパートを作成オプションをクリックします：

WordPressパターンライブラリ。作成テンプレートパートオプションが強調表示されたドロップダウンが表示されています。

次に、カスタムテンプレートパート名を入力し、そのエリアを選択するためのポップアップモーダルが表示されます：

WordPressサイトエディタ。テンプレートパートを作成するためのモーダルが画面に重なっています。

デフォルトでは、一般、ヘッダー、フッターエリアから選択できます（カスタムエリアの作成について詳しくは、以下の「テンプレートパートエリア」セクションをお読みください）。

次の画面では、完全にカスタムのテンプレートパートを作成できます。お好みのブロックを含めることができます。

再度、エディタを介して追加した新しいパーツはデータベースに保存されます。テーマを配布する予定がある場合は、/partsフォルダー内にテンプレートパートファイルを作成し、ブロックマークアップをコピーする必要があります。

テンプレートパートエリア

テンプレートパートエリアは、類似のテンプレートパーツを整理する方法です。また、ユーザーインターフェース内のナビゲーション要素としても表示されます。以下に、テンプレート編集サイドバーで強調表示されたヘッダーエリアを示します：

WordPressサイトエディタ。3列の投稿グリッドを持つテンプレートが表示されています。サイドバーでヘッダーエリアが選択されています。

デフォルトでは、WordPressにはテンプレートを登録できる3つのエリアがあります：

  • uncategorized（管理画面では一般とラベル付けされています）
  • header
  • footer

これにより、いくつかの一般的な使用ケースがカバーされます（たとえば、ほとんどのテーマにはヘッダーとフッターが必要です）。しかし、テーマにカスタムエリアを作成して、テンプレートパーツをより良く整理し、より良いユーザー体験を提供したい場合があります。

カスタムエリアの登録

default_wp_template_part_areasフックにフィルターを追加することで、必要なだけ多くのカスタムエリアを登録できます。コールバック関数は、$areasの単一のパラメータを受け入れ、これはエリア定義の配列でなければなりません。各エリア定義は、次のキー/値ペアを定義した配列でなければなりません：

  • area: テンプレートパートエリアの機械可読スラッグ。
  • area_tag: このエリアに割り当てられたテンプレートパーツに使用するラッピングHTMLタグ。次のいずれかである必要があります：
    • div
    • article
    • aside
    • footer
    • header
    • main
    • section
  • label: エリアの人間可読ラベルで、翻訳可能です。
  • description: エリアの説明と、どのテンプレートパーツがそれに属するかの説明で、翻訳可能です。
  • icon: エリアに使用するアイコン。現在サポートされているのはheader、footer、sidebarのみで、それ以外はデフォルトアイコンにフォールバックします。少なくともthis ticket is addressedまで。

たとえば、テーマ全体で使用されるテンプレートパーツを割り当てるために、Loopという名前のエリアを作成したい場合、次のコードをテーマのfunctions.phpファイルに追加できます： 

  1. add_filter( 'default_wp_template_part_areas', 'themeslug_template_part_areas' );
  3. function themeslug_template_part_areas( array $areas ) {
  4.     $areas[] = array(
  5.         'area'        => 'loop',
  6.         'area_tag'    => 'section',
  7.         'label'       => __( 'Loop', 'themeslug' ),
  8.         'description' => __( 'Custom description', 'themslug' ),
  9.         'icon'        => 'layout'
  10.     );
  12.     return $areas;
  13. }

これにより、テーマ用の新しいLoopエリアが登録されますが、役立つためには、theme.jsonテンプレートパーツの登録に関するドキュメントで説明されているように、少なくとも1つのテンプレートパートを登録する必要があります。 

  3. ``````bash
  4. {
  5.     "version": 2,
  6.     "templateParts": [
  7.         {
  8.             "area": "loop",
  9.             "name": "loop-default",
  10.             "title": "Loop - Default"
  11.         }
  12.     ]
  13. }
  14. `

このスクリーンショットは、サイトエディタ内のLoopエリアがどのように見えるかを示しています：

WordPressサイトエディタのパターンライブラリ内のテンプレートパーツセクション。カスタムLoopテンプレートパートエリアが選択されています。

必要に応じて、theme.jsonを介してエリアに対して任意の数のテンプレートパーツを登録できます。たとえば、loop-home.htmlとloop-author.htmlをホームおよび著者テンプレートで使用するために登録できます。しかし、これらは単なる例です。唯一の制限はあなたの想像力です。

カスタムエリアを登録したい理由はたくさんあります。このシステムの利点と機能について詳しく知りたい場合は、WordPress Developer Blogのカスタムテンプレートパートエリアでサイト編集体験を向上させるをお読みください。