suumoの様な不動産サイトを WorePressで作る方法!
Advanced Custom Fields

WPでsuuumoのような不動産サイトの管理画面を作る

今回は、WordPressでsuumoの様な不動産サイトを作ることを目標として、連載を書いていこうと思います。
不動産サイトや中古車販売のようなサイトは、専用のプラグインなども販売されていますが、実は有名なプラグインを有効に利用すると、もっと使いやすいものが意外と簡単に作れるものです(面倒くさい部分はあるけど…)。

要はどういうプラグインを使ってどのように組み合わせれば不動産サイトが出来るかどうか、使えるプラグインを知っているか知らないかが重要です。

プラグインの使い方や・プラグインの紹介をしているサイトは沢山ありますが、具体的に、例えば不動産サイトを作るためにはどういうプラグインを使用すればよいのかわからないって方が意外と多いと思いますので、今回は特別に、具体的に、プラグインを使って不動産屋さんのサイトの作り方を解説致します。
殆どのプラグインは有名なものです。ただ、中には有料アドオンの購入が必要な物もあります。詳細はこれから説明していきますね。

今回の連載は長くなるので下記の様な流れで書いていこうと思います。
・第一回 色々なプラグインを使って不動産サイトの管理画面を作る
・第二回 作った管理画面から、物件一覧と物件紹介ページを作る
・第三回 物件の検索が出来るようにする

不動産サイトに必要な機能と必要なプラグインを考える

まずは、suumoのサイトを参考に、不動産サイトにはどんな機能が必要か考えてみましょう

  • 画像ギャラリーや、詳細情報を載せることの出来る物件情報のページが必要
  • 上記のページの一覧のページが必要
  • 登録されている物件情報を検索することが出来る

この他にも色々と必要な機能はありますが、とりあえず大きくは上記の3つになります。

今回の第一回目の連載では、「色々なプラグインを使って不動産サイトの管理画面を作る」ということで、使用するプラグインは下記のものになります。

Custom Post Type UI 物件情報カスタム投稿を作成・検索に使う各タクソノミーを作成
WP Taxonomy Import 検索に使うタームが大量にあるので、タームを一括で登録するために使用
Advanced Custom Fields カスタムフィールドを作るために使用(有料アドオンが必要)
Category Order and Taxonomy Terms Order タームの並び替えに使用
Duplicate Post 今回はサンプルサイトを作成する為、物件情報(投稿)を複製するために使用

上記を上手く組み合わせれば、不動産屋さんのサイトが出来上がります。

では、具体的な作業に入っていきましょう。
今回は、suumoの札幌バージョンの不動産サイトを作っていきます(全国だとタームとかの入力大変すぎるので)。

一番最初にやる事Custom Post Type UIで物件情報のカスタム投稿を作成

Custom Post Type UIの使い方を知らない人はもういないんじゃないかと思いますので、簡単に説明していきます。
まず、プラグインを入れて有効化したら、管理画面左側のメニューから【CTP UI】の【ADD/Edit Post Types】を選択。
【Manage Post Types】という画面の【Add New Post Type】のタブから下記の(図.1)のように設定して下さい。
(built-in Taxonomiesの部分はこのあと作るので無視して下さい。)(全体画像ですので長いですよ…)

Custom Post Type UIで、検索に使うタクソノミー・タームを作成

まずタクソノミーを作りましょう。suumoを例にすると、必要なタクソノミーは下記になります。
下記のタクソノミーは絞込検索用に用意をしておきます。

賃料 管理費・共益費 駐車場代 礼金・保証金 他諸費用 賃料検索用 駅徒歩 間取りタイプ 建物種別 築後年数 専有面積 人気のこだわり条件 構造 表示情報 位置 室内設備 冷暖房冷暖房 バス・トイレ キッチン 建物設備 セキュリティ 入居条件 テレビ・通信 収納 周辺環境 その他 お得条件 最寄り駅 エリア

