【解決済み】VK Filter Search Proの検索結果ページはどんなデザイン？カスタマイズ方法ってあるの？

そんな疑問に答えます。

絞り込み検索プラグインのVK Filter Search Proは有料です。
購入してから「失敗した」なんて悲しい思いはしたくありませんよね？

ボクはVK Filter Search Proを購入したユーザーです。
複数のサイトでVK Filter Search Proを使っているので、どんな感じの検索結果ページができるのかデモサイト付きで紹介します。

【概要】VK Filter Search Proについて

まずはVK Filter Seach Proプラグインの概要です。

概要

基本情報
開発会社	株式会社ベクトル
プラグインの名称	VK Filter Search Pro（ブイケー・フィルター・サーチ・プロ）
価格	31,900円 （税込み価格）
プラグインの用途	絞り込み検索機能
発売日	2021年4月22日
購入方法	公式サイトからのオンライン決済
動作環境	WordPress 5.6以上
ライセンス	GPL（複数サイトで使える）

VK Filter Seach Proは日本の会社が開発したプロダクトです。

無料で配布されているものとは違い有料です。購入して数年利用していますが、しっかりとアップデートされ、サポートレベルも高いなど安心して利用できています。

また、ボクはWeb制作事業者なのですがVK Filter Seach ProはGPLライセンスなので、追加料金なしで複数サイトに利用できる点もメリットだと感じています。

公式 VK Filter Search Pro（ブイケー・フィルター・サーチ・プロ）

VK Filter Seach Proの検索結果ページデザイン

VK Filter Seach Proでボクが作成したデモサイトです↓

【ポイント①】検索結果ページはテーマ次第

絞り込み検索をした後に表示される検索結果ページのデザインは、有効化しているテーマ次第です。ちなみにデモサイトは、WordPressテーマSWELLをアレンジしています。

検索結果が表示されるテンプレートは標準的なテーマであればsearch.php。search.phpがなければindex.phpが使われます。

適用されているテンプレートファイルが不明な場合は、Show Current Templateプラグインなどを使いましょう。検索結果画面の上部にテンプレートファイル名が表示されます。

もし検索結果ページのデザインをアレンジするといったケースでは、次のアプローチがあります。

検索結果のページをアレンジする方法

対象のテンプレートファイルを編集する

search.phpが対象テンプレートであれば、子テーマフォルダにsearch.phpファイルをコピペ。

子テーマフォルダにコピペしたsearch.phpのコードを修正するというアプローチです。当然ながらPHPやHTML＋CSSの知識が必要です。

フィルターフックを使う

テンプレートファイルを直接編集せずに、フィルターフックでデザインを調整するというアプローチです。フィルターフックを使うことで子テーマ化する必要がなく、カスタマイズコードを一元管理できるメリットがあります。

ごくまれに、キーワードが未入力の場合に検索結果ページでエラーを返す仕様のテーマがあります。
そういった場合は、プラグインではなくテーマ側での修正を行う必要があります。

検索結果ページに出力すべきもの

以下が検索結果ページによくある要素です。

記事タイトルやアイキャッチ、記事へのリンクはデフォルトで付いているテーマがほとんどです。

デモサイトでは検索結果画面に、カスタムフィールドの値とタームなどを出力しています。

テーマの内部構造により、テンプレートファイルを直接編集するタイプと、フィルターフックで出力を調整できるものがあります。

例えばVK Filter Search Proの開発会社が提供しているLightningの場合には記事一覧ページを調整するフックがあります。子テーマのfunctions.phpにコードを加えるか、Code Snippetsプラグインなどを活用する方法で一覧のデザインをアレンジできます。

Code Snippetsについて

Code Snippetsは無料プラグインです。
functions.phpにコードを加えるようなイメージで、コードをプラグイン上で管理できる機能があります。

【ポイント②】再検索用のフォームを表示できる

絞り込み検索をすると、検索結果ページに移行します。

