ToolsetRealEstateとOceanWPを使用して不動産ウェブサイトを構築する方法

公開: 2019-07-21

不動産のウェブサイトはあなたが売っている家と同じくらい安定していて信頼できる必要があります。

しかし、ユーザーが楽しめる頑丈な不動産Webサイトを構築することは、間違ったツールセットを使用した場合、販売している家を構築するのと同じくらい難しい場合があります。

幸いなことに、Toolset Real EstateとOceanWPを組み合わせると、必要になる可能性のあるすべての機能を備えたプロの不動産Webサイトが提供されることが証明されています。

このガイドでは、次の機能を構築する方法を説明します。

さまざまなプロパティとエージェントのカスタム投稿タイプ
バスルームの数などの情報を追加するためのカスタムフィールド
特徴（一戸建て、バンガローなど）に基づいてプロパティを分離するための分類法
同じ構造でプロパティを表示するためのテンプレート
プロパティの画像を表示するスライダー
不動産業者と彼らが担当する不動産をリンクするための事後関係
ユーザーが自分に最適な物件を簡単に見つけられるようにするための検索
プロパティと検索結果の場所を表示するマップ
ユーザーが自分の物件リストを送信できるようにするフロントエンドフォーム

これらの手順を読みながら実行したい場合は、ToolsetとOceanWPによって構築された独自の無料のテスト不動産Webサイトを使用できます。

ToolsetRealEstateとOceanWPを使用している理由

Toolset Real EstateはToolsetの一部であり、複数のタイプのプロフェッショナルWebサイトを構築するために必要なすべての機能を提供します。

具体的には、Toolset Real Estateを使用すると、不動産Webサイトに必要な機能を追加するために他のプラグインは必要ありません。これは、プラグインの互換性や、プラグインの数が非常に多いためにWebサイトの速度が低下するかどうかを心配する必要がないことを意味します。

一方、OceanWPは、ビジネスWebサイトで最も人気のあるテーマの1つです。 OceanWPが運営するウェブサイトは、コンバージョン率が高く、読み込み時間が短く、SEOが向上しているため、住宅購入者はウェブサイトを簡単に見つけることができます。

Toolset Real EstateとOceanWPは連携してシームレスに連携します。つまり、心配することなく見栄えのする堅牢なWebサイトを構築できます。

ToolsetとOceanWPを使用して構築されたテストWebサイトを無料でダウンロードして、実験することができます。

始めるために必要なもの

Toolsetを使用してカスタム不動産サイトを構築する場合は、次のToolsetプラグインが必要です。

ツールセットタイプ–プロパティとエージェントのカスタム投稿タイプ、フィールド、分類法を設定するため
ツールセットブロック–サイトのフロントエンドを設計するため（テンプレートやプロパティの検索など）
ツールセットマップ–マップ上のプロパティの検索と表示を可能にする機能を追加するため
ツールセットフォーム–エージェントがカスタムフロントエンドフォームを介してプロパティを管理できるようにするため
ツールセットアクセス–サイトの訪問者、クライアント、およびエージェントのどの部分にアクセスできるかを制御します

これらのコンポーネントをインストールして登録したら、不動産Webサイトの構築を開始します。

1.カスタム投稿タイプを作成します

まず、「家」セクションのカスタム投稿タイプを作成して、ユーザーがそれらを表示する場所を正確に把握できるようにする必要があります。
1. WordPress管理者の[ツールセット] →[ダッシュボード]に移動し、[新しい投稿タイプの追加]をクリックします。

2.次に、投稿タイプに名前を付けて、管理メニューに表示する位置に保存する必要があります。

3.[投稿タイプの保存]をクリックします。

以上です。あなたの家のカスタムポストタイプは準備ができています。

2.カスタムフィールドを作成します

カスタム投稿タイプができたので、いくつかのカスタムフィールドを追加する必要があります。カスタムフィールドは、各家とその機能を説明するために入力するセクションのテンプレートを構成します。

