菜单与导航设置
导航不是目录,是客户的第一条路
很多企业站的问题不在设计,在导航:一级项塞了九个、二级项藏在鼠标悬停里手机上根本点不到、想找的产品分类被放到页脚。WordPress 的菜单功能不复杂,麻烦的是想清楚结构。这篇讲清经典主题与区块主题两条设置路径、菜单项的各项开关,以及菜单不显示时的排查顺序。
两条设置路径,先分清主题类型
外观 → 菜单,还是外观 → 编辑器
WordPress 6.x 里两种主题并存,菜单入口完全不同。找错地方会以为功能没了。
经典主题:外观 → 菜单
后台左侧「外观 → 菜单」,页面里能看到「选择要编辑的菜单」下拉框和「菜单位置」勾选区。Astra、GeneratePress、Flatsome 等绝大多数企业站主题走这条路。菜单数据存在 wp_terms 与 wp_term_taxonomy 里,类型是 nav_menu。
区块主题:外观 → 编辑器 → 导航
Twenty Twenty-Two 及之后的默认主题、Blocksy 的部分模板走全站编辑。菜单不再单独成页,而是在「外观 → 编辑器 → 模板 → 页眉」里编辑「导航」区块。改的是模板文件,不是菜单记录,两者不互通。
判断方法很直接:左侧菜单里有「外观 → 菜单」就是经典主题;只有「外观 → 编辑器」就是区块主题。混用会出问题——在区块主题里导出的经典菜单不会自动生效,需要手动在导航区块里重建。
建一个菜单的五个动作
从空白到上线,十分钟
新建菜单
「外观 → 菜单 → 创建新菜单」,命名建议写清用途,比如「主导航 2026」「页脚-产品」,别用「菜单1」。一个站可以有多个菜单,各自挂到不同位置。
添加菜单项
左侧三个来源:页面、文章、分类目录,以及「自定义链接」。企业站主导航通常用页面,产品分类多的用分类目录,外部链接和锚点用自定义链接。
拖出层级
加进来的项默认平铺。向右拖一点会变成子项,缩进一格就是二级。层级最多两级,三级在手机上会变成三层抽屉,点不到。
勾选显示位置
页面下方「菜单位置」勾上「主菜单 / 顶部菜单」等,具体名称由主题决定。不勾就等于建了没用,这是最常见的「菜单不显示」原因。
菜单项里值得改的开关
- 导航标签:显示文字,可以和页面标题不同,写短一点
- 在新标签页打开:只给外部链接用,站内不要开
- 标题属性:鼠标悬停提示,对 SEO 无用,可留空
- CSS 类:需先在「屏幕选项」勾选「CSS 类」,用于单独设样式
- 链接关系:nofollow 之类,普通导航页不必加
三种特殊菜单项写法
- 锚点:自定义链接填 /about/#team,跳到关于页的团队区块
- 空链接占位:填 #,用于只做父级不下跳的分组标题
- 搜索入口:多数主题支持在菜单里放搜索框,需主题开启
导航结构怎么排
三种常见方案与适用场景
导航项不是越多越好。桌面端七个一级项已经开始挤,移动端超过五个就要折叠。
| 方案 | 一级项 | 层级 | 适合 | 风险 |
|---|---|---|---|---|
| 精简型 | 4 到 5 个 | 单层 | 品牌站、单产品线工厂 | 产品多时分类无处安放 |
| 标准型 | 6 到 7 个 | 两层 | 多数 B2B 企业站 | 二级项超过 8 个会溢出屏幕 |
| 商城型 | 5 个 + 全部分类 | 两层 + 侧边筛选 | WooCommerce 站 | 分类命名不统一会显得乱 |
B2B 站的通行顺序是:产品中心、应用行业、关于我们、新闻资讯、联系我们。首页一般不放进导航(点 logo 就回去了),把位置省给转化页。真要在导航里放”询盘”,建议做成按钮样式而不是普通项。
菜单不显示、错位、点不动
按这个顺序查,四步定位
第一步:位置有没有勾
「外观 → 菜单 → 菜单位置」没勾选是最常见原因。有些主题的位置名称是「主菜单」「Header Menu」「Primary」,勾错位置会出现”菜单跑到页脚”的现象。
第二步:主题是否支持多菜单
部分轻量主题只注册一个位置。要在页脚再加一个,需要在子主题的 functions.php 里调用 register_nav_menus() 注册新位置,再在模板里用 wp_nav_menu() 输出。
第三步:缓存有没有清
装了缓存插件或用了 CDN,改完菜单前台还是旧的。清页面缓存、清对象缓存、刷新 CDN,三层都要清。登录状态下看到的是新菜单、退出就变旧,基本就是缓存。
第四步:CSS 是否遮挡
菜单在但点不动,多半是别的元素盖在上面,常见于轮播图或浮动客服条。浏览器右键「检查」,看点击位置命中的是哪个元素,把 z-index 或 pointer-events 改掉即可。
移动端单独检查三件事
- 汉堡图标能否点开,展开后能否滚动到最后一个子项
- 二级菜单是点击展开还是悬停展开,触屏设备没有悬停
- 菜单展开时背景是否可滚动,双滚动会让用户迷路
页脚菜单别和主导航重复
页脚通常建第二个菜单,只放「关于我们、联系方式、隐私政策、网站地图」这类辅助项,再配一条版权与备案信息。把主导航整套复制到页脚,既占地方又分散内链权重。
多语言站的导航处理
装了 WPML 或 Polylang 之后,每个语言要单独建一套菜单,不能共用——共用会出现中文导航指向英文页的情况。语言切换器一般挂在菜单末尾,注意别让一级项因此变成八个。
导航定稿通常在 企业官网定制 的视觉阶段一起做,改版时最容易出问题的也是它——老站栏目被合并,旧链接要有 301,相关做法见 网站改版升级。侧边栏与页脚的信息块则看 小工具与侧边栏;如果连「外观」菜单在哪都还没摸清,先读一遍 WordPress 后台入门。
菜单设置常见问题
五个高频疑问
能。同一个页面可以重复添加为菜单项,甚至可以一个在主导航、一个在页脚,各自设置不同的导航标签。删除时只删菜单项,不会删页面本身。
常见于两种情况:区块主题下菜单是导航区块,要在编辑器里拖动;或者浏览器缩放比例过大导致拖拽区域错位,恢复 100% 即可。经典菜单里也可以用键盘操作:选中项后按上下方向键调整顺序。
菜单数据还在,只是新主题的菜单位置没有绑定。去「外观 → 菜单 → 管理位置」把已有菜单重新指到新位置即可,不用重建。区块主题除外,需要在导航区块里重新插入。
可以,但要看主题是否支持。常见做法是给菜单项加 CSS 类,再用伪元素或图标字体渲染。用区块主题时,导航区块里的「菜单项」支持直接插入图标区块,不需要写 CSS。
WordPress 原生菜单只有两级缩进,做不了多列分组。需要多列下拉时,一般用 Mega Menu 类插件,或在主题里自定义 Walker 类重写输出结构。产品线特别多的站,更推荐点一级项进入栏目页再分流。