如何使用 OceanWP 和 Crocoblock 创建动态约会网站

您是否正在寻找建立一个动态的预约网站？ 对于那些认为很难部署的人来说，这是个好消息——事实并非如此。 如今，您不需要开发人员、编码人员和设计师。 您只需要正确的工具。

在本文中，您将了解什么是好的约会网站。 我们将带您完成整个站点创建程序并分发我们使用过的工具。 最后，您将了解如何仅使用 OceanWP 和几个 Crocoblock 插件来创建预订系统。

是什么让 OceanWP 和 Crocoblock 一起伟大

• 视觉网站建设。 由于 Gutenberg 是一个可视化的块编辑器，网站开发人员可以节省在管理面板和前端之间来回切换的时间。 在编辑器中创建页面结构并确保前端版本看起来相同就足够了。
• 更少的外部插件。 忘记用于自定义帖子类型、表单、预订管理、自定义字段等的单独插件。要启动并运行约会功能，您只需要两个 Crocoblock 插件。
• 没有中间人。 这意味着开发人员不必依赖设计人员。 您可以使用 OceanWP 的演示模板，根据需要修改其布局，并为其添加 Crocoblock 动态功能。

预约网站101

什么是预约网站？

约会网站是提供服务的平台，可以在其中预订特定时间段。 通常，这些网站提供按小时付费的服务。

约会网站是什么样的？

它们可以是单页名片网站，可以从单一提供商处预订特定服务。 另一方面，预约网站可以容纳多个提供者。 在这种情况下，该网站有专门的提供商和服务单页和目录。

创建预约网站难吗？

不再。 如今，您可以使用正确的工具从头开始构建动态网站——您喜欢的页面构建器、主题提供者、一些动态内容插件和预约核心。

约会网站的主要元素是什么？

这些将是主题、自定义帖子类型、约会预订引擎、预订表格、提供商页面、服务页面、目录页面和列表。

我可以将多个提供商添加到同一个网站吗？

为什么不？ 几位专业人员可以提供一项服务。 确保为该服务指定一个供应商，以避免在填写预订表格时出现混淆。

预约网站：基本准备

我们决定省略获取域名和选择托管服务提供商等早期准备工作。 相反，我们将专注于本质。 对于那些想要深入了解细节的人，Ferdy Korpershoek 提供了一段内容丰富的视频。

获取 Crocoblock 插件

Crocoblock 六个月前推出了最新定价。 是什么让它很酷？ 这是自定义订阅计划。 现在，要创建一个可行的约会网站，您不必花费太多。 转到 Crocoblock 定价页面，展开JetPlugins选项卡，然后将必要的插件添加到购物车。

你需要JetEngine – 一个动态内容插件，允许创建自定义帖子类型 – 和JetAppointment – 服务预订 WordPress 插件。

这样的定制套餐将花费您 45 美元/年的一个网站和 93 美元/年的无限网站。 此外，您将获得一整年的插件更新和质量支持。 将这些插件上传到 WordPress 仪表板，让它们为进一步工作做好准备。

安装 OceanWP 主题并选择网站模板

安装核心主题有两种方式——传统方式和 Crocoblock 方式。

以传统方式安装 OceanWP 主题

转到 WordPress 管理面板中的外观 > 主题，然后按“添加新”。 您可以使用搜索栏来定位主题。 找到后，安装 OceanWP 并激活它。

以 Crocoblock 方式安装 OceanWP 主题

使用 Crocoblock 安装向导。 它可以从 Crocoblock 帐户下载，然后用于安装 OceanWP。

要选择演示模板，请转到主题面板 > 安装演示并选择您需要的模板。 今天我们将使用Gym演示模板。 请记住，如果缺少某些高级扩展，演示将无法按预期工作。 你可能想先得到它们。

演示模板安装完成后，您就可以构建动态约会网站了。

构建自定义约会网站

在每个约会和活动安排网站中，都有针对提供商和服务的自定义帖子类型、自动约会预订核心、日​​历集成和预订表格。 这些是基本要素，但您可以随意扩展列表。

现在，让我们好好利用 JetEngine 和 JetAppointment 插件。

自定义帖子类型创建

为什么需要创建 CPT？ 他们将帮助您组织网站帖子——服务对服务，供应商对供应商。 之后，这些帖子可以很容易地相互关联，让网站用户从提供服务的人那里预订特定服务。

按照 WordPress 管理面板中的JetEngine > Post Types > Add New路径来创建 CPT。 请记住，您需要两种帖子类型——一种用于提供者，一种用于服务。 由于我们正在构建一个 Gym 网站，因此帖子类型将相应地命名为Trainers和Workouts 。

