ダブスト

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

ホーム 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) chevron_right Search and Filter Pro の使い方 (2.5.6)

Search and Filter Pro の使い方 (2.5.6)

Search and Filter Proの使い方

 

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

  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”]
記事や結果のリストを表示する要素の直前に配置します。

 

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

 

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

2つの方法があります。

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

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

WooCommerce のフィルタリング

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

 

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

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

以上が

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

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

 

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

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

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

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