初心者SWELLで不動産業者のサイトを作りたい…
複数の条件で検索できる機能が作りたい…
作り方を教えてほしい…
そんな疑問に答えます。
SUMOとかHOMESなどの不動産サイトだと、「エリア」や「家賃」といった条件で賃貸物件を探せて便利ですよね？
ユーザーの希望する複数の条件で不動産物件を見つけるサイトを作りたい。
そんな人向けにじっさいに複数の条件で物件を探すシステム付きのデモサイトをSWELLで作ってみました。本記事ではどんな感じで不動産サイトをSWELLで作ったかをシェアします。
SWELLで作った不動産サイト
まずはSWELLで作った不動産サイトのデザイン例です↓
デモサイト
物件の検索システムはプラグインで構築
不動産サイトの定番機能と言えば、物件を検索する機能です。デモサイトではVK Filter Search Proプラグインを使い検索システムを作りました。
WordPressの絞り込み検索プラグインと言えばコレですね。
有料のFE Advanced Searchプラグインを持っていますが、VK Filter Search Proのほうが操作が簡単かつ、レスポンシブにも対応しているので個人的にお気に入りです。
かんた不動産サイト以外にも求人ポータルや、旅行代理店サイトなんかもこのプラグインで作れます。
不動産以外のサイト
公式 WordPress用絞り込み検索プラグイン VK Filter Search Proプラグイン
不動産物件コンテツの分類はタクソノミー
物件ページは投稿機能で作っています。
絞り込み検索用にCustom Post Type UIプラグインで以下のタクソノミーを作成しました。
タクソノミー
| タクソノミー名 | スラッグ | タームの一例 |
|---|---|---|
| エリア | area | 港区、新宿区、世田谷区 |
| こだわり条件 | condition | 風呂トイレ別、ペット可、オートロック |
| 建物のタイプ | building | マンション、アパート、戸建て住宅 |
| 家賃 | rent | ～5万円未満、5万円～7万円未満 |
投稿機能で物件を登録するさい、タクソノミーから「こわだり条件」、「家賃」、「エリア」、「建物タイプ」を選んでいます。
一覧情報に「抜粋」を表示するカスタマイズ
デモサイトでは検索結果やアーカイブページに表示される不動産情報に「表」を付け足しています。SWELLは標準で抜粋に入力した情報を一覧ページに表示させる機能があります。
SWELLに限らずWordPressの抜粋欄で使えるHTMLは一部制限されています。SWELLでも表を作るtableタグは使えません。デモサイトでは抜粋部分で表を使えるようカスタマイズしています。
かんたカスタマイズ方法は次の記事で詳しく解説しています。
抜粋ではなく、カスタムフィールドを出力することも可能です。
かんたカスタマイズ方法は次の記事で詳しく解説しています。
検索結果ページに「物件数」を表示するカスタマイズ
物件情報を検索したさいに「ヒットした件数を表示する」カスタマイズについてです。
テーマフォルダ内にあるsearch.phpファイルを子テーマフォルダにコピーした後、子テーマ側でタイトル部分を以下のように書き換えました。
<?php
if (isset($_GET['s']) && empty($_GET['s'])) {
echo '条件にマッチ：'.$wp_query->found_posts .'件';
}
?>関連記事エリアに同じエリアの物件を表示するカスタマイズ
投稿ページの下に表示される「関連記事」部分です。SWELL標準の仕様だと、閲覧している記事と同じカテゴリーの記事を表示する仕様になっています。
デモサイトではswell_related_post_argフックを使いタクソノミーによる類似判定を行っています。具体的には、同じエリアの物件が表示されるようにカスタマイズしています。
例えば「港区」の物件ページにある関連記事には港区の物件を表示しています。
コード
function example02($args){
$term = array_shift(get_the_terms($post->ID, 'area'));
$args['taxonomy'] = 'area';
$args['term'] = $term->slug;
return $args;
}
add_filter( 'swell_related_post_args', 'example02' );上記サンプルコードだと「area」がタクソノミースラッグです。
| タクソノミー | スラッグ |
|---|---|
| エリア | area |
独自カスタマイズ
今回の不動産サイト制作で使ったヘッダーまわりの独自カスタマイズについてです。「独自カスタマイズ」とはSWELLに搭載されている機能以外でのカスタマイズのことです。
かんた不動産サイトの検索システムとは関係がありませんが、参考までに紹介します。
独自カスタマイズ
- 問い合わせにつながる導線を設置
- サブメニューの設置
- グロナビの拡張化
- グロナビをページごとに変える
- メインビジュアルへ検索フォームを設置
- カバーブロックをちょっとオシャレにアレンジ
- 検索結果の並び順を変更する
- カスタムフィールド付きで表示する
【独自カスタマイズ①】問い合わせにつながる導線を設置
サイト訪問者が物件に興味を持ったタイミングで問い合わせができるようヘッダー部分に次の要素を配置しました。
追加した要素
- 電話番号
- 問い合わせボタン
- 内覧のご予約
この部分はSWELLの基本機能だけでは実装できないので、独自カスタマイズしました。
かんた詳しいカスタマイズ方法は次の記事で解説しています。
【独自カスタマイズ②】サブメニューの設置
ページの右上にサブメニューを設置しました。
「個人情報の取り扱い」など、ユーザーにとってそれほど優先度が高くないコンテンツへの導線です。サイト制作の仕事をしていると、わりとクライアントからリクエストのあるカスタマイズです。
SWELLだとSNSアイコンを表示する機能はありますが、テキストリンクを設置する機能がありません。
かんたサブメニューのカスタマイズ方法は次の記事で紹介しています。
【独自カスタマイズ③】グロナビの拡張化
グロナビにあるメニューにカーソルをのせると、下層のコンテンツ一覧を表示する独自カスタマイズをしています。
メガメニューというパーツです。
かんたメガメニューの追加方法は次の記事で解説しています。
【独自カスタマイズ④】グロナビをページごとに変える
デモサイトでは次のページに限りグロナビのメニューを別のものに変更しています。
別のグロナビを表示しているページ
掲載している不動産物件ではなく、運営会社に興味を持ったユーザー向けにグロナビのメニューを運営会社関連のコンテンツに切り替えています。これらのページ以外のページには共通のグロナビを表示する構成です。
SWELLの標準機能だとPCサイトのグロナビは1つだけ設定可能です。ページごとにグロナビを変更する機能はありません。
WordPressにはカスタムメニューをページごとに変えるフックが用意されています。
フックを使うと、特定のページ、特定のアーカイブページ、特定のカテゴリーに属する記事でカスタムメニューを変更できます。デモサイトではフックを使い特定のページに限りメニューを切り替えて表示しています。
かんたグロナビの詳しいカスタマイズ方法は次の記事で解説しています。
【独自カスタマイズ⑤】メインビジュアルに検索フォームを設置
VK Filter Search Proで作成した検索フォームをトップページのメインビジュアル内に設置しました。検索フォームが目立つように、背景に半透明の白いエリアを配置しています。
かんた検索フォームの設置方法は次の記事で解説しています。
【独自カスタマイズ⑥】カバーブロックをちょっとオシャレに
カバーブロックを、ちょっとおしゃれにブロークンにしてみました。テキスト部分が少し動画部分に重なっていますよね？デモサイトではカバーブロックに動画を指定していますが、画像にすることも可能です。
かんたこのカスタマイズは次の記事で解説しています。
【独自カスタマイズ⑦】検索結果の並び順を変更する
絞り込み検索したページで、さらに表示の順番を変更するカスタマイズです。
デモサイトでは以下のキーで並び替えできるボタンを設置しています。
並び替えキー
- 賃貸料（カスタムフィールド）
- 築年数（カスタムフィールド）
- 掲載日（物件を投稿した日）
- 更新日（物件を最後に更新した日）
出力ページはVK Filter Search Proプラグインではなく、サイトで有効化しているテーマのSearch.php経由です。デモサイトではSWELLの子テーマにsearch.phpをコピーしてからカスタマイズコードを加えました。
かんたVK Filter Search Proの検索結果ページに並び替えボタンを設置するカスタマイズは、次の記事で解説しています。
【独自カスタマイズ⑧】カスタムフィールド付きで表示する
トップページなどの固定ページ上に投稿リストブロックで物件情報を表示させる場合、カスタムフィールドを表示させるオプションはありません。
アーカイブページと合わせてカスタムフィールドを表示させたほうがユーザーにとって親切な設計ですよね？
かんたカスタムフィールドの表示方法は次の記事で解説しています。
【備考】デモサイトの構成
素材系の情報
デモサイトの素材は主に「AC写真」の無料素材を利用しました。
キレイなサイトを作る場合、キレイな素材があったほうが加工の手間も必要ないので楽ちんです。
レンタルサーバーの情報
デモサイトはエックスサーバーの「スタンダードプラン（旧X10プラン）」上で作成しました。
WordPressテーマ
デモサイトはSWELLを使っています。search.phpファイルのカスタマイズが必要だったので子テーマを作っています。
不動産サイトを作ったSWELLのバージョンは最新バージョンの2.5.6です。
絞り込み検索プラグイン
検索パーツは VK Filter Search Proプラグインです。
デモサイトを作ったプラグインのバージョンは最新バージョンの1.5.3です。
まとめ
WordPressテーマ「SWELL」での不動産サイトの作りかたを紹介しました。
不動産サイト作りのポイントして、「絞り込み検索の作り方」と「一覧情報」の見せ方があります。
絞り込み検索部分についてはプラグイン。一覧情報についてはSWELL標準の抜粋を使うことでテンプレートファイルを編集しないで必要な情報を追加するというテクニックがあります。
このテクニックを使いこなすだけで、難しいプログラムコードを書かなくても簡単に不動産サイトを作ることができます。
かんたぜひSWELLでの不動産サイト制作にチャレンジしてみてください。
公式 SWELLをダウンロード