初心者JINに絞り込み検索機能を付けたい….
簡単な方法を知りたい…
おすすめのプラグインってある？
そんな疑問に答えます。
WordPressテーマのJINにはTHE THORやDIVERに搭載されている、絞り込み検索機能はありません。
コードを編集するのも大変なので、プラグインを使って絞り込み検索機能を付けてみました。
【デモサイト】JINに絞り込み検索を実装してみた
まずは絞り込み検索機能を実装したデモサイトです↓
絞り込みのキーカスタムタクソノミー
デモサイトではCustom Post Type UIプラグインで記事の分類用のカスタムタクソノミーを設定しています。
カスタムタクソノミー
- ジャンル：カメラ、PC、スマホなど
- メーカー：Apple、Sony、Canonなど
- こだわり条件：限定発売、セール期間など
カスタムタクソノミーは、カテゴリーやタグと同じような機能です。
かんた記事に任意の分類機能を設定しています。
検索フォームはVK Filter Search Pro
複数条件での絞込み検索はVK Filter Search Proプラグインを使いました。
絞り込み検索プラグインは以下3つを試したのですが、一番VK Filter Search Proが僕の用途にあっていました。
試したプラグイン
- FE Advanced Search
- Search & Filter Pro
- 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 | カスタムフィールド作成用 | ダウンロード |
