# 使用 WordPress 搭建餐厅网站 URL: https://canvaswp.com/zh-hans/guides/build-a-restaurant-website-with-wordpress/ Updated: 2026-11-03 指南 餐厅网站有四项核心任务：展示美食，证明餐厅值得您专程跨城前来，接受预订，并告知大家何时营业。本指南将涵盖这四项任务，从一个空白的 WordPress 安装开始，最终完成一个可以交付给客户的网站。 发布于 2026年9月5日 更新于 2026年11月3日 由 SemiColonWeb 的 Canvas 团队撰写 ## 第 1 步：准备 WordPress 餐厅网站比大多数网站更依赖三项 WordPress 设置，因此请在调整设计前先完成这些设置。 - **站点标题和副标题。** 进入“设置”，然后选择“常规”。餐厅名称填入标题，菜系和所在街区填入副标题。浏览器标签页、搜索结果以及客人转发给朋友的卡片，都由这两行文字生成。 - **固定链接。**依次进入“设置”、“固定链接”，然后选择“文章名”。菜单页面会获得一个足够短的地址，可以印在桌牌或传单上。 - **时区。**返回“常规”设置页面，选择餐厅所在的城市。预订请求会按此时区加盖时间戳，若时区设置错误，今晚的预订就会被错记到明天。 无论哪个 Canvas 站点，准备 WordPress 的其他事项都一样：WordPress 和 PHP 版本、经过实际测试的备份，以及足够的 PHP 内存，以便导入时下载图片。导入指南会统一说明这些内容，适用于所有项目。 [导入前的要求与备份](https://canvaswp.com/zh-hans/guides/import-a-wordpress-demo-website/#before) 预订请求只有在厨房开餐前被看到，才有价值。除非您另行设置，否则 WordPress 会将邮件交给您的服务器发送，而许多主机会悄无声息地丢弃这些邮件。请现在就设置邮件发送服务或 SMTP 插件，并给自己发送一封测试邮件。 ## 第 2 步：安装 Canvas 并运行设置向导 在控制台中依次进入“外观”“主题”“添加新主题”，上传主题 zip 文件并启用。设置向导会自动打开，对于本项目来说，这项工作很快就能完成。 - **请先输入许可证。**从控制台粘贴许可证密钥。它能让设置向导在下一步下载餐厅套件。 - 在演示步骤中 **搜索 Italian Restaurant**。其卡片会在您确认前列出将导入的页面、文章和菜品。 - **插件步骤将自动跳过。**餐厅设计除 Canvas 外，无需其他内容，设置向导会为您安装配套的 Canvas Core。 如果中途关闭向导，它会一直保留在 Canvas 菜单下，直到您返回继续设置。 **演示站点这一步。**按名称搜索，然后阅读卡片中说明该演示能带来哪些内容。 [9 个设置向导步骤各自的作用](https://canvaswp.com/zh-hans/setup-wizard/) ## 第 3 步：导入餐饮演示站点 在导入之前，请先打开 Italian Restaurant 演示站点的 [实时预览](https://demos.canvaswp.com/restaurant/)，并点击进入菜单页和预订页。该预览运行在您正在安装的同一主题上，因此那里可用的功能在您这里同样可用。 ### 全站生效，适用于新建网站 在全新安装的站点上，请选择全站导入。餐厅的字体、颜色、主题选项和菜单都会成为您站点的设置，因此您明年冬天添加的私人餐饮页面依然与站点风格保持一致。另一种选择是导入到已经运行的站点，导入指南说明了这种方式适用的情况。 ### 交付内容 - 6 个页面，从首页、菜单、品牌故事页到联系页面 - 随附 6 篇博客文章及其分类，确保新闻板块上线首日就有内容。 - 50 道菜品，每道都有各自的菜单项记录 - 一个滑块、一个可正常工作的预订表单，以及分配到相应位置的 2 个导航菜单 - 页眉、页脚和页面标题的设计，每项都是一条可编辑的记录 - 将美食摄影图片复制到您自己的媒体库中 **导入后的首页。** 为真实内容，可替换为您自己的内容。 如果餐厅照片中的用餐区与您的完全不同，请从 Canvas 中回滚导入，再进入 Demo Import 并尝试其他餐厅类演示站点之一。您之前的设置也会一并恢复。 [导入范围、导入阶段和回滚，一次讲清](https://canvaswp.com/zh-hans/guides/import-a-wordpress-demo-website/) ## 第 4 步：替换演示文字和图片 从“页面”中打开首页。编辑器会按食客实际看到的样子，在您的内容周围呈现页眉、滑块、页面标题栏和页脚，因此您可以在真实页面环境中撰写欢迎语。 ### 点击、输入、替换 页面上的每个标题、段落和图片都是一个区块。点击区块即可直接输入文字，或在图片上选择“替换”，换成您自己的照片。右侧面板则包含该区块支持的其他所有设置，从颜色到链接，应有尽有。 ### 说出具体的内容 演示文案刻意保持通用，因此很容易被识别，也很容易超越。请将“Authentic Italian cuisine”替换为只有您自己能说出的内容：菜谱的产地地区、出菜口负责人的姓名、烤炉所用的木材、面包出炉的时间。在两家餐厅之间做选择的食客，看的是细节，而不是形容词。 当某个部分不适合您的餐厅时，请将其删除，并放入一个模式。可供选择的模式共有 183 个，每个模式都以普通区块的形式提供，方便重新排列。 **编辑首页。**您在输入时看到的，就是访客打开时看到的。 ## 第 5 步：搭建餐饮菜单 菜单是访客真正想看的页面，因此值得比一段文字更好的呈现。该演示站点提供了“菜单项”内容类型，每道菜品对应一条记录，并像文章一样在后台列出。 ### 编辑菜品，而不是页面 打开“菜单项”，编辑一条记录：菜品名称、描述、图片、价格及其菜单分类。如果您希望发布营养成分信息，可以在单独的字段中填写。保存后，菜单页面会自动更新，因为该页面包含一个会列出这些记录并每次都读取最新数据的区块。 正是这种分离让菜单易于维护。当某道菜的价格在周二发生变化时，您只需修改一条记录，所有展示该菜品的页面都会随之更新。 ### 按照后厨的方式给菜单分组 为开胃菜、意面、主菜、甜点和饮品设置菜单分类。“菜单项”区块可将这些分类显示为选项卡面板、普通卡片组或轮播，即使菜单较长，在手机上也便于阅读。您可以设置显示的菜品数量、调用的分类以及排序方式。 逐条过一遍记录，删除不提供的菜品，再添加您自己的菜品。这比听起来要快，而且这是您最后一次需要考虑版面布局。 价格请公布为厨房能在一个经营季内稳定维持的数字。一个过时三个月的菜单页，比一个比您预期更朴素的菜单页损害更大。 ## 第 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 区块填写地址和电话号码，并在其旁边设置营业时间列表。营业时间请以便于人们阅读的文字形式填写，并保持信息准确，因为没有什么比访客到店却发现大门紧闭更令人失望的了。 页眉和页脚都支持全站默认设置与单页覆盖，因此私人用餐落地页可以在照片上方使用透明页眉，同时站点其余部分保持各自的设置。 [完整的页眉与页脚构建器](https://canvaswp.com/zh-hans/header-builder/) [四款餐厅演示站点对比](https://canvaswp.com/zh-hans/wordpress-themes/restaurant/) ## 第 8 步：检查后打开 在将网站推荐给任何人之前，请先逐项检查这份清单。清单很短，但其中每一项都曾让人尴尬过。 - **用手机提交一次真实的测试预订**，期间关闭餐厅 Wi-Fi，并确认通知已送达。 - **每个页面都要在手机上阅读。**今晚想找晚餐的人，大多数都是站着用手机浏览的。 - **检查地址、电话号码和营业时间**，在每个重复显示这些信息的页面上都要检查，包括页脚。 - 为照片 **撰写替代文本**。它能帮助使用屏幕阅读器的用户，搜索引擎也会结合页面内容读取它，从而了解您的用餐环境。 - **查看 SEO 设置页面。** Canvas 会根据线上内容生成标题、描述、分享卡片和结构化数据，因此这里的重点是让内容更具针对性，而不是在第二组输入框中重复填写。 - **按需开启性能开关**。共有 35 项优化，每项均可撤销，每一项都能减少页面加载那些从未被使用的内容。 然后发布网站，将网站地址添加到人们常用的搜索渠道中，并回到餐厅的日常经营中。现在，网站只是一组可在菜单变动时编辑的记录，而不再是需要持续推进的项目。 ## 来源 凡本指南涉及 Canvas 本身之外的内容，以下为相关的官方文档页面。 - [“设置”中的“常规”页面](https://wordpress.org/documentation/article/settings-general-screen/) wordpress.org · WordPress 在何处保存站点标题和副标题，时区设置也在同一屏幕中 - [设置固定链接页面](https://wordpress.org/documentation/article/settings-permalinks-screen/) wordpress.org · “文章名”结构，为每个页面提供简短易读的地址 - [wp_mail()](https://developer.wordpress.org/reference/functions/wp_mail/) developer.wordpress.org · WordPress 默认将邮件交给 PHP 的 mail() 函数处理，邮件发送成功并不代表已送达。 - [图片教程](https://www.w3.org/WAI/tutorials/images/) w3.org · 屏幕阅读器会朗读图片的替代文本 - [结构化数据常规指南](https://developers.google.com/search/docs/appearance/structured-data/sd-policies) developers.google.com · 正确的结构化标记让富结果成为可能，但是否显示由 Google 决定。 后续步骤 ## 接下来可以做什么 两份指南分别介绍上线后的工作，以及本指南所用的演示站点。 [指南 **搭建 WooCommerce 商店** 当你导入的演示站点是一个可实际运营的商店时，会有哪些变化。](https://canvaswp.com/zh-hans/guides/start-a-woocommerce-store-with-wordpress/) [指南 **使用 AI 撰写网站文案** 只需设置一次企业描述，然后即可在正在编辑的字段中生成内容。](https://canvaswp.com/zh-hans/guides/write-website-copy-with-ai-in-wordpress/) [产品 **餐厅主题** 本指南所基于的演示站点，可逐页预览。](https://canvaswp.com/zh-hans/wordpress-themes/restaurant/) 常见问题 ## 常见问题 [完整的常见问题](https://canvaswp.com/zh-hans/faq/)可解答其他疑问，[文档](https://docs.canvaswp.com/)详细介绍了每项设置。 **接受预订需要安装插件吗？** 不需要。Canvas 餐厅网站的预订通过由 Canvas 区块构建的表单提交。提交的内容会存储在您自己网站的数据表中，并列在 WordPress 后台。只有当您希望将预订同步到管理餐桌和用餐人数的第三方预订系统时，才需要添加插件。 **我可以使用自己的照片吗？** 是的，您应该将餐厅演示站点中的每张图片都替换为自己的图片。每张演示图片都会作为普通附件添加到您的媒体库中，因此替换方式与替换 WordPress 中的任何图片相同。请尽量保持图片的尺寸比例与原图接近，以免布局发生偏移，并在此时顺便在替代文本字段中填写简短描述。 **如果您不喜欢餐厅演示站点，该怎么办？** 回滚该导入，并导入 88 个 Canvas 演示站点中的另一个，因为每个套餐都包含全部演示站点，且每次导入都会单独记录。第二个演示站点也可以只导入其页面，保留您现有的设计。 **菜单价格会显示在 Google 中吗？** Canvas 会在页面渲染时根据页面内容生成结构化数据，涵盖 16 种架构类型，包括营业时间、优惠和评价。搜索引擎选择显示什么由其自行决定，但无需第二个 SEO 插件，标记代码已然就位。