では、上記のタクソノミーをCustom Post Type UIで作っていきます。スラッグはお好みで。
【CTP UI】の【Add/Edit Taxonomies】の【Add New Taxonomy】から(図.2)の様に設定して下さい。今回は賃料を例にしてみました。コレをタクソノミーの数だけやります(ココらへんが手間ですね)。

コレを繰り返すと、検索用のタクソノミーが出来ます。ちょっと面倒くさいですが、検索機能をつけるために必要です。

WP Taxonomy Importでタームを一括登録

タームは上記で作ったタクソノミー以上に数が合って大変です。そこで、タームを一括で登録できる「WP Taxonomy Import」というプラグインを使いましょう。
タームを一括登録できるプラグインWP Taxonomy Importの使い方 – 詳細はコチラ

【設定】【Taxonomy Import】から各タクソノミーにタームを入れていきます。
WP Taxonomy Import方式で書いていくと、suumoのタームは下記のようになります。
コピペでOKなように下記に全てのタームを書いておきますね。「タクソノミーの選択」のセレクトを変更することを忘れないようにして下さいね。(タームの価格やスラッグ等は自由に変更して下さい。エリアは札幌のみです。全国はやってられないので…)。

コピペ OK WP 「Taxonomy Import」suumo仕様
最寄り駅
	地下鉄東西線$subway-tozai-line
	subway-tozai-line->発寒南$hassamu-south
	subway-tozai-line->琴似$kotoni
	subway-tozai-line->二十四軒$nijuyonken
	subway-tozai-line->西28丁目$west-28-street
	subway-tozai-line->円山公園$maruyama-park
	subway-tozai-line->西18丁目$west-18-street
	subway-tozai-line->西11丁目$nishi-11-chome
	subway-tozai-line->大通$odori
	subway-tozai-line->バスセンター前$bus-center-before
	subway-tozai-line->菊水$kikusui
	subway-tozai-line->東札幌$Higashisapporo
	subway-tozai-line->白石$shiraishi
	subway-tozai-line->南郷7丁目$nango-7-chome
	subway-tozai-line->南郷13丁目$nango-13-chome
	subway-tozai-line->南郷18丁目$nango-18-chome
	subway-tozai-line->大谷地$oyachi
	subway-tozai-line->ひばりが丘$hibarigaoka
	subway-tozai-line->新札幌$shin-sapporo
	subway-tozai-line->宮の沢$miyanosawa
	地下鉄東豊線$subway-toho
	subway-toho->新道東$shindohigashi
	subway-toho->元町$motomachi
	subway-toho->環状通東$kanjodorihigashi
	subway-toho->東区役所前$higashikuyakushomae
	subway-toho->北13条東$north-13-johigashi
	subway-toho->札幌$sapporo
	subway-toho->豊水すすきの$hosui-susukino
	subway-toho->学園前$gakuenmae
	subway-toho->豊平公園$toyohira-park
	subway-toho->美園$misono
	subway-toho->月寒中央$tsukisamu-center
	subway-toho->福住$fukuzumi
	subway-toho->栄町$sakaemachi
	地下鉄南北線$subway-namboku
	subway-namboku->北34条$north-article-34
	subway-namboku->北24条$north-article-24
	subway-namboku->北18条$north-article-18
	subway-namboku->北12条$north-article-12
	subway-namboku->すすきの$susukino
	subway-namboku->中島公園$nakajima-park
	subway-namboku->幌平橋$horotairakyo
	subway-namboku->中の島$nakanoshima
	subway-namboku->平岸$hiragishi
	subway-namboku->南平岸$south-hiragishi
	subway-namboku->澄川$sumikawa
	subway-namboku->自衛隊前$jieitaimae
	subway-namboku->真駒内$makomanai
	subway-namboku->麻生$azabu
	