VK Filter Search Proのブロックオプションには、検索結果ページに再検索用のフォームを表示するかどうかのオプションがあります（下記図参照↓）

検索結果ページに再検索用のフォームが不要であれば表示しないというオプションもあります。

もちろん、フォームが必要なら「表示」を選ぶという仕組みです。

再検索のフォームには、検索時に選択したオプションが保持されます。

かなり重要な機能です。

例えば、「赤ワイン」にチェックを入れて検索すると、検索結果ページの再検索フォーム上には、赤ワインにチェックが入った状態で表示されます↓

この仕様により、自分が検索した内容を把握することができます。

自分で検索してみると分かりますが、指定した条件はけっこう忘れがちです。前回の検索条件が残っていると、条件を少し変更しながら探すことができます。

例えば、「5,000円以下の条件だと見つからない」。

「んじゃ7,000円で探してみよう！」的なイメージです。

【ポイント③】再検索のフォームの位置

検索結果に表示する再検索のフォームは、任意の位置に設置できます。

先ほどとは別のサンプルですが、ページ下部に開閉式に配置するといったカスタマイズをしたサイトです。

→デモサイトを開く

検索フォームの内容が多い場合は、モーダルに表示するといった方法もありです↓

→デモサイトを開く

アレンジするには、多少のコードレベルの知識が必要です。

FAQ

VK Filter Seach Proに関するFAQです。

【備考】オシャレなカスタマイズ

今回紹介したサンプルサイトはWordPressテーマ「SWELL」を使っています。

サンプルサイトで使っているカスタマイズテクニックは別記事で紹介しています。いずれも実用的で、サイトデザインをオシャレにするものです。

【カスタマイズ①】カスタムフィールドの表示

検索結果の画面やカテゴリーのアーカイブページにカスタムフィールドなどを表示させるカスタマイズについてです。

カスタマイズはテーマ次第です。今回紹介したSWELLではフィルターフックで記事一覧ページのアレンジができます。

【カスタマイズ②】検索結果並び替えボタン

デモサイトではカテゴリーや検索結果ページに、記事の並び替えボタンを設置しています。価格やレビューなど、カスタムフィールドで設定した値をもとに表示の順番を変更する機能です。

不動産サイトなどで定番ですよね？条件を指定して検索した後、家賃の安い順で並び変えるイメージです。

【カスタマイズ③】再検索フォームをフローティングさせる

→デモサイトを開く

検索結果に表示させる再検索用フォームの位置についてです。所定の位置以外にもアレンジ可能です。このサンプルでは、フッターにフローティング式に再検索用のフォームを表示させています。

そんな人向けのカスタマイズです。

【カスタマイズ④】検索フォームをモーダルで表示

ボタンをクリックすると検索フォームがモーダル上に表示されるカスタマイズです。検索結果画面でも、トリガーとなるボタンを押すと再検索用のモーダルが開く設定にしてみました。

【カスタマイズ⑤】カスタムフィールドブロックをスライダーに変更

VK Filter Search Proはカスタムフィールドをサポートしています。

例えば、価格といったカスタムフィールドを使い商品カタログやアフィリエイトブログを運営している場合に、絞り込み対象にカスタムフィールドを利用できます。

フォーム上でカスタムフィールドinput要素なのですが、デモサイトではスライダーにカスタマイズしています。ユーザーがサクサク選べるよう、操作性の向上性を目的としたカスタマイズです！

まとめ

VK Filter Seach Proの検索結果ページについて紹介しました。

ポイント

VK Filter Seach Proの検索結果ページは、テーマによりけりです。購入前に確認したい場合は、機能が一部異なりますが、無料バージョンを使って確認可能です。

個人的には、検索フォームを好きな場所に配置できるのでデザインの自由度が高く気に入っています。再検索用のフォームも好きな場所にデザインできるので、かなり実用的。

VK Filter Seach Proのレビューや詳しい使い方は別記事で紹介しています。