如何使用 Toolset Real Estate 和 OceanWP 建立一个房地产网站

已发表: 2019-07-21

一个房地产网站需要和你销售的房子一样稳定可靠。

但是,如果您使用错误的工具集,建立一个用户会喜欢使用的坚固房地产网站有时可能与建造您要出售的房屋一样困难。

幸运的是,事实证明,将 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 的房地产在线课程让您的网站更加令人印象深刻。

易于理解的模块构成了一个全面的分步指南 - 充满了方便的视频 - 告诉您构建卓越的房地产网站所需的一切。

您建立房地产网站的经验是什么? 让我们在评论中知道!