Toolset Views : 絞り込み検索フォームを作成【1】

(2024.7.10)
この投稿から【2】を投稿するまで年数が経ってしまい、、、管理画面も英語ばかりに様変わりしてしまいましたので、全面改訂いたしました。
また、「Toolset Views」の後継にあたる「Toolset Blocks」が誕生しています。
Toolset Views – The Query Builder For WordPress

恥ずかしながら、私は今まで「Toolset Views」のメリットを少しも認識していませんでした。
(インストールさえしたことなかった…💧)
カスタムフィールドの内容を表示するのであれば、APIも用意されているのだし、テンプレートにPHPで書けば良いのでは…と思っていました。

でも、先日お仕事で、カスタム投稿タイプに150以上の商品を登録し、カテゴリー(カスタムタクソノミー)やカスタムフィールドで絞り込み検索を実現したいという依頼があり、調べていたところ「Toolset Views」で絞り込み検索(Toolsetでは、カスタム検索と呼ばれている)ができるんだ!と知り、早速挑戦してみました。

ドキュメントが英語ですので不安でしたが、直感的に操作できるようになっており、ほとんどつまずくことなく作成できました。
WordPressで絞り込み検索できるプラグインとして「Toolset Views」をご紹介します。

Toolset Views について

「Toolset Views」は、あらかじめコンテンツをいろんな条件で絞って抽出したデータのブロックを、任意の場所にショートコードで表示させることができます。

ですので、「おすすめ商品」などのタグを付いた記事を抽出する「Views」を作成し、コンテンツ部分に表示させたり、ウィジェットに表示させたりもできますよ。

しかも、「Views」の作成はPHPを書かずに、ポチ、ポチとボタンをクリックしたり、プルダウンで選択していくだけでデータを抽出するショートコードが生成されていくので、本当に楽です。

また、検索結果のソート(並べ替え)やページネーションにも対応しています。

「Toolset Types」と「Toolset Views」のダウンロード画面
「Toolset Types」と「Toolset Views」のダウンロード画面
Toolset Views – The Query Builder For WordPress

有料プラグイン。下記サイトで購入できます。「Toolset」 の中に「Views」も含まれています。

配布元 : Toolset Views

デモ

自分の勉強のために、デモも作ってみました。
※デモなので、シングルページは作成しておりません。

DEMO

個人的には、価格のカスタムフィールドの数値から、下限価格〜上限価格の設定も簡単に実装できたのが嬉しかったです。

Toolset Types・Views を使った絞り込み検索(カスタム検索)のデモ
Toolset Types・Views を使った絞り込み検索(カスタム検索)のデモ

Toolset Views で絞り込み検索

Toolsetシリーズは有料プラグインになりましたし、こんなページを必要としている人はいないかも知れませんが…💧、あまり日本語の情報がないプラグインですので、自分用のメモとしても書き記しておこうと思います。

ちなみに、たくさん機能があるようですが、私のデモを元に書いた記事ですので、少しばかりの機能しかご紹介できておりません。
(私も大半は使いこなせていません…)

  • カスタム投稿、カテゴリー(カスタムタクソノミー)、カスタムフィールド作成などの説明は省きます。
  • 複数の投稿のあるカスタム投稿を作成済み、という前提で進めます。

アーカイブページをカスタム検索用に作成

  1. 「Toolset」→「Dashboard」の該当のカスタム投稿タイプの「Create archive」ボタンをクリック。

  2. 次の画面で「Create WordPress Archive」ボタンをクリックすると、アーカイブページが作成できます。

表示オプション

  1. 「表示オプション」タブを開き、このアーカイブのpurpose(目的)から「Display the archive as a custom search」を選択する。

  2. その下の項目はすべてチェックする。

Loop Selection(ループ選択)

  1. 目的のアーカイブが選択されているのを確認。

    • 今回はカスタム投稿「Mac Series」選択。

Ordering(順序付け)

  1. 検索結果を表示した時の順序付け(ソート)を指定。

    • 今回はカスタムフィールドの「価格」でソートさせています。

Query Filter(クエリフィルター)

後で出てくる「検索およびページネーション」を指定した時に自動的に入りますので、何もしなくて良いです。

Pagenation Setting(ページネーション設定)

  1. 私のデモで選んだのは「Pagination enabled with manual transition and AJAX(手動遷移とAJAXによるページネーションの有効化)」です。
    また、オプションで検索結果の1ページに表示する個数を設定できます。※2025年12月25日修正

Custom Search Settings(カスタム検索設定)

  1. 結果をどのように更新するかを設定します。
    私のデモの設定は「AJAX results update when visitors change any filter values(訪問者がフィルター値を変更すると、AJAX の結果が更新されます)」です。※2025年12月25日修正

Search and Pagination(検索およびページネーション)

この部分で絞り込み検索フォームを作っていきます。
手順は以下のとおり。

  1. 「New filter」をクリック。

  2. 私のデモの場合は、「Macカテゴリー」というタクソノミーを作成していますので、まずはそれで絞り込みできるように「Macカテゴリー」でフィルターを作成します。「Macカテゴリー」をクリック。

  3. 次の画面ではフィルターのコントロールタイプを設定できるので、チェックボックスで「Macカテゴリー」を選べるように「Set of checkboxes」を選択します。
    設定したら「Insert controls」ボタンでショートコードを追加。

    • 他の詳細な設定は省いています。
  4. 以下のように、ショートコードが挿入されたのが確認できます。
    [wpv-filter-controls][/wpv-filter-controls]の間に挿入してください。

  5. HTMLとCSSで見栄えを整えて、以下のように表示できました。

上記のように、フィルターをどんどん追加していき、フォームを完成させます。
また、必要に応じて以下のような機能を追加できます。

  • Text search(テキスト検索)
  • Submit button(検索ボタン)
  • Reset button(リセットボタン)
  • Spinner graphics(スピナーグラフィックス … 検索結果を表示するまでアニメーションを表示)
  • Pagination controls(ページネーションコントロール)
  • Sorting controls(並び替えコントロール)

続きは、以下のページです。↓

Toolset を使っているなら、絞り込み検索は「Toolset Views」で

絞り込み検索には、以前「FE Advanced Search」を使ったことがありましたが、WordPressデフォルトのカスタムフィールドを使わねばならず、カスタムフィールドの登録の作業自体がとても不便でした。
(※一部のカスタムフィールドプラグインには対応しているようです)

ですので、カスタムフィールド用のプラグインとの相性も重要なのだな…と実感していたところ、私の購入していた「Toolset」シリーズに「Toolset Views」も含まれていて、それが絞り込み検索を作成できるプラグインだと知り、使ってみたら「簡単にできた! もう鬼に金棒だ!」と喜びつつも、自分の勉強不足を呪いました。。。

「Toolset」シリーズは、「Toolset Views」「Toolset Types」の他にも、素晴らしいプラグインがセットになっており機能てんこ盛りのようですので、今後も勉強していきたいと思っております。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

keyboard_control_keyTOP