初心者複数の条件で検索するフォームを付けたい…
おすすめのプラグインはどれ？
そんな疑問に答えます。
Xserverの提供しているWordPressテーマ「XWRITE」のカスタマイズについてです。XWRITEには、不動産サイトなどで見かける複数の条件で検索できる絞り込み検索機能はついていません。
本記事ではプラグインを使い、XWRITEに絞り込み検索機能を付けたサンプルをシェアします。
「絞り込み検索フォームを付けたいけど、どのプラグインが良いか分からない！」という人向けです。
かんたぜひサンプルサイトをごらんください。
XWRITEと絞り込み検索フォームのサンプルサイト
XWRITEに絞り込み検索フォームを実装したサンプルサイトです↓
かんた好みのワインを探せるサイトをイメージしました。
サイドバーに複数条件で検索できる絞り込みフォームを実装しました。ワインの種類、原産国、価格などでワインを絞り込んで検索できます↓
絞り込み検索フォームの付け方
サンプルサイトでは有料のVK Filter Search Proプラグインを使いました。
概要
| 基本情報 | |
|---|---|
| 開発会社 | 株式会社ベクトル |
| プラグインの名称 | VK Filter Search Pro（ブイケー・フィルター・サーチ・プロ） |
| 価格 | 31,900円 （税込み価格） |
| プラグインの用途 | 絞り込み検索機能 |
| 発売日 | 2021年4月22日 |
| 購入方法 | 公式サイトからのオンライン決済 |
| 動作環境 | WordPress 5.6以上 |
| ライセンス | 複数サイトで使える |
公式 VK Filter Search Pro（ブイケー・フィルター・サーチ・プロ）
開発会社は日本の会社です。WordPressユーザーにお馴染みのテーマ「Lightning」」を提供している株式会社ベクトルのプロダクトです。
VK Filter Search Proはブロックエディター上で直観的にフォームを作れるが特徴です。次の動画は、絞り込み検索フォームを作る操作画面の様子です↓
海外プロダクトの絞り込み検索フォームを使った経験もあるのですが、多少コードの知識がないとハードルが高いかな～と感じる時がありました。VK Filter Search Proは直観的な操作が可能なので、初心者にもやさしい作りというイメージ。
かんたVK Filter Search Pro詳しいレビューは次の記事で解説しています。
絞り込みの対象は？
VK Filter Search Proは絞り込みのキーにカテゴリーやタグ以外にもタクソノミーや、カスタムフィールドなどもサポートしています。
検索できる要素
- カテゴリー
- タグ
- カスタムタクソノミー
- カスタムフィールド
絞り込みフォームに設置できる検索キーには上限がないので、好きなように拡張できます。
サンプルサイトでは、無料のCustom Post Type UIプラグインでタクソノミーを追加しています↓
標準仕様のカテゴリーやタグ以外にも、種類や原産国といったカスタムタクソノミーを分類用に作成しました。
VK Filter Search Proではカスタムフィールドも検索対象にすることができます。サンプルサイトでは、Advanced Custom Fieldsプラグインを使い、価格などを設定しています↓
【ポイント】絞り込み検索をワンランクアップにする方法
検索システムのあるサイトを作るときに、合わせて実装したいカスタイズテクニックを紹介します。
カスタマイズテクニック
- 検索にヒットした件数を表示する
- 情報の概要を表示する
- 表示順を変更するボタンを配置する
かんた詳しく解説します。
【カスタマイズ①】検索にヒットした件数を表示する
絞り込み検索した後に表示される検索結果ページには、条件にマッチした件数を表示させるのが定番です。
XWIRTEには検索結果タイトル下部にアクションフックxwrite_search_title_bottomがあります。子テーマのfunctions.phpにコードを追加する。もしくはCode snippetsプラグインなどにコードを設置することで、追加したい要素を表示させることができます。
サンプルコード
function kanta_search_result_count() {
//実現したいこと
echo '検索結果ですよ！';
}
add_action('xwrite_search_title_bottom', 'kanta_search_result_count');
【カスタマイズ②】情報の概要を表示する
カスタムフィールドや、タームなど任意の情報を表示させるカスタマイズです。サイト訪問者は詳細ページに移動することなく、情報の概要を把握できるカスタマイズです。
不動産サイトなどでよく見るデザインですよね？
かんた詳細ページに移動しなくても、家賃や最寄り駅なんかを把握できるイメージです。
サンプルサイトではAdvanced Custom Fieldsプラグインで設定したカスタムフィールドの値を表示させています。
XWRITEの記事一覧ページにカスタマイズフィールドやタームなどを表示させる方法は次の記事で紹介しています。
【カスタマイズ③】表示順を変更するボタンを配置する
表示順を変更するボタンについてです。
検索結果を任意の順番にソートしなおすボタンは不動産サイトなどでも定番ですよね？
「家賃の低い順にしてみたり…」といった用途です。サンプルサイトでも同様に、表示の順番を並び変えるボタンを配置しています。
FAQ
XWRITEと今回利用したVK Filter Search ProプラグインについてのFAQです。
サンプルサイトで利用したXWRITEの契約は買い切りですか？それともサブスクですか？
サンプルサイトは買い切りで購入したXWRITEを使っています。
サブスクタイプと買い切りのテーマの中身は同一です。料金システムの違いしかありません。どちらの購入システムを選んでも絞り込み検索に影響はありません。
絞り込み検索プラグインはどこから購入できますか？
VK Filter Search Proは複数サイトで利用できますか？
はい。1つ購入すれば、複数サイトで利用できます。ライセンスはGPLです。
VK Filter Search Proをクライアントサイトに導入するさい、別途追加費用はかかりますか？
いいえ。特別ライセンス的なものはありません。１つ購入すれば、自分用でも第三者用でも利用できます。
かんた以下の引用は、公式サイトの情報です↓
ライセンスについて
引用元：ライセンスについて
弊社製のテーマ・プラグインはWordPressコミュニティーガイドラインに沿って「100%GPLライセンス」を採用しています。受託制作においても１つのライセンスを複数サイトに使うことはもちろん、弊社テーマをどのようなサイトにご利用いただいてもかまいません。お問い合わせ・確認は不要です。
サイドバー以外にも、絞り込み検索フォームは設置できますか？
できます。
VK Filter Search Proを使ったサンプルサイトは次の記事で紹介しています。メインビジュアル上にも設置したサンプルがあります。
まとめ
XWRITEに絞り込み検索フォームを実装したサンプルを紹介しました。
サンプルではVK Filter Search Proプラグインを使い、複数条件でワインを検索するサイトを作ってみました。検索キーはタクソノミーやカスタムフィールドをサポートしているので、かなり拡張性の高いシステムを手軽に作ることができたと感じます。
かんたぜひ絞り込み検索フォームの実装にチャレンジしてみください。
公式 VK Filter Search Pro（ブイケー・フィルター・サーチ・プロ）
サンプルサイトのバージョン情報
- WordPress：6.4.3
- XWRITE：2.4.0
- VK Filter Search Pro：2.4.2
