Menu Link Attributes
メニューリンクにカスタムHTML属性を追加できます。アンカータグとそれを含むリスト要素の両方に対応しています。
menu_link_attributes
インストール
composer require 'drupal/menu_link_attributes:8.x-1.6'
概要
Menu Link Attributesは、管理者がメニューリンクにカスタムHTML属性を追加できるようにすることで、メニューリンク管理を強化するDrupalモジュールです。コードを変更せずに、CSSクラス、リンクターゲット、ARIA属性、その他のカスタムHTML属性をメニュー項目に追加する際に特に便利です。
このモジュールは、柔軟なYAMLベースの設定システムを提供し、管理者はメニューリンクフォームで利用可能にする属性を定義できます。各属性には、ラベル、説明、入力タイプ（textfield、select、checkboxes、radios、managed_file）、定義済みオプションを設定できます。リンクレベルの属性（<a>タグに適用）とコンテナレベルの属性（ラッピング<li>要素に適用）の両方をサポートしています。
デフォルトでは、よく使用される3つの属性が提供されます：リンクのCSSクラス、コンテナのCSSクラス、リンクターゲットです。管理者は設定ページからYAML構文を使用して簡単に属性を追加できます。
Features
- メニュー項目編集フォームからメニューリンクにカスタムHTML属性を追加
- リンク属性（<a>タグに適用）とコンテナ属性（<li>要素に適用）のサポート
- 利用可能な属性を定義するための柔軟なYAMLベースの設定
- 複数の入力タイプをサポート：textfield、select、checkboxes、radios、managed_file
- デフォルト属性を含む：リンククラス、コンテナクラス、リンクターゲット
- 属性の使用と管理のためのパーミッションベースのアクセス制御
- 適切なHTMLレンダリングのためのクラス属性の配列としての自動処理
- 適切な多言語サポートによる翻訳対応の属性処理
- YAML Editorモジュールとの統合による設定編集の簡易化
Use Cases
メニュー項目のスタイリング用CSSクラスの追加
メニューリンクにカスタムCSSクラスを追加して、特定の項目を異なるスタイルにします。例えば、メニュー項目に「highlighted」クラスを追加して目立たせたり、外部サイトへのリンクに「external-link」クラスを追加したりできます。「class」属性（デフォルトで有効）を設定し、メニュー項目の編集時にクラス名を入力します。
リンクを新しいウィンドウで開く
target属性を使用して、特定のメニューリンクを新しいブラウザウィンドウで開くように設定します。モジュールはデフォルトで「_blank」と「_self」オプションを提供します。外部リンク、PDFドキュメント、またはメインサイトを開いたままにしておきたいリソースに便利です。
アクセシビリティ属性の追加
ARIA属性を追加してメニューのアクセシビリティを向上させます。YAML設定で「aria-label」、「aria-describedby」、「role」などの属性を設定し、コンテンツエディターが特定のメニュー項目にアクセシビリティの改善を追加できるようにします。
メニュー項目コンテナのスタイリング
リンク自体ではなく、ラッピング<li>要素にCSSクラスやその他の属性を適用します。ドロップダウンインジケーター、特別なスタイリングコンテナ、またはJavaScriptフックの追加に便利です。「container_」プレフィックスを持つ属性を使用するか、属性設定で「container: true」を設定します。
JavaScript用data属性の追加
JavaScript機能のためにメニューリンクにカスタムdata-*属性を追加します。例えば、トラッキング用の「data-analytics-category」、モーダルダイアログ用の「data-modal-trigger」、カスタムドロップダウン動作用の「data-submenu-id」などを追加できます。YAML設定でこれらをtextfield属性として定義します。
メニュー項目へのアイコン統合
アイコンライブラリを使用する場合、メニュー項目にアイコンクラスを追加します。「data-icon」またはアイコンクラス属性を設定して、コンテンツエディターが各メニュー項目に表示するアイコンを指定できるようにし、コード変更なしで視覚的な強化を可能にします。
Tips
- 属性を設定する際により良い編集体験を得るために、YAML Editorモジュールをインストールしてください
- コンテナ属性は、属性名に「container_」プレフィックスを付けるか、属性設定に「container: true」を追加することで作成できます
- 定義済みリストから複数のCSSクラスなど、複数の値を選択できる属性には「checkboxes」タイプを使用してください
- 「managed_file」タイプでは、ファイルアップロード（画像など）をメニュー項目に関連付けることができます。アップロードディレクトリを設定するには「upload_location」を指定してください
- 設定ページからメニュー項目編集フォームに移動すると、属性セクションが自動的に開き、最初のフィールドにフォーカスされます
- クラス属性は適切なHTMLレンダリングのために自動的に配列に変換されるため、Drupalの属性システムで正しく動作します
- 多言語サイトでは、「デフォルト翻訳のみに影響」が有効な場合、デフォルト翻訳で設定された属性を他の翻訳で継承できます
Technical Details
Admin Pages 1
/admin/config/menu_link_attributes/config
メニューリンク編集フォームで利用可能なHTML属性を定義する設定ページです。属性はYAML構文を使用して定義され、各属性にはラベル、説明、タイプ、オプション、デフォルト値を設定できます。
権限 2
Hooks 2
hook_form_menu_link_content_form_alter
モジュール設定に基づいて属性入力フィールドを追加するためにメニューリンクコンテンツフォームを変更します。設定された各属性のフォームフィールドを含む「属性」detailsエレメントを追加します。
template_preprocess_menu
コンテナ属性を<li>要素に適用するためにメニューテンプレートを前処理します。ネストされた子要素を含むすべてのメニュー項目を再帰的に処理します。
Troubleshooting 5
「Use menu link attributes」パーミッションがあることを確認してください。また、menu_link_contentエンティティ（カスタムメニューリンク）を編集していることを確認してください。このモジュールはmenu_link_contentエンティティにのみ動作し、システム定義のメニューリンクには動作しません。
テーマが項目属性を尊重する標準メニューテンプレートを使用していることを確認してください。属性が「container_」プレフィックスまたは「container: true」設定で適切に設定されていることを確認してください。設定変更後はキャッシュをクリアしてください。
YAML構文が正しいことを確認してください。一般的な問題には、不正なインデント（タブではなくスペースを使用）、キーの後のコロンの欠落、エスケープされていない特殊文字などがあります。シンタックスハイライト用にYAML Editorモジュールをインストールしてください。
モジュールはクラス値を自動的に配列に変換します。プログラムでこれらの値にアクセスする場合は、配列形式を期待してください。update hook 8001は古いバージョンからの不正な形式のクラス属性を修正します。
データベース更新（drush updb）を実行して、デフォルト属性にラベルと説明を追加するupdate hookを適用してください。
Security Notes 3
- 「Administer menu link attributes」パーミッションは、悪用される可能性のある任意のHTML属性を定義できるため、制限付きアクセスとしてマークされています
- ユーザーが入力した属性値は、レンダリング時にDrupalの標準サニタイズの対象となります
- テーマで適切に処理されない場合にXSSを有効にする可能性のある属性を追加する際は注意してください