不動産サイトや中古車販売のようなサイトは、専用のプラグインなども販売されていますが、実は有名なプラグインを有効に利用すると、もっと使いやすいものが意外と簡単に作れるものです（面倒くさい部分はあるけど…）。
要はどういうプラグインを使ってどのように組み合わせれば不動産サイトが出来るかどうか、使えるプラグインを知っているか知らないかが重要です。
プラグインの使い方や・プラグインの紹介をしているサイトは沢山ありますが、具体的に、例えば不動産サイトを作るためにはどういうプラグインを使用すればよいのかわからないって方が意外と多いと思いますので、今回は特別に、具体的に、プラグインを使って不動産屋さんのサイトの作り方を解説致します。
殆どのプラグインは有名なものです。ただ、中には有料アドオンの購入が必要な物もあります。詳細はこれから説明していきますね。
今回の連載は長くなるので下記の様な流れで書いていこうと思います。
・第一回 色々なプラグインを使って不動産サイトの管理画面を作る
・第二回 作った管理画面から、物件一覧と物件紹介ページを作る
・第三回 物件の検索が出来るようにする
不動産サイトに必要な機能と必要なプラグインを考える
まずは、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なように下記に全てのタームを書いておきますね。「タクソノミーの選択」のセレクトを変更することを忘れないようにして下さいね。（タームの価格やスラッグ等は自由に変更して下さい。エリアは札幌のみです。全国はやってられないので…）。
地下鉄東西線$subway-tozai-line subway-tozai-line->発寒南$hassamu-south subway-tozai-line->琴似$kotoni subway-tozai-line->二十四軒$nijuyonken subway-tozai-line->西２８丁目$west-28-street subway-tozai-line->円山公園$maruyama-park subway-tozai-line->西１８丁目$west-18-street subway-tozai-line->西１１丁目$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->南郷７丁目$nango-7-chome subway-tozai-line->南郷１３丁目$nango-13-chome subway-tozai-line->南郷１８丁目$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->北１３条東$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->北３４条$north-article-34 subway-namboku->北２４条$north-article-24 subway-namboku->北１８条$north-article-18 subway-namboku->北１２条$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と同じになっています。
それでは次回をお楽しみに。