たとえば、バスルームの数、価格、物件が建てられた年のセクションが必要になります。

ツールセットダッシュボードで、作成した「家」カスタム投稿タイプの横にある[カスタムフィールドの追加]をクリックします。

2. [新しいフィールドの追加]ボックスがポップアップ表示され、必要なカスタムフィールドのタイプを選択できます。たとえば、「ビルド年」のカスタムフィールドは数字になります。

3.フィールドごとに、情報の入力が必須かどうかなどのオプションを設定する必要があります。

4.フィールドのすべての優先オプションを入力したら、[新しいフィールドの追加]をクリックして、グループ内の次のフィールドに移動します。フィールドグループのすべてのフィールドを追加したら、[フィールドグループの保存]をクリックします。

これで、「家」の投稿を編集するたびに、入力するこれらのフィールドが表示されます。

3.カスタム分類法を作成します

カスタム分類法は、プロパティを分離するための優れた方法であり、ユーザーは自分の基準に一致するプロパティを簡単に見つけることができます。たとえば、賃貸ではなく売りに出されている家だけを見たい場合です。

その例を取り上げて、販売中の家と賃貸用の家を区別するための分類法を作成する方法を次に示します。

ツールセットダッシュボードで、[家]行の[カスタム分類法を追加]をクリックします。
ボックスに次のように入力します
1. 複数形の名前：プロパティタイプ
2. 単数名：プロパティ機能
3. スラッグ：プロパティ機能
分類法を階層化するかフラットにするかを選択します。これの目的のために、私たちはそれを平らに保ちます。
分類法を関連付ける投稿タイプを選択します。この場合は「家」になります。
[分類法を保存]をクリックします

これで、「家」の投稿タイプを編集または作成するときに、投稿タイプに関連付ける「プロパティタイプ」の分類法を作成および選択できます。

4.プロパティを表示するためのテンプレートを作成します

これで、プロパティを表示するために必要なコアコンポーネントができましたが、プロセスの重要な部分が残っています。フロントエンドでそれらをどのように表示するのでしょうか。

ここで、各家を表示するために使用できるテンプレートを作成します。

単一の「家」のテンプレートを作成するには、WordPressブロックエディターでツールセットブロックを使用します。

ツールセットブロックを使用すると、カスタムフィールドと分類法を使用して、カスタム投稿タイプのテンプレートを設計できます。 HTML、CSS、JavaScript、PHPは必要ありません。

[ツールセット]→[ダッシュボード]に移動し、[家]行の[コンテンツテンプレートの作成]ボタンをクリックします。
WordPressブロックエディターを使用してテンプレートをデザインします。
（静的要素ではなく）フィールドを表示するテンプレートの任意の部分について、[ツールセット]セクションからブロックを選択します。たとえば、フィールドを表示する見出しには、ツールセットの見出しブロックを使用します。 Toolsetは、WordPressコアおよび最も人気のあるサードパーティプラグインからの動的コンテンツを表示するオプションを追加します。
テンプレートが表示する投稿のフィールドを表示するブロックの動的ソースを有効にします。

テンプレートはさまざまな方法で変更およびスタイル設定できます。たとえば、コンテンツを列に配置したり、テンプレートの一部を条件付きで表示したり、関連する投稿のリストを表示したりすることができます。

5.プロパティ画像を表示するダイナミックスライダーを作成します

スライダーは、それぞれの複数の画像を表示することにより、プロパティを紹介するための優れた方法です。

Toolsetを使用すると、複雑なPHPコーディングを行わなくても、トランジションを特徴とする複雑なスライダーを簡単に作成できます。

ページ、投稿、またはテンプレートを編集または作成したら、 Viewブロックを挿入して、新しいビューを作成します。
ビュー作成ウィザードでページネーションを有効にし、 [ビューループスタイルの選択]セクションで[フォーマットされていない（最後の）]オプションを選択します。
最後のステップで、投稿を表示する投稿タイプを選択します。
クリックしてウィザードを終了すると、ビューの準備が整います。

