【SWELL】複数条件で絞り込み検索機能をつける方法｜不動産・ポータル・求人サイト向けのプラグインを紹介

そんな疑問に答えます。

WordPressテーマSWELLで不動産サイトなどでよく見る絞り込み検索機能をつける方法を紹介します。SWELLには絞り込み検索機能は付いていませんが、プラグインを活用することで初心者でも簡単に絞り込み検索機能を導入できます。

この記事では「SWELLと相性の良いプラグイン」と「プラグインを使ったデモサイト」、「デモサイトの作り方」を紹介します。

【デモサイト】SWELLに絞り込み検索機能を付けたサイト

まずはSWELLに絞り込み検索機能を搭載したデモサイトを紹介します！

SWELLと相性の良い絞り込み検索プラグイン

デモサイトの検索機能は有料版プラグインの「VK Filter Search Pro」を使っています。

公式

VK Filter Search Pro は無料テーマLightningを開発した株式会社ベクトルの製品です。

VK Filter Search Proについて

VK Filter Search Proは絞り込み検索フォームを直感的に作ることができるプラグインです。

コードを意識することなく高度な絞り込みフォームを作ることができます。パソコンだけでなく、スマホでも表示ズレしないレスポンシブコード対応。初心者でも簡単に高度な検索システムを作ることができるよう設計されている高品質なプラグインです。

海外の類似製品を使ったことがあるんですが、クオリティーが全然違います。

検索キーはカテゴリー、タグ、タクソノミー、カスタムフィールドをサポートしているので絞り込み条件に上限はありません。不動産サイトを例にすると、「地域」「家賃」「最寄り駅」「最寄り駅からの距離」「こだわり条件」といったオプションを何個でも増やすことができます。

その他の絞り込み検索プラグイン

日本人の開発した絞り込み検索プラグインに限るとFE Advanced Searchが高機能で便利なプラグインです。

VK Filter Search Proではサポートしていないカスタムフィールドによる絞り込み検索が使えます。ブロックエディター上での設定ではなく、専用の管理画面から検索フォームを作りショートコードを任意の場所に埋め込むといった使い方をします。

設定機能が多く、絞り込み検索の用語をしっかり理解している人でスマホ向けにレスポンシブコードを書けるスキルがないと導入は難しいです。スキルに自信のある人ならFE Advanced Searchのほうが自由度が高いのでおすすめです。

どちらのプグインもSWELLとの相性はOK

VK Filter Search Pro、 FE Advanced Search両プラグインを購入しSWELLで動作確認をしました。両プラグインともにSWELLで正常に動作します。

どちらのプラグインを選んでもSWELLで使えるので、あとはお好みで。

検索結果の順番を変更するカスタマイズ

VK Filter Search Proプラグインを使っている場合のカスタマイズです。

複数の条件で絞り込み検索したあとに、検索結果の順番を並び替え機能を作ってみました。

並び替え機能を付けたデモサイト

「家賃の安い順番」、「築年数の新しい順」といったキーで、検索の順番を変更する機能です。検索システムのあるサイトだと、よく見かけますよね？

Web制作の仕事でクライアントから相談を受けたことがあり、試しに実装してみました。

SWELLで一覧ページに詳細情報を追加するカスタマイズ

絞り込み検索の結果はSWELLのテンプレート（search.php）に出力されます。

SWELLの標準機能だと以下の要素が表示されます。

検索結果の表示要素

アーカイブページに「追加情報」を表示

求人情報が一覧表示されるカテゴリーやタームなどのアーカイブページのデザインについてです。デモサイトでは検索結果の一覧をアレンジして、「表とレビューの星印」を追加表示しています。

SWELLの標準機能だけではこういった表示はできません。

不動産サイトなどでは、家賃や最寄り駅などちょっとした情報を表示したいですよね？実はSWELLでもそれほど詳しいカスタマイズをしなくても、デモサイトのように任意の情報を追加表示することができます。

「抜粋機能」を使っているんですがテンプレートファイルをいじらなくても結果の一覧表示に表や任意の要素を付け足すことができます。

抜粋機能の使い方は詳しい手順については次の記事で解説しています。

抜粋ではなく、カスタムフィールドの値をそのまま出力したい場合は次の記事をご覧ください。

カスタムフィールドを投稿リストに含めて表示する方法

固定ページに、投稿リストを使って求人情報の一覧を表示させるケースについてです。

一般的な求人サイトだと、トップページにカテゴリーやエリアごとの求人案件が数件表示されています。こういった仕組みをSWELLで実現するには投稿リストブロックがおすすめです。

こんな場合に便利

SWELLの投稿リストブロックは、カテゴリーごとの表示など投稿の条件を限定して表示させる機能がついているので、適切なカテゴリー分けができていれば条件ごとに求人を分類して表示できます。

ですが、SWELLの投稿リストブロックはカスタムフィールドを表示する機能はありません。

勤務地や給料などをカスタムフィールドで管理している場合、わざわざ詳細ページに移動しなくても伝わるよう、投稿リストにもカスタムフィールドを含めて表示したいですよね？

カスタムフィールドやタームを含めて求人情報を固定ページに表示させる場合、テンプレートファイルを直接編集しない方法があります。

まとめ

WordPressテーマSWELLに絞り込み検索機能をつける方法を紹介しました。

絞り込み検索機能は不動産や求人サイトといった企業サイトだけでなく、個人が運営するアフィリエイトブログなでも便利な機能ですよね！

ガジェットブログを運営する個人ブロガーさんを良く目にしますが、絞り込み検索を導入しているサイトって見たことがありません。「有料プラグインなのでちょっと…」と感じる個人ブロガーさんが多いんだろう思います。

「ライバルサイトに差を付けたい」「差別化したい」

競合の多いジャンルで勝負しているブロガーさんにおすすめの機能です。