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

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

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

ドキュメントが英語ですので不安でしたが、直感的に操作できるようになっており、ほとんどつまずくことなく作成できました。

Toolset Views について

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

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

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

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

「Toolset Types」と「Toolset Views」のダウンロード画面

Toolset Views – The Query Builder For WordPress: 有料プラグイン。下記サイトで購入できます。「Toolset」の中に「Views」も含まれています。
配布元 : Toolset Views

デモ

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

DEMO

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

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

Toolset Views で絞り込み検索

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

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

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

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

アーカイブページを表示し、上部の黒いバーの「Toolsetでデザイン」→「新規作成アーカイブ目的 ●●●●●●」をクリックします。
※●●●●●●は、自分の作成したカスタム投稿の名前が表示されています。
続いて、「表示オプション」を開きます。
親切に「このArchiveにカスタム検索を追加できることをご存じでしたか？」と、バルーンが出ています。
WordPress Archiveの目的のドロップダウンから、「カスタム検索としてアーカイブを表示」を選んで保存します。
以下は私のデモの設定です。
「ループ選択」…アーカイブページのカスタム投稿が選ばれているのでそのまま。
「順序付け」…カスタムフィールドの「価格」の値を選択してみました。
「クエリフィルター」…後に検索のフィルターを追加するときに自動的に入りますので、そのまま。
「ページネーション設定」…好みで良いと思います。

検索フォームにフィルターを作成

「結果をどのように更新しますか？」は、私のデモの設定は以下の通りです。
「検索およびページネーション」の部分で、検索フォームを作っていきます。
「新しいフィルター」をクリックします。
私のデモの場合は、「Macカテゴリー」というタクソノミーを作成していますので、まずはそれで絞り込みできるように「Macカテゴリー」をクリックします。
複数選択できるチェックボックスにしたかったので、「チェックボックスの設定」を選び、「Insert shortcode」ボタンをクリックします。

以下のように、ショートコードが挿入されたのが確認できます。
※[wpv-filter-controls]と[/wpv-filter-controls]の間に挿入してください。
CSSで見栄えを整えて、以下のように表示できました。

上記のように、フィルターをどんどん追加していき、フォームを完成させます。

また、必要に応じて以下のような機能を追加できます。

テキスト検索
提出ボタン … いわゆる検索ボタンのこと
リセットボタン
スピナーグラフィックス … 検索結果を表示するまでアニメーションを表示
ページネーションコントロール
並び替えコントロール

長くなりますので、また【２】を作成してそちらで書きたいと思います。

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

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

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

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