logo

パレット - カラフルに🎨

Palette — ビジュアルページビルダー、デザインの専門知識は不要です。

ライブデモ パレットをダウンロード

Scroll
  1. ホーム
  2. Drupal ドキュメント
  3. Drupal 8のテーマ設定

Drupal Twig変換の手順（tpl.phpからhtml.twigへ）

05/05/2020, by maria

Menu

このドキュメントはDrupal 8のTwig変換プロセスの大部分で使用され、Drupal 8でTwigテンプレートエンジンを使用するために独自のテーマやモジュールを更新する際にも役立つ可能性があります。

注：Twigに関するすべての作業は現在、Drupalコアの問題キューで行われています。Twig変換サンドボックスは、以前に変換されたテンプレートと関数を見つけるためだけに使用してください。

主要なコントリビューター向けの手順：

  • コアの問題を見つけて、パッチを公開およびレビューします。
  • サンドボックスにパッチを適用しないでください
  • サンドボックス用のパッチを作成しないでください。
  • サンドボックスは、以前に変換されたコードのテストおよび/または取得にのみ使用します。
  • このプロセスの概要については、このYouTubeビデオをご覧ください。

 

セットアップ

Drupal 8.0.xのクローン：

git clone -b 8.0.x http://git.drupal.org/project/drupal.git d8

現在の開発版Drupalが「d8」フォルダーにインストールされます（任意の名前を付けてください）

1. 通常どおりDrupalをインストールします（標準インストールプロファイルを使用）。
2. services.ymlでTwigの3つのパラメータ（debugging、cache、auto_reload）すべてをTrueに設定します。

変換

テーマ関数

テーマ関数をテンプレートファイルと前処理関数に変換します：

1. テーマ関数が由来するファイルを特定します（theme.inc？Core/modules/color/？）
2. テーマ関数用のテンプレートファイルX.html.twigを作成します：
                     - 新しいファイルに適切な名前を付けます
                     - 関数名の先頭からtheme_を削除し、ファイル名を.html.twigで終わらせます
                     - アンダースコア（「_」）をハイフン（「-」）に変換します。
                     - 例：
                                * theme_link()はlink.html.twigになります
                                * theme_user_signature()はuser-signature.html.twigになります

3. 新しいTwigテンプレートを完全なテーマのテンプレートフォルダー（サンドボックス内）に配置します：
                     - 特定のモジュールから来た関数の場合、stark/templates/commentなど
                     - theme.incから来た関数の場合、stark/templates/theme.inc
                     - form.incから来た関数の場合、stark/templates/form.inc
4. Drupal 8 APIドキュメントに移動し、関数を見つけます。
                     -（すべての関数へのリンクはスプレッドシートにあります）
