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

初心者

SWELLって、絞り込み検索機能ないの?
不動産サイトみたいな検索機能を付けたい
地域ポータルブログに使える検索機能をつけるプラグインは?

そんな疑問に答えます。

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

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

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

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

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

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

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

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

デモサイトの検索機能は有料版プラグインの「VK Filter Search Pro」を使っています。VK Filter Search Pro は無料テーマLightningを開発した株式会社ベクトルの製品です。

VK Filter Search Proについて

出典: 株式会社ベクトル

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

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

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

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

強いてデメリットをあげるとすると、カスタムフィールドをサポートしていない点です。

かんた

VK Filter Search Proのデメリットを含むレビューは次の記事で紹介しています。

かんた

次の記事で不動産サイトを作る方法を解説しています。

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

fe-advanced-search
出典:株式会社ファーストエレメント

日本人の開発した絞り込み検索プラグインに限ると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のほうが扱いやすく気に入っています。

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

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

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

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

検索結果の表示要素

  1. タイトル
  2. アイキャッチ
  3. 抜粋、
  4. カテゴリー
  5. 投稿日
  6. 更新日
  7. 投稿者

デモサイトでは一覧に「追加情報」を表示

デモサイトでは検索結果の一覧をアレンジして、「表とレビューの星印」を追加表示しています。

検索結果のページ

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

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

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

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

かんた

SWELLの一覧表示をアレンジをしたい人は参考にしてください。

まとめ

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

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

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

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

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

かんた

ぜひチャレンジしてみてください!

よかったらシェアしてね!
もくじ
先頭へ
目次
閉じる