项目详细信息

目标

野生实验室项目(WLP)是一个基于再生旅游概念的非营利组织，旅行者利用自己的资源收集数据，并采取有益于自然、科学和社会的行动。

野生实验室项目是我们的客户，流浪猫头鹰的倡议。这是一个自然保护项目，带有公民科学家旅行的概念。客户联系我们，希望我们使用Rezdy API开发一个旅游预订网站。

主要目标是使用Rezdy API和Rezdy Calendar & booking Widgets在WordPress上开发一个旅游预订网站。

为了将网站与预订引擎集成，我们使用了Rezdy API。与此同时，我们还使用了Rezdy的Calendar Widget。为了集成预订功能，我们定制了Rezdy的预订小部件。

由于这个项目的想法主要集中在用户的贡献，网站的外观和感觉必须有吸引力，所以我们计划为网站建立一个设计原型，使用自定义主题，引入他们的品牌颜色和客户的想法。

网站的功能

该网站有以下特点。

网站设计和开发过程

设计过程

由于这是一个旅游预订门户网站，我们理解设计在这个项目中的重要性。因此，我们的设计团队与客户团队进行了多次讨论，以了解他们的设计期望和想法。在此之后，设计团队和我们的开发团队进行了内部讨论，澄清了设计师对旅游数据的质疑，因为这些数据来自第三方来源(Rezdy)。

所以我们确保我们的设计团队没有包含任何不属于Rezdy API的元素。另外一个讨论的重点是关于网站的速度。因此，我们广泛讨论了可能影响网站速度的元素，以及如何在不影响网站速度和性能的情况下将它们放在网站的哪里。

我们的设计团队完成了主页、旅游清单、旅游细节和博客页面的设计模型，并将它们发送给客户审批。设计得到批准并被转发给开发团队。

主题选择

由于网站的核心功能来自Rezdy API(第三方)，使用现成的主题不会有任何帮助;同时为了保持网站的性能，我们决定使用ACF进行自定义开发，并决定除非绝对必要，否则不使用插件。

开发阶段

如前所述，这是我们使用Rezdy API的第二个直接项目。因此，我们从之前的项目中吸取了经验，并规划了这个开发。

我们决定使用高级自定义字段的Flexible Content模块将节开发为可重用的块，以便开发的每个节可以在整个网站的任何页面上重用。这将为将来想要创建新页面的客户提供各种设计选项。

由于网站的核心是基于Rezdy API，插件的作用非常小。我们只使用了以下插件。

• ACF职业
• CF7表格
• WP装甲蜜罐垃圾邮件拦截
• 粉碎气球Instagram动态
• 图像优化的粉碎
• Yoast SEO

旅游模块

采用基于rezdy api的开发的主要原因是rezdy Iframe选项的局限性。

Rezdy Iframe小部件的设计很无聊，看起来非常过时。随着Rezdy API的加入，我们可以像我们想要的那样设计网站，因为我们从API中获得原始的旅游数据。唯一的缺点是我们必须从头开始构建所有东西，与iframe集成相比，这将花费大量时间。

根据我们之前的经验，我们决定采用一种不同的方法，将Rezdy API和Rezdy Booking Widget结合起来。

同时，由于Rezdy API中的预订端点和Stripe API(+Rezdy API)中的一些限制，使用Rezdy API开发预订模块将花费大量的开发时间。因此，我们决定使用Rezdy的Booking小部件，并对其进行定制，将其集成到完全使用Rezdy API开发的旅游详细信息页面中。

通过选择这种方法，我们不必担心预订方面的事情，因为所有事情都由Rezdy预订小部件从可用性日历、客人选择的数量、购买礼品卡选项等方面处理。

根据设计，我们开发的旅游列表页面将以4列网格为基础设计，每个旅游显示像瓷砖一样的重要信息，如旅游标题，位置，地址，价格，旅游持续时间和旅游的简短描述。

旅游详情页面有一个详细的设计，所有关于旅游的信息。

我们的设计师想出了一个主意，在第一次折叠中提供所有重要的信息，这样用户就不必通过滚动页面来做出决定。导览详细页面设计从一个横幅图像开始，并在图像上放置一个导览标题。作为第一次折叠的一部分，我们决定显示其他重要的信息，如位置、价格和旅行持续时间，以及立即贡献(立即预订)按钮，该按钮将用户带到预订表单。

由于有多种类型的信息，如旅游描述、画廊、附加信息、额外服务(预订)和条款和条件，我们决定在基于标签的设计中展示它们，以减少滚动。

旅游详细信息页面还有一个部分，用于在页面底部显示相关的旅游。

除了旅游清单和旅游详细信息页面，我们还在头部开发了一个Global Check Availability Widget，允许用户从弹出的旅游列表中选择旅游，并在他们选择下拉菜单完成预订后自动导航到旅游详细信息页面。

CMS页面开发

这个网站有相当数量的CMS页面，如主页，关于，博客，常见问题解答和联系我们页面以及旅游相关页面，其中数据将来自Rezdy API。

客户明确要求在网站上显示实时Instagram feed，这将有助于他们在网站上显示最近的活动，也将有助于推广他们的社交媒体页面。因此，我们使用一个轻量级插件集成了实时Instagram Feed。

由于这是一个旅行预订门户网站，客户有许多基于类别的常见问题解答。所以我们用垂直标签和手风琴的组合开发了FAQ页面。类别使用垂直选项卡，问题和答案使用accordion显示。

对于Blog列表页面，我们使用了标准的4列网格模型和Image & Title。对于博客细节页，我们决定使用WordPress的Gutenberg块编辑器而不是ACF，因为我们觉得它更适合博客。

网站迁移过程

甚至在我们开始项目之前，客户端就决定在WP引擎服务器上托管这个网站。因此，我们不像大多数项目那样在开发服务器中开发这个网站，而是通过设置Staging环境直接在WPE服务器中开发这个网站。在开发过程中，我们每周向客户提供更新，同时处理反馈。在完成开发之后，我们与客户端共享登录凭据，因为他们想要更新内容。

为了提供后端(基于ACF Flexible内容)的概述，我们安排了一次会议并解释了细节。正如预期的那样，客户发现它非常容易管理。一旦内容更新，客户就批准我们将网站迁移到live。

在网站上线后，我们遵循了上线后的检查清单，确保一切正常运行。

以下是我们发布后清单中的一些内容

网站性能和速度

就像其他网站一样，网站的速度和性能一直是这个网站的核心目标之一。由于网站的核心是来自外部系统Rezdy，所以会有很多外部请求，所有的旅游图片都是来自第三方网站(Rezdy)，在网站速度和性能方面一直是一个挑战。因此，每一个开发活动都经过了仔细的计划，以确保它不会影响网站的速度和性能。

从遵循编码标准，开发可重用组件来减少代码，上传优化的图像，使用轻量级库，有条件地加载资产，并配置必要的速度优化技术，我们遵循了所有的一切，确保了网站的性能。