各プロパティに関連付けられた画像を表示するように動的に設定されたスライダービュー

投稿フィールドの表示とカスタムスタイルの適用

スライダーに背景を追加できるように、 Containerブロックを挿入します。たとえば、スライドの背景を、投稿の注目画像からの動的画像に設定できます。
ツールセットブロックを使用して、投稿タイトルなどの他の動的フィールドをスライダーに追加します。

ツールセットスライダーを使用すると、投稿フィールドの表示やカスタムスタイルの適用に加えて、ビュースライドの自動作成やページネーションスタイルの変更など、他のさまざまなオプションを使用してスライダーを微調整できます。

6.あなたの家とあなたのエージェントをつなぐための事後関係を作りましょう

投稿の関係は、ウェブサイトの重要でありながら過小評価されている部分です。投稿の関係を使用すると、さまざまな種類のコンテンツを相互に接続できます。

ツールセットとOceanWPを使用して投稿関係を作成するためのガイドを確認してください。

私たちの不動産ウェブサイトには、住宅や不動産業者がいます。それらの間に投稿関係を作成しましょう。

投稿関係を作成する

[ツールセット]→[リレーションシップ]に移動し、上部にある[新規追加]をクリックします。
ツールセット関係ウィザードが開きます。私たちのエージェントとプロパティについては、1人のエージェントが複数のプロパティを担当するため、「1対多の関係」が必要です。
関係を形成する投稿タイプを選択します。

4.割り当てることができる投稿の数を制限するかどうかを選択します。たとえば、各エージェントに最大20の家だけを割り当てたい場合があります。

5.関係に名前を付けます。

6.関係を確認し、[完了]をクリックします。

エージェントにプロパティを割り当てる方法

これで、不動産と不動産業者の間に特定のつながりを作り始めることができます。

管理メニューからエージェントのページに移動します
ページの下部に「エージェントプロパティ」という新しいセクションが表示されます。 [既存のプロパティを接続]をクリックし、入力してプロパティの名前を見つけるか、使用可能なリストから選択します。

*エージェントのプロファイルページ内からエージェントが管理するプロパティにエージェントを接続する*

3.[更新]をクリックして投稿を保存します。これで、エージェントのページにアクセスすると、エージェントに接続しているすべてのプロパティが一覧表示されます。また、これらのプロパティのページの1つを編集すると、関係が両端に表示されていることがわかります。エージェントはプロパティのページにも表示されます。

投稿の関係を表示するビューを作成する

投稿関係のリストを表示するには、次の2つの方法があります。

1対多および多対多の関係にある「多」関連の投稿のリストを表示します。
1対多の関係では、「1」側に属するフィールドを表示します。

多くの関連アイテムを表示する

この例では、エージェントには多くのプロパティがあるため、ビューを使用してそれらを表示します。

「エージェント」コンテンツテンプレートに移動します
ビューブロックを挿入し、新しいビューを作成します
必要な投稿タイプ（つまり、プロパティ）を表示する場合に選択し、次に、現在のエージェントに属するプロパティを表示するオプションを選択します。
ブロックを使用して、ビューの出力を設計します。ビューはすでに関連する投稿を表示するように設定されているため、動的コンテンツの表示に使用するブロックで関係を選択する必要はありません。

7.高度な検索を追加して、ユーザーが最適なプロパティを簡単に見つけられるようにする方法

高度なカスタム検索は、ユーザーが探しているものを正確に見つけるための最良の方法です。複数のフィルターを使用すると、個人的な要件に基づいて最適な家を選択できるようになります。

ビューブロックをページに挿入することから始めます。
ビュー作成ウィザードで、[検索]オプションを有効にします。

