名人厨师网站设计和开发使用WordPress

这个网站的重建是为名人厨师先生Ranveer Brar。他现有的网站几乎坏了,有很多错误。最初,我们正在处理一些问题,并在同时计划重新设计网站的同时修复它们。主要目标是保留现有网站的所有功能,并以适当的方式做到这一点,SEO是发展自身的首要任务。食谱模块是网站的核心。

项目详细信息

工业:食物
工具使用:WordPress,自定义主题,高级自定义字段专业
技术应用:WordPress, PHP

地区:印度

这个团队

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

网站的功能

改版后的网站有以下特点。

  • 使用WordPress构建
  • 定制的全局搜索模块,具有自动完成功能。
  • 菜谱列表页面与Ajax分页。
  • 先进的过滤器,如素食,非素食,素食,菜系,健康特色菜等。
  • 高级自动完成搜索食谱清单页。
  • 基于自定义分类的食谱列表页面(蔬菜,非蔬菜,素食,菜系,健康特色菜)
  • 定制设计的食谱细节页,有各种各样的信息,比如配料,
  • 过程,准备时间,烹饪时间,服务,菜系,画廊
  • 为每个食谱定制的审查和评级模块。
  • Zelish -商店成分集成的配方细节页。
  • 自定义打印选项,用于从配方详细信息页面打印配方的成分和过程部分。
  • “提交食谱”页面,供用户提交自己的食谱。
  • “用户食谱”模块,用于显示用户提交的食谱,这些食谱已得到厨师团队的批准。
  • 与厨师的亚马逊页面链接的商店页面。
  • 定制的新闻页面,详细介绍厨师的最新消息,并在各种文章和新闻中介绍他的信息。
  • 博客从Blogger迁移到网站。
  • 所有页面都有吸引力和独特的设计。
  • 加载速度很快
  • 定制设计的主页,提供了一个快速概述的著名食谱和食谱的一周和食谱显示类别过滤器。

网站设计和开发过程

设计过程

由于食谱是网站的核心,我们的设计团队和厨师团队就网站的设计进行了多次讨论。主要目标是让网站吸引人,便于用户浏览。
我们的设计师根据客户的想法设计了网站模型,并与客户分享以获得批准。经过批准的设计被发送给开发团队。


主页设计-名人厨师网站设计和开发使用WordPress

主题选择

现有的网站是使用现成的主题开发的,有很多插件。我们计划从头开始使用自定义主题开发网站,只有在必要时才使用插件。

开发阶段

正如我们之前计划的那样,在开始开发之前,我们列出了需要从头构建的模块,以及需要通过插件完成的模块。我们使用高级自定义字段Pro插件作为这个自定义开发的核心。

配方模块

我们开始食谱模块开发,因为它是主要模块,这个模块在整个网站的大多数页面上使用。我们创建了一个名为“食谱”的自定义帖子类型,并设置了各种自定义分类,如蔬菜、非蔬菜、素食、菜系、食材、健康特色菜和特殊食谱等,用于过滤和分类。

正如前面在功能部分提到的,Recipe模块有各种信息,如配料、流程、菜系、准备时间等。因此,我们必须在后端使用ACF Pro创建多个自定义字段来容纳这些信息。在完成后端设置后,我们的开发团队开始使用过滤器和自动完成搜索以及Ajax分页来开发食谱页面。在开发这个模块时,我们遇到了不少挑战,因为我们必须将过滤器、搜索和分页连接起来,使它们分别工作,也可以根据用户的选择组合起来工作。

使用WordPress进行名厨网站设计和开发

食谱细节页面是一个巨大的模块,因为它有一个定制的设计和各种功能,如画廊滑块(图像和Youtube视频),评论和评级功能,自定义打印选项,和Zelish - shop配料集成。

此外,每个食谱都有很多技术信息,比如准备时间、烹饪时间、总时间、烹饪方法、份量、配料、流程、类别、标签、评级等。为了达到SEO的目的,我们必须使用所有这些信息以及其他一些信息来为每个食谱设置Schema标记。

为了满足客户的需求,我们在没有使用任何插件的情况下,从零开始开发了上述所有功能。

另一个主要挑战是网站的移动版本。与桌面版相比,移动版不仅是响应式设计,而且设计布局也有所不同。所以,在设计方面,这几乎就像开发了两个不同的网站。

