Better Exposed Filters
Views の標準的なセレクトボックスを、ラジオボタン、チェックボックス、トグルリンク、スライダー、日付ピッカーなどの高度なウィジェットに置き換え、公開フィルター、ソート、ページャーを強化します。
better_exposed_filters
インストール
composer require 'drupal/better_exposed_filters:^7.1'
概要
Better Exposed Filters (BEF) は、Drupal の Views 公開フォーム要素を強化し、ユーザー体験と機能性を向上させる代替表示ウィジェットを提供します。Views でフィルターを公開すると、ユーザーが View を操作して検索結果をカスタマイズできるようになります。BEF を使用することで、これらの公開要素がどのようにレンダリングされるかをより細かく制御できます。
このモジュールは、標準的な単一選択または複数選択のドロップダウンボックスを、チェックボックス、ラジオボタン、クリック可能なリンク、数値範囲用の jQuery UI スライダー、日付フィールド用の日付ピッカーなど、よりユーザーフレンドリーなオプションに置き換えます。タクソノミー用語の階層表示、自動送信機能、折りたたみ可能なフィルターグループ、高度な検索シナリオ用のセカンダリオプションをサポートしています。
BEF は、タクソノミー、ブール値、日付、数値、文字列フィルターを含むすべての標準 Views フィルタータイプで動作します。また、Search API フィルターとも統合され、カスタムウィジェット開発用のプラグインシステムによる拡張性を提供します。
Features
- 公開フィルターのドロップダウンを、複数選択フィルター用のチェックボックスまたは単一選択フィルター用のラジオボタンに置き換え
- 公開フィルターを、AJAX サポート付きでフィルター値を切り替えるクリック可能なリンクとして表示
- 設定可能な最小値、最大値、ステップ、アニメーション設定を持つ数値範囲フィルター用の jQuery UI ベースのスライダーを使用
- 自動日付フォーマット処理機能付きの日付フィルター用日付ピッカーウィジェットを提供
- フィルター値が変更されたときに公開フォームを自動送信、テキストフィールドの遅延と最小文字数要件を設定可能
- 自動送信が有効な場合に送信ボタンを非表示にしてすっきりしたユーザーインターフェースを実現
- チェックボックスフィルターに「すべて選択/すべて解除」リンクを追加、階層的なネスト選択をサポート
- チェックボックスとラジオボタンオプションをコンパクトなレイアウト用にインラインで表示
- カスタマイズ可能な「もっと表示/少なく表示」ラベル付きで JavaScript による余分なフィルターオプションの表示/非表示を行う「ソフトリミット」機能を実装
- フィルターを折りたたみ可能な details 要素でラップして整理を改善
- 高度な検索機能用にフィルターをセカンダリオプション領域にグループ化
- シンプルなテキスト置換インターフェースを使用してフィルターオプションラベルを書き換え
- 階層的なタクソノミー用語の適切な処理を含むフィルターオプションのアルファベット順ソート
- ソートフィールドとソート順序を単一のドロップダウンに統合してシンプルなユーザーインターフェースを実現
- デフォルトのソート順序に戻す「ソートをリセット」オプションを追加
- 公開ページャー要素（1ページあたりの項目数）をラジオボタンとリンク表示オプションでサポート
- View、ディスプレイ、フィールド名に基づく詳細なテンプレートオーバーライド用のテーマフックサジェスチョンを提供
- Token モジュールが有効な場合のフィルター説明での Token サポート
- ローカルの nouislider ライブラリインストールまたは CDN フォールバックのサポート
Use Cases
商品カタログフィルタリング
カテゴリ用チェックボックスフィルター、価格範囲スライダー、即座の結果表示用自動送信を備えた EC サイトの商品一覧を作成します。カテゴリフィルターに「すべて選択/すべて解除」を有効にし、ソフトリミットを使用して最初の10カテゴリのみを表示し「もっと表示」リンクを付けます。
高度な検索フォーム
主要なフィルター（キーワード、コンテンツタイプ）を表示し、セカンダリフィルター（作成者、日付範囲、タグ）を折りたたみ可能な「高度なオプション」セクションに配置した検索ページを構築します。セカンダリオプション機能を使用して、ユーザーを圧倒することなく複雑なフィルターセットを整理します。
イベントカレンダーフィルタリング
開始/終了日用の日付ピッカーフィルター、イベントタイプ用のラジオボタンフィルター、ページリロードなしでシームレスなナビゲーションを実現する AJAX 付きリンクベースの場所フィルターを備えたイベント一覧を作成します。
階層タクソノミーナビゲーション
ボキャブラリの階層を反映したネストされたチェックボックスとしてタクソノミー用語フィルターを表示します。「ネストされたすべて選択/すべて解除」を有効にして、親用語をチェックすると自動的にすべての子用語が選択されるようにします。
シンプル化されたソートコントロール
ソートフィールドとソート順序を「日付（新しい順）」、「日付（古い順）」、「タイトル（A-Z）」のようなオプションを表示する単一のドロップダウンに統合します。デフォルトのラベルをユーザーフレンドリーなテキストに書き換え、「デフォルトに戻す」オプションを追加します。
モバイルフレンドリーなフィルター
折りたたみ可能なフィルターグループを使用してモバイルデバイスでの縦方向のスペースを最小化します。フィルターオプションをタップすると即座に結果が更新される洗練されたタッチインターフェース用に、非表示の送信ボタン付き自動送信を有効にします。
Tips
- テーマフックサジェスチョンを使用して、View 固有またはフィールド固有のテンプレートオーバーライドを作成: bef_checkboxes__VIEW_ID__DISPLAY_ID__FIELD_NAME
- スライダーウィジェットの場合、意味のあるフィルターコントロールを提供するために、実際のデータ範囲に基づいて適切な最小/最大/ステップ値を計算
- JavaScript が利用可能な場合の最もクリーンなユーザーインターフェースのために、自動送信と「送信ボタンを非表示」オプションを組み合わせる
- 翻訳やラベル変更に関係なく一貫したラベル書き換えが必要な場合は「キーに基づいて書き換え」オプションを使用
- ソフトリミットを使用する場合、スムーズなユーザー体験のために CSS で表示/非表示のアニメーションを適切に処理
- フィルター説明での Token 置換は、現在の日付やユーザー情報を表示するなどの動的なヘルプテキストに有効
Technical Details
Admin Pages 1
/admin/structure/views/view/{view_id}/edit
View の「公開フォームスタイル」として「Better Exposed Filters」を選択して Better Exposed Filters 設定を構成します。BEF 設定には View エディターの「高度な設定」セクションの「公開フォームスタイル」オプションからアクセスします。
Hooks 3
hook_better_exposed_filters_options_alter
公開フォームウィジェットが構築される前に BEF オプションを変更します。スライダーの最小/最大値などのフィルター設定をプログラムで変更できます。
hook_better_exposed_filters_display_options_alter
特定のフィルターで利用可能なウィジェットオプションのリストを変更します。個々のフィルターのウィジェット選択肢を追加または削除できます。
hook_theme_better_exposed_filters_options_alter
BEF オプション用のテーマレベルの alter hook（モジュールの alter hook と同じシグネチャ）
Troubleshooting 6
nouislider ライブラリが正しくロードされていることを確認してください。libraries/nouislider にローカルインストールするか、CDN アクセスがブロックされていないことを確認します。ライブラリのインストール後、すべてのキャッシュをクリアしてください。
自動送信が有効になっており、「テキストフィールドを除外」がチェックされていないことを確認してください。最小文字数の設定を確認します - 最小文字数に達するまで自動送信はトリガーされません。
階層付きタクソノミーフィルターの場合、「現在のテキスト」フィールドに先頭のハイフンを含めないでください。書き換えは、階層インジケーター付きの表示テキストではなく、実際のオプションテキストと照合されます。
このオプションはフィルター設定で「複数選択を許可」が有効になっている必要があります。フィルターを編集して「複数選択を許可」チェックボックスをオンにしてください。
公開フォーム設定で「ソート順序の選択を許可」が有効になっていることを確認してください。統合機能を使用するには、ソートフィールドとソート順序の両方が公開されている必要があります。
View の「高度な設定」で AJAX を有効にしてください。モジュールは View で AJAX が有効な場合、リンクウィジェットに自動的に AJAX サポートを追加します。