将必要的元字段添加到两种帖子类型。 对于培训师 CPT ，这些可能是：

• 照片;
• 简短的简历；
• 工作经验;
• 成就；
• 画廊;
• 联系人。

对于Workouts CPT ，元字段可以如下所示：

• 画廊;
• 描述;
• 最大容量;
• 设备;
• 对健康的益处。

快速提示：JetEngine 有一个有用的词汇表功能。 它允许您创建一组元字段并将它们用作自定义帖子类型的选项。

接下来，根据需要将尽可能多的帖子添加到新创建的帖子类型中。 为此，请将鼠标悬停在 WordPress 管理面板中的 CPT 名称上，然后按“添加新”。

完成后，您可以继续配置 JetAppointment 插件。

JetAppointment 设置

通过 Crocoblock 设置预约插件并不难。 您所要做的就是运行安装向导并完成四个安装步骤。

转到管理面板中的约会 > 设置。 您将被带到JetPlugins 设置页面，即 JetAppointment 的设置选项卡。 单击名称相似的按钮以运行向导。

• 步骤 1 。 您需要在相应的下拉选择中选择服务和提供者帖子类型。 不要忘记启用添加提供者切换； 否则，该字段将不会出现。 点击“下一步”。

• 步骤 2 。 在这里，您可以看到所需的数据库表列。 如果您不想添加更多列，请继续安装。 我们将添加电话和评论。

• 步骤 3 。 此步骤专门用于配置服务和提供商特定的详细信息，例如持续时间、缓冲时间、休息日、工作时间等。有关详细的步骤概述，请查看此视频教程。

• 第 4 步。 最后，您可以集成WooCommerce并创建两个预约表格。 可用选项包括“JetEngine Forms”和“JetFormBuilder”。 第一个用于 Elementor，第二个用于 Gutenberg。

按“完成”按钮完成设置。

在编辑预约表格之前，您需要将提供者和服务帖子相互关联。 打开提供商的帖子并在左侧边栏中找到相关服务选项卡。 在该文本区域中键入三个字符，并在系统建议后选择必要的服务。

重复该过程的次数与有专门的提供者帖子一样多。 完成后，您就可以使用这些表格了。

JetFormBuilder 和表单添加到页面

Crocoblock 产品的优点是有些产品实际上是免费的。 以 JetFormBuilder 为例。 这是一个 WordPress 表单构建插件，允许站点开发人员在 Gutenberg 页面编辑器中构建动态表单。 您可以下载插件、激活它并立即使用它。

转到JetFormBuilder > 表单。 这两个生成的表格将在那里。 我们必须编辑它们，因为我们在约会设置期间向 DB 表添加了两列。 现在，我们需要将必要的元字段添加到表单和提交后操作。

单击以编辑静态页面预订表格并通过拖放相应的 Gutenberg 块来添加缺少的元字段。 我们需要两个——一个文本字段和一个文本区域字段——来添加电话和评论字段。

接下来，您需要将这些字段输入到 Post Submit Actions 中。 为此，请按JetForm选项卡，向下滚动到Post Submit Actions部分，然后单击操作名称下方的铅笔图标。 您将看到一个 Post Submit Action 编辑窗口，您应该在其中选择它们所属的表单字段。

除此之外，您可以在此处设置 WooCommerce 集成，前提是您已在第 4 步启用它。完成后，单击“更新”按钮。

快速提示。 随意一次添加多个 Post Submit Actions，但要确保它们的条件不会相互矛盾。 在这种情况下，表单提交将失败。

完成自定义静态页面预订表单后，对其进行更新并将其添加到网站页面。 我们创建了一个专用的所有锻炼页面，其中显示了一个动态的 JetEngine 列表。 预订表格在网格下看起来很可爱。

打开您要放置表单的页面，在左侧边栏中找到JetForm块，将其拖放到所需区域，然后在右侧边栏的“选择表单”下拉菜单中选择您刚刚编辑的表单.

更新页面并查看它在前端的外观。

现在，最细心的读者会说，“表格怎么样式化了？”。 那是因为我们在其中加入了另一个插件。 继续阅读以找出哪个。

返回 WordPress 仪表板并打开约会 > 约会路径。 你有它 - 所有的约会都坐得紧紧的。 您可以在此处查看、编辑、删除它们、过滤和更改它们的状态。

如您所见，预约功能已启动并正在运行。 但是，您可以做更多的事情来使预约安排网站更加动态。