在WordPress中将菜单项高亮显示设置图文教程

如果你的WordPress网站上有特色产品或服务，所以你必须把访客引导到一个特定的页面。为了帮助引导你的网站访问者到你所指的页面，高亮突出显示菜单项目可能对你有帮助。

其实你可以做几件事来突出你的菜单项目，如下所示：

• 添加一个不同的背景颜色
• 添加不同的文本颜色
• 添加一个标签
• 等等。

这篇文章搬主题将告诉你如何突出高亮显示菜单项，更具体地说，为WordPress中的特定菜单项添加不同的背景颜色，而不需要任何插件的帮助。

如何通过添加不同的背景颜色来突出菜单项目

首先，我们将把CSS片段添加到WordPress定制器的CSS编辑器中。在你的WordPress仪表板上，导航到外观->自定义。如果你使用的是块状主题，你可以阅读我们的文章，了解如何在块状主题中启用主题定制器。

一旦你进入定制化设置，进入附加CSS块并点击它。复制下面的简单CSS片段，并将其粘贴到附加CSS区域。

.highlight-menu-item {
    float: inherit;
    color: inherit;
    cursor: pointer;
    position: relative;
    top: 0px;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    margin-right: 0px;
    margin-left: 0px;
    background-color: #c04d02;
    padding: inherit;
    line-height: inherit;
    text-transform: inherit;
}

一旦你添加了CSS片段，通过点击 “发布”按钮来应用它。

好了，我们进入下一步；我们将通过向导航标签添加一个简单的代码来编辑菜单项。在你的WordPress仪表板上，导航到外观->菜单。

一旦你进入菜单设置屏幕，选择你想突出显示的菜单项目（添加不同的背景颜色），然后通过点击下拉按钮进入导航标签。

好了，我们要开始编辑导航标签了。请复制下面的简单代码，将其粘贴到导航标签领域，然后根据你的菜单项的名称编辑代码。

注意：在这个例子中，我们选择了我们想要高亮显示的Flight。

<span class="highlight-menu-item">Flight</span>

一旦你完成了对导航标签的编辑，请点击 “保存菜单”按钮来应用它。

要看它是如何工作的，请打开一个新窗口进入你的网站。

注意：你可以根据自己的喜好来定制高亮部分。要做到这一点，请回到 “附加CSS”并编辑代码片段。你可以编辑背景颜色、字体、填充等。

在这个例子中，我们通过编辑十六进制颜色代码将高光背景颜色改为蓝色（见图片）。

不要忘记在完成编辑后，点击 “发布”按钮来应用这些变化。

最后总结

本文展示了如何在不借助任何插件的情况下，通过添加不同的背景颜色，轻松地突出导航菜单上的项目。你可以将本教程应用于任何网站导航类型，如水平导航条、下拉式导航菜单、垂直侧栏导航菜单等。