logo

パレット - カラフルに🎨

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

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

Scroll

.themeファイルでの前処理と属性の変更

05/05/2020, by maria

Drupal 7と同様に、前処理関数を使用して特定のHTMLの出力に影響を与えることができます。たとえば、メニューにクラスを追加したい場合で、PHPレベルで行うことを好むなら、それができます。これはテーマ固有のマークアップを変更する良い方法ですが、テーマに依存しないマークアップにしたい場合は、独自のモジュールを作成する方が適しています。

(注:このドキュメントでは、「mytheme」はテーマのマシン名です。たとえば、「bartik」はテーマのマシン名です。)

前処理関数を操作するには:

1. テーマのディレクトリにmytheme.themeという名前のファイルを作成または編集します

2. mytheme_preprocess_HOOKのような関数を作成します。ここで、HOOKは影響を与えたい要素を参照します*

3. 変更を書いて保存します

4. 変更が有効になるようにキャッシュを再構築します(drushがインストールされている場合、コマンドラインでdrush crを実行します)

* HOOK名はTwigテンプレートの命名規則に従います。page.html.twigのフックを作成するには、mytheme_preprocess_pageを作成します。ノードのarticle.html.twigのフックを作成するには、mytheme_preprocess_node__articleを作成します(ハイフンをアンダースコアに置き換えます)。フック名を確認するには、デバッグによるテンプレートファイルの検索セクションを参照してください。

サイトのすべてのメニューにmy-menuクラスを追加したいと仮定しましょう。テーマが「mytheme」という名前であると仮定して、次の関数を書く必要があります:

/**
* Implements hook_preprocess_HOOK() for menu.html.twig.
*/
function mytheme_preprocess_menu(&$variables) {
  // If there is not an existing class array, create an empty array.
  if (!isset($variables['attributes']['class'])) {
    $variables['attributes']['class'] = [];
  }
  // Merge with any classes that may have been set by other hook_preprocess_menu invocations
  $variables['attributes']['class'] = array_merge($variables['attributes']['class'], ['my-menu']);
}

これはDrupal 7と非常に似ており、特定のメニューをターゲットにしたい場合に役立ちます。

$variablesオブジェクトを条件付きでチェックして、どのメニューを操作しているかを判断できます。$variables内の要素は、テーマの前処理後にtwigで利用可能になります。

例を拡張して、サイトのメインメニューに「my-main-menu」クラスを追加したいと仮定しましょう。これがそのための関数です:

/**
* Implements hook_preprocess_HOOK() for menu.html.twig.
*/
function mytheme_preprocess_menu(&$variables) {
  if ($variables['menu_name'] == 'main') {
    if (!isset($variables['attributes']['class'])) {
      $variables['attributes']['class'] = [];
    }
    $variables['attributes']['class'] = array_merge($variables['attributes']['class'], ['my-main-menu']);  }
}

Drupal 7との違い

template.phpファイルはもうありません。このファイルはmytheme.themeに置き換えられました。ただし、フックが出力を変更できるようにするという点で、ほぼ同じように機能し続けています。

その他の役立つリンク