ColorWhistle如何使用WordPress开发一个健身目录网站?

这个健身目录网站开发是为我们的一个B2B客户从英国。我们的客户提出了开发这个健身指南门户网站的想法,英国及周边地区的健身专家可以在网站上列出自己的名字,访问者可以找到他们正在寻找的专家。

主要目标是建立一个目录列表网站,为专家注册提供免费和付费计划。

项目详细信息

工业:医疗保健和健身

工具使用:WordPress,自定义主题,高级自定义字段Pro, Woocommerce, Woocommerce订阅,和终极会员插件

地区:联合王国

技术的使用: WordPress, PHP

这个团队

项目协调员:1人
UI / UX设计师
开发人员:1

目标

这个健身目录网站开发是为我们的一个B2B客户从英国。我们的客户提出了开发这个健身指南门户网站的想法,英国及周边地区的健身专家可以在网站上列出自己的名字,访问者可以找到他们正在寻找的专家。

主要目标是建立一个目录列表网站,为专家注册提供免费和付费计划。

客户有一个网站功能的路线图。我们讨论并决定首先构建网站的核心,然后随着访问者的增加而逐个添加功能。

网站的功能

该网站有以下特点。

  • 使用WordPress构建
  • 定制网站使用ACF灵活的内容重用部分
  • 免费专家注册有限的领域和选项
  • 付费专科医生注册
  • 付费会员计划的定期订阅选项
  • 主目录列表页与搜索和城市过滤器
  • 为高级会员提供验证用户功能
  • 通过首先显示Premium成员对目录列表进行排序
  • 基于位置和专业的搜索引擎优化排名的清单页面
  • 专家评审模块
  • 向专家功能发送查询
  • 呼叫,文本和电子邮件按钮在专家档案页
  • 跟踪个人资料页面呼叫、文本和电子邮件按钮的点击情况
  • 自定义设计的主页显示专家类别,流行的专家,最新的博客等。
  • 博客
  • 所有页面都有吸引力和独特的设计
  • 加载速度很快

网站设计和开发过程

下面是项目经历的多个阶段,我们以详细的方式强调了它们

设计过程

标志设计和网站模型

客户希望我们为这个健身指南网站设计一个标志,因为他对我们之前为他的其他客户做的标志作品印象深刻。我们的设计师和客户进行了一次头脑风暴,以收集标志设计的想法和灵感,并了解客户对标志的期望。收集输入后,我们的设计师想出了几个标志供客户选择。从那以后,客户选择了一个标志,我们开始即兴创作标志,并得到了客户的批准。

健身目录网站开发使用WordPress - ColorWhistle

在确定logo后,我们继续为网站页面设计模型。我们的团队和客户就主页、目录列表页面和专家简介页面的设计进行了多次讨论,因为这些是网站的核心。客户想要一个干净整洁的设计,专注于专家简介和专家类别。讨论的另一个重点是关于导航的简单和直接,轻松浏览网站。

由于该网站是一个健身目录,在这个网站上有多个cms页面的潜力。但是为所有这些页面设计模型是很费时的。当我们使用ACF的Flexible内容模块进行开发时,我们决定为特定的页面开发模型设计,并决定利用Flexible内容来重用整个网站的部分。

健身目录Web开发使用WordPre万博赞助狼队ss - ColorWhistle

开发阶段

主题选择

尽管在健身目录行业市场上很少有现成的主题,但我们的客户想法是非常具体的,所以很多功能都在路线图上。所以选择一个现成的主题并依赖于这个主题似乎不是一个好的选择。此外,性能也是主要的要求。作为一个开发机构,我们完全反对选择一个现成的主题,因为现成的主题有很多我们的客户不想要的功能。

考虑到这些因素,我们决定使用ACF Pro的Flexible Content模块进行自定义主题开发。

由于客户是我们的B2B合作伙伴,他了解我们的开发流程,以及如何使用ACF Pro进行自定义主题开发,以提高性能,以及灵活的内容在重用整个网站的部分中的作用。所以客户完全同意我们提出的想法。

分析

当我们决定进行自定义开发时,我们已经对需求进行了广泛的分析,以选择需要使用插件来完成的模块列表,需要从头定制构建的模块,以及需要在插件之上构建的模块。

由于其核心特性是带有多个注册的目录列表,所以我们决定使用最终的成员插件及其附加组件。此外,客户已经准备好购买我们当时需要的个人付费插件,我们建议客户购买扩展通行证,这将允许访问所有扩展。由于客户端对未来的特性有一个路线图,我们认为扩展通道将对客户端有利。

