Formdazzle!
Drupalフォームに便利なテーマサジェスチョンを提供し、フォームのテーマ設定を大幅に簡単かつ時間短縮します。
formdazzle
インストール
composer require 'drupal/formdazzle:^4.0'
composer require 'drupal/formdazzle:^3.0'
composer require 'drupal/formdazzle:^2.1'
概要
Formdazzle!は、Drupalフォームのテーマ設定という困難なタスクを簡素化するモジュールです。ボタンやラベルを含むすべてのフォーム要素に意味のあるテーマサジェスチョンを自動的に追加し、カスタムテンプレートで特定のフォーム要素をターゲットにすることが非常に簡単になります。
Drupal Coreはinput.html.twigやinput--textfield.html.twigのような基本的なテーマサジェスチョンしか提供しませんが、Formdazzleはinput--textfield--[form-id].html.twigやinput--textfield--[form-id]--[element-name].html.twigのようなフォーム固有および要素固有のサジェスチョンでこれを拡張します。
また、このモジュールはTwigデバッグを強化し、Drupal Coreがデフォルトで表示しない非表示のテンプレートサジェスチョンに関するコメントをフォームに追加します。
Features
- ボタン、テキストフィールド、セレクト、チェックボックスなど、すべてのフォーム要素に対するテーマサジェスチョン
- すべてのフォーム要素ラベルに対するテーマサジェスチョン
- フォームIDとフォーム要素名の両方を含む正確なターゲティング用サジェスチョン（例：input--textfield--contact-form--first-name.html.twig）
- フォームのテンプレートサジェスチョンを表示するTwigデバッグコメントの強化
- 簡略化されたフォームIDサジェスチョンによるWebformフォームの特別処理
- サジェスチョンにView名とdisplay IDを含むViews exposed formの特別処理
- すべてのform_alterフックの後に実行されるpre-renderコールバックを使用した非侵入的な実装
Use Cases
特定のフォームフィールドのスタイリング
input--textfield--contact-form--email.html.twigのようなテンプレートファイルを作成して、他のテキストフィールドに影響を与えることなく、お問い合わせフォームのメールフィールドのみの外観をカスタマイズできます。
特定フォーム内のすべてのフィールドのテーマ設定
input--textfield--user-login-form.html.twigを作成してログインフォーム内のすべてのテキストフィールドをスタイリングしたり、form-element--user-login-form.html.twigですべてのフォーム要素ラッパーをスタイリングできます。
カスタムWebformフィールドテンプレート
マシン名が'feedback'のWebformの場合、input--textfield--webform-feedback--comments.html.twigのようなテンプレートを作成して特定のWebformフィールドをターゲットにできます。
Views exposed filterのテーマ設定
input--textfield--views--search--page-1.html.twigのようなテンプレートを使用して、特定のViewのexposed filterをスタイリングできます。'search'はView ID、'page-1'はdisplay IDです。
フォームテンプレートサジェスチョンのデバッグ
Twigデバッグを有効にすると、HTMLソースでフォームに利用可能なすべてのテンプレートサジェスチョン（Drupal Coreがデフォルトで表示しないサジェスチョンを含む）を一覧表示するコメントを確認できます。
Tips
- development.services.ymlでTwigデバッグを有効にして、HTMLソースで利用可能なすべてのテーマサジェスチョンを確認してください
- テーマサジェスチョンは[element-type]__[form-id]__[element-name].html.twigのパターンに従います
- Views exposed formの場合、パターンは'views_exposed_form'の代わりにView IDとdisplay IDを使用します
- Webformの場合、パターンはより簡潔なサジェスチョンのために'webform_[machine-name]'を使用します
- モジュールはインストール時にweight 10を設定し、他のモジュールの後に実行されることを保証します
- 設定は不要です - モジュールは有効化されると自動的に動作します
- モジュールはpre-renderコールバックを使用して、すべてのフォーム変更が完了した後にサジェスチョンが追加されることを保証します
Technical Details
Hooks 3
hook_module_implements_alter
formdazzleのform_alter実装が、他のすべてのモジュールがフォームを変更した後に最後に実行されることを保証します。これにより、Formdazzleは最終的なフォーム構造にサジェスチョンを追加できます。
hook_form_alter
すべてのフォームにpre-renderコールバックを追加します。フォームを直接変更する代わりに、Formdazzleはpre-renderフェーズまで待ってテーマサジェスチョンを追加し、他のすべての変更が完了していることを保証します。
hook_preprocess_HOOK (form_element)
フォーム要素ラベルにテーマサジェスチョンを追加します。ラベルの#themeプロパティは、template_preprocess_form_element()で無条件に作成されるため、この関数まで変更できません。
Troubleshooting 3
development.services.ymlファイルでTwigデバッグが有効になっていることを確認してください。twig.configの下で'debug: true'を設定します。
新しいテンプレートファイルを作成した後、DrupalのCacheをクリアしてください。'drush cr'を使用するか、管理UIからキャッシュをクリアします。
モジュールはpre-renderフェーズでサジェスチョンを追加します。フォームが通常のレンダリングをバイパスする場合、サジェスチョンが追加されない可能性があります。