6.6. Drupal でのテンプレートの操作。Drupal のコアにあるテンプレートとは。

Drupal に Twig が組み込まれていることと、その使い方はすでに見ました。この記事では、Drupal のテンプレートの操作方法、Stable テーマにあるテンプレート、Stable テンプレートの再定義方法、そしてさまざまな Drupal エンティティのテンプレートの再定義方法を説明します。

それでは、Stable テーマのテンプレートから始めましょう。Stable テーマの templates フォルダーに移動します:

テンプレートは機能属性に従って分けられています:

/core/themes/stable/templates/admin - Views UI、ページと管理項目、メッセージとレポートのテンプレート。
/core/themes/stable/templates/block - ブロックテンプレート。
/core/themes/stable/templates/content - ノード、コメント、タクソノミー用語、rss 要素、検索結果のテンプレート。
/core/themes/stable/templates/content-edit - フィルターと編集フォームのテンプレート。
/core/themes/stable/templates/dataset - フォーラムテンプレート、rss チャンネル、テーブル、リスト ul。
/core/themes/stable/templates/field - 異なるタイプのフィールドテンプレート。
/core/themes/stable/templates/form - フォーム要素（さまざまなタイプのフィールド）のテンプレート。
/core/themes/stable/templates/layout - page.html.twig ページ、リージョンの構造、他のすべてのテンプレートが埋め込まれるメインの html.html.twig テンプレートのテンプレート。
/core/themes/stable/templates/misc - RSS、RDF マークアップアイコン、Drupal メッセージ、プログレスバーのテンプレート。
/core/themes/stable/templates/navigation - メニュー、book（book モジュール）、ページャー、ツールバー、垂直タブ、パンくずのテンプレート。
/core/themes/stable/templates/user - ユーザーのページ、ユーザー名、フォーラム投稿を誰が投稿したかの署名のテンプレート。
/core/themes/stable/templates/views - Views モジュールのさまざまな要素のテンプレート。

ご覧のとおり、Stable テーマはテーマ作成のための幅広いテンプレートを提供します。これらのテンプレートを再定義するには、必要なテンプレートをサブテーマにコピーし、そこで好きなように変更するだけです。すべてのテンプレートをコピーできますが、必要に応じてテンプレートをサブテーマにコピーすることをお勧めします。

コンテンツのテンプレートのオーバーライド（template suggestions）

既存のテンプレートを再定義するだけでなく、個々のノード、タクソノミー用語、ブロックなどに独自のテンプレートを追加できます。テンプレートオーバーライドの例をいくつか示します。

HTML テンプレート

HTML テンプレートには、HTML ページの基本構造が含まれます。

メインテンプレート:html.html.twig（基底の場所:core/modules/system/templates/html.html.twig）

次の例は、このテンプレートをオーバーライドする方法を示します:

1. html--internalviewpath.html.twig
2. html--node--id.html.twig
3. html.html.twig

 

internalviewpath は Drupal 内部のパス node/15、taxonomy/term/46、user/2 などです。

 

詳しくは html.html.twig ドキュメントを参照してください

ページテンプレート

オーバーライドオプション: page--[front|internal/path].html.twig

メインテンプレート: page.html.twig （基底の場所: core/modules/system/templates/page.html.twig）

可能なページテンプレートは非常に多様です。ホームページテンプレートが優先度で最初に来ます。他のすべてのテンプレートは内部パスに依存します。フロントページは Configuration - Basic site settings - Front page ページで設定できます:

/admin/config/system/site-information

内部パスをエイリアスと混同しないでください。例えば、ニュースノードはパス /news/node-title を持つかもしれませんが、実際にはノードは内部パス /node/node-id を持ちます。

ノード編集ページ http://www.example.com/node/1/edit には、オーバーライドに次のテンプレートを使えます:

page--node--edit.html.twig
page--node--1.html.twig
page--node.html.twig
page.html.twig

詳しくは page.html.twig ドキュメントを参照してください

リージョン

オーバーライドオプション: region--[region].html.twig

:region.html.twig（基底の場所:core/modules/system/templates/region.html.twig）

region テンプレートは、リージョンがブロックシステムまたは hook_page_build() 関数を通じて作成されたコンテンツを持つときに使われます。リージョンの名前はテーマファイル .info.yml で指定できます。

詳しくは region.html.twig ドキュメントを参照してください。

ブロック

オーバーライドオプション: block--[module|--delta]].html.twig

メインテンプレート:block.html.twig（基底の場所:core/modules/block/templates/block.html.twig）

1. block--module--delta.html.twig
2. block--module.html.twig
3. block.html.twig

 

'module' は指定されたブロックを表示するモジュールの名前で、delta はモジュール内のブロックの内部 id です。

 

例えば、block--block--1.html.twig は、ユーザーが管理モジュール block を通じて追加した最初のブロックです。カスタムモジュールがあり、delta「my-block」のブロックを作成した場合、このブロックのテンプレートは block--custom--my-block.html.twig になります。

Views モジュールの場合、ブロックテンプレートは次のように再定義されます:ビューの名前「front_news」とビューの display id「block_1」を取ると、ブロックをオーバーライドするテンプレートの名前は:block--views-block--front-news-block-1.html.twig になります。

アンダースコアがハイフン 1 つに変わることに注意してください。

Drupal では、少なくとも標準では、特定のリージョンのブロックに別のテンプレートを指定できません。

