初心者Snow Monkeyで不動産サイトを作りたい
Snow Monkeyで作った不動産のデモサイトを見てみたい…
絞り込み検索って、どうすれば作れるの？
そんな疑問に答えます。
WordPressテーマ「Snow Monkey」を作って不動産サイトのデモサイトを作ってみました。「家賃」や「築年数」など、不動産サイト定番の絞り込み検索を実装しています。
本記事では、Snow Mokeyでの不動産サイトの作り方をデモサイトを交えて解説します。
Snow Monkeyで作った不動産デモサイト
まずは作成した、不動産デモサイトを紹介します。
デモサイト制作で利用したプラグイン
デモサイトで使ったプラグインのリストです。
プラグイン
かんたちなみにSnow Monkeyの契約プランはスタンダードです。
物件情報はタクソノミーとカスタムフィールドで作成
物件コンテンツの作成についてです。
デモサイトでは標準投稿（post）を使っています。カスタム投稿でも問題ありません。ポイントはカスタムタクソノミーによる分類と、カスタムフィールドの使い方です。
ポイント
- カスタムタクソノミーによる分類
- カスタムフィールド
分類はカスタムタクソノミー
物件の分類はカスタムタクソノミーです。デモサイトではCustom Post Type UIプラグインでタクソノミーを設定しています。分類は絞り込み検索の設計上とても重要。
かんた後で変更するのは面倒なので、事前に入念に設計しましょう。
デモサイトでは以下のようなタクソノミーを標準投稿で利用できるようにしています。
エリア
| タクソノミー | |
|---|---|
| タクソノミー名 | エリア |
| タクソノミースラッグ | area |
| ターム | 世田谷区、渋谷区 |
エリア以外にも絞り込み検索で選択できる分類を同じように作成しています↓
こだわり条件
| タクソノミー | |
|---|---|
| タクソノミー名 | こだわり条件 |
| タクソノミースラッグ | condition |
| ターム | 2階以上、オートロック、ペット可、宅配ボックス付き（その他多数） |
詳細情報はカスタムフィールドを使う
デモサイトではAdvanced Custom Fieldsプラグインでカスタムフィールドを拡張しています。正直プラグインはなんでも構いません。
家賃や築年数といった検索結果ページで並び替えに使うものがあれば、カスタムフィールドを活用します。昇順、降順で並び替えできるよう数値限定の入力にするのがポイントです。
物件の絞り込み検索はVK Filter Search Proプラグイン
不動産サイトを作るうえで避けて通れないのが、複数条件での絞り込み検索。
デモサイトの絞り込み検索パーツはVK Filter Search Proプラグインで作成しました。
VK Filter Search Proって何だ？
VK Filter Search ProはWordPress専用の絞り込み検索プラグインです。
プラグインの基本情報
| 絞り込み検索プラグイン | |
|---|---|
| プロダクト名 | VK Filter Search Pro |
| 開発会社 | 株式会社ベクトル |
| 料金 | 31,900円（税込み価格） |
| ライセンス | GPL |
| 発売日 | 2021年4月22日 |
| ダウンロード | 公式サイト |
買い切りタイプ
VK Filter Search Proは、WordPressテーマLightningでお馴染み株式会社ベクトルのプロダクトです。
買い切りタイプのプラグインで、クライアントサイト制作といったケースでも追加料金が不要な100%GPLライセンス形態です。
他の絞り込み検索プラグインより直感的で作りやすい
WordPressの絞り込み検索プラグインだと国産のFE Advanced Search、海外製品のSearch & Filterを使った経験があります。
個人的にはVK Filter Search Proが段違いに使いやすいと感じます。
VK Filter Search Proは基本的にコードを書く必要はありません。ブロックエディター上で検索フォームに表示したいオプションを選択しながら作るといった直感的な使い方をします。
以下の動画では、ブロックエディター上で検索フォームを設定している様子を視聴できます。
かんた絞り込み検索プラグインの比較については次の記事にまとめています。
絞り込み検索フォームを固定ページ以外で表示させる方法
VK Filter Search Proの絞り込み検索フォームはブロックエディター上で作成し表示させる仕組みです。
ちょっとした工夫をすると、サイドバーのウィジェットや、テンプレートファイル上から表示させることができます。
サイドバーに絞り込み検索フォームを表示する方法
デモサイトでは絞り込み検索フォームを再利用パーツとしてサイドバーに設置しています。
ザックリした作業の流れ
- 適当な固定ページ上でフォームを作る
- フォームを再利用パーツにする
- ウイジェットで再利用パーツ（フォーム）を指定する
テンプレートファイル絞り込み検索フォームを設置する方法
絞り込み検索でマッチする物件がなかったさいに表示されるページ上など、エディターで作成できない場所にフォームを表示する場合についてです。
ザックリした作業の流れ
- 適当な固定ページ上でフォームを作る
- フォームを再利用パーツにする
- 再利用パーツのPHPコードをコピーする
- フックでフォームをを表示する
Reusable Blocks Extendedプラグインを有効化していると再利用パーツの一覧がダッシュボードに表示されます。PHPのコードが表示されているので、このコードをコピーしてテンプレートに貼り付けるか、フックから出力するという仕組みです。
カスタムフィールドの出力
デモサイトでは家賃、築年数など、物件固有の情報をカスタムフィールドに入力しています。
一覧ページにカスタムフィールドを出力するサンプルコード
カテゴリーのアーカイブページや、検索結果ページに表示される情報のカスタマイズです。
デモサイトの記事一覧レイアウトは「パネル」を選択しています（カスタマイザー内の設定）。
ベースとなるデザインにフックを使い、カスタムフィールドの値やタームを出力しています。フックを使うことで、テンプレートファイルを直接編集することなく、出力をコントールできるメリットがあります。
コード
add_filter(
'snow_monkey_template_part_render',
function( $html, $slug, $name, $vars ) {
if ( 'template-parts/loop/entry-summary/content/content' === $slug ) {
if (get_post_type() === 'post'){
$html .= '<table class="kanta-table">';
$fee = get_field('fee');
$html .= '<tr><th>賃貸料</th><td>'.$fee = number_format(get_field('fee')).'円</td></tr>';
$terms = get_the_terms($post->ID, 'area');
foreach($terms as $term):
endforeach;
$html .= '<tr><th>エリア</th><td>'.$terms = $term->name.'</td></tr>';
$age = get_field('age');
$html .= '<tr><th>築年数</th><td>'.$age.'年</td></tr>';
$html .= '</table>';
$time = get_the_date('Y年n月j日');
$mtime = get_the_modified_date('Y年n月j日');
$html .= '<p class="kanta-d"><span class="kanta-date">掲載日：'.$time.'</span>';
$html .= '<span class="kanta-mdate">（更新日：'.$mtime.'）</span></p>';
$html .= '<div class="kanta-button"><i class="fas fa-angle-right"></i>物件を見る</div>';
}
}
return $html;
},
10,
4
);
対象を標準投稿（post）に限定
デモサイトでは標準の投稿（post）で物件を投稿しています。
if (get_post_type() === 'post'){
}カスタム投稿で物件を管理している場合は任意のカスタム投稿名にしましょう。
if (get_post_type() === 'カスタム投稿'){
}例えば物件（スラッグ：bukken）といったカスタム投稿であれば以下のように条件を指定します。
if (get_post_type() === 'bukken'){
}条件を指定しないと、固定ページを除く全投稿にカスタマイズ内容が設定が反映されます。
標準投稿ではお知らせやスタッフブログ、物件情報はカスタム投稿で管理するといったケースでは必ず条件を指定しましょう。
カスタムフィールドの出力
Advanced Custom Fieldsプラグインで設定したカスタムフィールドを出力するコードのサンプルです。
カスタムフィールドに入力した築年数（age）だけを表示する場合は次のように書きます。
$age = get_field('age');
$html .= $age;htmlと合わせて表示する場合のサンプルです↓
$age = get_field('age');
$html .= '<tr><th>築年数</th><td>'.$age.'年</td></tr>';html部分をシングルクォーテーション(’)で囲み、変数やPHPを書く場合はピリオド(.)を使うのがポイントです。上のサンプルコードを分解すると次のように別れます。
'<tr><th>築年数</th><td>'.$age.'年</td></tr>'カスタムフィールドの数値をカンマ付きで表示する
カスタムフィールドで入力した賃貸料（fee）の数値をカンマで区切って表示させるコードです。
$fee = get_field('fee');
$html .= $fee = number_format(get_field('fee')); カスタムタクソノミーのタームを表示する
タクソノミーの情報を表示するコードです。
$terms = get_the_terms($post->ID, 'ターム');
foreach($terms as $term):
endforeach;
$html .= $terms = $term->name;デモサイトの「渋谷区」のように、エリア（area)タクソノミーのターム名を表示するコード↓
$terms = get_the_terms($post->ID, 'area');
foreach($terms as $term):
endforeach;
$html .= $terms = $term->name;検索結果を並び替えるボタン
物件を検索した結果ページで、物件情報を並び替えるボタンの設定についてです。
不動産サイトだと、「家賃の安い順」に並び替えるといったパターンなどが定番。デモサイトでは賃貸料と築年数をカスタムフィールドの値で並び替えるカスタマイズをしています。
掲載日は物件を投稿した日付け。更新日は最終更新日によるソートです。
かんた検索結果の並び替えは次の記事で解説しています。
ヘッダーの右上に電話番号＋問い合わせボタンを表示する
企業サイトデザインだと定番のやつです。
営業時間、電話番号、問い合わせボタンをヘッダーの右上に表示させるカスタマイズです。HTML＋CSSだけで実装する方法や、フックを使い表示させる方法があります。
PHPで動的に値を変化させるようなケースではPHPがスマートかなーと思い、試しにPHPでヘッダーをカスタマイズしてみました。
かんたヘッダーのカスタマイズは次の記事で解説しています。
まとめ
WordPressテーマ「Snow Monkey」での不動産サイトの作り方を紹介しました。
絞り込み検索部分にVK Filter Search Proを使うと、難しいコードをアレンジするスキルがなくも簡単に作れます。ぜひSnow Monkeyでの不動産サイト制作にチャレンジしてみてください！
公式 絞り込み検索プラグイン「VK Filter Search Pro」
