VK Filter Search Proの使い方を解説!【絞り込み検索プラグインで不動産サイトを作る方法】

コーポレートサイト向け独自カスタマイズ
初心者

VK Filter Search Proの使い方を知りたい
どんなサイトが作れるかサンプルを見てみたい

そんな疑問に答えます。

絞り込み検索プラグイン「VK Filter Search Pro」を使って不動産サイトを作る方法を詳しく解説します。次のデモサイトはVK Filter Search Proプラグインで作りました。

デモサイト

本記事では不動産サイトを例にVK Filter Search Proプラグインの実践的な使い方を紹介していきます。

物件の登録作業を除くと30分程度で必要な設定作業が完了します!

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

不動産サイトを作る事前準備

サイトを作る前の事前準備

不動産サイトを作る前に次の用意をしてください。

必須プラグイン

WordPressはプラグインの推奨バージョン以上を用意

VK Filter Search proプラグインのWordPress推奨バージョンは5.6以上です。

本記事では最新版の5.7.2でサイトを構築しました。
WordPressのバージョンが異なると解説の画像と異なる場合があります。

WordPressテーマ

VK Filter Search Proプラグインはブロックエディター用です。

Lighting G3などのブロックエディター対応テーマを用意してください。

本記事ではWordPress有料テーマSWELL(スウェル)を使っています。

不動産サイトの構成案

不動産サイトの構成案

本記事で作成方法を解説するサイトの構成についてです。

不動産物件の管理・運用

サイトに掲載する不動産物件は標準投稿(post)で管理することとします。

VK Filter Search Proはカスタム投稿もサポートしています。
カスタム投稿で不動産物件を管理したい人は標準投稿をカスタム投稿と読み替えてください。

絞り込み検索フォームの仕様

次の4項目で絞り込み検索できるフォームを作ります。

絞り込みオプション説明
エリア新宿区、港区、世田谷区などの場所。
こだわり条件ペット可、2階以上、バス・トイレ別などの条件。
建物タイプマンション、アパート、戸建て。
家賃毎月の家賃。
絞り込み検索の仕様

絞り込みオプションを4つ以上にすることも可能です。

絞り込み検索フォームの設置場所

次の2箇所に検索フォームを設置します。

絞り込み検索フォームの設置場所

  • トップページ
  • 下層ページのサイドバー

設置できるフォームの数に制限はありません。設置する場所ごとに異なるフォームを設置することも可能です。

VK Filter Search Proプラグインでの不動産サイトの作り方

【実践】VK Filter Search proプラグインを使って不動産サイトを作る


VK Filter Search Proプラグインで不動産サイトを作成します。

かんた

まずは全体の流れです。

作業全体の流れ

  1. タクソノミーを作る
  2. 物件を登録する
  3. 絞り込み検索フォームを作る(トップページ用)
  4. 絞り込み検索フォームを作る(サイドバー用)
かんた

各ステップを順番に解説していきます。

①タクソノミーを作る

不動産サイトのタクソノミー
不動産サイトのタクソノミー

タクソノミノー」って聞き慣れない言葉ですよね?

タクソノミーは情報を分類するカテゴリーやタグのようなものだとイメージしてください。タクソノミーを追加するには「テーマのコードを編集する方法」と「プラグインを使って登録する方法」があります。

タクソノミーを作る方法

  • Custom Post Type UIプラグインを使う(初心者向け)
  • テーマを独自カスタマイズする(上級者向け)
かんた

本記事では初心者向けにプラグインを使う方法を紹介します。

上級者の人はテーマをカスタマイズし必要なタクソノミーを登録しても構いません。

新規タクソノミーを登録

物件情報を分類する「エリア」というタクソノミーを登録します。

操作内容

CPT UI」→「タクソノミーの追加と編集」をクリック。

タクソノミーを追加

ダッシュボードに「CPT UI」が表示されない場合
Custom Post Type UIプラグインを有効化しインストールしてください。

操作内容

次の必要事項を入力してください。

タクソノミースラッグ 」:適当な英文字を入力します。本記事ではlocationとしました。

複数形のラベル」:エリアと入力しました。管理画面上に表示されます。自分が覚えやすい名称にしましょう。

単数形のラベル」:単数形のラベルと同じでOKです。

利用する投稿タイプで「投稿(WPコア)」にチェックを入れます。

タクソノミーの追加

入力できたら「タクソノミーの追加」をクリックし設定を保存します。

以上の作業でタクソノミーに「エリア」が追加できました。

かんた

他のタクソノミーも同様の作業を繰り返し登録してください。

