您想在 wordpress 网站上突出某个菜单项吗？
通过突出显示特定的菜单项，您可以更有效地引导访客关注您希望他们点击的重要页面，比如“定价”或“联系我们”等关键入口。这种视觉提示有助于提升转化率和用户体验。
为什么要突出 WordPress 菜单项？
导航菜单是网站中最重要的组成部分之一，通常位于每个页面顶部的横条中，包含通往核心页面的链接。通过为某个菜单项添加视觉高亮效果，您可以吸引用户注意力到特定的行动号召（CTA）上。
例如，如果您希望更多用户访问您的“购买套餐”页面或某篇重点博客文章，只需在导航栏中突出该链接，就能有效提升点击率和页面流量。
接下来，我们将介绍如何使用 CSS 在 WordPress 中轻松实现菜单项的高亮显示：
- 方法一：通过全站编辑器设置高亮
- 方法二：利用主题定制器添加样式
- 进阶技巧：自定义高亮样式
方法一：使用全站编辑器突出菜单项
若您使用的是支持区块编辑的现代主题（如 Twenty Twenty-Four 或其他块主题），则可以使用 WordPress 的全站编辑器来操作。
首先，进入 WordPress 后台，前往外观 » 编辑器页面，进入全站编辑界面。
接着，找到您想高亮的菜单项，直接双击它以选中。然后点击右上角的“设置”图标，在右侧的面板中展开“高级”选项。
在“附加 CSS 类”输入框中，填入 highlighted-menu 这个类名。
完成后，点击页面顶部的“保存”按钮保存更改。
现在，您需要添加 CSS 样式来让这个类生效。推荐使用 WPCode 插件安全地插入自定义代码。
如何通过 WPCode 添加 CSS
WPCode 是最安全、最便捷的代码管理插件，适合在不修改主题文件的前提下添加自定义 CSS。
安装并激活 WPCode 插件后（可参考我们关于[如何安装 WordPress 插件]的教程），进入 代码片段 » + 添加片段。
将鼠标悬停在“添加自定义代码（新代码段）”上，点击下方的“使用代码段”按钮。
进入创建页面后，为代码段命名（如“高亮菜单项”），然后从右上角的下拉菜单中选择“CSS Snippet”作为类型。
随后，将以下 CSS 代码粘贴进“代码预览”区域：
确认无误后，将状态开关从“非活动”切换为“活动”，最后点击“保存片段”。
至此，您已成功通过全站编辑器为菜单项添加高亮效果。
这是应用样式后的实际效果示例：
如何在块主题中访问传统定制器
如果您偏好使用“主题定制器”，即使使用的是块主题，也可以手动访问。只需在浏览器地址栏输入以下 URL，并将 example.com 替换为您的网站域名：
旅游网二级导航菜单代码基于jquery.1.11.2.min.js制作，鼠标经过悬停一级导航菜单显示对应的二级菜单，二级菜单相对于一级菜单居中显示，当二级菜单内容区域超出网页左侧区域时，页面左侧区域菜单定位在最左侧，菜单项依次向右排列，二级菜单内容区域超出网页右侧区域时，页面右侧区域菜单在最右侧，菜单项依次向左排列。
进入后，转到“附加 CSS”部分，将上述 CSS 代码粘贴到“其他 CSS”文本框中即可。
方法二：使用主题定制器高亮菜单项
对于使用传统主题的用户，WordPress 默认提供“主题定制器”功能，操作也非常直观。
首先，进入 WordPress 后台，点击外观 » 自定义，打开主题定制器。
进入后选择“菜单”选项卡。
点击右上角的齿轮图标，启用高级选项。
勾选“CSS 类”复选框以显示该字段。
接着向下滚动，进入“菜单”设置区域。
如果您的网站有多个菜单，请选择包含目标菜单项的那个菜单。
点击您想要高亮的菜单项（例如“联系我们”或“定价”），展开其设置面板。
在“CSS 类”输入框中输入 highlighted-menu。
您可对多个菜单项重复此操作，所有添加该类名的项目都将获得相同高亮效果。
设置完成后，切换到“附加 CSS”选项卡。
将以下 CSS 代码复制粘贴进去：
自定义您的高亮样式
一旦菜单项已高亮显示，您就可以进一步美化其外观，使其更符合品牌风格。
例如，您可以更改背景颜色、文字颜色、边框或圆角等。
只需在已添加的 CSS 代码中查找如下部分：
根据需要修改颜色值或添加新属性（如 border-radius、padding 等）。更多自定义技巧，可参考我们的[添加自定义 CSS 指南]。
完成后，别忘了点击“发布”（主题定制器）或“保存片段”（WPCode）来保存更改。
希望本文帮助您掌握了在 WordPress 中高亮菜单项的方法。您可能还会感兴趣：如何美化导航菜单样式，或查看我们整理的必备 WordPress 插件清单，助力您的网站功能扩展。
