初心者VK Filter Search Proの使い方を知りたい..
どんなサイトが作れるかサンプルを見てみたい..
そんな疑問に答えます。
絞り込み検索プラグイン「VK Filter Search Pro」を使って不動産サイトを作る方法を詳しく解説します。次のデモサイトはVK Filter Search Proプラグインで作りました。
本記事では不動産サイトを例にVK Filter Search Proプラグインの実践的な使い方を紹介していきます。
物件の登録作業を除くと30分程度で必要な設定作業が完了します！
不動産サイトを作る事前準備
まずは、不動産サイトを作る前に次の用意をします。
必須プラグイン
必須プラグインをサイト上で有効化します。
かんたカスタムフィールドを活用したい場合は、ACFプラグインなども有効化しましょう。
WordPressはプラグインの推奨バージョン以上を用意
VK Filter Search proプラグインのWordPress推奨バージョンは5.6以上です。
WordPressテーマ
VK Filter Search Proプラグインはブロックエディター用です。
Lighting G3などのブロックエディター対応テーマを用意してください。
不動産サイトの構成案
本記事で作成方法を解説するサイトの構成についてです。
不動産物件の管理・運用
サイトに掲載する不動産物件は標準投稿（post）で管理することとします。
絞り込み検索フォームの仕様
次の4項目で絞り込み検索できるフォームを作ります。
| 絞り込みオプション | 説明 |
|---|---|
| エリア | 新宿区、港区、世田谷区などの場所。 |
| こだわり条件 | ペット可、2階以上、バス・トイレ別などの条件。 |
| 建物タイプ | マンション、アパート、戸建て。 |
| 家賃 | 毎月の家賃。 |
絞り込み検索フォームの設置場所
次の2箇所に検索フォームを設置します。
絞り込み検索フォームの設置場所
- トップページ
- 下層ページのサイドバー
VK Filter Search Proプラグインでの不動産サイトの作り方
VK Filter Search Proプラグインで不動産サイトを作成します。
かんたまずは全体の流れです。
作業全体の流れ
- タクソノミーを作る
- 物件を登録する
- 絞り込み検索フォームを作る（トップページ用）
- 絞り込み検索フォームを作る（サイドバー用）
かんた各ステップを順番に解説していきます。
①タクソノミーを作る
「タクソノミノー」って聞き慣れない言葉ですよね？
タクソノミーは情報を分類するカテゴリーやタグのようなものだとイメージしてください。タクソノミーを追加するには「テーマのコードを編集する方法」と「プラグインを使って登録する方法」があります。
タクソノミーを作る方法
- 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」と入力しましょう。
絞り込み検索オプションを設定していきます。
「カテゴリー」をクリック。
ブロックを選択すると右側にブロックのオプションが表示されます。
タクソノミーのオプションで「エリア」をクリック。
選択したエリアの選択形式を選びます。
選択形式は「プルダウン」「ラジオボタン」「セレクトボックス」の3種類から任意のものを選びます。デフォルトの選択形式はプルダウンです。それ以外の選択形式にしたい場合のみ次の作業を行ってください。
「選択形式」→任意の選択形式をクリック。
かんた他の絞り込み検索オプションも同様の手順で作成します。
④サイドバー：絞り込み検索フォームを作る
VK Filter Search Proはブロックエディター上で絞り込み検索フォームを作るプラグインです。そのため、専用のウィジェットはありません。サイドバーなどのウィジェット上び絞り込み検索フォームを設置するにはテーマ固有のパーツ・オプションを使う必要があります。
WordPressテーマ「SWELL」を例にサイドバーに絞り込み検索フォームを表示する方法を紹介します。
「ブログパーツ」→「新規追加」をクリック。
ブログパーツ上で絞り込み検索フォームを作るステップです。
「＋アイコン」→「VK Filter Search Pro」をクリック。
トップページ用に作成した絞り込み検索フォームと同様に作成してください。
サイドバーは横幅が狭いので絞り込み検索ブロック幅を「1/1」に設定しましょう。
このブロックの幅を選択オプションを全て「1/1」に変更。
全ブロックで同じ設定をしてください。
ブログパーツで作成した絞り込み検索フォームをサイドバーに設置する作業です。
「ブログパーツ」→「呼び出しコード」をコピー。
ウィジェットにコードをコピーするステップです。
「外観」→「ウィジェット」をクリック。
「カスタムHTMLウィジェット」を「共通サイドバー」に設置。
「呼び出しコード」を貼り付ける。
かんた以上で作業終了です。
サイドバーに絞り込み検索フォームが表示されているかを確認しましょう。
ここまでの作業で不動産サイトの基礎設定は終了です。
会社情報ページや問い合わせページを自由に作成しサイトをアレンジしてみてください。
VK Filter Search Proの独自カスタマイズ
VK Filter Search Proプラグインの独自カスタマイズテクニックを紹介します。
検索オプションの並び順を変更する方法
プルダウンやラジオボタンで表示される選択オプションの順番を変更する方法を解説します。
例えば上の図では「港区→世田谷区→中央区」の順で表示されています。
かんたこの順番を任意の順番に並び替える方法です。
VK Filter Search Proプラグインの機能だけでは選択オプションの並び順を変更することは出来ません。順番を変更する方法として「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！
有効化しているテーマによっては特に何もしなくても件数が表示されます。そうでない場合はサンプルのコードを出力用テンプレートの任意の箇所に追加しましょう。
検索結果ページで順番を並び替えるカスタマイズ
絞込み検索した結果のページで、検索結果を並び替えるカスタマイズです。カスタムフィールドで設定した値や、物件の投稿日、更新日で並び替えできたら便利ですよね？標準機能ではありませんが、こういった仕様も実現可能です。
カスタマイズ内容
- 家賃の「高い順・低い順」で並び替えできる
- 築年数の「新しい順・古い順」で並び替えできる
- 物件掲載日の「新しい順・古い順」で並び替えできる
- 物件更新日の「新しい順・古い順」で並び替えできる
かんた詳しくは次の記事で解説しています。
記事一覧ページにカスタムフィールドの値を表示させる
不動産サイトなんかだと定番ですね。検索結果の画面や、カテゴリー一覧のページにカスタムフィールドで入力した値を表示させるカスタマイズです。
テーマごとにやり方がことなります。
かんたSWELLについては次の記事で解説しています。
トップページにカスタムフィールド付きで投稿一覧を表示する
投稿リストブロックを使いカテゴリーごとの物件を表示させるといったケースに使えるテクニックです。トップページなどに物件一覧を表示させる時に、普通なら投稿リストブロックを使いますよね？
SWELLの投稿リストブロックにはカスタムフィールドを表示する機能はないので、上の画像のように物件の概要を表示させることはできません。
「不動産サイトだと定番なデザイン」
「なんとか実装したい」
かんたそんな場合のカスタマイズ方法は次の記事で紹介しています
カスタムフィールド検索をスライダーに変更する
VK Filter Search Proはカスタムフィールドを検索対象にすることができます。標準の出力だと、次のようにinput形式です。
選択形式にはなっておらず、ユーザー側が数値を手入力する必要があります。ユーザーによってはちょっと混乱するかも？
そんな場合はカスタムフィールド検索をスライダーに変更してしまうカスタマイズがおススメです↓
かんたスライダーへの変更方法は次の記事で解説しています。
まとめ
VK Filter Search Proプラグインを使った不動産サイトの作り方解説しました
コードを意識することなくノーコードで不動産サイトが作れますので、ぜひチャレンジしてみてください！
- 【3選】WordPress絞り込み検索プラグイン
- 【デメリット有り】WP Rocketプラグインをレビュー｜口コミ・評判を調査
- 【高速化ならこれ】爆速プラグイン「WP Rocket」の購入方法
- WordPress無料プラグインの見つけ方
- WordPress絞り込み検索プラグイン「VK Filter Search Pro」の使い方
- 【レビュー】絞り込み検索プラグイン「VK Filter Search Pro」のメリット・デメリット
- 棒・円・チャートなどのグラフを作成できる無料WordPressプラグイン「Visualizer」
- カウントダウンタイマーを設置できる無料プラグイン
- WordPress本体・プラグインをグレードダウンするプラグイン
- カラムブロック・カバーブロックにリンクを設定するプラグイン