【JIN:R】複数条件で検索する「絞り込み検索プラグイン」を使ってみた!

JINからJIN:Rの移行作業について
初心者

不動産サイトで見かける「絞り込み検索をつけたい」
JIN:R向けのプラグインってあるの?

そんな疑問に答えます。

WordPressテーマ「JIN:R」に絞り込み検索を導入してみました。ちなみに今回使ったのは有料のVK Filter Search Proプラグインです。

公式 VK Filter Search Proプラグイン

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

JIN:Rに絞り込み検索機能を実装したデモサイト

JIN:Rに絞り込み検索機能を実装したデモサイト

まずはデモサイトを紹介します。

デモサイト

イメージしたのはカメラ系のガジェットブログと、賃貸物件を扱っている不動産会社です。

絞り込み検索フォームの設置場所

デモサイトでは次の2か所に絞り込み検索フォームを設置しました。

トップページのメインビジュアル上

トップページの絞り込み検索フォーム

まず最初はトップページです。

メインビジュアル上はスペースが限られています。選択項目を一行で表示するドロップダウン形式にしました。

下層ページのサイドバー

サイドバーの絞り込み検索フォーム

続いてはサイドバーです 。トップページと違いサイドバーには余裕があるので、オプションを全て表示しました。

チェックボックス形式で、複数のオプションを選択できます。

かんた

トップページにはない「キーワード検索フォーム」も設置しました。

検索の分類にはカスタムタクソノミーを採用

タクソノミー

記事の分類をするために、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(複数サイトで利用可能)
VK Filter Search Proプラグインの基本情報

WordPressには無料の絞り込み検索プラグインが配布されています。いくつか無料のプラグイン試したのですが、やりたいことが実現できなかったので有料プラグインを使いました。

かんた

ちなみに以下3つの有料プラグインを利用した経験があります。

有料の絞り込み検索プラグイン

  1. VK Filter Search Pro
  2. FE Advanced Search
  3. Search Filter Pro

一番使いやすいと感じたのが、VK Filter Search Proです。

かんた

絞り込み検索プラグインの比較は次の記事で紹介しています。

VK Filter Search Proプラグインはブロックエディター上で感覚的に操作できるのでかなり気にいっています。

かんた

フォームを設置する様子は次の公式動画で見ることができます↓


注意点について

JIN:Rで絞り込み検索をつける場合の注意点

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; ?>	

2行目がキーワードがない場合の出力、4行目がキーワードがある場合の出力です。

XwriteやSWELLなど別の有料テーマだと検索のタイトル部分をフィルターフックで書き換えることが可能です。

できればJIN:Rでも同じよう仕様になってくれたら良いなと思い、JIN:Rの公式サポートフォーラムにトピックを立てました。

かんた

反映されると嬉しい。

まとめ

WordPressテーマJIN:Rに絞り込み検索を実装する方法をデモサイト付きで紹介しました。

プログラムスキルのある人であれば、コードを書いて絞り込み検索を実装することも可能でしょうが、初心者の人にはちょっとハードル高めです。

今回紹介したような検索プラグインを使うことで簡単に絞り込み検索フォームを導入できます。

かんた

ぜひチャレンジしてみてください。

公式 VK Filter Search Proプラグイン

本記事で紹介した内容は、記事執筆時に利用可能なJIN:Rの最新バージョンをもとにしています。バージョンアップにより仕様が変わる可能性があるのでご了承ください。

よかったらシェアしてね!
  • URLをコピーしました!
目次