您想在 WordPress 中创建粘性浮动导航菜单吗?
顶部导航菜单通常包含指向所有最重要页面的链接。通过使此菜单具有粘性,您可以在用户向下滚动页面时将其保留在屏幕上,因此始终可以轻松访问它。
在本文中,我们将向您展示如何轻松地将粘性浮动导航菜单添加到您的 WordPress 网站。
什么是粘性浮动导航菜单?
当用户向下滚动时,粘性或浮动导航菜单会“粘”在屏幕顶部,因此它始终显示在屏幕上。
通常,WordPress 中的顶部导航菜单包含指向网站最重要内容的链接。通过使此菜单具有粘性,访问者可以随时单击这些链接,而无需滚动。
如果您经营在线商店,则顶部导航菜单通常包含指向旨在转换的页面的链接,例如结账页面和客户购物车。通过使顶部菜单具有粘性,您通常可以降低购物车放弃率并获得更多销售额。
话虽如此,让我们看看如何在任何 WordPress 主题或WooCommerce商店中轻松创建粘性浮动导航菜单。只需使用下面的快速链接跳转到您要使用的方法:
方法 1:使用主题设置添加粘性菜单(简单)
一些最好的 WordPress 主题内置了对粘性导航菜单的支持。话虽如此,值得检查您的主题设置,方法是转到WordPress 仪表板中的主题 » 自定义,并查找标记为“菜单”的任何设置。
如果您不确定您的主题是否支持粘性菜单,那么您可以查看主题的文档,甚至联系开发人员寻求帮助。有关更多信息,请参阅我们的指南,了解如何正确请求 WordPress 支持并获得支持。
如果您的主题没有对粘性菜单的内置支持,那么您需要使用下面的其他方法之一。
方法 2:使用插件添加粘性导航菜单(推荐)
在 WordPress 中添加粘性导航菜单的最简单方法是使用Scroll 上的粘性菜单(或任何内容!)。这个插件可以让你粘任何东西,包括菜单。
首先,您需要安装并激活该插件。如果您需要帮助,请参阅我们有关如何安装 WordPress 插件的指南。
激活后,转到“设置”»“粘滞菜单”(或任何内容!)。
首先,您需要使用浏览器的检查工具获取要设置粘性的导航菜单的CSS ID 。
只需访问您的网站并将鼠标悬停在导航菜单上即可。之后,只需右键单击并从浏览器菜单中选择“检查”。
这将在浏览器中打开一个新面板,您可以在其中查看导航菜单的源代码。
您需要找到与菜单或站点标题相关的代码行。它看起来像这样:
1 | <nav id= "site-navigation" class= "main-navigation" role= "navigation" > |
由
如果您很难找到代码,请将鼠标悬停在“检查”面板中的不同代码行上。当您找到正确的代码时,浏览器将突出显示导航菜单,如下图所示。
在本例中,导航菜单的 CSS ID 是site-navigation
。
获得此信息后,切换回 WordPress 仪表板并将其添加到“粘性元素(必需)”字段。
您还需要在开头添加一个井号字符 (#),因此site-navigation
变为#site-navigation
。
之后,单击页面底部的“保存更改”按钮来存储您的更改。
现在,如果您访问WordPress 网站并滚动,菜单应保留在顶部。
有时,粘性菜单可能会重叠一些您不想隐藏的内容。
如果发生这种情况,那么您需要通过在“页面顶部之间的空间…”字段中输入一个数字来定义屏幕顶部和粘性导航菜单之间的空间。
粘性菜单可能会给屏幕较小的设备(例如移动设备)带来问题。考虑到这一点,最好从桌面检查 WordPress 网站的移动版本。
如果您对菜单的外观不满意,则可以通过查找以下字段为移动用户“取消粘贴”菜单:“屏幕小于时请勿粘贴元素”。
在这里输入“780px”。
还有更多设置需要探索,但这就是创建有效的粘性导航菜单所需的全部内容。
如果您对导航菜单的设置方式感到满意,请单击“保存更改”以存储您的设置。
方法 3:使用代码添加粘性浮动导航菜单
您还可以使用 CSS 创建粘性导航菜单。
将自定义代码添加到 WordPress 的最佳方法是使用 WPCode。WPCode 是最好的代码片段插件,允许您添加自定义 CSS、PHP、HTML 等。
由于您不直接编辑主题文件,因此可以避免许多常见的 WordPress 错误。您还可以更新主题或切换到完全不同的主题,而不会丢失自定义代码。
您还可以通过单击打开或关闭粘性菜单。
首先,您需要安装并激活免费的 WPCode 插件。有关更多信息,请参阅有关如何安装 WordPress 插件的分步指南 。
激活插件后,转到 代码片段»添加片段。
在这里,您将看到可以添加到网站的所有现成的 WPCode 片段。其中包括一个片段,允许您 完全禁用评论、上传 WordPress 通常不支持的文件类型、 禁用附件页面等等。
在下一个屏幕上,只需将鼠标悬停在“添加自定义代码(新代码段)”上,然后在出现“使用代码段”按钮时单击它。
在下一个屏幕上,您需要输入代码片段的标题。这仅供您参考,因此您可以使用任何您想要的东西。
然后,打开“代码类型”下拉列表并选择“CSS 片段”。
完成后,将以下代码片段添加到 WPCode 代码编辑器中:
12345678910111213 | #site-navigation { background : #00000 ; height : 60px ; z-index : 170 ; margin : 0 auto ; border-bottom : 1px solid #dadada ; width : 100% ; position : fixed ; top : 0 ; left : 0 ; right : 0 ; text-align : center ; } |
由
这将创建一个黑色背景的导航菜单。您可以通过更改 旁边的十六进制代码来使用任何您想要的颜色background
。
例如,使用background: #ffffff
将为您提供白色菜单背景。如果您不确定要使用什么十六进制代码,那么您可以查看HTML 颜色代码等资源。
您还需要替换#site-navigation
为导航菜单的 CSS ID。要找到此代码,只需遵循上述相同的过程即可。
当您对代码感到满意时,单击“非活动”切换按钮,将其更改为“活动”,然后单击“保存代码段”按钮。
现在,如果您访问WordPress 博客或网站,您将看到粘性浮动导航菜单正在运行。
根据您的主题,有时导航菜单可能会显示在网站标题下方而不是上方。在这种情况下,粘性导航菜单可能看起来距离网站标题和标题太近,甚至与其重叠。
如果发生这种情况,您可以将以下内容添加到自定义 CSS 代码段中:
123 | .site-branding { margin-top : 60px !important ; } |
由
只需替换site-branding
为标题区域的 CSS 类即可。要获取此信息,只需使用浏览器的“检查”工具,然后按照方法 2 中描述的相同过程进行操作。
我们希望本文能帮助您向 WordPress 网站添加粘性浮动导航菜单。您可能还想查看我们关于如何增加博客流量的指南以及我们对最佳 WordPress 页面构建器插件的比较。