Twigテンプレートの操作

03/05/2020, by maria

Drupalを使用すると、HTMLマークアップの作成に使用されるすべてのテンプレートをオーバーライドできるため、カスタムテーマの出力としてレンダリングされるマークアップを完全に制御できます。高レベルのHTMLから小さなフィールドまで、ページのすべての要素にテンプレートがあります。

テンプレートのオーバーライド

特定の命名規則に一致するテンプレートをテーマのフォルダーに追加することで、Drupalの基本テンプレートをオーバーライドできます。

テンプレートをオーバーライドするには、次のことが必要です：

1. オーバーライドするテンプレートを見つけます。
2. テンプレートファイルを基本の場所からテーマのフォルダーにコピーします。
3.（オプション）テンプレートが使用される領域のより具体的なサブセットを対象にするために、命名規則に従ってテンプレートの名前を変更します。
4. 好みに合わせてテンプレートを変更します。

テンプレートファイルをテーマにコピーしてキャッシュをクリアすると、Drupalは基本バージョンの代わりにテンプレートファイルのインスタンスを使用し始めます。

Twigデバッグツールを使用して、ページの任意の部分に使用されているテンプレートを確認できます。

テーマフックの候補

テンプレートファイルに変更を加えたいが、使用されている一部の場所だけに加えたい場合があります。典型的な例は、特定のタイプのノードのみにノードテンプレートファイルの変更を加えることです。Drupalのテーマ層を使用すると、特定の命名規則に従って、テンプレートファイルの特定の使用例を対象にできます。記事ノードをレンダリングするとき、Drupalは最初にnode--article.html.twigテンプレートファイルを探し、存在する場合はそれを使用します。存在しない場合は、Drupalは標準のnode.html.twigテンプレートを使用します。Drupalがテンプレートファイルが使用できる可能性のある名前を決定するプロセスは、テーマ候補と呼ばれます。

テーマフックの候補により、特定の命名規則を持つテンプレートファイルに対して、テーマ内で対象を絞ったオーバーライドを実装できます。

コア、モジュール、テーマエンジン、テーマのすべての層が候補を提供できます。フックを使用して候補を追加または変更できます：

キャッシュの再構築

テーマフックの候補を使用する場合、Drupalが提案された新しいテンプレートではなくキャッシュを使用する可能性があります。この問題が発生した場合はキャッシュをクリアしてください。キャッシュをクリアするには、Drupalキャッシュのクリアセクションで説明されている方法の1つを選択します。

背景情報

候補は、適切な状況に基づいて選択するようシステムに指示する命名ヒントと考えることができます。

テンプレート候補は、変更可能なテーマ候補フックを介して設定されます。これらのフックにより、任意のモジュールまたはテーマが代替のテーマ関数またはテンプレート名の候補を提供し、hook_theme_suggestions_HOOK()またはこのフックの以前の呼び出しによって提供された候補を並べ替えたり削除したりできます。

Drupalがパスに基づいてページのテーマの候補を決定する方法

theme_get_suggestions()関数に基づく別の説明を次に示します：

特定のページの可能なテンプレートのリストは、theme_get_suggestions()関数によってDrupalで生成されます。この関数はsystem_theme_suggestions_page()関数によって呼び出されます。

Drupalのページパスは、最初にコンポーネントに分割されます。上記のように、Drupalパスはそのエイリアスのどれでもありません。ページには1つだけDrupalパスがあります。「http://www.example.com/node/1/edit」と「http://www.example.com/mysitename?q=node/1/edit」の例では、Drupalパスはnode/1/editで、そのコンポーネントは「node」、1、「edit」です。

次に、プレフィックスが「page」に設定されます。次に、各コンポーネントに次のロジックが適用されます：

1. コンポーネントが数値の場合、プレフィックスに「__%」を加えたものを候補リストに追加します。
2. コンポーネントが数値であるかどうかに関係なく、プレフィックスに「__」とコンポーネントを加えたものを候補リストに追加します。
3. コンポーネントが数値でない場合は、プレフィックスに「__」とコンポーネントを追加します。

コンポーネントリストを繰り返した後、ページがフロントページの場合（「[管理] > [構成] > [システム] > [サイト情報]」で設定）、「page__front」が候補リストに追加されます。

最終的に候補を実際のファイル名に変換するために、「__」は「-」に変換され、「.html.twig」が候補に追加されることに注意してください。したがって、node/1/editの場合、次の候補リストが得られます：

1. page.html.twig（これは常に候補です）
2. page--node.html.twig（プレフィックスがpage__nodeに設定されます）
3. page--node--%.html.twig
4. page--node--1.html.twig（コンポーネントが数値のためプレフィックスは変更されません）
5. page--node--edit.html.twig（プレフィックスがpage__node__editに設定されます）
6. page--front.html.twig（ただし、node/1/editがフロントページの場合のみ）

ページが実際にレンダリングされるとき、最後の候補がチェックされます。それが存在する場合は、その候補が使用されます。それ以外の場合は、次の候補がチェックされ、以下同様に続きます。もちろん、主要な候補のどれも存在しない場合、page.html.twigが最後の候補になります。これは、page--front.html.twigが存在する場合、フロントページの他の候補をオーバーライドする理由も説明しています。それは、フロントページとして指定されたページの常に最後の候補だからです。

Drupal 7との違い

以前は、テーマ候補を導入するために、前処理関数で$variable['theme_hook_suggestion']と$variable['theme_hook_suggestions']を変更していました。Drupal 8では、モジュールとテーマは独自の特別なフックでテーマ候補を定義および変更します。

詳細情報

テーマ候補の新しいフックの変更記録

パレット - カラフルに🎨