初心者SANGOに絞込み検索機能を付けたい…
コードを編集しないで実装したい…
SANGOと相性の良いプラグインって何？
そんな疑問に答えます。
ガジェットブログや不動産サイトでよく見かける「絞り込み検索機能」。THE THORやDIVERといった別テーマには標準で付いていますが、SANGOには付いていません。
「カテゴリーやタグなど、複数の条件で絞り込みできたら便利なのに…」
色々試したところなんとかSANGOに絞り込み検索機能を実装しました。本記事では、絞り込み機能を実装したSANGOのデモサイトと作り方を紹介します。
【デモサイト】SANGOに絞り込み検索機能を付けてみた
まずはSANGOに絞り込み検索機能を実装したデモサイトの紹介です↓
デモサイト
絞り込み検索フォームは以下2箇所に設定しました。
設置場所
- トップページのメインビジュアル
- 下層ページのサイドバー
かんたそれぞれを紹介します。
【設置場所①】トップページのメインビジュアル
トップページのメインビジュアル上に絞り込み検索フォームを設置しました。
不動産サイトや大きめのECサイトを調べてみると、トップページには簡易的なフォームが設置しているものが多く、下層ページに詳細検索用のフォームを設置しているサイトが多いなと感じました。
ファーストビューに大量の検索オプションがあると「大変そう…」という印象を持たれる可能性があります。
かんたデモサイトでも同様にプルダウン形式でスッキリまとめました。
【設置場所②】下層ページのサイドバー
サイドバーは選択オプションを全て表示し、チェックボックス形式で表示しました。チェックボックス形式のメリットは、複数の条件をまとめて検索対象にできる点です。
かんた賃貸物件を扱っている不動産サイトだとよく見かける構成です。
SANGOに絞り込み検索を取り付ける方法
デモサイトの絞り込み検索機能は、VK Filter Search Proプラグインで作成しています。ちょっとお高めのFE Advanced Searchプラグインを購入して試してみましたが、ブロックエディターに対応しているVK Filter Search Proのほうが簡単でした。
【基礎知識】VK Filter Search Proって何？
VK Filter Search ProはWordPress専用の絞り込み検索プラグインです。
WordPressプラグインは海外のデベロッパーが開発したものが多く出回っています。VK Filter Search Proは無料テーマLightningを提供している日本の法人が開発したプロダクトです。
基本情報
| プロダクト名 | VK Filter Search Pro |
| 開発事業者 | 株式会社ベクトル |
| ライセンス | 複数サイトで利用可能 |
| サポート | あり |
| ダウンロード | 公式サイト |
直感的に検索フォームを設置できる
VK Filter Search Proはブロックエディター上で検索フォームを作れるプラグインです。
専門知識がなくても、直感的に高度な検索フォームが作成できるが特徴です。
かんた以下はVK Filter Search Proの設置の様子です
絞り込み検索対象は？
VK Filter Search Proは標準のカテゴリー、タグ以外にも次の要素を検索キーにすることができます。
検索オプション
- カテゴリー
- タグ
- カスタムフィールド
- ターム
- キーワード
- 日付
Custom Post Type UIで追加したカスタム投稿やタクソノミー、Advanced Custom Fieldsで追加設定したカスタムフィールドも検索キーに設定可能。
かんた有料プラグインだけあって、高機能です。
有料ならでは安心感
僕は2021年にVK Filter Search Proプラグインを購入したんですが、この年購入した有料プロダクトの中で一番気に入っています。
満足しているポイント
- 機能＋使いやすさ
- 複数サイトで使えるライセンス
- アップデート頻度が高い
- サポートが日本語
海外製品で安い有料プラグインを使った経験があるんですが、正直使い物にならないプロダクトでお金をムダにしたことがあります。
VK Filter Search Proはお気に入りで色んなサイトに活用しています。SANGO以外のWordPressテーマでも使えます。
かんた以下はSWELLとVK Filter Search Proで作ったデモサイトです。
【備考】SANGO側での独自カスタマイズ
SANGO側で特別なカスタマイズをしなくも、VK Filter Search Proプラグインを使って絞り込み検索機能を実装することは可能でした。
少し独自性を出すためにデモサイトで実装した独自カスタマイズを紹介します。
ヒットした件数を表示する
検索条件にマッチする件数の表示は、ECサイトや不動作サイトなど絞り込み検索機能のあるサイトだと定番です。
デモサイトでも絞り込み検索でヒットした件数を表示するカスタマイズを実装しました。
デモサイトでは子テーマ化した環境で検索結果を出力テンプレートファイル（search.php）のコードを次のように編集しています。
編集前
<?php // 検索結果のテンプレート
get_header();
?>
<div id="content">
<div id="inner-content" class="wrap cf">
<h1 class="search-title"><?php fa_tag("search","search",false) ?>「<?php echo esc_attr(get_search_query()); ?>」の検索結果</h1>
//これ以降のコードを省略します
編集後
<?php // 検索結果のテンプレート
get_header();
?>
<div id="content">
<div id="inner-content" class="wrap cf">
<h1 class="search-title">
<?php fa_tag("search","search",false) ?> 検索結果：<?php echo $wp_query->found_posts; ?>件</h1>
//これ以降のコードを省略します
編集箇所は<h1>～</h1>部分です。
検索結果の並び順を変更するボタン
SANGOを含む一般的なWordPressテーマの検索結果は、投稿日の新しい順に表示されます。
掲載している情報が多い場合、不動産サイトの用に並び替えできたら便利ですよね？デモサイトでは並び替えボタンを設置し、ブログ訪問者が探している情報にアクセスしやすい構成にしました。
並び替えボタン
- 価格：高い順、安い順
- 掲載日：新しい順、古い順
かんたこのカスタマイズの方法は、次の記事で紹介しています。
検索結果とカゴリーアーカイブページにカスタムフィールドを表示
アーカイブページに記事の概要となる情報を表示するカスタマイズを実装しました。
SANGOの仕様だと投稿一覧のアーカイブページにはアイキャッチ画像とタイトル、日付しか表示されません。この部分に「ターム」と「カスタムフィールドの値」とを表示させました。
| 表示名称 | 内容 |
|---|---|
| ジャンル | ターム |
| メーカー | ターム |
| 価格 | カスタムフィールド |
かんたカスタマイズ方法は次の記事で紹介しています。
まとめ
WordPressテーマ「SANGO」に絞り込み検索機能を付ける方法を紹介しました。個人的にはVK Filter Search ProがSANGOと相性がよく簡単に検索フォームを設置できるなと感じました。
WordPressには絞り込み検索機能を作るプラグインがいくつかあります。この記事で紹介した以外のおすすめプラグインは次の記事で紹介しています。
公式 VK Filter Search Proをダウンロード