由于高级会员资格是为每月订阅的专家提供的,我们使用了Woocommerce和Woocommerce订阅插件,因为它在订阅和支付网关方面为我们提供了大量的选择。我们必须确保的一件事是将Woocommerce订阅购买与终极会员高级会员联系起来。为此,我们进行了广泛的研究,并提出了一个变通方案,使用“终极会员用户角色”配置来连接和链接这两个插件。

有了一个关于如何使用终极会员和Woocommerce建立基地的明确计划,我们开始开发这个健身目录列表网站。

Woocommerce & Woocommerce订阅模块

我们已经配置了针对我们的业务和位置的Woocommerce插件,我们还配置了Stripe作为我们的支付网关提供商,以将支付系统集成到网站中。

我们已经在Woocommerce中为高级会员创建了一个订阅产品,将此产品分配给我们将在最终会员中创建的高级会员表单。

会员注册模块

网站的核心依赖于注册,因为它定义了注册的专家是免费会员还是高级会员,我们首先通过构建这个核心模块开始开发。

我们决定在后端有3个用户角色。免费会员,待定高级会员和高级会员角色设置在后端。创建2个注册表。一个是免费会员注册,另一个是高级会员注册。

免费会员注册表单被分配为免费会员角色,而高级会员注册表单被分配为待定高级会员角色。

这两个注册表单都设置为Auto Approval,并且我们已经定制了Premium注册表单,当专家通过Premium会员表单成功注册时,自动将订阅产品添加到购物车中。从那里,专家可以支付并激活订阅。

在Woocommerce订阅设置中,一旦专家成功购买了订阅,高级会员角色将自动分配给该专家,从而将我们之前计划的Woocommerce、Woocommerce订阅和最终会员模块链接起来。

成员目录模块

在设置注册流程之后,我们启动成员目录列表模块来列出所有注册的专家。为此,我们使用终极成员的成员目录特性来创建一个目录,在网格布局中列出所有专家。为此,我们不需要做任何额外的工作,因为终极会员插件本身就提供了核心。我们只是做了一些CSS工作来匹配我们的品牌和设计。

我们使用成员目录的内置搜索和筛选模块在前端添加城市Fitler和专家名称和专家类型搜索选项。我们通过显示重要信息,如图像、专家名称、专家类型、简短的个人简介和专家所在的城市,并使用CTA按钮来详细介绍个人资料页面,从而进行列表网格设计。

为了使目录对用户友好,并且不会有太多的滚动,我们还启用了编号分页,以便于导航。

城市成员目录

尽管Ultimate Member的内置成员目录在设置目录方面帮了我们很大的忙,但我们必须找到一种基于城市和专家类型来显示专家的方法。成员目录的过滤器将解决这个问题,但唯一的问题是不能为城市和专家类型提供单独的url,因为这对SEO POV中的排名非常关键。

当我们使用1个目录页面,并使用城市和专业类型的过滤器时,URL将有查询字符串,而不是单独的URL用于SEO。使用这种设置,客户端无法对基于城市或基于专家的页面进行排名,因为只有1个页面具有动态结果。

为了克服这个问题,我们提出了一个解决方案,为每个Location和specialty类型组合创建单独的成员目录。通过使用Member Directory中的管理筛选选项,我们为City和Specialist类型创建了后端筛选器,以显示基于特定城市的特定学科的专家。

例如:要显示London的Personal Trainers,我们创建了一个成员目录,其中管理过滤City被过滤为London,专员类型被过滤为Personal Trainers。

通过这样做,我们能够创建多个成员目录,并为每个shortcode拥有单独的页面。因此客户端能够添加特定于该成员目录的内容,并在SEO中对它们进行排名。

专家评审及查询模块

客户要求的另一个功能是用户可以选择在网站上对专家进行评分和评论。为此,我们使用了UM的Review附加组件。有了这个插件,我们可以添加审查功能,而不需要太多的自定义工作。

我们的客户还希望访客可以选择直接与专家联系。为此,我们使用最终会员的个人资料选项卡插件来创建一个新选项卡,并添加了查询表单,以便访问者直接联系专家。我们只需要定制Contact Form 7来实现这一点。我们还为这个联系选项添加了一个管理通知,以便管理员知道哪个专家正在从网站获得业务。

验证用户和自定义目录排序

由于网站同时为专家提供免费和高级会员计划,客户希望通过将高级会员排在会员目录列表页面的顶部而不是免费会员,从而为高级会员提供优势。为此,我们使用了Verified Users插件,并将其分配给我们创建的Premium Member用户角色。因此,所有被分配为高级成员角色的用户都将被自动验证。然后我们使用Verified标记对目录页中的专家进行排序。