5. ファイルの先頭にPHPスタイルのdocblockを追加し、Twigコメント{# #}で囲みます
                     - 最上部に@file行を追加します。
                     - @file行のすぐ下に関数定義をコピーします。「Returns HTML ...」を「Default theme implementation ...」に書き換えます。1行に収まるように書き換えます。
                     - 「Available variables:」行を追加します（@param変数を置き換えます）
                     - api.drupal.orgのドキュメントの「Parameters」セクションにリストされている変数をコピーします
                     - @see template_preprocess()行が存在する場合は削除します。
                     - @see template_preprocess_THEME_HOOK()行を追加します。
                     - @ingroupテーマ行を追加します（下のdocblockの例を参照）。

6. ドキュメントブロックの下に関数の元のコードをコピーします（下の例を参照）
7. PHPコードを主にHTMLと出力文に変更します
                   - HTMLからPHPコードを削除します。例：
                               * function whatever() {
                               * // …
                               * return $output; }
               - PHP出力文を削除し、{{}}に置き換えます
                               * $variablesを単純な名前に変換します：$variable['title']は{{title}}になります
                               * 配列構文をドット構文に置き換えます：$variable['page'] ['tabs']は{{page.tabs}}になります
               - PHPロジックを削除し、Twig構文{%%}に置き換えます。
                               * <?php foreach $items as $item?>は{% for item in items%}になります
               - PHPコメントをTwigコメント構文に置き換えます：{# #}
               - リテラルを囲むt()関数をtフィルターに置き換えます： {{ 'text in quotes'|t }}
               - 変数のPHPロジックをすべて前処理関数に移動します。（前処理の手順は以下を参照してください。）
8. この作業中に、重複しているように見えるテンプレートを1つに結合したり、マークアップや変数名を改善するなど、改善したい点に気付いた場合は、このスプレッドシートにメモするか、サンドボックスに問題を作成してください。例：http://drupal.org/node/180591

前処理関数への変換または結合

注：

  • 前処理関数はすべてのテーマ関数を置き換えます。
  • テンプレートファイルに、出力される変数に影響するPHPロジックがある場合、そのコードを前処理関数に移動する必要があります。
  • テンプレートがテーマ関数として始まった場合、テーマ関数を前処理関数に変換する必要があります。
  • 一部のテーマ関数にすでに関連する前処理関数がある場合、それらのテーマ関数の変数処理コードを前処理に移動する必要があります。
  • テーマ関数の代わりにテンプレートファイルを使用するようDrupalに指示する行をhook_themeの実装に追加しないでください。

 

手順：

  • theme_YOURFUNCTIONをtemplate_preprocess_YOURFUNCTIONに名前変更します。
  • アンパサンドを追加して$variablesを参照渡しします。つまり、theme_select($variable)はtemplate_preprocess_select(&$variable)になります。
  • 変数処理ロジックのみを処理するように関数を編集します。マークアップ（つまり$Output）をすべて削除します。

Twigテンプレートに欠落している関数がある場合...

まだ機能しないTwigテンプレートのフィルターや関数にアクセスする必要がある場合は、このオープンイシューに追加してください。ほとんどのPHPまたはDrupal関数は前処理関数に移動する必要があることに注意してください。テーマ開発者がその関数にアクセスする必要があると思われる場合のみ、テンプレートに残すべきです。

簡単な変換の例（theme_link）

PHPコード

function theme_link($variables) { return '' . ($variables['options']['html'] ? $variables['text'] : check_plain($variables['text'])) . ''; }

Twigテンプレート（ファイル名：link.html.twig）

{# /** * @file * Default theme implementation to display a link. * * Available variables: * - text: The link text for the anchor tag. * - url: The complete URL being linked to, such as * "/node/34" or "http://example.com/foo". * - attributes: Remaining HTML attributes for the containing element. * * @see template_preprocess_link() * * @ingroup themeable */ #} <a href="{{ url }}" class="{{ attributes.class }}"{{ attributes }}>{{ text }}</a>

system.moduleの変更（前処理関数）

/** * Prepares variables for link templates. * * Default template: link.html.twig. * * @param array $variables * An associative array containing: * - text: The translated link text for the anchor tag. * - path: The internal path or external URL being linked to. * - options: An associative array of additional options. */ function template_preprocess_link(&$variables) { $variables['url'] = url($variables['path'], $variables['options']); }

コメント：

Andrey Podanenko：http://drupal.org/node/1783130 変数の名前を変更する方法
jen：独自のTwigコメント開始・終了マーカー{#と#}を追加します。
jen：Twigコメントマーカーの後に、doxygen用の標準的なPHP doxygenマーカーを続けます。
jen：api.drupal.orgからこの定義をコピーして貼り付けます
James Wilson：*関数*から定義をコピーする場合は、「Returns HTML ...」を「Default theme implementation」に書き換える必要があります
jen：api.drupal.orgから「Parameters」をコピーして貼り付けます
James Wilson：変数名からドル記号を削除します。docblockから別の変数を参照する必要がある場合は、変数を一重引用符で囲みます。[ポリシーの議論はここhttp://drupal.org/node/1804710を参照してください]
jen：Twigで変数は{{}}構文で「出力」します
jen：属性は「ドリルダウン」されるため、クラスなどを参照できます
jen：url()などのほとんどの関数は、テンプレートファイルから削除し、代わりにpreprocessに追加する必要があります。