如何使用 Toolset Real Estate 和 OceanWP 建立一個房地產網站

一個房地產網站需要和你銷售的房子一樣穩定可靠。

但是，如果您使用錯誤的工具集，建立一個用戶會喜歡使用的堅固房地產網站有時可能與建造您要出售的房屋一樣困難。

幸運的是，事實證明，將 Toolset Real Estate 與 OceanWP 相結合可以為您提供一個專業的房地產網站，其中包含您可能需要的所有功能。

在本指南中，我們將向您展示如何構建以下功能：

• 為您的不同屬性和代理自定義帖子類型
• 自定義字段以添加信息，例如浴室數量
• 根據特徵（獨立式住宅、平房等）分離您的房產的分類法
• 用於顯示具有相同結構的屬性的模板
• 用於顯示屬性圖像的滑塊
• 將地產代理與他們負責的物業聯繫起來的後期關係
• 搜索讓用戶可以輕鬆找到最適合他們的房產
• 顯示物業位置和搜索結果的地圖
• 一個前端表單，用戶可以提交自己的房產列表

如果您想在閱讀時執行這些步驟，您可以使用您自己的由 Toolset 和 OceanWP 構建的免費測試房地產網站。

為什麼我們使用 Toolset Real Estate 和 OceanWP

Toolset Real Estate 是 Toolset 的一部分，它為您提供構建多種類型的專業網站所需的所有功能。

具體來說，使用 Toolset Real Estate，您無需任何其他插件即可添加房地產網站所需的功能。 這意味著您無需擔心插件兼容性或插件數量是否會減慢您的網站速度。

同時，出於某種原因，OceanWP 是商業網站最受歡迎的主題之一。 OceanWP 運營的網站具有更高的轉化率、更快的加載時間和改進的 SEO——因此購房​​者可以輕鬆找到您的網站。

Toolset Real Estate 和 OceanWP 一起無縫協作，這意味著您可以構建強大的網站，看起來很棒，沒有任何顧慮。

不要忘記，您可以免費下載使用 Toolset 和 OceanWP 構建的測試網站進行實驗。

你需要什麼才能開始

當您使用 Toolset 構建自定義房地產網站時，您將需要以下 Toolset 插件：

• 工具集類型——用於為屬性和代理設置自定義帖子類型、字段和分類法
• 工具集塊 - 用於設計您網站的前端（模板和搜索屬性等）
• 工具集地圖——用於添加能夠在地圖上搜索和顯示屬性的功能
• 工具集表單——允許代理通過自定義前端表單管理屬性
• 工具集訪問——用於控製網站訪問者、客戶和代理可以訪問的部分

一旦您安裝並註冊了這些組件，就可以開始構建您的房地產網站了！

1. 創建您的自定義帖子類型

首先，我們需要為“房屋”部分創建自定義帖子類型，以便用戶確切知道去哪裡查看它們。
1. 前往 WordPress 管理員中的工具集 → 儀表板，然後單擊添加新帖子類型。

2. 我們現在需要命名我們的帖子類型並將其保存到我們希望它顯示在管理菜單中的位置。

3. 單擊保存帖子類型。

就是這樣。 您的房屋自定義帖子類型已準備就緒。

2. 創建您的自定義字段

現在我們有了自定義帖子類型，我們需要添加一些自定義字段。 我們的自定義字段構成了一個部分模板，我們將要填寫這些模板來描述每個房屋及其功能。

例如，我們需要關於浴室數量、價格和房產建造年份的部分。

1. 在工具集儀表板上，單擊我們創建的“房屋”自定義帖子類型旁邊的添加自定義字段。

2. 將彈出一個添加新字段框，我們可以在其中選擇我們想要的自定義字段類型。 例如，“構建年份”的自定義字段將是一個數字。

3. 對於每個字段，您都需要設置選項，例如是否必須輸入信息。

4. 填寫完某個字段的所有首選選項後，單擊“添加新字段”以轉到組中的下一個字段。 為字段組添加所有字段後，單擊保存字段組。

現在，每次您編輯“House”帖子時，您都會看到要填寫的這些字段。

3. 創建您的自定義分類法

自定義分類法是分離屬性的好方法，以便用戶可以輕鬆找到符合其標準的屬性。 例如，如果他們只想查看待售房屋而不是出租房屋。

舉個例子，下面是如何創建分類法來區分待售房屋和出租房屋。