また、パターン名は大文字小文字を区別することに注意してください。モジュールが MyModule と呼ばれる場合、ブロックのテンプレート名は block--MyModule.html.twig になります。

詳しくは block.html.twig のドキュメントを参照してください。

素材（ノード）

オーバーライドオプション:node--[type|nodeid]--[viewmode].html.twig

メインテンプレート:node.html.twig（基底の場所:core/modules/node/templates/node.html.twig）

ノードテンプレートは次のようにオーバーライドできます:

1. node--nodeid--viewmode.html.twig
2. node--nodeid.html.twig
3. node--type--viewmode.html.twig
4. node--type.html.twig
5. node--viewmode.html.twig
6. node.html.twig

 

Viewmode はノードの表示ディスプレイです:Full、Teaser、RSS、Token、その他のディスプレイ。Type はノードのコンテンツタイプ News、Articles、Pages です。Nodeid はノードの nid、id です。

詳しくは node.html.twig ドキュメントを参照してください

タクソノミー用語

オーバーライドオプション: taxonomy-term--[vocabulary-machine-name|tid].html.twig

メインテンプレート:taxonomy-term.html.twig（基底の場所:core/modules/taxonomy/templates/node.html.twig）

タクソノミー用語テンプレートは次のようにオーバーライドできます:

1. taxonomy-term--tid.html.twig
2. taxonomy-term--vocabulary-machine-name.html.twig
3. taxonomy-term.html.twig


4.  

辞書名のすべてのアンダースコアはハイフンに置き換えるべきです。

詳しくは taxonomy-term.html.twig ドキュメントを参照してください

フィールド

オーバーライドオプション:field--[type|name[--content-type]|content-type].html.twig

メインテンプレート:field.html.twig（基底の場所:core/modules/system/templates/field.html.twig）

テンプレートは次のようにオーバーライドできます:

1. field--field-name--content-type.html.twig
2. field--content-type.html.twig
3. field--field-name.html.twig
4. field--field-type.html.twig
5. field.html.twig

 

素材のタイプとフィールド名の名前のすべてのアンダースコアはハイフンに置き換えられます。

 

詳しくは field.html.twig ドキュメントを参照してください。

コメント

オーバーライドオプション:comment--node-[type].html.twig

メインテンプレート:comment.html.twig（基底の場所: core/modules/comment/templates/comment.html.twig）

各素材タイプごとにコメント用の別のテンプレートを設定できます。例えば、comment--node-article.html.twig。

詳しくは comment.html.twig ドキュメントを参照してください。

コメントをラップするための別のテンプレートを指定することもできます。

オーバーライドオプション:comment-wrapper--node-[type].html.twig

メインテンプレート:comment-wrapper.html.twig（基底の場所:core/modules/comment/templates/comment-wrapper.html.twig）

Views

すべての Views テンプレートは、マシンビュー名、display id、ディスプレイタイプ（page、block、その他）、あるいはマシンビュー名、display id、ディスプレイタイプの組み合わせを使って再定義できます。

各 View には少なくとも 2 つのテンプレートが使われます。最初のテンプレートは views-view.html.twig です:

2 番目のテンプレートは、ビューのディスプレイスタイル（例えば、unformatted list、table、grid、HTML list）によって決まります。デフォルトでは、unformatted フィルターテンプレート（タグ経由）views-view-unformatted.html.twig が使われます。

Views を通じて既成のエンティティ（例えば、完全なノードやそのティーザー）ではなくフィールドを表示する場合、Views は別のフィールドテンプレートを使い、views-view-fields.html.twig フィールドのテンプレートも再定義できます。

以下は、オーバーライドするための可能なテンプレート名です。

View Name - foobar（マシン名）

Display format - unformatted（unformatted list、可能なオプションを追加）

Record Display Style - fields

Display Name - page

views-view--foobar--page.html.twig
views-view--page.html.twig
views-view--foobar.html.twig
views-view.html.twig

views-view-unformatted--foobar--page.html.twig
views-view-unformatted--page.html.twig
views-view-unformatted--foobar.html.twig
views-view-unformatted.html.twig

views-view-fields--foobar--page.html.twig
views-view-fields--page.html.twig
views-view-fields--foobar.html.twig
views-view-fields.html.twig

フォーラム

オーバーライドオプション:forums--[[container|topic]--forumID].html.twig

メインテンプレート:forums.html.twig（基底の場所:core/modules/forum/templates/forums.html.twig）

コンテナとフォーラムトピックのテンプレートを個別に設定できます:

forums--containers--forumID.html.twig
forums--forumID.html.twig
forums--containers.html.twig
forums.html.twig

そしてフォーラムトピック用:

forums--topics--forumID.html.twig
forums--forumID.html.twig
forums--topics.html.twig
forums.html.twig

詳しくは forums.html.twig ドキュメントを参照してください。

メンテナンスモード

オーバーライドオプション:maintenance-page--[offline].html.twig

メインテンプレート:maintenance-page.html.twig（基底の場所:core/modules/system/templates/maintenance-page.html.twig）

詳しくは maintenance-page.html.twig のドキュメントを参照してください。

検索結果

オーバーライドオプション:search-result--[searchType].html.twig

メインテンプレート:search-result.html.twig（基底の場所:core/modules/search/templates/search-result.html.twig）

例えば、ノードによる検索を使う場合:

/search/node/Search+Term

その場合、テンプレート「search-result--node.html.twig」を使えます。

ユーザーによる検索の場合:

search/user/bob

search-result--user.html.twig テンプレートを使います。