エリア

	札幌市中央区$chuo-ku
	札幌市北区$kita-ku
	札幌市東区$higashi-ku
	札幌市白石区$shiroishi-ku
	札幌市豊平区$toyohira-ku
	札幌市南区$minami-ku
	札幌市西区$nishi-ku
	札幌市厚別区$atsubetsu-ku
	札幌市手稲区$teine-ku
	札幌市清田区$kiyota-ku
	

賃料

	3万円台$over-30000
	3.5万円台$over-35000
	4万円台$over-40000
	4.5万円台$over-45000
	5万円台$over-50000
	5.5万円台$over-55000
	6万円台$over-60000
	6.5万円台$over-65000
	7万円台$over-70000
	7.5万円台$over-75000
	8万円台$over-80000
	8.5万円台$over-85000
	9万円台$over-90000
	9.5万円台$over-95000
	10万円台$over-100000
	10.5万円台$over-105000
	11万円台$over-110000
	11.5万円台$over-115000
	12万円台$over-120000
	12.5万円台$over-125000
	

管理費・共益費

	1千円台$over-1000
	2千円台$over-2000
	3千円台$over-3000
	4千円台$over-4000
	5千円台$over-5000
	6千円台$over-6000	
	7千円台$over-7000
	8千円台$over-8000
	9千円台$over-9000
	1万円台$over-10000
	2万円台$over-20000
	3万円台$over-30000
	4万円台$over-40000
	5万円台$over-50000
	10万円台$over-100000
	

駐車場代

	5千円台$over-5000
	1万円台$over-10000
	1万5千円台$over-15000
	2万円台$over-20000
	2万5千円台$over-25000
	3万円台$over-30000
	3万5千円台$over35000	
	4万円台$over-40000
	4万5千円台$over-45000
	5万円台$over-50000
	10万円台$over-100000
	

礼金・保証金

	3万円台$30000
	3.5万円台$35000
	4万円台$40000
	4.5万円台$45000
	5万円台$50000
	5.5万円台$55000
	6万円台$60000
	6.5万円台$65000
	7万円台$70000
	7.5万円台$75000
	8万円台$80000
	8.5万円台$85000
	9万円台$90000
	9.5万円台$95000
	10万円台$100000
	10.5万円台$105000
	11万円台$110000
	11.5万円台$115000
	12万円台$120000
	12.5万円台$125000
	

他諸費用

	3万円台$30000
	3.5万円台$35000
	4万円台$40000
	4.5万円台$45000
	5万円台$50000
	5.5万円台$55000
	6万円台$60000
	6.5万円台$65000
	7万円台$70000
	7.5万円台$75000
	8万円台$80000
	8.5万円台$85000
	9万円台$90000
	9.5万円台$95000
	10万円台$100000
	10.5万円台$105000
	11万円台$110000
	11.5万円台$115000
	12万円台$120000
	12.5万円台$125000
	

賃料検索用

	管理費・共益費込み$m-expenses-included
	駐車場代込み$parking-badai-included
	礼金なし$no-key-money
	敷金・保証金$no-deposit
	ほか初期費用なし$no-initial-cost
	

駅徒歩

	1分以内$within-1-minutes
	5分以内$within-5-minutes
	7分以内$within-7-minutes
	10分以内$within-10-minutes
	15分以内$within-15-minutes
	20分以内$within-20-minutes
	

間取りタイプ

	ワンルーム$one-room
	1K$1k
	1DK$1dk
	1LDK$1ldk
	2K$2k
	2DK$2dk
	2LDK$2ldk
	3K$3k
	3DK$3dk
	3LDK$3ldk
	4K$4k
	4DK$4dk
	4LDK$4ldk
	5K以上$over-5k
	

建物種別

	マンション$mansion
	アパート$apartment
	一戸建て・その他$residential-home_other
	

