ライブ検索
ライブ検索はSearchWPを必要としませんが、利用可能な場合は使用します
ライブ検索はSearchWPによって提供される強力な機能であり、ユーザーが検索フォームにキーワードを入力すると、リアルタイムのAJAX駆動型検索結果をドロップダウンコンテナに表示します。これにより、訪問者が探しているコンテンツをすばやく見つけるのを助け、即時のフィードバックを提供することでユーザーエクスペリエンスを向上させます。
ライブ検索はSearchWPを必要としません。そのため、wordpress.orgで利用可能です。SearchWPがインストールされ有効化されている場合、ライブ検索は自動的にそれを利用します。そうでない場合は、ネイティブのWordPress検索結果が提供されます。
ライブ検索結果の表示方法を設定およびカスタマイズするには、WordPressバックエンドのSearchWP → 検索フォーム → ライブ検索に移動してください。
ライブ検索結果のデザイン、レイアウト、動作を制御するためのさまざまなオプションがあります。以下に、利用可能なカスタマイズオプションの詳細な説明を示します。
1. 一般設定
ライブ検索を有効にする：ライブ検索拡張機能がインストールされ有効になると、SearchWPライブ検索はデフォルトのWordPress検索フォームおよびSearchWPフォームと自動的に統合されます。このトグルオプションを使用して、この機能を有効または無効にすることができます。
2. レイアウトテーマを選択する
このセクションでは、検索フォームの下のドロップダウンパネルにライブ検索結果がどのように表示されるかを選択できます。各レイアウトテーマは、異なるレベルの詳細と視覚的なプレゼンテーションを提供します。
利用可能なレイアウトテーマ：
- ミニマル：投稿タイトルのみを表示する、クリーンでシンプルなリスト。高速でテキストベースの検索エクスペリエンスを好むウェブサイトに最適です。
- ミディアム：各検索結果のタイトルと短い説明の両方を表示します。このオプションは、ユーザーを圧倒することなく、より多くのコンテキストを提供します。
- リッチ：結果のタイトルと説明に加えて、投稿のアイキャッチ画像を表示するサムネイルを含む、視覚的に魅力的なレイアウト。ブログやeコマースストアのようなコンテンツが豊富なウェブサイトに最適です。
- カスタム：このレイアウトは完全な柔軟性を提供します。以下のカスタムスタイリングセクションを使用して、さまざまな要素を組み合わせてカスタム結果フォーマットをデザインできます。
3. カスタムスタイリング
カスタムスタイリングセクションでは、各ライブ検索結果の個々のコンポーネントを微調整できます。
説明：結果タイトルの下に説明を表示または非表示にできるトグルオプションです。各結果に関する追加情報をユーザーに提供したい場合は、これを有効にしてください。
ヒント：SearchWP設定で用語のハイライトオプションを有効にすると、各結果の検索用語を含むカスタム説明を生成できます。
画像：結果に表示される画像のサイズを制御します。利用可能なオプションには、小、中、大があります。
タイトル：サイトのデザインに合わせて、タイトルテキストの色とフォントサイズをカスタマイズし、読みやすさを向上させます。
価格: このオプションは、WooCommerceやEasy Digital Downloadsのようなeコマースプラグインが有効な場合にのみ表示されます。結果に表示される商品価格の色とフォントサイズを調整できます。
カートに追加: こちらもeコマースプラグインが有効な場合にのみ利用可能で、各商品結果に「カートに追加」ボタンを追加します。ボタンの背景色、フォントの色、フォントサイズなどのスタイルをカスタマイズできます。このオプションは、ライブ検索ドロップダウンから直接購入プロセスを合理化したいショップに最適です。
4. 結果
スタイリングを含める: 「スタイリングを含める」オプションは、ライブ検索ドロップダウン用のSearchWPのデフォルトCSSおよびレイアウトアセットがページに読み込まれるかどうかを制御します。これらのアセットファイルは、検索結果にデフォルトのスタイルを適用し、ドロップダウンコンテナを検索フォームの下または上に正しく配置する役割を担います。このオプションの変更は、カスタムスタイルやコードの適用に慣れている上級ユーザーにのみ推奨されます。
配置: 結果を検索フォームの上または下に表示するかどうかを選択します。デフォルトの動作は、入力フィールドの下にドロップダウンを表示することです。
自動幅: 結果ドロップダウンを検索フォームの幅に合わせたい場合は、このトグルを有効にします。無効にすると、コンテナは独自のスタイルまたはデフォルトの幅に従います。
最大結果数: このオプションは、ライブドロップダウンに表示される最大結果数を設定します。デフォルト値は7です。特定の数値（例: 5または10）を使用して表示される結果の数を制限するか、-1に設定して一致するすべての結果を表示できます。
結果なしメッセージ: 一致が見つからなかった場合に表示されるメッセージをカスタマイズします。デフォルトのテキストは「結果が見つかりませんでした。」です。ただし、ユーザーエクスペリエンスを向上させるために、「どこを探しても見つかりませんでした。別のものを検索してみてください」のようなフレンドリーなプロンプトを使用することもできます。
5. その他の設定
最小文字数: ライブ検索結果が表示される前に、ユーザーが入力する必要がある最小文字数を定義します。
注意: デフォルトでは、SearchWPは最小長3文字のキーワードをインデックス化します。1文字または2文字の検索を許可したい場合は、メインのSearchWP設定で「最小長を削除」オプションを有効にする必要があります。有効にした後、新しいトークン（短い単語）が検索結果に含まれるように、エンジンの設定でインデックスを再構築してください。
追加のヒント
- 高度なスタイルでより視覚的な制御を行うには、テーマのスタイルシートまたは外観 → カスタマイズ → 追加CSSにカスタムCSSを追加できます。
- ライブ検索は検索フォームと互換性があります。カテゴリドロップダウンフォームまたは高度な検索フォームのオプションを使用して、ライブ検索結果をフィルタリングできます。
- ライブ検索結果のレイアウトをカスタマイズしたり、追加情報を表示したりしたい場合は、テーマ内にカスタムライブ検索テンプレートを作成できます。詳細な手順については、このドキュメントを参照してください。
使用方法
Live Search をアップロードして有効化すると、get_search_form() を使用して生成されたすべてのフォームは、デフォルト設定で自動的にライブ検索で強化されます。デフォルトの SearchWP 検索エンジン（SearchWP が利用できない場合は WordPress ネイティブ検索）が使用され、デフォルトのテーマが適用されます。ただし、あらゆる面で高度なカスタマイズが可能です。
get_search_form() を使用していない場合は、次のように data属性 を追加するだけでライブ検索を有効にできます。
get_search_form() で生成されたフォームで Live Search が自動的に有効になるのを防ぎたい場合は、searchwp_live_search_hijack_get_search_form フィルターを使用してください。
選択したフォームにのみライブ結果を表示するには、設定でライブ検索を無効にし、次の JS スクリプトを使用して特定のフォームでライブ検索をアクティブにすることができます。
| <script> | |
| jQuery(document).ready( function(){ | |
| jQuery("form input[type='search']").searchwp_live_search(); | |
| }); | |
| </script> |
上記のコードでは、セレクター form input[type='search'] を、フォームの特定のインプットセレクター要素に置き換えることができます。
検索フォームごとに使用する検索エンジンと設定のカスタマイズ
インプットフィールドに data-swpengine 属性を設定し、使用したい検索エンジンの名前に一致させることで、使用する検索エンジンをカスタマイズできます。これは SearchWP がインストールされ有効になっている場合にのみ適用され、適用可能な設定で定義された engine よりも優先されます。
data-swpconfig 属性をインプットに設定し、設定配列のキーに一致させることで、検索フォームごとに使用する設定をカスタマイズできます。これらをカスタマイズするには、searchwp_live_search_configs フィルターを使用してください。
結果のカスタマイズ
Live Search の結果はテンプレートシステムによって提供されます。プラグインに含まれているファイル ~/wp-content/plugins/searchwp-live-ajax-search/templates/live-search-results.php に気づくでしょう。このファイルは検索結果を表示するために使用されます。検索結果をカスタマイズしたい場合は、次の手順を実行することをお勧めします。
- テーマディレクトリ内に
searchwp-live-ajax-searchという名前のフォルダを作成します。 ~/wp-content/plugins/searchwp-live-ajax-search/templates/ディレクトリからlive-search-results.phpをそのフォルダにコピーします。- テーマテンプレートと同様に、テーマの
live-search-results.phpコピーをカスタマイズします。 - オプションで、各検索エンジンに追加ファイルを作成します。たとえば、
supplementalという名前の検索エンジンにはlive-search-results-supplemental.phpを作成します。
配置
Live Search は、結果ラッパーを適切に配置するために基本的なスタイルを出力します。また、デフォルトの最小限のテーマのようなものも出力します。デフォルトのテーマ CSS をデキューすることで、配置を維持しながらデフォルトのビジュアルスタイリングを削除できます。
重要な注意点
注意: デフォルトテーマにも同様にスピナーアニメーションが実装されています。デフォルトテーマを削除する場合は、以下のキーフレームアニメーションをテーマのCSSに追加する必要があります。
ポジショニングCSSも削除したい場合は、searchwp_live_search_base_stylesフィルターを使用して行うことができます。
結果コンテナを再配置するには、次の2つの方法があります。
- 親要素セレクターを含むデータ属性をフォーム入力に追記します
data-swpparentel=".masthead .my-search-results-parent" - 設定に
parent_elプロパティを追加します（searchwp_live_search_configsを参照）
フィルター
ライブ検索で使用できるフィルターは次のとおりです。
searchwp_live_search_hijack_get_search_form get_search_form()によって生成された検索フォームをライブ検索が自動的に強化するかどうかを設定します。デフォルトはtrueです。無効にするには:
| <?php | |
| add_filter( 'searchwp_live_search_hijack_get_search_form', '__return_false' ); |
searchwp_live_search_get_search_form_engine get_search_form()によって生成されたフォームでライブ検索を自動的に有効にする際に使用される検索エンジンを定義します。デフォルトは'default'です。
注意: SearchWPがインストールされ有効になっている場合にのみ適用されます
| <?php | |
| // only applies when SearchWP is active | |
| function my_searchwp_live_search_get_search_form_engine() { | |
| return 'my_supplemental_engine'; | |
| } | |
| add_filter( 'searchwp_live_search_get_search_form_engine', 'my_searchwp_live_search_get_search_form_engine' ); |
searchwp_live_search_get_search_form_config get_search_form()によって生成されたフォームでライブ検索を自動的に有効にする際に使用される設定を定義します。デフォルトは'default'です。
注意: SearchWPがインストールされ有効になっている場合にのみ適用されます
| <?php | |
| // only applies when SearchWP is active | |
| function my_searchwp_live_search_get_search_form_config)() { | |
| return 'my_config'; | |
| } | |
| add_filter( 'searchwp_live_search_get_search_form_config', 'my_searchwp_live_search_get_search_form_config' ); |
searchwp_live_search_configs 検索エンジン、検索遅延、最小文字数、結果ペインの配置、スピナーオプションを制御する独自の設定を追加します。設定は連想配列として保存されるため、オプションでdefaultキーの値をオーバーライドしたり、独自のキーを追加して検索入力のdata-swpconfig属性を設定する際に使用したりできます。
これがデフォルトの設定です:
注意: 最小文字数のデフォルトは3（SearchWP自体と同じ）ですが、ライブ検索の設定は個別のパラメーターであり、同様のSearchWPパラメーターがカスタマイズされた場合でも更新されません。
| <?php | |
| $configs = array( | |
| 'default' => array( // 'default' config | |
| 'engine' => 'default', // search engine to use (if SearchWP is available) | |
| 'input' => array( | |
| 'delay' => 500, // wait 500ms before triggering a search | |
| 'min_chars' => 3, // wait for at least 3 characters before triggering a search | |
| ), | |
| 'parent_el' => 'body', // selector of the parent element for the results container | |
| 'results' => array( | |
| 'position' => 'bottom', // where to position the results (bottom|top) | |
| 'width' => 'auto', // whether the width should automatically match the input (auto|css) | |
| 'offset' => array( | |
| 'x' => 0, // x offset (in pixels) | |
| 'y' => 5 // y offset (in pixels) | |
| ), | |
| ), | |
| 'spinner' => array( // Powered by http://spin.js.org/ | |
| 'lines' => 13, // The number of lines to draw | |
| 'length' => 38, // The length of each line | |
| 'width' => 17, // The line thickness | |
| 'radius' => 45, // The radius of the inner circle | |
| 'scale' => 1, // Scales overall size of the spinner | |
| 'corners' => 1, // Corner roundness (0..1) | |
| 'color' => '#ffffff', // CSS color or array of colors | |
| 'fadeColor' => 'transparent', // CSS color or array of colors | |
| 'speed' => 1, // Rounds per second | |
| 'rotate' => 0, // The rotation offset | |
| 'animation' => 'searchwp-spinner-line-fade-quick', // The CSS animation name for the lines | |
| 'direction' => 1, // 1: clockwise, -1: counterclockwise | |
| 'zIndex' => 2e9, // The z-index (defaults to 2000000000) | |
| 'className' => 'spinner', // The CSS class to assign to the spinner | |
| 'top' => '50%', // Top position relative to parent | |
| 'left' => '50%', // Left position relative to parent | |
| 'shadow' => '0 0 1px transparent', // Box-shadow for the lines | |
| 'position' => 'absolute' // Element positioning | |
| ), | |
| ) | |
| ); |
これらのデフォルト値を変更したり、独自の分離された設定を追加して、複数の設定を利用できるようにしたりできます。
| <?php | |
| function my_searchwp_live_search_configs( $configs ) { | |
| // override some defaults | |
| $configs['default'] = array( | |
| 'engine' => 'default', // search engine to use (if SearchWP is available) | |
| 'input' => array( | |
| 'delay' => 400, // wait 500ms before triggering a search | |
| 'min_chars' => 5, // wait for at least 3 characters before triggering a search | |
| ), | |
| 'parent_el' => 'body', // selector of the parent element for the results container | |
| 'results' => array( | |
| 'position' => 'bottom', // where to position the results (bottom|top) | |
| 'width' => 'auto', // whether the width should automatically match the input (auto|css) | |
| 'offset' => array( | |
| 'x' => 0, // x offset (in pixels) | |
| 'y' => 5 // y offset (in pixels) | |
| ), | |
| ), | |
| 'spinner' => array( // Powered by http://spin.js.org/ | |
| 'lines' => 13, // The number of lines to draw | |
| 'length' => 38, // The length of each line | |
| 'width' => 17, // The line thickness | |
| 'radius' => 45, // The radius of the inner circle | |
| 'scale' => 1, // Scales overall size of the spinner | |
| 'corners' => 1, // Corner roundness (0..1) | |
| 'color' => '#ffffff', // CSS color or array of colors | |
| 'fadeColor' => 'transparent', // CSS color or array of colors | |
| 'speed' => 1, // Rounds per second | |
| 'rotate' => 0, // The rotation offset | |
| 'animation' => 'searchwp-spinner-line-fade-quick', // The CSS animation name for the lines | |
| 'direction' => 1, // 1: clockwise, -1: counterclockwise | |
| 'zIndex' => 2e9, // The z-index (defaults to 2000000000) | |
| 'className' => 'spinner', // The CSS class to assign to the spinner | |
| 'top' => '50%', // Top position relative to parent | |
| 'left' => '50%', // Left position relative to parent | |
| 'shadow' => '0 0 1px transparent', // Box-shadow for the lines | |
| 'position' => 'absolute' // Element positioning | |
| ), | |
| ); | |
| // add an additional config called 'my_config' | |
| $configs['my_config'] = array( | |
| 'engine' => 'supplemental', // search engine to use (if SearchWP is available) | |
| 'input' => array( | |
| 'delay' => 300, // wait 500ms before triggering a search | |
| 'min_chars' => 2, // wait for at least 3 characters before triggering a search | |
| ), | |
| 'results' => array( | |
| 'position' => 'top', // where to position the results (bottom|top) | |
| 'width' => 'css', // whether the width should automatically match the input (auto|css) | |
| 'offset' => array( | |
| 'x' => 0, // x offset (in pixels) | |
| 'y' => 0 // y offset (in pixels) | |
| ), | |
| ), | |
| 'spinner' => array( // Powered by http://spin.js.org/ | |
| 'lines' => 13, // The number of lines to draw | |
| 'length' => 38, // The length of each line | |
| 'width' => 17, // The line thickness | |
| 'radius' => 45, // The radius of the inner circle | |
| 'scale' => 1, // Scales overall size of the spinner | |
| 'corners' => 1, // Corner roundness (0..1) | |
| 'color' => '#ffffff', // CSS color or array of colors | |
| 'fadeColor' => 'transparent', // CSS color or array of colors | |
| 'speed' => 1, // Rounds per second | |
| 'rotate' => 0, // The rotation offset | |
| 'animation' => 'searchwp-spinner-line-fade-quick', // The CSS animation name for the lines | |
| 'direction' => 1, // 1: clockwise, -1: counterclockwise | |
| 'zIndex' => 2e9, // The z-index (defaults to 2000000000) | |
| 'className' => 'spinner', // The CSS class to assign to the spinner | |
| 'top' => '50%', // Top position relative to parent | |
| 'left' => '50%', // Left position relative to parent | |
| 'shadow' => '0 0 1px transparent', // Box-shadow for the lines | |
| 'position' => 'absolute' // Element positioning | |
| ), | |
| ); | |
| return $configs; | |
| } | |
| add_filter( 'searchwp_live_search_configs', 'my_searchwp_live_search_configs' ); |
searchwp_live_search_base_styles デフォルトの結果ペインの配置CSSが適用されるかどうかを設定します。注意: これは検索結果の視覚的な外観とは別であり、配置のみを制御します。デフォルトはtrueです。無効にするには:
| <?php | |
| add_filter( 'searchwp_live_search_base_styles', '__return_false' ); |
searchwp_live_search_posts_per_page 返される結果の数を制御します。デフォルトは7です。変更するには:
| <?php | |
| function my_searchwp_live_search_posts_per_page() { | |
| return 20; // return 20 results | |
| } | |
| add_filter( 'searchwp_live_search_posts_per_page', 'my_searchwp_live_search_posts_per_page' ); |