合わせて追加するタクソノミー

  • こだわり条件
  • 建物タイプ
  • 家賃

タクソノミーはいくつでも登録できます。不動産サイトなら次のような項目もユーザーにとって便利なオプションになります。

不動産サイト向けタクソノミー(任意)

  • 最寄り駅
  • 最寄り駅からの距離
  • 敷金
  • 礼金
  • 築年数
かんた

必要に応じて自由にタクソノミーを追加してください。

②不動産物件を登録する

不動産物件を投稿機能で登録していきます。

タクソノミー追加作業が完了している場合、投稿の編集ページ右手に追加したタクソノミーが表示されます。

投稿画面に表示されるタクソノミー

タクソノミーが表示されていない場合
前のステップに戻り、タクソノミーの登録作業を行ってください。

操作内容

タクソノミーを選択していきます。

エリア」→「港区」と入力。

※入力内容は任意の名称でOKです。

かんた

他のタクソノミーも同様に入力してください。

タイトル、コンテンツエリア、アイキャッチなどは自由に入力してください。

③トップページ:絞り込み検索フォームを作る

トップページに絞り込み検索フォームを作るステップです。

トップページを編集モードで開きます。

操作内容

+アイコン」→「VK Filter Search Pro」をクリック。

VK Filter Search Proブロックを挿入

VK Filter Search Proブロックが見つからない場合は、検索ボックスに「vk」と入力しましょう。

絞り込み検索オプションを設定していきます。

操作内容

カテゴリー」をクリック。

ブロックを選択すると右側にブロックのオプションが表示されます。

タクソノミーのオプションで「エリア」をクリック。

タクソノミーを選択

選択したエリアの選択形式を選びます。

選択形式は「プルダウン」「ラジオボタン」「セレクトボックス」の3種類から任意のものを選びます。デフォルトの選択形式はプルダウンです。それ以外の選択形式にしたい場合のみ次の作業を行ってください。

操作内容

選択形式」→任意の選択形式をクリック。

選択形式を選ぶ
かんた

他の絞り込み検索オプションも同様の手順で作成します。

④サイドバー:絞り込み検索フォームを作る

この作業は任意です。サイドバーに絞り込み検索フォームを設置する場合のみ作業を行ってください。

VK Filter Search Proはブロックエディター上で絞り込み検索フォームを作るプラグインです。そのため、専用のウィジェットはありません。サイドバーなどのウィジェット上び絞り込み検索フォームを設置するにはテーマ固有のパーツ・オプションを使う必要があります。

WordPressテーマ「SWELL」を例にサイドバーに絞り込み検索フォームを表示する方法を紹介します。

操作内容

ブログパーツ」→「新規追加」をクリック。

ブログパーツ上で絞り込み検索フォームを作るステップです。

操作内容

+アイコン」→「VK Filter Search Pro」をクリック。

VK Filter Search Proブロックを挿入

トップページ用に作成した絞り込み検索フォームと同様に作成してください。

サイドバーは横幅が狭いので絞り込み検索ブロック幅を「1/1」に設定しましょう。

操作内容

このブロックの幅を選択オプションを全て「1/1」に変更。

VK Filter Search Proブロックの幅を設定

全ブロックで同じ設定をしてください。

ブログパーツで作成した絞り込み検索フォームをサイドバーに設置する作業です。

操作内容

ブログパーツ」→「呼び出しコード」をコピー。

呼び出しコードをコピー

ウィジェットにコードをコピーするステップです。

操作内容

外観」→「ウィジェット」をクリック。

カスタムHTMLウィジェット」を「共通サイドバー」に設置。

呼び出しコード」を貼り付ける。

ブログパーツを設置
かんた

以上で作業終了です。
サイドバーに絞り込み検索フォームが表示されているかを確認しましょう。

ここまでの作業で不動産サイトの基礎設定は終了です。

会社情報ページや問い合わせページを自由に作成しサイトをアレンジしてみてください。

VK Filter Search Proの独自カスタマイズ

VK Filter Search Proの独自カスタマイズ

VK Filter Search Proプラグインの独自カスタマイズテクニックを紹介します。

検索オプションの並び順を変更する方法

プルダウンやラジオボタンで表示される選択オプションの順番を変更する方法を解説します。

例えば上の図では「港区→世田谷区→中央区」の順で表示されています。

かんた

この順番を任意の順番に並び替える方法です。

VK Filter Search Proプラグインの機能だけでは選択オプションの並び順を変更することは出来ません。順番を変更する方法として「Intuitive Custom Post Orderプラグイン」を使ったテクニックを紹介します。

