Search and Filter Pro

Search and Filter Pro

商品コード: search-filter-pro カテゴリー:

Search and Filter Pro は絞り込み検索機能を導入するオドオンです。

 

コンテンツ（投稿、固定ページ、商品 など）の絞り込み検索を WordPress に実装します。

検索結果をページ遷移せずに表示させることで表示速度を改善可能です。

キャッシュによる検索結果の表示速度も改善します。

 

絞り込み検索を実装し、ユーザビリティを向上

特定のものを探しているとき、あるいは欲しい商品を探している時などは、カテゴリーやその商品の特徴に応じて絞り込み検索を行うことがあると思います。

時には「型番」「品番」などの一部を直接入力して絞り込むことも、有効な検索手段です。

多品種に渡る EC サイトの商品特定、不動産物件探しなどにおいては、絞り込み検索が貧弱だと検索意欲が低下するのが一般的。

Search and Filter Pro プラグインを導入すれば、高い精度で絞り込み要素が多彩な検索機能を提供でき、ユーザーは少ない労力で目的を果たすことができます。

あらゆるコンテンツに対応した絞り込み検索実装

Search and Filter Pro は WooCommerce との相性の良いプラグインです。

商品ページのサイドバーに、製品カテゴリやタグ、投稿タイプの選択、価格の範囲を絞るスライダーなどを設置すると商品探しが楽になります。

商品レイアウトやテーマのデザインによっては、ヘッダーにプルダウンやテキスト入力が可能な検索フイルターを設置することも、ひとつのアイデアです。

柔軟な検索スタイルを提供できるアドオンです。

Search and Filter Pro は、ブログ、レビューサイト、ニュースサイト、不動産サイト、さらには WooCommerce などに適した検索フォームを提供します。

多彩な検索フォームによって、ユーザーの検索レベルに依存せずに、ユーザーが目的の商品やコンテンツを探しだすことに大きく貢献します。

絞り込み検索で絞り込めないサイトのレッテルを貼られないためにも、検索フォーム設計に関して強い味方となるプラグインです。

Search and Filter Pro の使い方

 

投稿の絞り込み検索フォームの作成方法

  1. [検索とフィルター] > [新しい検索フォームを追加する] をクリック
    Search and Filter Pro
  2. 「利用可能なフィールド」から「検索」「送信ボタン」を「検索フォームの UI 」領域にドラッグ
    Search and Filter Pro
  3. 「設定とデフォルト」で [検索結果] タブに切り替え、「結果の表示方法」を「ショートコードの使用」にプルダウンから選択
    Search and Filter Pro
  4. ショートコードをコピーして [下書き保存] をクリック
    Search and Filter Pro
  5. [投稿] > [新規追加] で検索結果ページを作成しショートコード2種類を貼り付けして [公開] をクリック
    Search and Filter Pro
  6. 検索結果ページの URL をコピーして [検索とフィルター] をクリック
    下書き保存しているフォームの編集画面を開いて「結果の URL 」に検索結果ページを貼り付け後 [公開] をクリック
    Search and Filter Pro
  7. 検索結果ページの URL にアクセスして検索フォームが設置されていることを確認
    Search and Filter Pro

以上で投稿の絞り込み検索フォームの作成方法になります。
ただし作成の流れを説明しているため、検索フォームはデフォルト状態で説明しています。

続いて「利用可能なフィールド」に設置されている検索項目が、どういった検索方法(種類など)があるかについて、それぞれ簡単に説明します。

Search and Filter Pro

  • 検索
    フォームにテキスト検索用のボックスを追加。デフォルトではタイトルと本文のコンテンツを検索。
  • タグ、カテゴリ、分類、投稿タイプ、著者
    ドロップダウン、チェックボックス、複数選択、またはラジオボタンを検索フォームに追加
  • 投稿日
    日付ピッカーまたは日付範囲（ピッカー付き）を選択して、公開日に従って結果をフィルタリング
  • 投稿メタ（カスタムフィールド）
    投稿メタとは投稿に関する追加データ。
    各種数値データの設定、選択入力（ドロップダウン、チェックボックス、複数選択、またはラジオ）、または日付と日付範囲をサポート
  • ソート順
    ユーザーが結果の順序を変更するためのドロップダウンを追加
  • 送信ボタン
    検索結果を得るためのボタン
  • リセットボタン
    検索フィルターを元に戻すためのボタン

