指南

使用 WordPress 搭建餐厅网站

餐厅网站有四项核心任务:展示美食,证明餐厅值得您专程跨城前来,接受预订,并告知大家何时营业。本指南将涵盖这四项任务,从一个空白的 WordPress 安装开始,最终完成一个可以交付给客户的网站。

第 1 步:准备 WordPress

餐厅网站比大多数网站更依赖三项 WordPress 设置,因此请在调整设计前先完成这些设置。

  • 站点标题和副标题。 进入“设置”,然后选择“常规”。餐厅名称填入标题,菜系和所在街区填入副标题。浏览器标签页、搜索结果以及客人转发给朋友的卡片,都由这两行文字生成。
  • 固定链接。依次进入“设置”、“固定链接”,然后选择“文章名”。菜单页面会获得一个足够短的地址,可以印在桌牌或传单上。
  • 时区。返回“常规”设置页面,选择餐厅所在的城市。预订请求会按此时区加盖时间戳,若时区设置错误,今晚的预订就会被错记到明天。

无论哪个 Canvas 站点,准备 WordPress 的其他事项都一样:WordPress 和 PHP 版本、经过实际测试的备份,以及足够的 PHP 内存,以便导入时下载图片。导入指南会统一说明这些内容,适用于所有项目。

导入前的要求与备份

预订请求只有在厨房开餐前被看到,才有价值。除非您另行设置,否则 WordPress 会将邮件交给您的服务器发送,而许多主机会悄无声息地丢弃这些邮件。请现在就设置邮件发送服务或 SMTP 插件,并给自己发送一封测试邮件。

第 2 步:安装 Canvas 并运行设置向导

在控制台中依次进入“外观”“主题”“添加新主题”,上传主题 zip 文件并启用。设置向导会自动打开,对于本项目来说,这项工作很快就能完成。

  • 请先输入许可证。从控制台粘贴许可证密钥。它能让设置向导在下一步下载餐厅套件。
  • 在演示步骤中搜索 Italian Restaurant。其卡片会在您确认前列出将导入的页面、文章和菜品。
  • 插件步骤将自动跳过。餐厅设计除 Canvas 外,无需其他内容,设置向导会为您安装配套的 Canvas Core。

如果中途关闭向导,它会一直保留在 Canvas 菜单下,直到您返回继续设置。

Canvas 设置向导的演示站点步骤,可在此搜索意大利餐厅演示站点
演示站点这一步。按名称搜索,然后阅读卡片中说明该演示能带来哪些内容。

9 个设置向导步骤各自的作用

第 3 步:导入餐饮演示站点

在导入之前,请先打开 Italian Restaurant 演示站点的实时预览,并点击进入菜单页和预订页。该预览运行在您正在安装的同一主题上,因此那里可用的功能在您这里同样可用。

全站生效,适用于新建网站

在全新安装的站点上,请选择全站导入。餐厅的字体、颜色、主题选项和菜单都会成为您站点的设置,因此您明年冬天添加的私人餐饮页面依然与站点风格保持一致。另一种选择是导入到已经运行的站点,导入指南说明了这种方式适用的情况。

交付内容

  • 6 个页面,从首页、菜单、品牌故事页到联系页面
  • 随附 6 篇博客文章及其分类,确保新闻板块上线首日就有内容。
  • 50 道菜品,每道都有各自的菜单项记录
  • 一个滑块、一个可正常工作的预订表单,以及分配到相应位置的 2 个导航菜单
  • 页眉、页脚和页面标题的设计,每项都是一条可编辑的记录
  • 将美食摄影图片复制到您自己的媒体库中
Italian Restaurant 演示站点的首页,包含全宽美食图片、餐厅名称和预订按钮
导入后的首页。 为真实内容,可替换为您自己的内容。

如果餐厅照片中的用餐区与您的完全不同,请从 Canvas 中回滚导入,再进入 Demo Import 并尝试其他餐厅类演示站点之一。您之前的设置也会一并恢复。

