初心者Nishiki Proで不動産サイトって作れるの？
不動産のデモサイトを見てみたい…
作り方を知りたいなぁ…
そんな疑問に答えます。
WordPressテーマ「Nishiki Pro」を利用して不動産サイトを作れるか？
勉強のためにNishikiの有料版であるNishiki Proを使って不動産のデモサイトを作ってみました。
イメージしたのはSUMOやホームズのように、賃貸物件を複数の条件で絞り込み検索できる不動産サイトです。作成した不動産デモサイトと、作り方の覚書をシェアします。
Nishiki Proで作成した不動産サイト
まずは作成したデモサイトの紹介です。
不動産デモサイトはNishiki Proのテンプレートファイルを一切編集していません。ダッシュボードからの設定と、プラグイン、フック、CSSコードなどを追加しています。
かんたデモサイトのポイントを紹介します。
【ポイント①】ファーストビューはオーバーレイ
サイトの印象を決めるファーストビュー部分は、背景画像が画面いっぱいに広がるオーバーレイ機能を使いました。
「カスタマイザー」→「ヘッダー」→「オーバーレイ」と進み、「ヘッダーをオーバーレイにする」にチェックを入れる。
ファーストビューに絞り込み検索フォームを設置したかったので、カスタマイザー上でメインビジュアルを無効化し、トップページ用の固定上でメインビジュアル部分を作成しました。
「カスタマイザー」→「トップページ」→「メインビジュアル」と進み、「メインビジュアルを表示する」のチェックを外す。
ヘッダー右上に電話番号などの定番パーツを設置
仕事で企業サイトを制作すると、「ヘッダー右上に電話番号を付けて」という要望をクライントから受けることがよくあります。これまでの経験的に、かなりの案件で設置して欲しいと言われます。
数字で表すと「7割超え」といった肌感です。
コーポレートサイトのヘッダーには電話番号など、次のパーツを表示するのはもはやスタンダード。
ヘッダーの定番パーツ
- 電話番号
- 営業時間
- 問い合わせボタン
デモサイトのヘッダーには、上記のヘッダー定番パーツを設定しています。管理画面に専用のオプションはありませんので、Nishiki Pro独自フックのnishiki_pro_before_site_headerで設定しています。
nishiki_pro_before_site_headerはヘッダー上部に任意のHTMLコードを表示させるアクションフックです。類似のアクションフックでnishiki_pro_after_site_headerがありますが、こちらはヘッダー下部用です。
nishiki_pro_before_site_headerフック、もしくはnishiki_pro_after_site_headerでコードを出力しただけでは、デモサイトのようにロゴの右側に電話番号を表示させることはできません。
フックの追加だけでなく、スクリプトで少しコードをアレンジしています。
かんた詳しいカスタマイズは次の記事で解説しています。
【ポイント②】賃貸物件の分類はタクソノミー
WordPressの投稿は「カテゴリー」「タグ」といった分類機能がありますが、デモサイトではカスタムタクソノミーで分類しています。
タクソノミーの一例
| エリア | 渋谷区、世田谷区 |
| 条件 | オートロック完備、2階以上、ペット可 |
| 建物のタイプ | マンション、戸建て |
デモサイトのカスタムタクソノミーは無料のCustom Post Type UIプラグインで作成しました。
標準のカテゴリーやタグと比較すると、カスタムタクソノミーの方が自由度が高く、任意の分類を好きなだけ作成できるのが特徴です。
不動産サイトのように分類が多くなるコンテンツの場合は、カスタムタクソノミーを使った方が自由に拡張できるのでおすすめです。
Custom Post Type UIプラグインはWordPress公式ディレクトリーに登録されている無料プラグイン。管理画面が日本語化されていて、タクソノミーの登録は入力フォームを順番に入力していくだけ。
かんた初めての人でもそれほど難しくはないはず。
【ポイント③】アーカイブページのカスタマイズ
カテゴリー、タグ、ターム、検索結果など物件が一覧で表示されるアーカイブページのカスタマイズです。
「続きを読む」を変更する
物件にカーソルを合わせると「続きを読む」と表示される部分が、不動作サイトだとミスマッチ。「物件の詳細を見る」に変更するカスタマイズしました。
このテキスト部分はフックで変更可能です。
コード
if ( ! function_exists( 'nishiki_pro_change_translated_text' ) ) {
function nishiki_pro_change_translated_text( $translated_text, $untranslated_text, $domain ) {
if( $domain == 'nishiki-pro' ){
switch ( $untranslated_text ) {
case 'Read More':
$translated_text = '物件の詳細を見る';
break;
}
}
return $translated_text;
}
add_filter( 'gettext', 'nishiki_pro_change_translated_text', 10, 3 );
}カスタムフィールドとターム情報を表示する
アーカイブページに、各賃貸物件にひもづいた次の情報を表示させています。
表示している要素
| 賃貸料 | カスタムフィールド |
| 築年数 | カスタムフィールド |
| エリア | ターム |
不動産サイトだとよく見る構成ですが、物件の詳細ページに移動しなくても物件の概要を把握することができるメリットがあります。
デモサイトではカスタムフィールドとタームを、フックで出力しています。
他のカスタマイズでも同じなんですが、テンプレートファイルを直接編集してしまうとテーマのアップデートで設定が消えてしまいます。なるべく運用が楽になるよう、テーマはノータッチで仕上げるのが基本ポリシーです。
かんたアーカイブページにカスタムフィールドやタームなどを表示させるカスタマイズ方法は次の記事で解説しています。
【ポイント④】絞り込み検索機能の導入
「渋谷で、家賃は8万円」といった複数の条件で物件を探す「絞り込み検索機能」についてです。
賃貸物件を探すような不動産サイトだと必須の機能です。ユーザー目線で使い勝手が良く、サイト運営者が管理しやすいシステムに仕上げましょう。
デモサイトの絞り込み検索フォームは、有料プラグインのVK Filter Search Proを使っています。
理由は単純に「高機能で使い慣れているから」
Nishiki Proは標準機能で絞り込み検索機能が付いています。作成したいサイトの要件をクリアできるのであれば、ムダにお金を使わずテーマの機能で作ってしまっても良いと思います。
絞り込み検索部分をプラグインで作る場合は、プラグインの仕様を入念にチェックしましょう。
チェックポイント
- カスタム投稿に対応しているか？
- カスタムタクソノミーに対応しているか？
- カスタムフィールドを検索オプションに使えるか？
かんた主な絞り込み検索プラグインの仕様については次の記事で解説しています。
【ポイント⑤】検索結果が「0件」の場合の表示
絞り込み検索で、希望にマッチする物件がない場合に絞り込み検索フォームを表示させました。
検索フォームの設置作業は次の通りです。
作業の流れ
- 再利用コンテンツに絞り込み検索フォームを登録
- フックを追加
- CSSを追加
かんたそれぞれの作業を解説します。
【手順①】再利用コンテンツに絞り込み検索フォームを登録
再利用コンテンツに絞り込み検索フォームを設置し、作成した再利用コンテンツのショートコードをコピーします。
かんたショートコードは次のステップでフックに貼り付けます。
【手順②】フックを追加
add_action('nishiki_pro_after_search_container', function() { ?>
<div id="kanta-search-zero">
<?php echo do_shortcode( '[nishiki_pro_content id="1142"]' ) ?>
</div>
<?php });上記フックを追加します。nishiki_pro_after_search_containerフックは、検索結果の最後に任意のコードを出力する独自アクションフックです。
かんたフック内のショートコード部分は再利用ブロックのショートコードです。
【手順③】CSSを追加
#kanta-search-zero{
display:none;
}
.search-no-results #kanta-search-zero{
display:block;
}追加CSSに上記コードを書き込みます。
nishiki_pro_after_search_containerフックは検索結果ページ用のアクションです。検索結果にマッチする物件があってもなくても出力されます。
「検索結果が0件の場合だけ検索フォームを表示したい」
デモサイトの要件はコレ。
実現するために.search-no-resultsをセレクタに指定して検索結果が0件の場合のみフォームを表示させる構成にしています。
【ポイント⑥】物件の表示順を並び替えるボタン
サイト訪問者が「家賃の安い順番に並び替えよう」って時に使う機能です。
デモサイトでは、「物件の掲載日」「賃貸料」「築年数」で表示の順番を並び替えるカスタマイズをしています。
賃貸物件サイトやECサイトなんかだとよく見かけるますよね？サイト制作の仕事をしていると、クライアントからまず間違いなく導入してくれと要望される機能の1つです。
かんた並び替えボタンのカスタマイズ方法は次の記事で解説しています。
不動産サイト制作に役立つ便利な無料プラグイン
不動産制作に向いている無料のWordPressプラグインを紹介します。
Advanced Custom Fields
Advanced Custom Fieldsはカスタムフィールドを使ったコンテンツ管理をしたい人向けのプラグインです。
ブロックエディターで物件を管理するさい、エディター内に物件の情報を入力しますよね？Advanced Custom Fieldsプラグインを使うと、物件の入力画面を専用のフォームのような形式にすることができます。
「パソコンが苦手だ！」
そんなクライアント向けに、物件の入力画面をカスタマイズして納品することができます。
Advanced Custom Fields導入のメリット
- ITリテラシーの低いクライアントでも物件の登録・編集が可能
- 一定のフォーマットで物件ページを作ることができる
- 絞り込み検索のキーとして利用することができる
デモイトの「賃貸料」「築年数」部分はプラグインで作成しています。
Advanced Custom Fieldsプラグインを利用するには管理画面からの設定だけでなく、テンプレートなど出力する場所にカスタムフィールドを出力するコードを設置する必要があります。そのためPHPコードの編集の仕方が全く分からないという人には向きません。
かんた導入のハードルは少し高め。
Show Current Template
Show Current Templateプラグインは、テンプレートレベルでのカスタマイズをしたい人向けのプラグインです。
プラグインを有効化するとページ上部に使用しているテンプレート名が表示されます↓
カスタムタクソノミーで物件を分類するようなカスタマイズに挑戦している場合、出力テンプレートをその場で確認できるので、作業効率が良くなります。
かんたサイト公開後は無効化し削除して構いません。
Intuitive Custom Post Order
Intuitive Custom Post Orderはカテゴリ、タグ、タームの表示順を変更するためのプラグインです。
WordPressのカテゴリーやタームは、標準では並び替えすることができません。Intuitive Custom Post Orderプラグインを有効化すると、自分の好きな順番に並び替えすることができます。
かんたサイドバーのカテゴリーウィジェットの並び順や、絞り込み検索の選択オプションの並び替えをしたい場合に便利なプラグインです。
Intuitive Custom Post Orderはここ最近、アップデートが停止しているプラグインです。Nishiki Pro環境で動作することを確認しましたが、似たような機能のプラグインで代用しても良いと思います。
まとめ
Nishiki Proは基本機能が豊富でカスタマイズ用の独自フックも充実しています。ダッシュボードからは設定できない場所でもテンプレートを編集しないでアレンジできる拡張性の高いテーマです。
独自の機能を追加するためにWordPressテーマのテンプレートファイルを編集してしまうと、テーマのアップデートで設定が上書きされ消えてしまいます。
今回紹介したのは運用を考慮しテンプレートを一切編集しないカスタマイズです。
かんたぜひNishiki Proでの不動産サイトの制作にチャレンジしてみてください。
