导航菜单是网站的核心，它不仅引导访客了解网站结构和内容，还帮助他们迅速找到所需信息。对于 WordPress 网站来说，合理设置导航菜单至关重要，它直接影响用户体验和网站整体美观性。本文将以真实案例为基础，详细介绍如何在 WordPress 中创建、管理和优化导航菜单。
随着最新版 WordPress 强推古腾堡编辑器，默认主题已在“外观”菜单中取消了经典菜单入口。因此，本文将以 Kevin’s Space（即本站）功能繁复的菜单为例，详细介绍如何创建强大的站点菜单以及关键注意事项。如果你在自己站点的设置中未找到这些功能，也无需担心，你仍可通过添加代码或安装插件来实现，甚至做得更好。
1. 理解 WordPress 导航菜单
1.1 什么是导航菜单？
导航菜单是网站最基本的引导工具之一，它展示网站的重要页面、分类、链接等内容，帮助用户快速了解网站结构并定位所需信息。对用户来说，一个清晰、合理的导航菜单，可以极大提升浏览效率；而对站点运营者来说，它是优化用户体验与提升转化率的关键入口。
在经典 WordPress 中，导航菜单是通过“菜单管理器”进行配置的，站长可以自定义菜单项的内容、顺序和层级，还可以为不同位置设置不同菜单，从而实现灵活布局。
1.2 菜单位置（Menu Locations）
菜单位置（Menu Locations）是主题预定义的菜单挂载点。例如，“主导航栏”、“页脚菜单”、“移动端菜单”等，这些位置由所用主题决定，每个主题支持的菜单位置可能不同。
以经典主题为例，通常提供“主菜单”和“页脚菜单”两个位置；而像 Impeka 或 Astra 这类高级主题，则可能提供多个菜单区域（如顶部栏、侧边栏、移动菜单等），并允许设置响应式显示规则。除此之外，菜单还将被页面构建器引用。
你可以在“外观 → 菜单”或“外观 → 编辑器（区块主题）”中查看和设置这些菜单位置。如果你的主题没有提供某些位置，也可以通过注册自定义菜单位置或使用插件来实现扩展。
2. 创建导航菜单的基本方法
经典菜单通过“外观 → 菜单”进行管理，操作直观、界面独立。而现当下官方推行“全站编辑（Full Site Editing, FSE）”功能，核心就是使用区块（Block）而非传统模板文件，使得官方和部分第三方主题的菜单则依托“外观 → 编辑器”中的导航区块进行设置，更具可视化和灵活性，但对新手而言上手难度略高。
2.1 在经典主题中添加导航菜单
使用经典主题（如官方 Twenty Twenty-One 之前和大多数第三方主题）时，可以通过“外观 → 菜单”界面，快速完成导航菜单的创建与配置。以下是操作流程：
- 创建新菜单
进入后台路径：仪表盘 → 外观 → 菜单。
在页面上方点击“创建新菜单”，输入菜单名称（如“主菜单”或“顶部导航”），然后点击“创建菜单”。 - 添加菜单项
在页面左侧，你可以看到页面、文章、分类、自定义链接等可选项。勾选需要的项目后，点击“添加到菜单”，它们将出现在右侧菜单结构中。
- 设置菜单结构
通过拖动每个菜单项，可调整其顺序和嵌套层级，创建多级菜单结构（如下拉菜单）。子菜单项略微向右缩进，即可形成下属关系。 - 分配菜单位置
在下方“菜单设置”区域，勾选菜单应显示的位置，比如“主导航”或“页脚菜单”。不同主题提供的位置可能不同。 - 保存菜单
所有设置完成后，点击“保存菜单”按钮，使变更生效。至此，菜单将在前台对应位置显示出来。
2.2 在区块主题中添加导航菜单
在区块主题（如 Twenty Twenty-Five）中，导航菜单的创建与管理方式发生了根本变化，不再通过“外观 → 菜单”，而是通过“外观 → 编辑器”中的导航区块进行操作。区块主题的导航菜单是内容的一部分，多个导航菜单可以作为“可重用块”保存，也可以在不同模板中复用，非常适合对网站结构有精细控制需求的用户。以下是详细步骤：
- 进入站点编辑器
路径：仪表盘 → 外观 → 编辑器，打开全站编辑界面。 - 定位导航位置
选择需要添加或修改菜单的部分，通常是页眉（Header）。点击进入对应模板部分。 - 添加导航区块
在编辑区域点击“+”按钮，搜索并添加“导航”区块。如果已存在导航区块，可以点击选择进行编辑。 - 添加菜单项
点击导航区块中的“+”号，依次添加页面、文章、分类、自定义链接等菜单项。你也可以通过“拖动”调整顺序，设置子菜单结构。 - 自定义样式与布局
在右侧属性栏中，可以设置菜单对齐方式、子菜单展开方式、样式外观等参数，以匹配主题风格。 - 保存更改
完成设置后，点击右上角的“保存”按钮，菜单将实时更新在前台页面。
3. 菜单的高级设置与技巧
现在以经典菜单为例，说明如何解锁 WordPress 导航菜单的高级功能，实现像 Kevin's 首页那样层级分明、结构复杂的 Mega Menu 效果。首先，用一个简单的设置释放菜单的所有功能。
3.1 释放菜单的所有功能
要使用完整菜单功能，首先点击右上角的“显示选项”（图中标注 ①），展开“高级属性”选项框。
3.1.1 界面元素
勾选后将启用以下菜单项来源（此处不同网站会根据所用主题和插件，显示不同的内容来源模块）：
- 页面、文章、自定义链接、分类目录、标签、格式
- Portfolio Items（作品项目）、Portfolio Categories（作品分类）
- Portfolio Fields（作品字段）等主题或插件扩展来源
3.1.2 高级菜单属性
勾选后，菜单项中将显示更多可编辑字段，包括：
- title 属性：鼠标悬停菜单项时显示的提示文字
- CSS 类：为菜单项添加自定义样式名，便于 CSS 样式控制
- 链接关系（XFN）：用于定义链接的社交关系，SEO 有特殊用途，比如
nofollow标签 - 描述：可为菜单项添加简要说明，部分主题支持前台显示
3.2 创建一个 Mega Menu
Mega Menu（巨型菜单）是一种多栏目下拉式导航菜单，常用于内容丰富的网站，如电商、门户或多分类博客。相比传统的单列下拉菜单，Mega Menu 可在展开时显示多个栏目、图文混排、自定义链接或小工具区域，帮助用户快速浏览并直达所需内容，极大提升导航效率与用户体验。——略，我本来录了一个视频的。
4. 结合主题和插件优化菜单
在 WordPress 中，导航菜单的显示效果、布局位置以及功能强度，常常受限于当前主题本身。通过灵活运用插件和合适的主题设置，可以让你的菜单更美观、实用，适应多种使用场景。
4.1 主题对菜单的影响
不同主题提供的菜单位置数量和样式各不相同。一些轻量主题可能只支持顶部菜单，而功能型主题如 Impeka 通常提供顶部、页脚、移动端等多个挂载点，甚至允许你拖放自定义区域。
主题还会控制菜单的布局和外观，比如横排、竖排、下拉菜单、响应式收缩，以及字体大小、图标风格、间距动画等。以 Kevin’s Space 所用的 Impeka 主题为例，它内置了多种导航布局支持 Mega Menu、多级子菜单、响应式优化和图标嵌入，可通过后台界面实现精细配置，无需额外写 CSS 或使用复杂插件。
4.2 WordPress Menu 插件推荐
当 WordPress 系统和主题的功能已经不能满足你的菜单需求时，可以考虑 Mega Menu 插件，这些导航菜单插件的出现，大大扩展了 WordPress 默认菜单系统的能力。让站长无需复杂编码，也能实现专业、美观、功能齐全的导航结构，尤其适用于内容量大、分类层级复杂或有特定设计需求的网站。
| 插件名称 | 功能亮点 | 适用人群 | 付费情况 | 推荐理由与选择建议 |
|---|---|---|---|---|
| Max Mega Menu | 拖拽式多列菜单，支持图标、小工具、自定义布局 | 内容多、分类复杂的网站 | 免费+付费 | 功能强大，适合做门户、商用网站导航，多层级需求强烈推荐 |
| WP Mega Menu | 可视化设置界面，现代样式，支持动画、图标 | 重视设计和交互的博客或品牌站 | 免费+付费 | 样式现代，适合追求视觉美观的站点，配置简单 |
| WP Mobile Menu | 专为手机优化的滑出式菜单，自定义动画与按钮样式 | 注重移动端体验的网站 | 免费+付费 | 适合移动优先设计，适配性强，支持简洁汉堡菜单 |
| Responsive Menu | 高度可定制响应式菜单，支持快捷键与样式编辑 | 有特殊样式需求的站点 | 免费+付费 | 自定义程度高，适合开发者和定制站点使用 |
| Accessible Menu | 满足无障碍标准，支持键盘导航与 ARIA 标签 | 政府、教育、公益等机构站点 | 免费 | 提升站点可访问性，适合合规需求或对弱势群体友好的站点 |
5. 导航菜单设计最佳实践
一个优秀的导航菜单，不仅要功能完善，更要注重结构清晰、体验友好。建议如下：
- 简洁明了：菜单项不宜过多，避免深层级嵌套，聚焦核心页面，帮助用户快速决策与跳转。
- 用户友好：使用通俗易懂的标签名（如“关于我们”“服务”“联系我们”），避免生僻或冗长的表达。
- 一致性：确保菜单在不同页面、不同终端设备中样式和结构一致，避免跳转逻辑混乱或样式失衡。
- 响应式设计：在手机和平板端自动适配为可滑出菜单、汉堡菜单等形式，保证交互顺畅。
- 注重 UX 与 SEO：合理设置链接顺序与锚文本，提升用户体验的同时，也有助于搜索引擎理解网站结构，从而提升爬虫抓取效率与收录质量。
- 菜单复制：利用 Duplicate Menu 这类插件实现 WordPress 菜单的快速复制，提高编辑效率。
[…] 如何在 WordPress 中添加导航菜单（完整指南） 05/22/2025 […]