3.次のページで、[このビューに表示されるコンテンツの選択]の下の[プロパティ]を選択します。

4.ビュー作成ウィザードが終了すると、ビューの編集領域に[ビュー検索]セクションが表示されます。使用可能なボタンを使用して、カスタム検索フィールドを追加したり、送信ボタンとリセットボタンを挿入したり、他のブロックを追加したりします。

たとえば、[検索フィールドの追加]をクリックして、 [フィールドの選択]ドロップダウンを使用できます。ユーザーが検索できるようにするコンテンツタイプを選択し、[次へ]をクリックします。

5.これで、右側のサイドバーを使用して、この検索フィールドのオプションを微調整できます。これには、メインフィールドの設定、ラベル、スタイルのオプションが含まれます。

6.これで、結果が表示されるセクションを作成する準備が整いました。これを行うには、エディターの[ビューループ]領域にブロックを追加します。

7.[ブロックの追加]をクリックします。

8.検索結果の一部として使用するブロックを選択します。たとえば、 Headingブロックを使用して、検索結果にプロパティのタイトルを表示できます。

オレンジ色のツールセットブロックを使用することを忘れないでください。これにより、フィールドに動的ソースを使用できるようになります。

8.マップを表示してプロパティの場所を表示します

マップは、ユーザーが物件の正確な場所をすぐに理解するのに役立つ優れた方法です。

マップの作成を開始するには、マップを表示するページまたはテンプレートに移動します。 ToolsetMapブロックを挿入します。 APIキーを設定する必要がある場合は、Googleがその方法の詳細な手順を提供します。
マーカーセクションのソースで、動的ソースを有効にします。
[ソースの投稿]ドロップダウンで、[現在のプロパティ]を選択します。次に、[ソース]ドロップダウンで、アドレスを含むカスタムフィールドを選択して、マップに表示します

9.ユーザーが独自のコンテンツを送信するためのフロントエンドフォームを作成します

最後に、あなたはユーザーがあなたの不動産ウェブサイトで宣伝するために彼ら自身のリストを提供することを望むかもしれません。これを行う最も簡単な方法の1つは、入力するすべてのフィールドを備えたフロントエンドのフォームを使用することです。

Toolsetのドラッグアンドドロップエディタのおかげで、フォームの作成はこれ以上簡単にはなりませんでした。

[ツールセット] →[フォームの投稿]に移動し、[新規追加]をクリックします。
フォームウィザードで[続行]をクリックし、フォームの名前を入力します。
以下を含むフォームの設定を編集します。
1. 提出物を追加する投稿タイプ
2. 送信後の投稿のステータス
3. フォームを送信した後にユーザーに表示される内容（以下で行ったようにメッセージを追加することもできます）

4.これで、ドラッグアンドドロップエディタが表示され、どのフィールドをどこに配置するかを決定できます。ここでは、 CSSエディターフィールドとJSエディターフィールドを使用してフォームのスタイルを設定することもできます。追加できる追加の要素もいくつかあります。

5.次のページで、ユーザーまたは編集者が任意の段階で受信する電子メール通知を追加できます。以下に、リストが公開されたときにユーザーに送信するメールを追加しました。

6. [完了]をクリックすると、フォームを表示する準備が整います。

7.フォームを表示するために必要なのは、フォームを追加するページに移動し、[ツールセットフォーム]ブロックを追加して、作成したフォームをドロップダウンリストから選択することだけです。

次のステップ

独自の不動産ウェブサイトを構築するためのこれらの9つの重要なステップを完了したら、Toolsetの不動産オンラインコースを受講することで、サイトをさらに印象的なものにすることができます。

わかりやすいモジュールは、優れた不動産Webサイトを構築するために知っておく必要のあるすべてのことを説明する、便利なビデオが満載の包括的なステップバイステップガイドを構成します。

不動産のウェブサイトを構築した経験は何ですか？コメントで教えてください！