【デモサイトあり】JINで絞り込み検索を実装してみた|VK Filter Searchプラグイン編

【概要】XWRITEって何?
初心者

JINに絞り込み検索機能を付けたい….
簡単な方法を知りたい…
おすすめのプラグインってある?

そんな疑問に答えます。

WordPressテーマのJINにはTHE THORやDIVERに搭載されている、絞り込み検索機能はありません。

コードを編集するのも大変なので、プラグインを使って絞り込み検索機能を付けてみました。

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

【デモサイト】JINに絞り込み検索を実装してみた

まずは絞り込み検索機能を実装したデモサイトです↓

絞り込みのキーカスタムタクソノミー

絞り込みのキーカスタムタクソノミー

デモサイトではCustom Post Type UIプラグインで記事の分類用のカスタムタクソノミーを設定しています。

カスタムタクソノミー

  1. ジャンル:カメラ、PC、スマホなど
  2. メーカー:Apple、Sony、Canonなど
  3. こだわり条件:限定発売、セール期間など

カスタムタクソノミーは、カテゴリーやタグと同じような機能です。

かんた

記事に任意の分類機能を設定しています。

検索フォームはVK Filter Search Pro

複数条件での絞込み検索はVK Filter Search Proプラグインを使いました。

絞り込み検索プラグインは以下3つを試したのですが、一番VK Filter Search Proが僕の用途にあっていました。

試したプラグイン

  1. FE Advanced Search
  2. Search & Filter Pro
  3. VK Filter Search Pro
かんた

プラグインの比較は次の記事をごらんください。

カスタムフィールドの設定にAdvanced Custom Fields

商品の「価格」は、カスタムフィールドを使う設計です。カスタムフィールドを使うことで価格順に並び替えることができるからです。

カスタムフィールドの設定には無料プラグインのAdvanced Custom Fieldsを使っています。

絞り込み検索向けの独自カスタマイズ

絞り込み検索向けの独自カスタマイズ

今回紹介したVK Filter Search Proの機能ではありませんが、以下の独自カスタマイズをしました。

かんた

絞り込み検索使う場合におすすめなカスタマイズテクニックです。

カスタムフィールドでの追加情報表示

検索結果やカテゴリーなど記事一覧が表示されるアーカイブページに記事の追加情報を表示させました。

デモサイトでは、カスタムフィールドとタームを表示させています。

かんた

記事一覧テンプレートに任意のHTMLコードを追加する方法は、次の記事で解説しています。

検索結果の並び替え

絞り込み検索した後に表示される検索結果ページのカスタマイズです。

公開日と、価格で検索結果をソートできる機能を実装しました。

かんた

検索結果の順番を並び変える方法は次の記事で解説しています。

まとめ

WordPressテーマJINに絞り込み検索機能を実装する方法を紹介しました。

利用したプラグイン

スクロールできます
プラグイン名役割公式サイト
Custom Post Type UIタクソノミー追加用 ダウンロード
VK Filter Search Pro絞り込み検索用 ダウンロード
Advanced Custom Fieldsカスタムフィールド作成用 ダウンロード
よかったらシェアしてね!
  • URLをコピーしました!
目次