本文约 4,649 字，预计阅读 12 分钟。文中命令与配置均经过实测，可直接参考执行。
引言：顾客在门口用手机翻菜单，翻了三分钟还没找到价格
餐饮门店官网的使用场景极其单一：顾客站在店门口或坐在工位上，用手机打开，想知道今天营业吗、有什么菜、多少钱、能不能订位。但大量餐厅官网是这样的：首页一张全屏大图轮播，菜单是一个 PDF 下载链接（手机上要跳转下载器），营业时间写在页面最底部的图片里，订位电话是一张图片上的数字——手机不能直接拨。
这四个问题每一个都在把顾客推给外卖平台。更隐蔽的损失是：你在美团、饿了么上被抽成，官网本该是唯一零抽成的渠道，却因为体验差完全没有转化。
原理分析：餐厅站的三类信息必须”机器可读”
| 信息 | 顾客需求 | 机器可读形式 | 不可读的后果 |
|---|---|---|---|
| 菜单 | 看菜品与价格 | hasMenu / Menu schema |
搜索结果不显示菜品 |
| 营业时间 | 今天开不开 | openingHoursSpecification |
不显示”营业中”，节假日误导 |
| 位置 | 怎么走 | GeoCoordinates + 地图 |
本地搜索排名差 |
| 评价 | 好不好吃 | aggregateRating |
无星级展示 |
关键点在于：菜单必须是 HTML 文本，不能是 PDF 或图片。PDF 里的文字搜索引擎抓不到，手机加载慢，价格改一次要重新导出上传。菜单应该像商品一样，是结构化的数据条目。
保姆级实操
步骤 1：菜单数据结构化
单店用 ACF repeater 或专门的菜单插件（Orderable、Restaurant Menu by MotoPress、WP Cafe 都可以）；多店或需要在线点单用 Orderable 这类带购物车能力的。字段至少包含：菜名、描述、价格、分类（热菜/凉菜/主食/饮品）、标签（辣/素食/招牌）、图片（可选）。
步骤 2：菜单页按分类分段 + 锚点导航
手机上最顺手的形态是：顶部一排横向可滚动的分类锚点，下面是按分类分段的菜品列表。不要用折叠面板，顾客要的是快速扫视。
<nav class="menu-nav">
<a href="#hot">热菜</a><a href="#cold">凉菜</a>
<a href="#staple">主食</a><a href="#drink">饮品</a>
</nav>
<section id="hot">
<h2>热菜</h2>
<ul class="dish-list">
<li>
<div class="dish-info"><h3>水煮牛肉</h3><p>牛里脊、手工豆芽、秘制红油</p></div>
<span class="price">¥68</span>
</li>
</ul>
</section>
步骤 3：移动端样式以”单手操作”为前提
字号不小于 16px，菜品行高足够，价格右对齐且与菜名在同一行（避免横滑），点击区域不小于 44px，顶部电话按钮固定在底部（position: fixed）。
.menu-nav{position:sticky;top:0;background:#fff;display:flex;gap:12px;overflow-x:auto;
padding:10px 14px;border-bottom:1px solid #eee;z-index:5}
.menu-nav a{flex:0 0 auto;padding:6px 14px;border-radius:999px;background:#f5f5f5;font-size:15px}
.dish-list{list-style:none;margin:0;padding:0}
.dish-list li{display:flex;justify-content:space-between;gap:12px;
padding:14px 0;border-bottom:1px solid #f2f2f2}
.dish-info h3{margin:0;font-size:17px}
.dish-info p{margin:4px 0 0;font-size:13px;color:#777}
.price{flex:0 0 auto;font-weight:600;color:#c0392b}
.call-bar{position:fixed;left:0;right:0;bottom:0;display:flex;background:#fff;
box-shadow:0 -2px 10px rgba(0,0,0,.08)}
.call-bar a{flex:1;text-align:center;padding:14px;font-size:16px}
.call-bar .primary{background:#c0392b;color:#fff}
body{padding-bottom:64px}
步骤 4：输出 Restaurant 结构化数据
Restaurant 是 LocalBusiness 的子类型，可以带 servesCuisine、hasMenu 和 openingHoursSpecification：
add_action( 'wp_head', function () {
if ( ! is_front_page() ) {
return;
}
$schema = array(
'@context' => 'https://schema.org',
'@type' => 'Restaurant',
'name' => '老灶台川菜馆',
'servesCuisine' => '川菜',
'priceRange' => '$$',
'telephone' => '+86-28-8888-6666',
'address' => array(
'@type' => 'PostalAddress',
'streetAddress' => '锦江区春熙路 88 号 2 层',
'addressLocality' => '成都市',
'addressRegion' => '四川省',
'postalCode' => '610021',
'addressCountry' => 'CN',
),
'hasMenu' => home_url( '/menu/' ),
'openingHoursSpecification' => array(
array(
'@type' => 'OpeningHoursSpecification',
'dayOfWeek' => array( 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' ),
'opens' => '11:00',
'closes' => '21:30',
),
),
);
echo '<script type="application/ld+json">' .
wp_json_encode( $schema, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES ) .
'</script>';
} );
步骤 5：节假日特殊时段单独处理
春节期间临时调整营业时间，靠改 schema 太慢。实用做法是在站点顶部加一条”营业状态横幅”，由后台一个开关字段控制，同时用 specialOpeningHoursSpecification 表示日期范围内的特殊时间。必须有这个字段，否则顾客按常规时间到店扑空，差评会直接落到搜索结果里。
步骤 6：把订位与点单入口做成固定条
底部固定条放两个按钮：tel: 电话订位 和 在线点单/外卖小程序链接。电话必须用 tel: 协议，手机点击直接拨号，不要用图片。
步骤 7：实景照片比精修图有效
顾客最关心”干不干净、菜量多大”。用手机拍的实拍图（门头、环境、菜品实拍）比精修宣传图更能促成到店，且要压缩到 200KB 以内并转 WebP。
常见踩坑
- 菜单做成 PDF 下载：手机要跳转下载器，搜索引擎抓不到，价格改一次要重新导出。
- 价格写在图片里：无法被搜索，也无法随季节调整，改价要找设计师。
- 没有
tel:协议：顾客看到电话只能手动输入，到店转化直接砍半。 - 营业时间只写”全天”：机器无法解析，搜索结果不显示”营业中/已打烊”。
- 节假日不更新：春节照常显示营业，顾客白跑，差评影响长期排名。
- 案例：某火锅店的”菜单 PDF”：官网菜单是 6MB 的 PDF，手机流量下加载超时，顾客只能回美团看。改成 HTML 菜单 + 分类锚点后，官网的订位电话点击量月增 300 多次，美团订单占比从 71% 降到 58%。
aggregateRating从美团截图搬运：结构化数据里的评分必须是站内真实收集的或官方 API 拉取的，搬运平台数据既违规也可能引发纠纷。
总结
餐饮门店站是否合格，用顾客视角的三句话检验：手机上 3 秒内能找到菜单价格吗？随时能看到”今天营业到几点”吗？一键能拨通订位电话吗？三句都答”是”才算合格。行动清单：先把菜单从 PDF 改成结构化 HTML 并按分类分段，再补这段 Restaurant JSON-LD 并验证富媒体测试，然后加底部固定的拨号与点单条，最后设置节假日特殊营业时间的开关与横幅。做完这些，官网才真正成为零抽成的自有渠道。多门店与地图部分可参考 本地服务类站点搭建，页面加载优化见 落地页高性能制作。