築後年数

	40年$40
	39年$39
	38年$38
	37年$37
	36年$36
	35年$35
	34年$34
	33年$33
	32年$32
	31年$31
	30年$30
	29年$29
	28年$28
	27年$27
	26年$26
	25年$25
	24年$24
	23年$23
	22年$22
	21年$21
	20年$20
	19年$19
	18年$18
	17年$17
	16年$16
	15年$15
	14年$14
	13年$13
	12年$12
	11年$11
	10年$10
	9年$9
	8年$8
	7年$7
	6年$6
	5年$5
	4年$4
	3年$3
	2年$2
	1年$1
	新築$0
	

専有面積

	20㎡台$20-square-meters
	25㎡台$25-square-meters
	30㎡台$30-square-meters
	35㎡台$35-square-meters
	40㎡台$40-square-meters
	45㎡台$45-square-meters
	50㎡台$50-square-meters
	55㎡台$55-square-meters
	60㎡台$60-square-meters
	65㎡台$65-square-meters
	70㎡台$70-square-meters
	80㎡台$80-square-meters
	90㎡台$90-square-meters
	100㎡台$100-square-meters
	

人気のこだわり条件

	バス・トイレ別$separated-bath-and-toilet
	2階以上$2th-or-higher-floor
	駐車場あり$parking-available
	室内洗濯機置場$washing_machine_yard
	エアコン付き$ac
	ペット相談可$pet-ok
	オートロック$auto-lock
	洗面所独立$seperate
	

構造

	鉄筋系$rebar
	鉄骨系$steel-frame
	木造$wooden
	ブロック・その他$block_other
	

表示情報

	間取り図付き$floor-plan
	写真付き$photo
	物件動画付き$animation
	本日の新着物件$todays-new
	新着(2-7日前)$2-7days-ago
	

バス・トイレ

	バス・トイレ別$bus-and-restroom
	温水洗浄便座$washing-toilet
	浴室乾燥機$bathroom-dryer
	追い焚き風呂$reheating
	

冷暖房

	エアコン付き$ac
	床暖房$floor-heating
	灯油暖房$kerosene-heater
	ガス暖房$gas-heating
	

キッチン

	ガスコンロ対応$gas-stove
	IHコンロ$ih	14
	コンロ2口以上$twogas-stove
	オール電化$all-electric	
	システムキッチン$system-kitchen
	

建物設備

	駐車場あり$parking
	駐車場2台以上$two-more-parking
	敷地内駐車場$on-site-parking
	駐輪場あり$bicycle-parking
	バイク置場あり$bike-shelter
	エレベーター$elevator
	宅配ボックス$delivery-box
	敷地内ゴミ置場$on-site-waste-yard
	バルコニー付$balcony
	ルーフバルコニー付$roof-balcony
	専用庭$private-garden
	都市ガス$city-gas
	プロパンガス$propane-gas
	

セキュリティ

	オートロック$auto-lock
	管理人あり$custodian
	TVモニタ付きインタホン$tv-monitor-interphone
	防犯カメラ$surveillance-camera
	

入居条件

	即入居可$immediate-available
	女性限定$women-only
	ペット相談可$pets-considered
	楽器相談可$instrument-negotiable
	事務所利用可$office-available
	ルームシェア可$room-share-allowed
	カスタマイズ可$customizable
	DIY可$diy-allowed
	定期借家を含まない$not-include-fixed-term-lease
	

収納

	床下収納$underfloor-storage
	シューズボックス$shoe-box
	トランクルーム$trunk-room
	ウォークインクローゼット$walk-in-closet
	

テレビ・通信

	インターネット接続可$net-connection
	BSアンテナ$bs
	CSアンテナ$cs
	ケーブルテレビ$cable-tv
	インターネット無料$net-free
	

周辺環境

	ショッピングセンター$shopping-centre
	スーパー$supermarket
	コンビニ$convenience-store
	幼稚園・保育園$kindergarten-and-nursery-schools
	病院$hospital
	警察署・交番$police
	公園$park
	

