ダブスト

日本のスモールビジネスに武器を

ホーム chevron_right プラグイン chevron_right 機能から探す chevron_right WordPress プラグイン chevron_right 検索・ナビゲーション chevron_right 検索 chevron_right Search and Filter Pro chevron_right Search and Filter Pro の使い方 (2.5.6)

Search and Filter Pro の使い方 (2.5.6)

 

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

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

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

サイト内絞り込み検索

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. [検索結果] タブで「結果の表示方法」から「カスタム」を選択
    サイト内絞り込み検索
  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”]
記事や結果のリストを表示する要素の直前に配置します。

 

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

 
2つの方法があります。

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

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

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

 

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

以上が

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

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

 

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

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

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

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