露营目录网站开发使用WordPress CMS和用户专业版

客户拥有一个名为Ontario Camping的网站。最初,这个网站只是一个露营博客。但是客户希望增加新的功能,为用户提供关于加拿大露营地点的完整信息。主要功能是-用户可以获得关于公园或露营地的所有信息,并将他们的体验以图像的形式详细地记录下来。

项目详细信息

工业:野营目录
工具使用:WordPress,自定义主题,高级自定义字段Pro, UserPro
技术应用:WordPress, PHP

地区:加拿大

这个团队

项目协调员- 1
UI/UX设计师- 1
开发商- 2

目标

客户拥有一个名为Ontario Camping的网站。最初,这个网站只是一个露营博客。但是客户希望增加新的功能,为用户提供关于加拿大露营地点的完整信息。主要功能是-用户可以获得关于公园或露营地的所有信息,并将他们的体验以图像的形式详细地记录下来。
使用Advanced custom Fields Pro插件使用自定义主题开发带有自定义评论模块的露营目录网站。该网站有以下特点。

  • 内置WordPress,并有博客和清单目录与自定义主题设计
  • 公园和露营地清单
  • 自定义搜索,自动完成博客,公园和露营地的结果。
  • 自定义审查模块与适度注册用户可以张贴评论和星级露营地点。
    博客
  • 加载速度很快
  • 定制设计的主页与最近的评论和热门公园列出。
  • 为露营地和公园定制设计的清单页面。
  • 专用搜索功能的营地和清单。
  • 自定义设计的清单详细页与画廊,评论与分页,和露营地点的地图。
  • 自定义评论表单,用户可以评价和写评论,并上传露营地点的图像。
  • 登录用户可以将评论投票为有帮助/报告评论。
  • 评论部分将搜索特定露营站点的评论,一个带有灯箱滑块的单独画廊,以及一个按选项排序的功能。
  • 经过批准的评论将被张贴在前端,评论图片将被添加到露营网站的主画廊。
  • 成员目录与搜索选项搜索成员。
  • 会员可以互相关注,并查看他们发布的评论。
  • 管理仪表板
  • 用户仪表板
  • 用户登录注册功能。
  • 社交登录功能。
  • 管理员可以添加列表。
  • 管理员可以批准评审。
  • 用户可以从他们的仪表板页面上看到他们发布的评论。

网站开发流程

主题选择

客户端正在使用第三方主题。由于需求非常独特,可伸缩性范围很高,我们决定进行定制主题开发,而不是现成的主题。

网站设计方案

由于这是一个具有额外功能的完整改造,我们的团队(设计师和开发人员)与客户进行了多次讨论,以收集设计输入和想法。主要参考了Tripadvisor和我们的团队为主页、列表页面和列表详细页面设计了模型。在得到客户对设计的批准后,我们进入了开发阶段。
以下是我们在使用设计模型和Tripadvisor网站作为用户流程参考开发网站时考虑的要点。

  • 在列表详细页面和提交评论时为用户提供更好的用户流程。
  • 对近期的市场目标进行头脑风暴。

网站发展计划

当我们决定从头开始做一个自定义主题开发时,我们必须计划我们要自定义构建的模块和那些可以通过使用第三方插件完成的模块。
以下是我们为网站开发计划的主要模块。

  • 清单目录模块与专门的搜索露营地和公园。
  • 评论模块与星级,搜索,分页,画廊滑块为每个单独的评论,投票评论作为有帮助的和报告的评论。
  • 自定义搜索,自动完成博客,公园和露营地的结果。
  • 用户注册和登录-本地登录和社交登录
  • 带有搜索选项的成员目录。
  • 成员跟踪选项、用户仪表板和用户的个人配置文件页面。
  • 批量上传选项,管理员从后端上传清单。

我们决定从头开始开发所有与listing相关的东西,而不使用任何插件,因为这个需求是非常独特的。并使用Ultimate CSV Importer Pro插件批量上传列表和UserPro插件的成员目录和登录,注册功能。

开发阶段

列表模块

由于列表目录和评论是网站的核心,我们开始开发列表模块。审查模块有太多的功能,这个过程花费了大量的时间和精力。我们首先通过分别为清单和评论设置自定义帖子类型构建了清单目录模块的核心,并使用自定义查询和逻辑将这两种帖子类型链接到前端,以便在清单详细信息页面上显示评论,并从清单详细信息页面提交评论。

在评论模块中,我们同时使用' Advanced custom fields pro '插件中的ACF表单特性列出评论和前端评论表单。一旦评审从后端提交,管理员就会收到一封关于新评审的电子邮件,以及来自管理仪表板的审核链接。一旦管理员批准了评论,评论就会被发布在前端,来自批准的评论的图片会被添加到列表的主库中,用户会收到一封关于批准的评论的电子邮件。