对于Zelish - Shop配料功能,我们不得不与外部团队合作进行集成,由于他们的插件与其他第三方插件的兼容性问题,我们面临着各种挑战。

食谱细节页面也有一个固定的侧边栏,其中有一个社交分享选项,用户可以在各种社交媒体平台上分享食谱,如Facebook, Twitter, Whatsapp, Pinterest和SMS等。

尽管食谱页面是自定义开发的,但我们也有食谱模块的原生类别和分类页面,我们对那些存档页面(如食谱页面)采用了相同的UI。

食谱详细页面-名厨网站设计和开发使用WordPress

全局自动完成食谱搜索模块

为了方便用户搜索食谱,我们在标题处开发了一个全局食谱搜索模块,用户可以从网站的任何页面进行搜索。此外,它被构建为一个自动完成搜索。因此,只要用户开始打字,相关的食谱就会自动推荐给用户。用户可以直接点击食谱,进入食谱详情页面。由于我们已经在Recipes页面上开发了一个自动完成搜索,我们使用了相同的原型,并根据此搜索所需的功能进行了某些更改。


搜索功能-名人厨师网站设计和开发使用WordPress

提交食谱和用户食谱模块

与Recipes模块相比,用户Recipes模块非常简单。Submit Recipe页面有一个自定义表单,其中包含收集配方信息的各个字段。所有用户提交的食谱都将存储在后端以供查看。批准的食谱将被张贴在用户食谱页面的前端。

为此,我们建立了一个名为“用户食谱”的自定义帖子类型,没有任何自定义分类。根据新设计,我们设计了用户食谱列表页面和用户食谱详细页面。

博客模块

Blog模块也有一个设计模型,所以我们只需要根据设计开发博客列表页面、博客存档页面和博客详细页面。

我们在开发这个页面时遇到的主要问题是将博客文章从Blogger平台迁移到WP。由于博客文章比较多,我们使用第三方插件导入博客文章。尽管这是通过插件完成的,但我们必须修复url中的问题以正确设置重定向。在Blogger中设置重定向也是一个问题,因为没有这样的直接重定向选项。我们写了一个自定义脚本在博客重定向到WP。


博客详细页面-名厨网站设计和开发使用WordPress

按“页面”和“其他CMS页面”

新闻页面是一个定制设计的页面,在磁贴布局中提供了两种类型的新闻。
第一种类型是关于Chef的新闻/更新,带有各自文章的链接,另一种是带有Lightbox选项的报纸剪报的画廊瓷砖。

除此之外,还有其他CMS页面,如About、Shop、Contact等。我们为CMS页面设计了一个通用的布局,以匹配网站设计。

食谱迁移

现有的网站上有成千上万的食谱作为博客文章发布。由于新网站上的食谱有各种各样的信息,我们无法直接将它们导入到新网站上。因此,我们将旧网站上的食谱导出到EXCEL表格中,并为烹饪、配料、准备时间、烹饪时间、总时间、过程、描述、蔬菜、非蔬菜、素食等字段创建了新的列,并将其共享给客户端,以便组织和填充食谱。完成后,我们使用终极CSV Importer Pro插件将它们导入到新网站。

网站迁移过程

像往常一样,我们在我们的服务器上进行开发。即使现有的网站有博客、页面和成千上万的食谱,我们在开发过程中和开发完成后将它们迁移到新网站。按照惯例,我们的SEO团队对现有网站进行了分析,新网站在新网站中进行了必要的SEO更改,并设置了必要的重定向。在所有这些SEO检查之后,我们使用“all in One WP Migration”插件成功地将新网站迁移到实时环境中。

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

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

结果

  • 标题中的简单导航增加了200%的点击量
  • 食谱清单和食谱详细页面的更好用户体验
  • 更好的用户体验,用户食谱列表和用户食谱详细页面。
  • 先进的食谱过滤和自动完成搜索食谱页面。
  • 改善用户体验,吸引更多用户。
  • 网站准备进行新的营销活动,以吸引更多的用户

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

如果你需要任何网站设计,网站开发或数字营销为了你的生意保持联系或致电+1(919)234-5140。我们很高兴与您合作。

拉杰夫
关于作者- Rajeev

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

准备开始了吗?

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

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

大家一起说

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

    例:无名氏

    例:美国

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

    Baidu
    map