イベントサイトで絞り込み検索するにはどうすればいいのでしょうか?
という質問をいただきましたので、実際に私が運営している福岡カフェ会のイベントサイトで実装してみました。
結論:「プラグイン」で簡単に「絞り込み検索機能」を実装できます
「VK Filter Search Pro」という有料のプラグインを使うことで、初心者でも簡単に実装できました。
福岡カフェ会ではイベント数が月に100回以上ありましたので、「絞り込み検索」機能はぜひ欲しいところでした。
「VK Filter Search Pro」を使うことで、
- ジャンル
- 場所
- 年代
- 日付
で簡単に絞り込みをすることができました。
イベント数が多かったので、完全に実装するのに1時間程かかりましたが、イベント数が少ない人であれば20分ぐらいでできるかなと思います。
導入に必要な準備
- WordPress環境の整備
推奨バージョンは5.6以上です。 - VK Filter Search Proのインストール
プラグインは公式ページをご覧ください。 - Custom Post Type UIのインストール
プラグインは公式ページをご覧ください。 - 対応テーマの確認
VK Filter Search Proはブロックエディターに対応しているテーマと相性が良いです。このサイトでは「SWELL」を使っています。
実装手順
1. タクソノミーを作成する
タクソノミーとは、カテゴリーやタグのように情報を分類する仕組みです。
私のサイトでは、以下のタクソノミーを設定しました。
- 「ジャンル」:友達作り、恋活・婚活、趣味・推し、異業種交流など
- 「場所」:博多、天神、薬院、小倉、久留米など
- 「年代」:20代、30代、40代、50代、60代以上
- 「日付」:カレンダー
CPU UI→「タクソノミーの追加と編集」をクリックする
ダッシュボードの「CPU UI」から「タクソノミーの追加と編集」をクリックしてください。
基本設定
こちらの画面になりますので、以下のように設定していきます。
「投稿タイプスラッグ 」:適当な英文字を入力します。例)place
「複数形のラベル」:日本語で入力します。例)場所
「単数形のラベル」:日本語で入力します。上のラベルと同じで大丈夫です。
最後に、チェックを入れて、「投稿タイプを追加」をクリックしてください。
以上の作業で、タクソノミーに「場所」が追加できました。
同様に、追加したいタクソノミーを入力していきます。何個でも登録できます。
2. イベント情報を投稿として登録
続いて、イベントを登録していきます。
先ほどのタクソノミー追加作業をすると、投稿の編集ページの右側に追加したタクソノミーが表示されます。(タグの下です)
各タクソノミーに、項目を入れていきます。
私のサイトの場合、すでに100個以上のイベントを掲載していましたので、たとえば、既に投稿している恋活のイベントの「ジャンル」(タクソノミー)には、「恋活・婚活」という項目を入れて登録しました。
他にも、異業種交流会のイベントのジャンルには「異業種交流」という項目を登録しました。
「場所」「年代」のタクソノミーにも同様に項目を登録していきます。
3. 絞り込み検索フォームの作成
絞り込み検索フォームを実装したい箇所に入れていきます。
ぺージを開いたら、以下のように「VK Filter Search Pro」ブロックを追加してください。
以下のように、デフォルトでは、「カテゴリー」「タグ」「キーワード」となっていたので、先ほど設定した「ジャンル」「場所」「年代」に変更しました。
「日付検索」も追加
日付検索機能を使うには、上のように「VK Post Date Search Pro」を追加します。
この機能を使うためには、全てのイベント投稿の「公開日」を「イベント開催日」に設定します。
え?これをすると、予約投稿にならないの?
と思うかもしれませんが、そうです。予約投稿になってしまいます。
それを無効化することができます。「日付検索ブロックの説明」の中に、「予約投稿を無効化する投稿タイプ」というところがあるので、「投稿」にチェックをいれます。
(補足)検索結果を並び替えるには?
「場所」が「小倉、博多、天神…」となっているから、これを「天神、博多、小倉…」の順番に変更したいな~
これには、「Intuitive Custom Post Order」プラグインで簡単に設定可能です。
こちらは無料プラグインなので、プラグインから検索してインストールしてください。
まとめ
以上、ワードプレスのイベントサイトで絞り込み検索を実装する方法でした。
有料ではありますが、「VK Filter Search Pro」というプラグインを使えば初心者の人でも簡単にできますので、ぜひ利用してみてください。