Pretty Checkbox Radio
標準的なチェックボックスとラジオボタンのフォーム要素を、より使いやすくタッチ操作に適した、視覚的に魅力的なボタンスタイルの要素に変換します。
pcr
インストール
composer require 'drupal/pcr:^2.0'
概要
Pretty Checkbox Radioモジュールは、デフォルトのHTMLチェックボックスとラジオボタン入力を、スタイル付きのボタン要素に変換します。これにより、デスクトップとモバイルデバイスの両方で適切に動作する、よりモダンでタッチフレンドリーなインターフェースを提供します。
このモジュールはDrupalのForm APIとFieldシステムとシームレスに統合されており、サイトビルダーはManage Form Displayインターフェースを通じて、Boolean、List（text/integer/float）、またはEntity Referenceフィールドで簡単にプリティボタンを有効にできます。また、Better Exposed Filtersモジュールとの統合も提供し、Viewsのexposed formsでスタイル付きフィルターウィジェットを使用できます。
スタイリングは、ホバーエフェクトと選択状態の明確な視覚的フィードバックを備えたクリーンなボタンデザインが特徴です。選択された要素は独特の青色でハイライトされ、ユーザーが現在の選択状態を簡単に確認できます。このモジュールはRTL（右から左）言語もサポートしています。
Features
- チェックボックスとラジオボタンをクリーンな視覚デザインのボタンスタイル要素に変換
- Boolean、List（integer/text/float）、Entity Referenceフィールドをサポートするフィールドウィジェット「Pretty Check boxes/radio buttons」
- 「Pretty Checkboxes/Radio Buttons」と「Pretty Single On/Off Checkbox」ウィジェットによるBetter Exposed Filtersとの統合
- ホバーエフェクトと選択状態の明確な視覚的フィードバック（青色でハイライトされたボタン）
- 国際化のためのRTL（右から左）言語サポート
- モバイルデバイスに適したタッチフレンドリーなデザイン
- 最小限のCSSとJavaScript依存なしの軽量実装
Use Cases
ノードフォームでのBooleanフィールドのスタイリング
Booleanフィールド（例：「注目記事」「SNSに公開」「ニュースレター送信」）を持つコンテンツタイプを作成する際、Pretty Checkbox Radioウィジェットを使用して、これらのオプションをより視覚的に目立たせ、クリックしやすくできます。構造 > コンテンツタイプ > [タイプ名] > Manage Form Displayに移動し、Booleanフィールドで「Pretty Check boxes/radio buttons」を選択します。
強化されたList選択フィールド
複数のオプションを持つList（text）フィールド（例：「カテゴリ」「優先度」「ステータス」）では、プリティウィジェットがラジオボタンをクリック可能なボタンの行に変換し、コンテンツ編集者がすべてのオプションを一度に確認して素早く選択できるようにします。
ViewsでのBetter Exposed Filters
exposed filtersを使用するViewsでは、Pretty Checkboxes/Radio Buttonsウィジェットを適用してフィルターオプションをよりユーザーフレンドリーにできます。Better Exposed Filtersを有効にしたViewのexposed form設定で、ウィジェットタイプとして「Pretty Checkboxes/Radio Buttons」または「Pretty Single On/Off Checkbox」を選択します。
モバイルフレンドリーなフォームデザイン
モバイルトラフィックが多いサイトでは、プリティ要素のタッチフレンドリーなボタンデザインは、小さなチェックボックスやラジオボタンよりも正確にタップしやすく、フォームでのモバイルユーザーエクスペリエンスを向上させます。
Entity Reference選択
オプション数が限られたEntity Referenceフィールドを使用する場合、プリティウィジェットは参照エンティティを選択可能なボタンとして表示し、従来のチェックボックスやセレクトリストよりもクリーンなインターフェースを提供します。
Tips
- モジュールを有効化した後やウィジェット設定を変更した後、スタイル付き要素が表示されない場合はキャッシュをクリアしてください
- このモジュールはJavaScript依存なしのCSS専用スタイリングを使用しており、高速なページ読み込みと互換性を確保しています
- カスタムテーマでpretty_elements.cssをオーバーライドして、サイトのデザインシステムに合わせることができます
- 選択された要素はデフォルトで青色（#337ab7）を使用します。テーマで.pretty-element input:checked + labelをオーバーライドしてカスタマイズしてください
- このモジュールは方向性CSSを通じてRTL言語を自動的にサポートします
- Viewsでは、Prettyウィジェットが利用可能になる前にBetter Exposed Filtersモジュールが適切に設定されていることを確認してください
Technical Details
Hooks 4
hook_help
管理ヘルプページでモジュールのヘルプテキストを提供し、モジュールの目的と基本的な使用方法を説明します。
hook_theme
スタイル付きフォーム要素をレンダリングするためのカスタムテーマフック「elements__pretty_options」と「form_element__pretty_element」を登録します。
hook_theme_suggestions_form_element_alter
フォーム要素にプリティ要素のマークアップが含まれている場合、「form_element__pretty_element」テーマサジェスチョンを追加します。
hook_element_info_alter
checkboxes、radios、checkbox、radioフォーム要素タイプにPrettyElement::processコールバックを追加します。これにより、モジュールは#pretty_optionでマークされた要素をインターセプトして変換できます。
Troubleshooting 4
すべてのDrupalキャッシュをクリアしてください（drush cr または admin/config/development/performance）。CDNやブラウザキャッシュを使用している場合は、それらもクリアしてください。
pcr/pretty_elementsライブラリが正しく読み込まれていることを確認してください。ブラウザの開発者ツールでCSSの読み込みエラーを確認してください。テーマのCSSが.pretty-elementスタイルと競合していないか確認してください。
Better Exposed Filtersモジュールがインストールされ（バージョン6.0.3以上または7.0.0以上）、有効になっていることを確認してください。Viewがexposed formスタイルとして「BEF」を使用していることを確認してください。
サイトの言語方向が適切に設定されていることを確認してください。このモジュールはhtml要素のdir属性を必要とする[dir=rtl] CSSセレクタを使用します。