通过这样做,我们能够为高级会员提供一个优势,将他们排在列表的第一位,并且为高级会员提供了额外的信任。

我们对该流程进行了一些定制,以确保当高级会员未能续订订阅时,已验证的标记将被删除。

付费会员和免费会员的特点不同

该网站的主要目标是让专家订阅高级会员。但我们不能指望专家们在网站一上线就预付费用。因此,我们为高级会员提供了3个月的免费试用,一旦他们开始从网站上获得业务,他们就会愿意支付订阅费。

尽管我们一开始讨论了这些,但它并没有内置到终极会员中。我们必须自定义终极会员插件,以限制免费会员的特性。

我们使用“用户角色”作为一个组件来区分免费会员和高级会员,我们使用终极会员的钩子和模板来实现这一点。

以下是专为高级会员提供的功能:

  • 附加表单字段以添加有关它们的更多详细信息
  • 评审平台
  • 影像廊(个案研究)
  • 社交媒体链接
  • 验证了蜱虫
  • 在目录清单中更好的定位

按钮点击跟踪模块

客户提出了一个想法,使用我们在注册期间收集的联系信息,然后在每个专家的个人资料中显示呼叫,文本和电子邮件按钮,并跟踪这些按钮的点击。

当访客点击按钮时,专家将收到一封电子邮件,说明来自“我的健身目录”网站的访客点击了电子邮件/呼叫/短信按钮。另一封电子邮件将发送给网站管理员,通知访问者已通过电子邮件/呼叫/SMS按钮从网站联系该专家。

通过这样做,专家和网站管理员都意识到潜在的线索来自我们的网站,从而证明他们支付的会员资格。

我们从头开始定制了这个模块,因为不会有任何现成的解决方案来满足这样的定制需求。

我们在Ultimate成员函数的基础上显示了这些按钮,然后我们编写了一个自定义模块来跟踪这些点击并发送电子邮件通知。我们还通过添加安全检查来确保垃圾邮件点击或机器人会触发这些按钮点击。

除了电子邮件,管理员还可以在专家的个人资料页面上看到电子邮件/电话/短信按钮的点击次数。

博客模块

由于该网站是针对健身爱好者的,客户希望开发一个博客模块,以便为访问者提供有关健身的有价值的信息和技巧。我们有Blog模块的设计模型,因此我们使用设计模型根据提供的模型设计创建博客列表页面、博客存档页面和博客详细信息页面。

CMS的页面

如前所述,客户很清楚我们的开发过程和ACF的Flexible内容模块的作用。因此,我们使用灵活的内容开发了CMS页面的所有部分,这为我们的客户提供了重用能力,可以在整个网站中重用所有开发的部分。这样,客户机几乎就拥有了一种具有更好的速度和性能的Page构建器类型的功能。

网站迁移过程

我们在客户的平台上进行开发StackCP服务器的登台环境。在完成开发后,我们的内部团队和客户团队对网站进行了完整的测试。在完成客户的最终反馈后,客户开始更新登台网站上的内容。内容更新工作一完成,客户就批准我们迁移网站上线。

我们遵循网站启动前检查表,使用服务器的迁移工具将网站从暂存环境迁移到实时URL。在迁移网站后,我们的内部团队再次执行了完整的测试,并确保我们发布后检查表中提到的所有要点都被覆盖了。

在迁移网站后,我们遵循以下步骤。

  • 正在修复CSS和JS
  • 移动响应性测试
  • 使网站在各个页面上看起来一致
  • 免费会员注册和高级会员注册。
  • 测试了成员目录搜索和筛选。
  • 测试自动分配角色和验证用户滴答
  • 测试按钮点击跟踪和通知电子邮件。
  • 通过设计人员级别的测试和修复
  • 在测试之后,我们删除了我们在开发和测试阶段发布的测试帐户、评论和评论。
  • 通过最后的现场测试和修复

结果

  • 在标题中容易导航
  • 更好的用户体验在目录列表页面
  • 更好的搜索引擎优化排名城市和专家基于类型的成员目录页面
  • 增加高级会员注册
  • 快速加载网站与优化的性能
  • 改善用户体验,吸引更多用户
  • 网站已准备好进行新的营销活动,以吸引更多的付费注册
拉杰夫
关于作者- Rajeev

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

准备开始了吗?

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

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

大家一起说

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

    例:无名氏

    例:美国

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

    Baidu
    map