1. 在工具集儀表板上，單擊房屋行中的添加自定義分類。
2. 在框中輸入以下內容
   1. 複數名稱：屬性類型
   2. 單數名稱：屬性特徵
   3. 蛞蝓：屬性特徵
3. 選擇您希望分類是分層的還是平面的。 為了這個目的，我們將保持平坦。
4. 選擇您希望分類關聯的帖子類型——在這種情況下，它將是“房屋”。
5. 點擊保存分類

現在，當我們編輯或創建“房屋”帖子類型時，我們可以創建並選擇“房產類型”分類法來歸因於帖子類型。

4.創建一個模板來顯示屬性

我們現在擁有了展示我們的屬性所需的核心組件，但該過程的一個重要部分仍然存在——我們如何在前端顯示它們？

這是我們創建一個模板的地方，我們可以用它來展示我們的每一個房子。

要為單個“房屋”構建我們的模板，我們將使用帶有 WordPress 塊編輯器的工具集塊。

使用工具集塊，您可以為自定義帖子類型設計模板，其中包含自定義字段和分類法。 無需 HTML、CSS、JavaScript 和 PHP！

1. 轉到工具集 → 儀表板，然後單擊房屋行中的創建內容模板按鈕。
2. 使用 WordPress 塊編輯器來設計您的模板。
3. 從“工具集”部分為模板中顯示字段（非靜態元素）的任何部分選擇塊。 例如，將工具集的標題塊用於將顯示字段的任何標題。 工具集還添加了顯示來自 WordPress 核心和最流行的第 3 方插件的動態內容的選項。
4. 為應該顯示模板顯示的帖子字段的塊啟用動態源。

您可以通過多種方式修改和設置模板樣式。 例如，您可以按列排列內容、有條件地顯示模板的某些部分、顯示相關帖子的列表等等。

5. 創建一個動態滑塊來展示您的房產圖片

滑塊是通過顯示每個屬性的多個圖像來展示您的屬性的好方法。

使用工具集，您可以輕鬆創建具有過渡的複雜滑塊，而無需任何復雜的 PHP 編碼。

1. 編輯或創建頁面、帖子或模板後，插入視圖塊並創建新視圖。
2. 在 View-creation 嚮導中，啟用分頁並在Select View Loop Style部分中，選擇Unformatted (last) 選項。
3. 在最後一步中，選擇要顯示帖子的帖子類型。
4. 單擊以完成嚮導，您的視圖已準備就緒。

顯示帖子字段並應用自定義樣式

1. 插入一個容器塊，以便您可以為滑塊添加背景。 例如，您可以將幻燈片的背景設置為來自帖子特色圖像的動態圖像。
2. 使用工具集塊將其他動態字段添加到您的滑塊，例如帖子標題。

使用工具集滑塊，除了顯示帖子字段和應用自定義樣式外，您還可以使用一系列其他選項調整滑塊，例如自動製作視圖幻燈片和更改分頁樣式。

6. 建立後關係，將您的房屋與您的代理人聯繫起來

帖子關係是任何網站的重要但被低估的部分。 通過帖子關係，您可以將不同類型的內容相互連接。

要了解有關它們如何幫助您的更多信息，請查看我們的使用 Toolset 和 OceanWP 創建帖子關係的指南。

在我們的房地產網站上，我們有房屋和房地產經紀人。 讓我們在它們之間創建一個帖子關係。

創建帖子關係

1. 轉到工具集→關係，然後單擊頂部的添加新的。
2. 工具集關係嚮導打開。 對於我們的代理和屬性，我們想要“一對多的關係”，因為一個代理將負責多個屬性。
3. 選擇將形成關係的帖子類型。

4. 選擇是否要限制可以分配的帖子數量。 例如，您可能希望每個代理最多只能分配 20 間房屋。

5. 為你們的關係命名。

6. 查看您的關係並單擊完成。

如何將屬性分配給代理

現在我們可以開始在我們的物業和房地產經紀人之間建立特定的聯繫。

1. 從管理菜單導航到代理頁面
2. 頁面底部將出現一個名為Agent Property 的新部分。 單擊連接現有屬性，然後鍵入以查找屬性的名稱或從可用列表中選擇它。

3. 單擊更新以保存您的帖子。 現在，當您訪問代理的頁面時，您已連接到他們的所有屬性都將被列出。 此外，如果您編輯這些屬性的頁面之一，您將看到關係已顯示在兩端 - 代理也將列在屬性頁面上。