以上が「利用可能なフィールド」に設置されている検索項目の内容です。

 

フォームの設定とデフォルト項目について

「設定とデフォルト」の各タブについての解説です。

  • 一般
    検索フォームで最も頻繁に使用される一般的なオプション
  • 検索結果
    結果の表示方法とAjaxの出力に関連するすべてのオプション
  • 投稿
    デフォルトの並べ替え順序、検索する投稿ステータス、除外する投稿IDなど、投稿に関連するさまざまなオプション
  • タグ、カテゴリ、分類法
    特定のタグ、カテゴリ、および分類用語を使用して結果を含めるか除外
  • 投稿メタ
    特定のポストメタデータに一致する結果のみを返すための条件設定
  • 高度な設定
    Relevanssi プラグインの有効化などが含まれている

以上がフォームの設定とデフォルト項目についての内容です。

 

検索結果のページ設定について

検索結果を表示させるページ設定については 4つの方法があります。

  1. アーカイブ
    テーマの通常のテンプレートを使用して結果を出力します。
    投稿記事や WooCommerce の商品など、複数の異なる投稿フォーマットでフィルタリングが可能です。
  2. 投稿タイプアーカイブ
    選択可能な投稿タイプは1つだけです。
    主に記事の検索結果で使い勝手が良いフィルタリングです。
  3. ショートコードの使用
    検索結果を独立したページに表示したい場合に用いると便利です。
    発行されるショートコードを配置するだけで別ページへの表示が可能になります。
  4. カスタム
    検索とフィルターを既存のクエリに手動で追加してから、これを配置できるURLを指定するだけです。

それぞれ実装方法を解説します。

 

アーカイブ

テーマの通常のテンプレートを使用して結果を出力します。
投稿記事や WooCommerce の商品など、複数の異なる投稿フォーマットでフィルタリングが可能です。

  1. [一般] で投稿タイプを指定
    ※便宜上「投稿」のみにチェックを入れています。
    Search and Filter Pro
  2.  [検索結果] タブで「結果の表示方法」から「アーカイブ」を選択
    テンプレートオプションにチェックが入っていることを確認してください。
    この設定により予めテーマに備わっている結果用テンプレートを使用することになり、安定した動作になります。
    カスタムテンプレートのファイル名、スラッグの設定は自動的に入力されます。
    Search and Filter Pro
    テンプレートオプションのチェックを外した場合は、注意メッセージが表示されます。
    Search and Filter Pro
  3. 検索フォームを作成して [公開] をクリック
    Search and Filter Pro
  4. ウィジェットの追加
    Search and Filter Pro
  5. 検索フィルターが作動

 

投稿タイプアーカイブ

既存の投稿タイプのアーカイブ（およびそのレイアウト/テンプレート）を使用して結果を表示するには、この設定を使用します。
選択可能な投稿タイプは1つだけのため、主に記事の検索結果で使い勝手が良いフィルタリングです。

  1.  [検索結果] タブで「結果の表示方法」から「投稿タイプアーカイブ」を選択
    テンプレートオプションにチェックを入れると、タクソノミーでフィルタリングが可能になります。
    Search and Filter Pro
  2. [一般] タブで「投稿」のみにチェック
    絞り込み検索を行う投稿タイプを選択します。
    WooCommerce の商品の絞り込みを実行する場合は [商品] のみにチェックを入れます。
    Search＆Filter Pro
  3. 検索フォームを作成して [公開] をクリック
    Search and Filter Pro
  4. ウィジェットの追加
    Search and Filter Pro
  5. 検索フィルターが作動

 

ショートコードの使用