その他

	デザイナーズ物件$designer-property
	IT重説 対応物件$heavy-theory-corresponding-properties
	分譲賃貸$sale-rent
	保証人不要$guarantor-unnecessary
	タワーマンション$tower-mansion
	リフォーム済み$renovated
	リノベーション物件$renovation-property
	

位置

	1階の物件$1st-floor
	2階以上$2-floor-and-above
	最上階$top-floor
	角部屋$corner-room
	南向き$facing-south
	

室内設備

	室内洗濯機置場$laundry-area
	洗面所独立を選択$seperate
	フローリング$flooring
	メゾネット$maisonette
	ロフト$loft
	防音室$soundproof-room
	地下室$basement
	家具付$furnished
	家電付$consumer-electronics
	

やっと終わりです…(-o-;)ゼーゼー
コレでsuumoの検索分のタームの制作が完了です。全国でやるとなるとゾッとしますね

この部分は検索用に使いますので、今回の連載1回目ではあまり関係がありませんが2回目の検索部分でとても大切になります。

Advanced Custom Fields有料アドオンについて

次に、先ほど作成した物件紹介のカスタム投稿にカスタムフィールドを設定していきます。
カスタムフィールドの作成は、泣く子も黙るAdvanced Custom Fieldsです。

ただ、今回は写真ギャラリーや、入力項目の一部で、無料のAdvanced Custom Fieldsだけでは対応しきれない部分が出てきますので、今回はAdvanced Custom Fieldsの出している有料のアドオンを使用致します。

使用する有料アドオンは下記の2つ

詳しい使用方法は、各リンクを参考にして下さい。

Advanced Custom Fieldsの有料アドオンは、一つ$25で、その他にも

  • オプションページ  ウェブサイト全体で使用できるグローバルデータを作成します。
  • 柔軟コンテンツフィールド  柔軟なコンテンツレイアウト管理により、すてきなデザインを作成します。

というアドオンも用意されています。
コチラも凄く使えるアドオンですので、もしあなたがホームページ制作のプロなら全てを買っておくべきだと思いますよ。
全てが入った、Advanced Custom Fields Proというものが$100で購入できます。

素人の方で、コレきり使わないよーって方は、繰り返しフィールドを$25で購入すると、1サイト限定ライセンスで4っつのアドオン全てが使えるようになります。
詳しくは『Advanced Custom Fieldsの有料アドオンの購入』を御覧ください

物件紹介ページのカスタムフィールドを作る

では、上記の「Advanced Custom Fields有料アドオンについて」を読んで頂いた前提で、Advanced Custom Fieldsに設定していく項目をプリントスクリーンでそのままお見せしますので、同じように設定して下さい。
物凄く長い画像になりますので覚悟して下さい。
それでは、(図.3-1)(図.3-2)をご覧頂きそのまま設定して下さい

上記の様に設定していただきますと、物件紹介の作成ページは(図.4)のようになります。
(図.4)は情報が既に入っている状態です。

どうでしょう。プラグインを上手く組み合わせると、そこら辺で配布している不動産専用プラグインとして出しているものより、私としてはずっと使いやすい管理画面が出来上がると思います。
更に、何より嬉しいのが、有名なプラグインを使用していますので、アップデートなどもマメにしてくれます。ネット上に情報もあふれています。

最後に、上の方でご紹介した「Category Order and Taxonomy Terms Order」はタームの並び順が狂った時の調整に。
「Duplicate Post」は、今回はサンプルサイトだったため、同じページを複数用意する必要があったために使用しました。もし同じようなページを沢山作りたい時は便利ですよ。

第一回まとめ

第一回は、物件紹介の管理画面を作るまでを解説いたしました。画像をそのままお見せしたのでそのままやれば(図.4)の様な状態に割と簡単にすることが出来ると思ったのですがいかがでしょうか。

次の第二回では、これを実際に表示する方法を書いていこうと思います。
今回はあくまでもsuumoの真似っ子ですので、表示する内容はsuumoと同じになっています。
それでは次回をお楽しみに。

著者