导入范围、导入阶段和回滚,一次讲清

第 4 步:替换演示文字和图片

从“页面”中打开首页。编辑器会按食客实际看到的样子,在您的内容周围呈现页眉、滑块、页面标题栏和页脚,因此您可以在真实页面环境中撰写欢迎语。

点击、输入、替换

页面上的每个标题、段落和图片都是一个区块。点击区块即可直接输入文字,或在图片上选择“替换”,换成您自己的照片。右侧面板则包含该区块支持的其他所有设置,从颜色到链接,应有尽有。

说出具体的内容

演示文案刻意保持通用,因此很容易被识别,也很容易超越。请将“Authentic Italian cuisine”替换为只有您自己能说出的内容:菜谱的产地地区、出菜口负责人的姓名、烤炉所用的木材、面包出炉的时间。在两家餐厅之间做选择的食客,看的是细节,而不是形容词。

当某个部分不适合您的餐厅时,请将其删除,并放入一个模式。可供选择的模式共有 183 个,每个模式都以普通区块的形式提供,方便重新排列。

在 WordPress 区块编辑器中打开的 Canvas 页面,页眉和页脚都在其中呈现
编辑首页。您在输入时看到的,就是访客打开时看到的。

第 6 步:用表单接受预订

该演示站点附带一个可正常使用的表单。在 Canvas 中,表单是由区块组成的一条记录:Form 区块承载字段,Form Field 区块定义每个字段,Form Submit Button 区块负责提交,Form Embed 区块则可将完成的表单插入任意页面。

预订所需的字段

  • 日期和时间字段,包含最早和最晚时间。将最早时间设为开门的时刻,最晚时间设为最后一轮用餐的时刻,并将间隔设为十五分钟或三十分钟,以免收到 19:07 的预订。
  • 用于设置用餐人数的 数字 字段,其最小值和最大值应与最大餐桌的容纳人数相符。
  • 用于填写姓名和电话号码的文本字段和电话字段,以及用于确认信息的电子邮件字段。
  • 一个多行文本框,用于记录过敏信息、儿童高脚椅需求,以及您可能会忘记的纪念日。
  • 如果您以后打算给访客发邮件,可以添加同意复选框,以及蜜罐字段。蜜罐是一种隐形陷阱,能在不打扰真人的情况下悄悄拦截大部分垃圾信息。

请求的去向

演示站点的预订表单包含姓名、电话号码和电子邮件地址字段,日期选择器会将过去的日期置为灰色不可选,并提供时间菜单和用餐人数菜单。每条请求都会保存到您自己网站的数据表中,可在 WordPress 后台的“提交记录”下查看。目前它还不会发送邮件:请打开该表单,在其“操作”选项卡中开启“发送邮件通知”,并将地址设为营业期间有人会查看的邮箱。然后为自己预订一张餐桌,确认消息能够正常收到。

请将每条记录视为需要您确认的预订请求。该表单只负责记录预订,不统计用餐人数,也不锁定餐桌。如需实时查询空位,请使用专门的预订系统,表单的 Webhook 操作可将每条请求转发过去。您还应为表单设置数据保留期限,以便按您选定的时间定期清除宾客的电话号码。

88 个演示站点中有 83 个至少内置了一个可用表单,因此大多数时候您只需编辑表单,连接工作已经完成。

第 7 步:设置页眉、营业时间和联系方式

页眉是饿了的访客寻找电话号码的地方,页脚则是他们查找地址的地方。两者都由 Canvas 区块构成的内容,编辑方式与页面相同。

页眉

页眉记录包含多个区域,每个区域是页眉行中的一个单元格。将徽标放在第一个区域,导航放在中间,最后一个区域放置 Header Icon Link(附带您的电话号码)以及一个文字为“预订餐桌”的 Header Button。当有足够空间时,可以用 Header Info 区块放置地址或营业时间。

在页眉上方添加顶部栏,用于显示当日营业时间或节假日休息通知。顶部栏是独立的记录,因此无需打开页眉即可更改消息内容。

