Hierarchical Taxonomy Menu
画像表示、折りたたみ動作、Entity参照カウント機能をサポートした、Taxonomyボキャブラリーのタームから階層型ナビゲーションメニューを作成するDrupalモジュールです。
hierarchical_taxonomy_menu
インストール
composer require 'drupal/hierarchical_taxonomy_menu:^2.0'
composer require 'drupal/hierarchical_taxonomy_menu:8.x-1.43'
概要
Hierarchical Taxonomy Menuは、TaxonomyボキャブラリーをフルコントロールできるBlock配置可能な階層型ナビゲーションメニューに変換する強力なDrupalモジュールです。選択したボキャブラリー内のタームから親子階層を維持しながらメニュー項目を自動生成する設定可能なBlockを提供します。
主な機能として、メニュー項目の横に画像を表示する機能（Taxonomyタームに画像FieldまたはMediaの画像参照がある場合）、JavaScriptによる折りたたみ・展開可能なメニュー動作、現在のTaxonomyタームページに基づいて動的に更新されるBlockタイトルがあります。メニューの深さ制限、ベースタームによるフィルタリング、各タームを参照するNodeやCommerce製品の数を表示する機能もサポートしています。
このモジュールは完全に翻訳可能で、言語ごとのターム公開状態を尊重します。HTML構造を完全に制御できるカスタマイズ可能なTwigテンプレートが含まれており、あらゆるデザイン要件に合わせてメニューをスタイリングできます。キャッシュオプションにより、メニューコンテンツを最新に保ちながら最適なパフォーマンスを確保します。
Features
- 任意のTaxonomyボキャブラリーから親子構造を自動的に維持した階層型ナビゲーションメニューを作成
- Taxonomyタームの画像Fieldまたはメディア画像参照を使用してメニュー項目の横に画像を表示
- ピクセル寸法または画像スタイルによる設定可能な画像サイズ
- JavaScriptによる展開・折りたたみアニメーション付きの折りたたみ可能なメニュー動作
- 親項目をクリック可能なリンクとサブメニューのトグルスイッチの両方として機能させるインタラクティブ親モード
- Taxonomyタームページ表示時に現在のターム名に自動的に一致する動的Blockタイトル
- 0〜10レベルまたは無制限サブレベルのメニュー深さ制御
- ベースターム（IDまたは名前）を指定してその子孫のみを表示するメニュー項目フィルタリング
- 現在のTaxonomyタームページからベースタームを自動設定する動的ベースタームモード
- 各タームの横に参照しているNodeまたはCommerce製品の数を表示
- すべての子タームからのカウントを含む再帰的Entityカウント計算
- 参照コンテンツ（Node/Commerce製品）がないタームを非表示にするオプション
- キャッシュなしから永続キャッシュまでの設定可能なキャッシュ
- ボキャブラリーが空の場合にBlock全体を非表示にするオプション
- 翻訳対応のターム名とURLによる完全な多言語サポート
- 言語ごとの公開・非公開状態を尊重するターム状態認識
- ボキャブラリーごとのテーマサジェスション付きカスタマイズ可能なTwigテンプレート
- 簡単なテーマ設定のためのBEMスタイルCSSクラス
- メニュー内の現在のタームのアクティブ状態ハイライト
- アクティブなタームへのメニューパスを展開したまま維持する機能
Use Cases
カテゴリーナビゲーションサイドバー
Taxonomyボキャブラリーから製品や記事のカテゴリーを表示するサイドバーメニューを作成します。ユーザーはカテゴリータームをクリックしてコンテンツを閲覧でき、子カテゴリーは階層ツリー構造で表示されます。折りたたみモードを有効にして、ユーザーが興味のあるカテゴリーを展開できるようにしながらスペースを節約できます。
Eコマース製品フィルタリング
各カテゴリーの横に利用可能な製品数を表示する製品カテゴリーメニューを表示します。「参照しているCommerce製品の数を表示」を有効にし、適切なTaxonomy参照Fieldを選択します。「空のタームを除外」を有効にして、製品がないカテゴリーを非表示にします。ユーザーは各カテゴリーにいくつの製品があるかを一目で確認できます。
アイコン付きビジュアルカテゴリーメニュー
Taxonomyボキャブラリーに画像Fieldを追加し、各タームにカテゴリーアイコンや画像をアップロードします。「サムネイル」などの画像スタイルを使用して画像を表示するようにBlockを設定します。メニューには各カテゴリーが関連アイコンとともに表示され、視覚的に魅力的なナビゲーション体験を作成できます。
コンテキストに応じたサブカテゴリーメニュー
「動的ベースターム」を有効にして、現在のTaxonomyタームの子のみを自動的に表示するメニューを作成します。親カテゴリーページを表示すると、メニューにはそのサブカテゴリーが表示されます。これは、階層内の現在の位置に焦点を当てたい深いカテゴリー構造に役立ちます。
折りたたみ可能なドキュメントナビゲーション
Taxonomyで整理されたドキュメントサイトでは、「現在のTaxonomyタームで展開したまま維持」付きの折りたたみモードを有効にします。メニューは折りたたまれた状態で開始しますが、現在のページへのパスを表示するように自動的に展開され、関連のないセクションを折りたたんだまま、ユーザーが現在地を理解するのに役立ちます。
多言語サイトナビゲーション
翻訳されたTaxonomyタームを持つ多言語サイトでは、メニューは現在の言語でターム名を自動的に表示します。モジュールは言語ごとのターム状態を尊重するため、一部の言語でのみタームを公開し、他の言語では非公開にすることができ、メニューはそれに応じて適応します。
Tips
- テーマサジェスション（hierarchical-taxonomy-menu--VOCABULARY.html.twig）を使用して、カスタムマークアップを持つボキャブラリー固有のテンプレートを作成できます
- Blockは「taxonomy_term_list」キャッシュタグを使用するため、タームが追加、編集、または削除されるとメニューは自動的に更新されます
- 多くのTaxonomyタームを持つサイトでパフォーマンスを向上させるには、キャッシュ設定を使用してデータベースクエリを減らしてください
- 動的Blockタイトルを使用する場合、タイトルはTaxonomyタームページでのみ変更されます。他のページでは設定されたBlockタイトルが表示されます
- 「インタラクティブ親」オプションは別の矢印トグルを追加し、親項目がリンクと展開・折りたたみトリガーの両方になれるようにします
- 画像FieldとMediaの画像参照の両方がメニュー項目の横に画像を表示するためにサポートされています
- 「ベースターム」を使用して、同じボキャブラリーから階層の異なるブランチを表示する複数のBlockを作成できます
- CSSクラスはBEM命名規則（block-taxonomymenu__*）に従っており、予測可能なスタイリングが可能です
- 非公開タームは現在の言語に基づいてメニューから自動的に非表示になります
Technical Details
Hooks 4
hook_help
hook_help()を実装し、モジュールのヘルプページにヘルプテキストを提供します。README.mdの内容を表示し、Markdownモジュールが有効な場合はオプションでMarkdownとしてレンダリングされます。
hook_theme
hook_theme()を実装し、利用可能な変数とともにhierarchical_taxonomy_menu theme hookを登録します。
template_preprocess_block
template_preprocess_block()を実装し、dynamic_block_titleオプションが有効な場合にBlockタイトルを現在のTaxonomyターム名に動的に設定します。
hook_theme_suggestions_HOOK
hook_theme_suggestions_hierarchical_taxonomy_menu()を実装し、ボキャブラリー固有のテンプレートサジェスションを提供します。
Troubleshooting 6
選択したボキャブラリーに公開されたタームが含まれていることを確認してください。「出力が空の場合はBlockを非表示」が有効になっているかどうかを確認し、有効な場合は表示するタームがあることを確認してください。また、ベースターム設定がすべてのタームをフィルタリングしていないか確認してください。
画像Fieldを含むボキャブラリーオプション（例：「Categories (with image: field_image)」）を選択したことを確認してください。Taxonomyタームの画像Fieldに画像がアップロードされていることを確認してください。画像スタイルを使用している場合は、画像スタイル設定が正しいか確認してください。
ブラウザコンソールでJavaScriptエラーを確認してください。hierarchical_taxonomy_menuライブラリが正しく読み込まれていることを確認してください。jQueryがページで利用可能であることを確認してください。展開・折りたたみにはJavaScriptが有効である必要があります。
Taxonomyタームを参照しているコンテンツ（NodeまたはCommerce製品）があることを確認してください。Commerce製品の場合は、Block設定で正しい「参照Field」を選択したことを確認してください。参照Fieldが存在し、値が含まれていることを確認してください。
動的Blockタイトルは Taxonomyタームページ（/taxonomy/term/ID）でのみ機能します。「Blockタイトルを現在のTaxonomyターム名に一致させる」が有効で、Block設定で「タイトルを表示」が可視に設定されていることを確認してください。
Taxonomyタームに現在の言語の翻訳があることを確認してください。翻訳されたタームが公開されていることを確認してください（ステータスは翻訳ごとに異なる場合があります）。localeモジュールが有効で、言語検出が機能していることを確認してください。
Security Notes 3
- モジュールはXSS脆弱性を防ぐためにテンプレート内でターム名とURLを適切にエスケープします
- タームアクセスが尊重され、非公開タームは適切な権限を持たないユーザーには表示されません
- モジュールはセキュリティとパフォーマンスのために適切なキャッシュタグを持つDrupalの標準キャッシュシステムを使用します