初心者不動産サイトで見かける「絞り込み検索をつけたい」
JIN:R向けのプラグインってあるの？
そんな疑問に答えます。
WordPressテーマ「JIN:R」に絞り込み検索を導入してみました。ちなみに今回使ったのは有料のVK Filter Search Proプラグインです。
JIN:Rに絞り込み検索機能を実装したデモサイト
まずはデモサイトを紹介します。
デモサイト
イメージしたのはカメラ系のガジェットブログと、賃貸物件を扱っている不動産会社です。
絞り込み検索フォームの設置場所
デモサイトでは次の２か所に絞り込み検索フォームを設置しました。
トップページのメインビジュアル上
まず最初はトップページです。
メインビジュアル上はスペースが限られています。選択項目を一行で表示するドロップダウン形式にしました。
下層ページのサイドバー
続いてはサイドバーです 。トップページと違いサイドバーには余裕があるので、オプションを全て表示しました。
チェックボックス形式で、複数のオプションを選択できます。
かんたトップページにはない「キーワード検索フォーム」も設置しました。
検索の分類にはカスタムタクソノミーを採用
記事の分類をするために、Custom Post Type UIプラグインでカスタムタクソノミーを作成しました。
作成したタクソノミー
| タクソノミー | ターム |
|---|---|
| メーカー | キヤノン、ニコン、ソニー |
| 分類 | 一眼レフ、ミラーレス |
| センサーサイズ | フルサイズ、 APS-C |
初心者タクソノミーって何？
簡単に言うとカテゴリーやタグの親戚です。記事を分類するさいに使います。
タクソノミーはPHPコードで追加することもできます。デモサイトでは、設定の簡単なCustom Post Type UIプラグインを利用しました。
かんたノーコードです！
複数条件で検索できるフォームプラグイン
デモサイトの絞り込み検索フォームはVK Filter Search Proプラグインで作成しています。
VK Filter Search Proプラグインについて
| 基本情報 | |
|---|---|
| 開発会社 | 株式会社ベクトル |
| プラグインの名称 | VK Filter Search Pro（ブイケー・フィルター・サーチ・プロ） |
| 価格 | 31,900円 （税込み価格） |
| プラグインの用途 | 絞り込み検索機能 |
| 発売日 | 2021年4月22日 |
| 購入方法 | 公式サイトからのオンライン決済 |
| 動作環境 | WordPress 5.6以上 |
| ライセンス | GPL（複数サイトで利用可能） |
WordPressには無料の絞り込み検索プラグインが配布されています。いくつか無料のプラグイン試したのですが、やりたいことが実現できなかったので有料プラグインを使いました。
かんたちなみに以下３つの有料プラグインを利用した経験があります。
有料の絞り込み検索プラグイン
- VK Filter Search Pro
- FE Advanced Search
- Search Filter Pro
一番使いやすいと感じたのが、VK Filter Search Proです。
かんた絞り込み検索プラグインの比較は次の記事で紹介しています。
VK Filter Search Proプラグインはブロックエディター上で感覚的に操作できるのでかなり気にいっています。
かんたフォームを設置する様子は次の公式動画で見ることができます↓
注意点について
JIN:Rに絞り込み検索を実装するさいの注意点をシェアします。
h1のタイトル部分の表示が変
キーワードによる検索がない場合に、検索ページのh1タイトル部分が次のように表示されます↓
「」の検索結果は10件です
カッコの中身がカラです。
かんたちょっと違和感ありますよね？
タイトルを改善するカスタマイズ
検索キーワードがない場合の表示をカスタマイズする方法についてです。
デモサイトでは、次のようにタイトルを変更します↓
検索タイトル部分
| 変更前 | 変更後 |
|---|---|
| 「」の検索結果は10件です | 検索結果は10件です |
かんた文頭の「」を省略します。
JIN:Rの検索結果ページのタイトルは、フィルターフックで置き換えることができません。
デモサイトではテンプレートファイルを直接編集しました。
テーマのアップデートに備えて、子テーマ化するのがおススメです。
カスタマイズ対象はsearch.phpです。
親テーマからファイルをコピーして、子テーマに貼り付けた後に編集します。
対象のコード
search.phpの次の部分を変更します。
「<?php the_search_query(); ?>」の検索結果は<?php echo $wp_query->found_posts;?>件です次のように置き換えます↓
<?php if(isset($_GET['s']) && empty($_GET['s'])): ?>
検索結果は<?php echo $wp_query->found_posts;?>件です
<?php else: ?>
「<?php the_search_query(); ?>」の検索結果は<?php echo $wp_query->found_posts;?>件です
<?php endif; ?> ２行目がキーワードがない場合の出力、４行目がキーワードがある場合の出力です。
XwriteやSWELLなど別の有料テーマだと検索のタイトル部分をフィルターフックで書き換えることが可能です。
できればJIN:Rでも同じよう仕様になってくれたら良いなと思い、JIN:Rの公式サポートフォーラムにトピックを立てました。
かんた反映されると嬉しい。
ページネーションを表示するカスタマイズ
「もっと見る」ボタンではなく、数字形式のページネーションを表示させるカスタマイズは次の記事で解説しています。
まとめ
WordPressテーマJIN:Rに絞り込み検索を実装する方法をデモサイト付きで紹介しました。
プログラムスキルのある人であれば、コードを書いて絞り込み検索を実装することも可能でしょうが、初心者の人にはちょっとハードル高めです。
今回紹介したような検索プラグインを使うことで簡単に絞り込み検索フォームを導入できます。
かんたぜひチャレンジしてみてください。
本記事で紹介した内容は、記事執筆時に利用可能なJIN:Rの最新バージョンをもとにしています。バージョンアップにより仕様が変わる可能性があるのでご了承ください。