検索結果を独立したページに表示したい場合に用いると便利です。
発行されるショートコードを配置するだけで別ページへの表示が可能になります。

  1.  [検索結果] タブで「結果の表示方法」を「ショートコードの使用」選択
    Search and Filter Pro
  2. ショートコードをコピーして [下書き保存] をクリック
    Search and Filter Pro
  3. [投稿] > [新規追加] で検索結果ページを作成しショートコード2種類を貼り付けして [公開] をクリック
    Search and Filter Pro
  4. 検索結果ページの URL をコピーして [検索とフィルター] をクリック
    下書き保存しているフォームの編集画面を開いて「結果の URL 」に検索結果ページを貼り付け後 [公開] をクリック
    Search and Filter Pro
  5. 検索結果ページの URL にアクセスして検索フォームが設置され検索が有効になっていることを確認
    検索フォームと検索結果の両方が表示されます。
    Search and Filter Pro

 

カスタム

検索とフィルターを既存のクエリに手動で追加してから、これを配置できるURLを指定するだけですが、コードの追加などが必要になります。

  1.  [検索結果] タブで「結果の表示方法」から「カスタム」を選択
    Search and Filter Pro
  2. [公開] をクリック

カスタム表示方法では、次の2つのことを行う必要があります。

  • 検索とフィルターをクエリに添付する
  • 検索結果のURLを「結果の URL」に入力 (前述の「ショートコードの使用」を参照)

検索とフィルターをクエリに添付する方法は 4 つあります。

  1. WP_Query
  2. query_posts
  3. pre_get_posts
  4. クエリのショートコードをフィルタリング

1～3はコードの記述が必要になります。
4はテンプレートを変更したくない場合や、ページコンテンツにクエリを追加する機能がある場合（例.ページビルダー）は、ショートコードを直接追加することができます。
[searchandfilter id = “id” action = “filter_next_query”]
記事や結果のリストを表示する要素の直前に配置します。

 

以上が検索結果のページ設定についての内容です。

 

事例： WooCommerce の商品の絞り込み検索を行う方法

2つの方法があります。

  • WooCommerce のフィルタリング
  • WooCommerce 製品コードのフィルタリング

それぞれ実装方法を解説します。

WooCommerce のフィルタリング

  1. [一般] タブで「商品」のみにチェック
    Search and Filter Pro
  2.  [検索結果] タブで「結果の表示方法」から「WooCommerce – ショップ」を選択
    Search and Filter Pro
  3. [公開] をクリック
  4. ウィジットを追加
    Search and Filter Pro
  5. ショップページに検索結果が表示
    Search and Filter Pro

 

WooCommerce 製品のショートコードのフィルタリング

  1. [一般] タブで「商品」のみにチェック
    Search and Filter Pro
  2.  [検索結果] タブで「結果の表示方法」から「カスタム」を選択し一旦 [下書き] で保存
    Search and Filter Pro
  3. 新規に固定ページを作成し、ショートコードを入力
    例:
    ※ id はフォームのid
    これを検索結果ページとして URL スラッグもわかりやすいように「/search/」あるいは「/result/」などにします。
    [公開] ボタンをクリックした後、作成した固定ページのURLをコピーして、再度、検索フォームの編集画面を開きます。
    Search and Filter Pro
  4. 検索フォームの編集で [検索結果] タブを選択し、前工程でコピーした固定ページの URL を「結果の URL 」に貼り付けて [公開] をクリック
    Search and Filter Pro
  5. サイドバーに検索ウイジェットを追加してフォームを選択
    Search and Filter Pro
  6. 固定ページに検索結果が表示
    Search and Filter Pro

以上が

  • WooCommerce のフィルタリング
  • WooCommerce 製品コードのフィルタリング

による商品の絞り込み検索を行う方法になります。

 

Search and Filter Pro は絞り込み検索機能を導入するオドオンです。

さまざまなコンテンツのスタイル、例えばブログ、ニュース、ショッピングサイト、不動産物件、転職など、検索対象が多い場合は絞り込み検索は必須です。

ユーザーが検索で疲れないようにするためには、テキスト入力だけでなく、検索対象の特徴を選択肢にすると良いでしょう。

選択肢の多い検索フォームの生成も多大な労力を必要としますが、Search and Filter Pro なら比較的短い時間で対応ができます。