页脚中的营业时间

页脚可使用 Footer Contacts 区块填写地址和电话号码,并在其旁边设置营业时间列表。营业时间请以便于人们阅读的文字形式填写,并保持信息准确,因为没有什么比访客到店却发现大门紧闭更令人失望的了。

页眉和页脚都支持全站默认设置与单页覆盖,因此私人用餐落地页可以在照片上方使用透明页眉,同时站点其余部分保持各自的设置。

完整的页眉与页脚构建器

四款餐厅演示站点对比

第 8 步:检查后打开

在将网站推荐给任何人之前,请先逐项检查这份清单。清单很短,但其中每一项都曾让人尴尬过。

  • 用手机提交一次真实的测试预订,期间关闭餐厅 Wi-Fi,并确认通知已送达。
  • 每个页面都要在手机上阅读。今晚想找晚餐的人,大多数都是站着用手机浏览的。
  • 检查地址、电话号码和营业时间,在每个重复显示这些信息的页面上都要检查,包括页脚。
  • 为照片撰写替代文本。它能帮助使用屏幕阅读器的用户,搜索引擎也会结合页面内容读取它,从而了解您的用餐环境。
  • 查看 SEO 设置页面。 Canvas 会根据线上内容生成标题、描述、分享卡片和结构化数据,因此这里的重点是让内容更具针对性,而不是在第二组输入框中重复填写。
  • 按需开启性能开关。共有 35 项优化,每项均可撤销,每一项都能减少页面加载那些从未被使用的内容。

然后发布网站,将网站地址添加到人们常用的搜索渠道中,并回到餐厅的日常经营中。现在,网站只是一组可在菜单变动时编辑的记录,而不再是需要持续推进的项目。

来源

凡本指南涉及 Canvas 本身之外的内容,以下为相关的官方文档页面。

  • “设置”中的“常规”页面wordpress.org · WordPress 在何处保存站点标题和副标题,时区设置也在同一屏幕中
  • 设置固定链接页面wordpress.org · “文章名”结构,为每个页面提供简短易读的地址
  • wp_mail()developer.wordpress.org · WordPress 默认将邮件交给 PHP 的 mail() 函数处理,邮件发送成功并不代表已送达。
  • 图片教程w3.org · 屏幕阅读器会朗读图片的替代文本
  • 结构化数据常规指南developers.google.com · 正确的结构化标记让富结果成为可能,但是否显示由 Google 决定。
常见问题

常见问题

完整的常见问题可解答其他疑问,文档详细介绍了每项设置。

接受预订需要安装插件吗?

不需要。Canvas 餐厅网站的预订通过由 Canvas 区块构建的表单提交。提交的内容会存储在您自己网站的数据表中,并列在 WordPress 后台。只有当您希望将预订同步到管理餐桌和用餐人数的第三方预订系统时,才需要添加插件。

我可以使用自己的照片吗?

是的,您应该将餐厅演示站点中的每张图片都替换为自己的图片。每张演示图片都会作为普通附件添加到您的媒体库中,因此替换方式与替换 WordPress 中的任何图片相同。请尽量保持图片的尺寸比例与原图接近,以免布局发生偏移,并在此时顺便在替代文本字段中填写简短描述。

如果您不喜欢餐厅演示站点,该怎么办?

回滚该导入,并导入 88 个 Canvas 演示站点中的另一个,因为每个套餐都包含全部演示站点,且每次导入都会单独记录。第二个演示站点也可以只导入其页面,保留您现有的设计。

菜单价格会显示在 Google 中吗?

Canvas 会在页面渲染时根据页面内容生成结构化数据,涵盖 16 种架构类型,包括营业时间、优惠和评价。搜索引擎选择显示什么由其自行决定,但无需第二个 SEO 插件,标记代码已然就位。

使用 Canvas 构建您的下一个网站

无论是新手、自由职业者还是代理机构,获得的区块与演示站点都完全相同。可以从一个网站开始,并在同一许可证下按需搭建任意数量的网站。