在评论部分,我们构建了星级、描述的显示选项,以及一个带有灯箱滑块和投票帮助/报告评论功能的个人图库。当一篇评论被认为有帮助时,以及当一篇评论被报告时,自动化的电子邮件也被配置了。在完成这个核心之后,我们将重点放在特定列表下的评论搜索选项,并根据最新、最老、星级和最有帮助的投票以及分页对评论进行排序。分页(Pagination)、排序(Sort by)和搜索(Search)模块决定使用Ajax开发,以便在执行这些操作时页面不会刷新。

我们之前决定,我们会定期向客户提供最新的开发进度,让客户知道网站的开发进度。我们每个周末都会更新开发进度,客户和我们很容易就网站的构建达成一致。我们还能够修复故障,并根据客户分享的反馈/建议进行工作。

在完成这个主要模块之后,我们使用Search选项启动目录列表页面。该页面还使用Ajax方法进行搜索和分页,通过显示相关内容而无需加载页面,从而为用户提供更好的体验。

尽管有许多自动完成搜索插件可用,我们决定从头开始开发这个自动完成搜索,因为搜索结果必须从博客,公园列表和露营地列表中结合起来。我们自定义开发了这个搜索,在用户开始输入时提供自动完成的搜索结果,我们必须确保结果被标记为帖子类型的信息,这使得用户清楚地知道结果是来自博客还是公园或露营地。性能也需要考虑,因为这是一个自动完成搜索。我们对自动完成搜索操作进行了配置,使其不会向服务器发送太多请求,并确保在用户开始输入字母时迅速显示结果。

使用WordPress ACF和User Pro开发露营目录网站

成员目录,仪表板和用户登录,注册模块

我们使用UserPro,一个高级用户管理插件,提供用户管理功能。UserPro插件本身提供了成员目录、用户登录注册、社交登录和仪表板页面。我们只需要设置页面和UI来匹配主题的设计。对于设计级别的定制,我们必须自定义插件模板,并将它们与主题设计相匹配。

为了给用户提供一个选项,让他们可以查看自己发布的评论,也可以从用户简介页面查看用户发布的评论,我们必须自定义开发一个模块,在UserPro插件的仪表板模板上显示用户评论,并将其显示给其他用户。

Social_Login_Native_login露营目录网站开发使用WordPress ACF和用户Pro

博客模块和CMS页面

根据新的设计,我们设计了博客列表页面和博客详细页面。除了博客列表和博客详细页面,该网站还有其他CMS页面,如关于我们、联系方式和问答模块。
作为重新设计的一部分,我们对整个网站的UI级别进行了更改,以确保所有页面和帖子都具有按照新设计的独特设计模式。

网站迁移过程

我们在自己的服务器上进行开发。此外,由于这是一个网站改造,旧网站已经有很多博客文章和很少的页面。所以,迁移过程有点挑战性。为了确保在迁移过程中没有数据丢失或任何问题,我们采用了不同的方法。我们没有完全迁移新开发的网站,只是迁移了新定制的主题,并在现场安装了必要的插件,并导入了设置和新的帖子类型。
通过这样做,迁移工作比通常的迁移花费了更多的时间,但我们确保在迁移过程中没有数据丢失或问题。
此外,我们必须在迁移后重新配置社交登录,因为我们创建的社交登录应用程序的重定向URL指向我们开发网站的演示服务器。因此,我们必须在迁移网站后确保正确的配置。
在迁移网站后,我们遵循以下步骤。

  • 正在修复CSS和JS
  • 移动响应性测试
  • 使网站在各个页面上看起来一致
  • 从功能测试和修复开始
  • 通过设计人员级别的测试和修复
  • 在测试之后,我们删除了在开发和测试阶段发布的测试评论。
  • 通过最终的实时测试和修复

结果

  • 标题中的简单导航增加了200%的点击量
  • 轻松登录/注册与社会登录
  • 更好的用户体验的清单目录和清单详细页面
  • 评论模块与星级,画廊滑块,搜索,排序和分页功能
  • 从用户提交的评论中动态收集图像,为每个列表聚合图库。
  • 改善用户体验,吸引更多用户。
  • 网站准备进行新的营销活动,以吸引更多的用户

作为顶尖的网站解决方案提供商, ColorWhistle可以创建,战略,设计和开发您的网站需求。从集成第三方工具到网站开发,我们可以为您的业务挑战和目标提供有效的解决方案。

如果您在网站设计、网站开发方面需要任何帮助数字营销适用于任何企业保持联系或致电+1(919)234-5140。我们很高兴与您合作。

拉杰夫
关于作者- Rajeev

Rajeev是一名WordPress开发人员,有7年以上的经验,在旅游、教育、房地产和电子商务等各个行业建立网站,性能和网站加载速度是核心目标。他还热衷于基于api的网站开发,因为他相信这可以使企业以创造性的方式超越。工作之余,他也是费德勒的粉丝,梦想有一天能在中心球场观看费德勒的比赛,他喜欢在业余时间打羽毛球!

准备开始了吗?

让我们来创作你的下一个数字故事

我们的专业认证- ColorWhistle
转到顶部
关闭弹出

大家一起说

    当然可以,请留下您的详细信息,我们的代表将很高兴给您回电!

    例:无名氏

    例:美国

    更多细节,加速这个过程:)

    Baidu
    map