SWELLでの不動産サイトの作り方をシェアします【絞り込み検索機能付き】

サイト内で検索で使われたキーワードを調べる方法
初心者

SWELLで不動産業者のサイトを作りたい…
複数の条件で検索できる機能が作りたい…
作り方を教えてほしい…

そんな疑問に答えます。

「エリア」や「家賃」といった条件で賃貸物件を探せるサイトってよく見かけますよね?

じっさいに複数の条件で物件を探すシステム付きのデモサイトをSWELLで作ってみました。本記事ではどんな感じで不動産サイトをSWELLで作ったかをシェアします。

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
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万円未満
追加したタクソノミー

「タクソノミー」はカテゴリーやタグの親戚です。
Custom Post Type UIプラグインを使うとタクソノミーを追加できます。

投稿機能で物件を登録するさい、タクソノミーから「こわだり条件」、「家賃」、「エリア」、「建物タイプ」を選んでいます。

物件登録時の作業

一覧情報に「抜粋」を表示するカスタマイズ

一覧情報に抜粋情報を表示する

デモサイトでは検索結果やアーカイブページに表示される不動産情報に「」を付け足しています。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に搭載されている機能以外でのカスタマイズのことです。

かんた

不動産サイトの検索システムとは関係がありませんが、参考までに紹介します。

独自カスタマイズ

  1. 問い合わせにつながる導線を設置
  2. サブメニューの設置
  3. グロナビの拡張化
  4. グロナビをページごとに変える
  5. メインビジュアルへ検索フォームを設置
  6. カバーブロックをちょっとオシャレにアレンジ
  7. 検索結果の並び順を変更する

【独自カスタマイズ①】問い合わせにつながる導線を設置

ヘッダーに問い合わせにつながる導線を設置

サイト訪問者が物件に興味を持ったタイミングで問い合わせができるようヘッダー部分に次の要素を配置しました。

追加した要素

  • 電話番号
  • 問い合わせボタン
  • 内覧のご予約

この部分はSWELLの基本機能だけでは実装できないので、独自カスタマイズしました。

かんた

詳しいカスタマイズ方法は次の記事で解説しています。

【独自カスタマイズ②】サブメニューの設置

ページの右上にサブメニューを設置しました。

「個人情報の取り扱い」など、ユーザーにとってそれほど優先度が高くないコンテンツへの導線です。サイト制作の仕事をしていると、わりとクライアントからリクエストのあるカスタマイズです。

SWELLだとSNSアイコンを表示する機能はありますが、テキストリンクを設置する機能がありません。

かんた

サブメニューのカスタマイズ方法は次の記事で紹介しています。

【独自カスタマイズ③】グロナビの拡張化

【独自カスタマイズ②】グロナビの拡張化

グロナビにあるメニューにカーソルをのせると、下層のコンテンツ一覧を表示する独自カスタマイズをしています。

メガメニューというパーツです。

かんた

メガメニューの追加方法は次の記事で解説しています。

【独自カスタマイズ④】グロナビをページごとに変える

グロナビ

デモサイトでは次のページに限りグロナビのメニューを別のものに変更しています。

別のグロナビを表示しているページ

掲載している不動産物件ではなく、運営会社に興味を持ったユーザー向けにグロナビのメニューを運営会社関連のコンテンツに切り替えています。これらのページ以外のページには共通のグロナビを表示する構成です。

SWELLの標準機能だとPCサイトのグロナビは1つだけ設定可能です。ページごとにグロナビを変更する機能はありません。

WordPressにはカスタムメニューをページごとに変えるフックが用意されています。

フックを使うと、特定のページ、特定のアーカイブページ、特定のカテゴリーに属する記事でカスタムメニューを変更できます。デモサイトではフックを使い特定のページに限りメニューを切り替えて表示しています。

かんた

グロナビの詳しいカスタマイズ方法は次の記事で解説しています。

【独自カスタマイズ⑤】メインビジュアルに検索フォームを設置

VK Filter Search Proで作成した検索フォームをトップページのメインビジュアル内に設置しました。検索フォームが目立つように、背景に半透明の白いエリアを配置しています。

かんた

検索フォームの設置方法は次の記事で解説しています。

【独自カスタマイズ⑥】カバーブロックをちょっとオシャレに

カバーブロック

カバーブロックを、ちょっとおしゃれにブロークンにしてみました。テキスト部分が少し動画部分に重なっていますよね?デモサイトではカバーブロックに動画を指定していますが、画像にすることも可能です。

かんた

このカスタマイズは次の記事で解説しています。

【独自カスタマイズ⑦】検索結果の並び順を変更する

VK Filter Search Pro検索結果の順番を並び替える

絞り込み検索したページで、さらに表示の順番を変更するカスタマイズです。

デモサイトでは以下のキーで並び替えできるボタンを設置しています。

並び替えキー

  1. 賃貸料(カスタムフィールド)
  2. 築年数(カスタムフィールド)
  3. 掲載日(物件を投稿した日)
  4. 更新日(物件を最後に更新した日)

出力ページは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をダウンロード

公式 WordPress用絞り込み検索プラグイン VK Filter Search Proプラグイン

よかったらシェアしてね!
  • URLをコピーしました!
もくじ
先頭へ
目次
閉じる