創建視圖以顯示您的帖子關係

有兩種方法可以顯示您的帖子關係列表：

• 在一對多和多對多關係中顯示“許多”相關帖子的列表。
• 在一對多關係中，顯示屬於“一”方的字段。

顯示許多相關項目

在我們的示例中，代理具有許多屬性，因此我們將使用視圖來顯示它們。

1. 導航到您的“代理”內容模板
2. 插入一個視圖塊並創建一個新視圖
3. 選擇顯示您需要的帖子類型（即屬性），然後選擇顯示屬於當前代理的屬性的選項。
4. 使用塊為您的視圖設計輸出。 由於視圖已設置為顯示相關帖子，因此您無需在用於顯示動態內容的塊中選擇關係。

顯示一項相關項目（父項）

1. 導航到您的“屬性”內容模板。
2. 您可以使用任何工具集塊來顯示父信息。
3. 在塊屬性中，從 Post Source 中選擇父級。
4. 選擇您要顯示的字段。

7.如何添加高級搜索，以便用戶可以輕鬆找到最匹配的屬性

高級自定義搜索是您的用戶準確找到所需內容的最佳方式。 通過多個過濾器，他們將能夠根據自己的個人要求選擇最好的房子。

1. 首先將視圖塊插入頁面。
2. 在視圖創建嚮導中，啟用搜索選項。

3. 在下一頁上，選擇“選擇此視圖將顯示的內容”下的“屬性”。

4. 完成視圖創建嚮導後，視圖的編輯區域中有一個視圖搜索部分。 使用可用按鈕添加自定義搜索字段、插入提交和重置按鈕或添加其他塊。

例如，您可以單擊添加搜索字段並使用選擇字段下拉菜單。 選擇您希望用戶能夠搜索的內容類型，然後單擊下一步。

5. 您現在可以使用右側邊欄來調整此搜索字段的選項。 這包括主要字段設置、標籤和样式選項。

6. 現在我們準備創建將顯示結果的部分。 我們通過在編輯器的View Loop區域中添加塊來做到這一點。

7. 單擊添加塊。

8. 選擇您要用作搜索結果的一部分的塊。 例如，您可以使用標題塊在搜索結果中顯示屬性標題。

8.顯示地圖以顯示屬性的位置

地圖是幫助用戶立即了解房產確切位置的好方法。

1. 要開始創建地圖，請導航到要顯示地圖的頁面或模板。 插入工具集地圖塊。 如果您需要設置 API 密鑰，Google 會提供有關如何設置的詳細說明。
2. 在標記部分的 Source 中啟用Dynamic Source 。
3. 在Post Source下拉列表中選擇“Current Property”。 然後，在源下拉列表中，選擇包含地址的任何自定義字段以在地圖上顯示

9.搭建前端表單供用戶提交自己的內容

最後，您可能希望用戶提供他們自己的列表以在您的房地產網站上做廣告。 最簡單的方法之一是通過前端的表單，其中包含您希望他們填寫的所有字段。

借助 Toolset 的拖放編輯器，創建表單再簡單不過了。

1. 轉到工具集 → 發布表單，然後單擊添加新的。
2. 在表單嚮導中單擊繼續並輸入表單的名稱。
3. 編輯表單的設置，包括：
   1. 他們將添加提交的帖子類型
   2. 提交後的帖子狀態
   3. 用戶提交表單後看到的內容（您也可以添加一條消息，如下所示）

4. 現在您進入拖放編輯器，您可以在其中決定哪些字段位於何處。 在這裡，您還可以使用CSS 編輯器和JS 編輯器字段來設置表單樣式。 您還可以添加許多額外的元素。

5. 在下一頁上，您可以添加您希望用戶或編輯在任何階段收到的任何電子郵件通知。 下面我添加了一封電子郵件，以便在他們的列表上線時發送給用戶。

6. 單擊完成，您的表單現在可以顯示了。

7. 顯示表單所需要做的就是轉到要添加表單的頁面，添加工具集表單塊，然後選擇剛剛為下拉列表創建的表單。

下一步

一旦您完成了構建您自己的房地產網站的這九個關鍵步驟，您可以通過學習 Toolset 的房地產在線課程讓您的網站更加令人印象深刻。

易於理解的模塊構成了一個全面的分步指南 - 充滿了方便的視頻 - 告訴您構建卓越的房地產網站所需的一切。

您建立房地產網站的經驗是什麼？ 讓我們在評論中知道！