Intuitive Custom Post OrderプラグインはWordPressプラグインディクレトリーに公開されている無料プラグインです。ダッシュボードからインストールしましょう。

選択オプションの並び順を変更する設定です。

操作内容

設定」→「並び替え設定」をクリック。

Intuitive Custom Post Orderプラグインで選択オプションの順番を変更する

並び変える対象を選択するステップです。

操作内容

すべて選択」にチェックを入れて「更新」をクリック。

並び替え設定

特定のタクソノミーのみを選択してもOKです!

並び替えをするタクソノミーのページで順番を入れ替えます。

操作内容

投稿」→「エリア」をクリック。

並び替えをする画面

ドラッグ&ドロップ操作で順番を自由に入れ替えることができます。

任意の順番に変更しましょう。

並び替えができる

この画面に表示される上から順に絞り込み検索のオプションが表示されます。

有効化しているテーマによっては今回紹介したIntuitive Custom Post Orderプラグインが動作しないことがあります。同様の機能のプラグインがありますのでお試しください。

順番を変更するプラグイン

  • Intuitive Custom Post Order
  • Custom Taxonomy Order
  • Category Order and Taxonomy Terms Order

検索結果に「件数」を表示する方法

絞り込み検索結果にマッチする物件の件数を表示するカスタマイズ方法を紹介します。

不動産物件の検索結果に件数を表示するカスタマイズ

件数を表示するには出力テンプレートのカスタマイズが必要です。対象のテンプレートに次のコードを追加します。

サンプルコード

<?php
  if (isset($_GET['s']) && empty($_GET['s'])) {
    echo '条件にマッチする物件:'.$wp_query->found_posts .'件'; 
  }
?>

テーマにSWELLを使っているならsearch.phpは次のようにコードを追加すればOKです。

<main id="main_content" class="l-mainContent l-article">
	<div class="l-mainContent__inner">
		<h1 class="c-pageTitle">
			<span class="c-pageTitle__inner">
	<?php
   if (isset($_GET['s']) && empty($_GET['s'])) {
    echo '条件にマッチする物件:'.$wp_query->found_posts .'件'; // 検索キーワードと該当件数を表示
   }
  ?>
		</span>

「条件にマッチする物件」と「件」部分は自由に文章をアレンジしてください。

初心者

対象のテンプレートって何?

かんた

検索結果を表示するテンプレートはsearch.php!

search.phpファイルがテーマ内に存在しない場合は、index.phpが検索結果の出力テンプレートになります。

有効化しているテーマによっては特に何もしなくても件数が表示されます。そうでない場合はサンプルのコードを出力用テンプレートの任意の箇所に追加しましょう。

検索結果ページで順番を並び替えるカスタマイズ

VK Filter Search Proで検索の順番を変更するカスタマイズ

デモサイト

絞込み検索した結果のページで、検索結果を並び替えるカスタマイズです。カスタムフィールドで設定した値や、物件の投稿日、更新日で並び替えできたら便利ですよね?標準機能ではありませんが、こういった仕様も実現可能です。

カスタマイズ内容

  1. 家賃の「高い順・低い順」で並び替えできる
  2. 築年数の「新しい順・古い順」で並び替えできる
  3. 物件掲載日の「新しい順・古い順」で並び替えできる
  4. 物件更新日の「新しい順・古い順」で並び替えできる
かんた

詳しくは次の記事で解説しています。

記事一覧ページにカスタムフィールドの値を表示させる

 記事一覧ページにカスタムフィールドの値を表示させる

不動産サイトなんかだと定番ですね。検索結果の画面や、カテゴリー一覧のページにカスタムフィールドで入力した値を表示させるカスタマイズです。

かんた

詳しくは次の記事で解説しています。

トップページにカスタムフィールド付きで投稿一覧を表示する

投稿リストブロックを使いカテゴリーごとの物件を表示させるといったケースに使えるテクニックです。トップページなどに物件一覧を表示させる時に、普通なら投稿リストブロックを使いますよね?

SWELLの投稿リストブロックにはカスタムフィールドを表示する機能はないので、上の画像のように物件の概要を表示させることはできません。

「不動産サイトだと定番なデザイン」

「なんとか実装したい」

かんた

そんな場合のカスタマイズ方法は次の記事で紹介しています

まとめ

VK Filter Search Proプラグインを使った不動産サイトの作り方解説しました

コードを意識することなくノーコードで不動産サイトが作れますので、ぜひチャレンジしてみてください!

よかったらシェアしてね!
  • URLをコピーしました!
目次