网站重新设计前概述

该网站有10多个页面，包括博客、常见问题解答和内置WordPress的其他页面，使用高级自定义字段Pro插件自定义主题。该网站有以下特点。

• 自定义设计的主页，从Rezdy最新的冬季和夏季旅游
• 特罗姆瑟定制设计的位置页面。
• 旅游类别列表
• 旅游清单
• 特定类别的旅游清单
• 与画廊参观详细页面
• 带日历的旅游预订
• 分条在线支付网关集成
• 客户预订历史记录
• 注册和登录功能
• 社交登录选项，如Facebook，谷歌和Instagram

目标

• 使用WordPress构建，并有10+个自定义主题设计页面
• 加载迅速与购物车的经验
• 日历可用性列出日期和客人的数量
• 旅游数据来自一家名为Rezdy的著名旅游预订公司
• 旅游显示、旅游类别显示和预订应该在新开发的网站上完成，而不需要使用Rezdy API将用户带到Rezdy网站

网站重新设计过程

主题选择

客户从CodeCanyon选择了第三方主题(Travellicious)。该主题有各种使用WordPress数据构建的演示，但由于旅游数据来自Rezdy(第三方)，购买的“Travelicious”主题在旅游相关页面方面没有帮助。

主题有很多缺陷，有一个非常差的内置页面构建器，有几个bug。所以我们决定在开发过程中不再使用该主题，而是从一开始便使用带有“Travelicious”演示的自定义主题作为设计参考。

分析客户购买的第三方主题(Travelicious)的影响和特点，我们需要将其与自定义主题开发进行比较，选择最佳的。

网站设计方案

即使客户选择了一个主题设计，他们在设计、颜色、字体等方面也有各种变化。
所以在切换到自定义主题后，我们用客户的品牌颜色和字体为网站上所有可能的页面设计了线框。以下是我们在设计线框时考虑的要点。

• 分析流浪猫头鹰的需求
• 对近期的市场目标进行头脑风暴
• 只在主题演示的主页中保留所需的模块。

CMS页面开发流程

最初，旅行预订合作伙伴是Zuai，后来在开始开发之前，客户决定切换到Rezdy。

尽管这是一个使用Rezdy数据的旅行预订门户，但该网站有大量CMS页面，如关于我们、博客、常见问题、联系我们和位置页面。因此，我们提前完成了CMS页面，因为由于COVID-19的情况，Rezdy支持出现了明显的延迟。有了批准的线框，我们完成了CMS页面的开发和移动响应。

旅游页面开发流程

由于客户需要购物车体验，除了旅游页面，如旅游列表页面，旅游类别列表页面，特定类别的旅游列表页面和旅游详细页面，我们需要购物车页面，结帐页面，支付成功页面和支付失败页面。在开发这些页面时，我们必须遵循以下几点。

• 兼容性分析-自定义主题与旅游相关的自定义编码vs最新的WP版本和其他插件
• 利用CMS页面中使用的现有旅游布局，这将有助于节省时间
• 在这个阶段决定正确的开发策略涉及更多的定制工作。

旅游预订和付款流程

旅游预订和支付流程是这一发展的重要阶段。而不是使用Rezdy iframe，我们必须使用Rezdy Booking API和Stripe API来直接从客户端网站创建预订，而不需要用户访问Rezdy。在这个过程中，我们遇到了各种各样的障碍。

预订和支付模块的开发，因为我们使用客户的实时Rezdy账户。但是要使用Stripe的测试信用卡信息创建预订，我们必须创建一个Rezdy分期帐户，并再次在分期环境中重新创建所有的旅游产品、类别和会议，然后在网站中链接Rezdy分期帐户。

网站迁移过程

通常，我们使用“All in One WP”迁移来将网站从暂存迁移到实时或从实时迁移到暂存。由于主机是在WP引擎中，我们在迁移时遇到了“All in WP”的问题，我们不得不使用WP引擎自己的迁移插件。

客户给我们买了一个新的WP Engine账号。在我们的演示服务器中完成开发过程后，我们遵循了以下几点。

• 使用WP引擎迁移插件迁移网站
• 正在修复CSS
• 使网站在各个页面上看起来一致
• 从功能测试和修复开始
• 通过设计人员级别的测试和修复
• 测试结束后，我们必须将API密钥和帐户更改为Rezdy live帐户，因为我们在Rezdy登台帐户中完成了测试
• 当我们将Rezdy环境从登台环境更改为实时环境时，请重复整个测试过程
• 通过最终的实时测试和修复

结果

• 标题中的简单导航增加了200%的点击量
• 页面在4秒内加载
• 轻松登录/注册，支持社交登录
• 购物车体验
• 方便的预订选项与日历可用的每次旅行。
• 能够通过改进的用户旅程付款方式吸引更多的转换
• 网站准备进行新的营销活动，以吸引更多的用户

在ColorWhistle，我们遵循旅游网站开发的最佳标准，以扩展您网站的功能。关于定制旅游网站开发的任何疑问，请联系我们任何时候。