初心者Cocoonに絞り込み検索機能を付けたい..
どのプラグインを使えばいいの？
絞り込み検索のデモサイトを見てみたい…
そんな疑問に答えます。
不動産サイトにあるような複数の条件での検索機能って、ちょっと憧れますよね？
なんだか難しそうだし有料のプラグインを買っても、Cocoonで動作するか分からないという心配がありました。
ボクはWeb制作の仕事をしている関係で、WordPressの絞り込み検索プラグインを扱った経験があります。試しにCocoonで動作するか確認のため、手持ちの絞り込み検索プラグインを使ってデモサイトを作ってみました。
本記事ではCocoonとプラグインで作ったデモサイトを紹介します！
Cocoonに絞り込み検索機能を実装したデモサイト
Cocoonに絞込み検索機能を付けたサンプルサイトを紹介します。
サンプルサイトはCocoonのPHPテンプレートファイルを一切編集していません。
主なプラグイン
デモサイトで有効化している絞込み検索に関連するプラグインです。
Advanced Custom Fields
割と定番のプラグイン。カスタムフィールドを簡単に拡張できる機能のあるプラグインです。
デモサイトは価格や重さといったカスタムフィールドの値を絞り込み検索に使っています。
Advanced Custom Fieldsはノーコードでカスタムフィールドを管理画面上に作成できる便利なプラグインです。ダウンロード数も多く、ネット検索すると日本語でのカスタマイズ記事がかなり多いので設定に困ることはなさそう。
かんたちなみに有料版もありますが、デモサイトでは無料版の機能のみを使っています。
Code Snippets
関数系のコードを管理するプラグインです。
フックなどのカスタマイズコードを追加する場合、子テーマ内のfunctions.phpファイルに直接コードを書く方法がありますよね？
Code Snippetsはその類のコードをプラグイン側で一括管理できる役割です。子テーマ化していない環境でもカスタマイズ系のコードを簡単に管理できるメリットがあります。
本記事で紹介したデモサイトはテンプレートファイルを編集せずにCode Snippetsを活用しています。
Custom Post Type UI
Custom Post Type UIはカスタム投稿やカスタムタクソノミーを作成するプラグインです。デモサイトのコンテンツは標準の投稿を使っていますが、絞り込み用のタクソノミーを作成するために使っています。
かんたカスタム投稿といえばCustom Post Type UIというぐらいのプラグイン。
VK Filter Search Pro
絞込み検索フォーム作成用のプラグインです。カテゴリーやタグだけでなく、カスタムタクソノミーやカスタムフィールドもサポートしている高機能な国産プラグイン。
絞り込み検索機能はどのプラグイン？
デモサイトの絞り込み検索フォームは、VK Filter Search Proプラグインを使いました。
公式 絞り込み検索プラグイン「VK Filter Search Pro」
VK Filter Search Proって何だ？
VK Filter Search Proは無料テーマLightningの開発会社ベクトルが販売している有料プラグインです。有料だけあってとにかく高機能なのが特徴の1つです。
プラグインの概要
| 基本情報 | |
|---|---|
| 開発会社 | 株式会社ベクトル |
| プラグインの名称 | VK Filter Search Pro（ブイケー・フィルター・サーチ・プロ） |
| 価格 | 31,900円 （税込み価格） |
| 発売日 | 2021年4月22日 |
| 購入方法 | 公式サイトからのオンライン決済 |
| 動作環境 | WordPress 5.6以上 |
| ライセンス | GPL（複数サイトで利用可） |
他の絞り込み検索プラグインも使ってみたけど…
WordPressには絞り込み検索プラグインがいくつかあります。
仕事がら色々なプラグインを試したことがあるんですが、無料のもので満足できるものはありませんでした。有料のもので、「買い切り」「複数サイトで使える」「サポートあり」「アップデートもしてくれる」といった条件だと、VK Filter Search ProとFE Advanced Search。
かんた両方のプラグインを買ってみました。
| プラグイン名 | VK Filter Search Pro | FE Advanced Search |
| 価格 | 31,900円（税込み価格） | 59,800円（税込み価格） |
| ライセンス | 複数サイトで利用可 | 複数サイトで利用可 |
| 販売会社 | 株式会社ベクトル | 株式会社ファーストエレメント |
試した感想ですが、どちらもメチャクチャ高機能。さすが有料といったクオリティー。
VK Filter Search Proはエディター上で絞り込み検索フォームをサクッと作れる点と、コードを書かなくてもスマホ対応のレスポンシブ対応なので楽だなと感じました。
FE Advanced Searchはフォームの出力コード部分を自作できるので、こだわったデザインにしたい人には向いているかも？
かんた絞込み検索プラグインの詳しい比較は次の記事で紹介しています。
Cocoonで絞り込み検索を実装する作業の流れ
絞り込み検索はプラグインを入れれば終わりというものではありません。
デモサイトのような絞り込み検索機能をサイトに実装する流れについてです。
【手順①】絞り込みの仕様を決める
どんな検索機能オプションが必要かを決めるのが最初のステップです。
不動産サイトを例にすると、「エリア」「間取り」「こだわり条件」「駅からの距離」など、絞り込み対象となる項目を決める工程。
この工程はかなり大事です！
家づくりの設計図に相当する大事な工程。ここがしっかりしていないと、後々ものすご～く苦労します。
かんた同業者のサイトを見るなど、まずはリサーチをしっかり行いましょう！
項目を決めたら、WordPressのどの機能で分類するかを決めます。
分類
- カテゴリー
- タグ
- カスタムタクソノミー
- カスタムフィールド
カテゴリータグはCocoonに標準で付いている機能です。カスタムタクソノミーやカスタムフィールドを利用する場合はコードを書くかプラグインの追加が必要になります。
【手順②】絞り込み検索に使う項目の設定
サイト上での作業です。
まずは絞り込み検索に使う項目を設定します。
項目の設定用プラグイン
- カスタムフィールド：Advanced Custom Fields
- タクソノミー：Custom Post Type UI
カスタムフィールドを絞り込みオプションに使うケースでは、当然カスタムフィールドの設定が必要です。デモサイトではAdvanced Custom Fieldsプラグインを使い、絞り込み項目となるカスタムフィールドを作成しました。
カスタムフィールドでの絞り込みをする場合は、カスタムフィールドは数値（番号）での設定が必須です。
初期設定されているカテゴリーやタグ以外に、カスタムタクソノミーを利用する場合はCustom Post Type UIプラグインなどで必要な設定を行います。
【手順③】コンテンツに絞り込みオプションを設定
作成した絞り込みオプションをコンテンツ側に適用するステップです。
コンテンツの編集画面でカスタムフィールドやタクソノミーなどの絞り込み項目を設定します。
【手順④】絞り込み検索フォームを作る
絞り込み検索フォームをページ上に作成するステップです。
VK Filter Search Proはブロックエディター上で作成できる作りになっています。エディター上で絞り込み対象となるオプションを設置しましょう。
かんたVK Filter Search ProをCSSでオシャレにアレンジする方法は次の記事で解説しています↓
【ポイント】検索機能のあるサイトをオシャレにするテクニック！
デモサイトはPHPテンプレートファイルを一切編集していませんが、アレンジとして次のカスタマイズをしています。
ポイント
- 検索フォームを固定フッターに表示
- 検索フォームのカスタムフィールドをスライダーに変更
- 検索ボタンの位置を横並びに表示
- アーカイブページにAmazon、楽天市場のアフィリエイトリンクを設置
- アーカイブページにカスタムフィールド表示
- カテゴリーページに並び替えボタン
かんたそれぞれを解説します。
検索フォームを固定フッターに表示
「検索したけど、条件にあう情報がなかった」
検索システムを使うとありますよね？
そんな場合に即再検索できるように、検索フォームを検索ページの固定フッターに表示させました。固定フッターに表示される検索フォームは検索条件を保持させています。
「あれ？さっきどんな条件で検索したっけ？」みたいな事がない仕組みです。
フォームが出っぱなしだと、邪魔だと感じるユーザー向けにフォームの開閉ボタンを設置しています。開閉状態はクッキーに保存する仕組みのため、ページを移動しても開閉状態を維持させています。
検索フォームのカスタムフィールドをスライダーに変更
VK Filter Search Proのカスタムフィールド検索ブロックは標準だとテキスト入力形式です。
標準仕様の場合は「インプットエリアをクリックする」「数値を入力する」といった操作の流れです。少し使いずらく、ユーザーによっては、何を入力して良いか分からない可能性もあるなと感じました。
対策として直感的に操作できるよう、つまみを横にずらして数値を選択するスライダーに変更しました。
かんたユーザービリティーアップ!
検索ボタンの位置を横並びに表示
トップページと検索ページに表示する絞り込み検索の「送信する」ボタンの配置です。
VK Filter Search Proの標準仕様だと、送信ボタンは検索オプションの真下に表示されます。それほど検索オプションも多くないので、検索ボタンを絞り込みオプションと並べて表示させました。
特にフッター部分に表示するフォームのエリアが大きいと、コンテンツエリアに被ってしまいます。
かんた検索ボタンを横並びに配置することでだいぶスッキリしたデザインになりました。
アーカイブページにAmazon、楽天市場のアフィリエイトリンクを設置
カテゴリーや検索結果など、記事を一覧表示するアーカイブページのカスタマイズです。
記事へのリンクだけでなく、記事内で紹介している商品のアフィリエイトリンクを表示させました。ブログ訪問者は記事に移動することなく、Amazonと楽天市場のアフィリエイトリンクを踏める仕組みです。
アフィリエイトリンクはカスタムフィールドで設定する運用です。
アフィリエイトブログの収益をアップさせる工夫です！
かんたこのカスタマイズの詳細は次の記事で解説しています↓
アーカイブページにカスタムフィールド表示
カテゴリーや検索結果など、記事を一覧表示するアーカイブページのカスタマイズです。
商品スペックの概要を商品ページに移動しなくても把握できる仕組みとして、Advanced Custom Fields で設定したカスタムフィールドの値をアーカイブページに表示させました。
不動産サイトなんかだと定番のやつです。物件の詳細ページに移動前に、家賃や間取りなど物件の基本情報を表示する的なカスタマイズです。
かんた次の記事でカスタマイズ方法を紹介しています。
記事の表示順を並び並び替えるボタン
カテゴリーや検索結果など、記事を一覧表示するアーカイブページのカスタマイズです。
Cocoonでは標準仕様で記事が新しい順で表示されます。
価格.comなどを利用した経験のある人は多いと思いますが、絞り込み検索後に、価格順やスペック順に並べ替える時ってありますよね？
デモサイトでは価格や重さレビュー評価などの商品スペックをカスタムフィールドで作成しています。カスタムフィールドの値をもとにブログ訪問者が並び替えできるボタンを設置しました。
かんたカテゴリーページに並び替えボタンを設置する方法は次の記事で解説しています↓
FAQ
VK Filter Search Proで設定できる絞り込み検索のオプションの上限は？
上限は特にありません。
カスタムタクソノミー、カスタムフィールドなどでの絞り込み検索項目を自由に追加できます。
VK Filter Search Proはお試しできる？
無料版のVK Filter Searchがあります。機能がだいぶ違いますが、エディター上で検索フォームを作る操作性などを事前に試すことができます。
まとめ
Cocoonに使い絞り込み検索機能を実装したデモサイトを紹介しました。
プラグインを組み合わせサクッと作ってみました。ぜひ絞り込み検索機能の実装にチャレンジしてみてください！
本記事で紹介したデモサイトの環境
- WordPress:6.2.1
- Cocoon：2.6.0.3
- VK Filter Search Pro：2.0.6
