WordPressに検索システムを導入したい！と思うことはありませんか？
今回は、WordPressで高度な検索システムの実装が可能なプラグイン「VK Filter Search Pro」の使い方について、ご紹介します。
※無料版の「VK Filter Search」もありますが、今回ご紹介するのは、より高度な絞り込み検索フォームを実装できる有料版の「VK Filter Search Pro」となります。
検索システムの活用シーン
このように様々な業種のサイトで、
検索システムが取り入れられています！
- 不動産サイトでの
「物件情報検索」 - 旅行予約サイトでの
「ホテル検索」 - ECサイトでの
「商品検索」 - 求人サイトでの
「求人情報検索」 - レストラン予約サイトでの
「レストラン検索」 - カーシェアリングサイトでの
「車両検索」
機能体験型の
デモサイトで体験！
弊社のLightningデモサイトでは、実際に、VK Filter Search Proで作成した検索システムをお試しいただけます。
よろしければぜひ、ご確認くださいませ。
その他、時間帯予約・宿泊予約・イベントカレンダーなど、様々な機能を体験していただけます。
事前準備①
カスタム投稿・カスタムタクソノミー・カスタムフィールドの作成
ここでは、レストランの検索システムを実装していきます。
まずは、Advanced Custom Fields（ACF）というプラグインで、カスタム投稿・カスタムタクソノミー・カスタムフィールドの作成をおこないます。
ここでは、カスタム投稿・カスタムタクソノミー・カスタムフィールドの作成方法の詳細な説明は省略しますので、上記の記事もチェックしながら、進めてみてくださいね！
各画像はクリックすると拡大表示されます。
カスタム投稿とカスタムタクソノミーの作成
今回は、「レストラン情報」というカスタム投稿タイプと、「エリア」「ジャンル」のカスタムタクソノミーを作成しました。
※「エリア」「ジャンル」は、階層的のチェックをONにして作成しています。
すると、このように、管理画面のメニューの「レストラン情報」のところに、作成したタクソノミーも表示されていることがわかります。
カスタムタクソノミーへの項目追加
エリア
カスタムタクソノミーの「エリア」を選択します。
今回は、このように近畿の２府５県を登録しました。
ジャンル
カスタムタクソノミーの「ジャンル」を選択します。
今回は、このように5つのジャンルを登録しました。
カスタムフィールドの設定
このように、カスタムフィールドを作成しました。
カスタムフィールドに下記のように情報を入力します。
この後、タクソノミーでも検索ができるように設定をおこなうため、右側に表示されるエリアやジャンルも忘れずにチェックをしておきます。
事前準備②
検索結果の表示画面の設定
検索結果の表示画面の設定をおこないます。
ここでは、Lightningの有料テーマ（Lightning G3 Pro）を使用している場合の設定方法を見ていきます。
テーマによって、異なる部分がありますので、ご自身の環境にあわせて設定をしてみてください。
管理画面の外観>カスタマイズを選択します。
Lightningアーカイブページ設定を選択します。
作成したカスタム投稿タイプを選択（ここでは、レストラン情報）を選択します。
ここでは、下記のように設定をおこないました。
※検索結果の表示件数は、別の部分の設定が反映されるため、後から設定をおこないます。
１つ前の画面に戻り、検索を選択します。
表示件数を選択します。
ここで設定した件数が、検索画面の１ページに表示される件数となります。
検索結果のイメージは
このようになります
※各画像はBing Image CreaterのAIで作成しています。
情報はすべてダミーとなります。
VK Filter Search Proの
インストールと有効化
ここから、VK Filter Search Proの設定を順におこなっていきます。
管理画面の「プラグイン」
>「新規プラグインを追加」をクリック
「プラグインのアップロード」をクリックし、「ファイルを選択」をクリック
VK Filter Search Proのzipファイルを選択し、「開く」をクリック
※ご自身のPCに保存されているファイルを選択してください
「今すぐインストール」をクリック
「プラグインを有効化」をクリック
VK Filter Search Proの
フォームの作成
最近のアップデートにより、フォームを追加したいページに、直接VK Filter Search Pro ブロックを配置して編集する方法ではなく、投稿タイプ「VK Filter Search」でフォームを作成してくださいという表記がされるようになりました。
上記の指示に従って、まずは投稿タイプ「VK Filter Search」でフォームを作成していきます。
投稿タイプ「VK Filter Search Pro」でのフォーム作成
管理画面の「VK Filter Search Pro」
>「新規投稿を追加」をクリック
ページタイトルは、レストラン検索フォームとしておきます。
ブロックの追加ボタン（＋マーク）をクリックし、検索窓で検索をしていきます。
「vk filter」と入力すると、「VK Filter Search Pro」が出てくるので、選択します。
対象の投稿タイプの選択
画面右側に設定項目が表示されます。
対象の投稿タイプで、作成したカスタム投稿タイプ（ここでは、レストラン情報）を選択します。
エリアの設定
検索フォーム左上のカテゴリーのブロックを選択します。
右側の設定画面のタクソノミーにて、「エリア」を選択します。
すると、検索フォームが変わり、エリアの中身が表示されるようになります。
ジャンルの設定
今回は、タグを作成していないので、タグのブロックを選択して削除します。
※ご自身の設定状況に合わせてください
VK Filter Search Proブロック全体を選択すると、ブロックの追加ができるようになります。
ブロックの追加ボタン（＋マーク）をクリックし、「VK Taxonomy Search Pro」を選択します。
右側の設定画面のタクソノミーにて、「ジャンル」を選択します。
すると、検索フォームが変わり、ジャンルの中身が表示されるようになります。
ジャンルは複数選択ができるように変更をおこないます。画面右側の設定を下にスクロールします。
選択形式を選択で、チェックボックスを選択します。
すると、ジャンルのブロックがチェックボックス形式に変更されたことがわかります。
エリアの横にジャンルのブロックをもってきたいので、ジャンルのブロックを選択し、上に移動のマークをクリックします。
フォーム内のブロックの並び替えをおこなうことができました。
キーワードの設定
検索フォームのキーワードのブロックを選択します。
ブロックの幅のところで、1/1を選択します。
すると、キーワードのブロックが、フォームの横幅いっぱいに表示されるようになりました。
これで、このような検索フォームが完成しました。
画面右上の公開ボタンをクリックして公開をおこないます。
これで、検索フォームが作成できました！
次に、固定ページに検索フォームを埋め込んでいきます。
固定ページへの検索フォームの埋め込み
今回は、固定ページに検索フォームを設置をしていきます。
管理画面の固定ページ>新規固定ページを追加を選択します。
ページタイトルは、検索フォーム設置テストとしておきます。
ブロックの追加ボタン（＋マーク）をクリックし、検索窓で検索をしていきます。
「Call Filter Search」と入力すると、「Call Filter Search Form」が出てくるので、選択します。
右側の設定画面にて、検索フォームを選択のところで、先ほど作成した「レストラン検索フォーム」を選択します。
すると、検索フォームが画面に表示されました。
検索フォームで検索の挙動を確認
固定ページをプレビューしてみます。
すると、このように検索フォームが画面に表示されました。
検索をおこなってみます。
今回は、
エリア：京都府
ジャンル：和食と洋食
を選択して、検索ボタンをクリックします。
すると、京都府の和食と洋食のお店が一覧で表示されました。
検索で選択したエリアやジャンルに該当する店舗情報が表示されています！
検索結果にて、「詳細はこちら」をクリックすると、店舗の詳細情報が表示されます。
このように、カスタムフィールドに入力した内容を表示させるには、PHPファイルを作成する必要があります。
この記事では、PHPファイルの作り方には触れませんので、こちらの記事を参考に作成してみてください！
まとめ
今回は、「VK Filter Search Pro」の基本的な使い方について解説しました。
設定の詳細やカスタマイズなど、もう少し詳しい内容は、次回の応用編でご紹介をしていきます。
WordPressサイトに
オリジナル検索フォームを
導入することができます！
この記事では、プラグインを使用して検索フォームを作成する方法をご紹介しましたが、コードを記述して検索フォームを作ることで、独自の検索フォーム を作成することも可能です！
今回のように、「カスタム投稿タイプ」で作成した投稿を検索するフォームを作成することもできるので、
カスタム投稿で作成した、
- 店舗情報
- 求人情報
- 不動産情報
などの絞り込み検索フォームを設置することもできます。
◆デザイン例
検索フォームだけでなく、検索結果のページのデザインにもこだわることができます。
◆カスタマイズ例
検索条件が選択されるたびに検索がおこなわれるカスタマイズも可能です！
たとえば、「建設業」を選択します。
すると、条件を選択した瞬間に
「検索しています。お待ち下さい。」
といったポップアップが出現し、検索が行われます。
（ポップアップの文言は変更が可能です！）
検索結果が検索フォームの下に表示されます。
「50件対象が見つかりました」
などと、ヒットした件数を出すことも可能です。
今回の例であれば、検索条件が選択される前の状態（初期状態）で、検索フォームの下に、すべての事業者を表示させておくということもできます。
実際のイメージは下記サイトでも
ご確認いただけます。
お気軽にお問い合わせください
WordPress にオリジナルな「サイト内検索機能」を取り付けたい場合は、下記のフォームよりお問い合わせください。
実現したい機能やご希望を詳細にヒアリングし、お見積りをさせていただきます。
投稿者プロフィール
-
Webサイトに興味をもち、独学でHTMLやCSSの勉強を始め、その後、スクールでAdobeソフトの使い方やデザインについての知識を習得する。
同時に、様々なWebサイトがWordPressで作られていることを知り、お客さまに喜んでいただけるサイト作りができるよう、WordPressの仕組みやユーザー視点での文章表現、デザインスキルを日々学ぶ。
2022年10月より、株式会社ウェブロードに入社し、お客様のサイト制作、修正やページ追加、操作サポートを行っている。
最新の投稿
WordPress講座2024年7月4日画像にPDFのリンクを設定！｜WordPress【プラグイン不要】｜画像をクリックするとPDFが開くようにするには？- WordPressのプラグイン2024年6月26日VK Filter Search Proの使い方 ー 応用編 ー｜WordPressの検索システムのプラグイン
- WordPressのプラグイン2024年5月27日VK Filter Search Proの使い方 ー 基礎編 ー｜WordPressの検索システムのプラグイン
- WordPressのプラグイン2024年4月16日Booking Packageの使い方｜2024年最新 ｜ 時間帯予約＆宿泊予約に対応
お問合せフォームはこちら
（※営業電話が多いため留守電にしています。お急ぎの方は下記メールフォームをお使いください。）
お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。
