如何为 WordPress 添加无链接的导航菜单

网站的导航菜单是网站主体内容的结构化展现,所有网站都会有导航菜单。如果运营一个包含大量丰富内容的多层次结构网站的时候,就需要设置结构清晰且逻辑合理的导航菜单。默认情况下,在 WordPress 中设置菜单时,每个菜单项目都需要添加一个链接,并在用户点击时跳转到相应的页面。那么,如何为 WordPress 网站添加无链接的导航菜单呢

我们这里所说的无链接菜单,指的是不会在用户点击时跳转到某个页面,而是只打开下拉列表展示所属的子菜单项。本文,我们将介绍,如何为 WordPress 网站添加无链接的导航菜单。

创建没有链接的菜单项

在 WordPress 的管理仪表盘中,转到 外观 > 菜单。

如何为 WordPress 添加无链接的导航菜单

添加菜单项下,单击自定义链接。如果没有看到此选项,请滚动到页面顶部并在右上角查找 Screen Options

如何为 WordPress 添加无链接的导航菜单

单击它,查找自定义链接,然后选中此框。

如何为 WordPress 添加无链接的导航菜单

现在让我们转到如下图所示的自定义链接,在 URL 字段中输入井号(#)。在链接文本字段中输入想要创建的菜单项的名称。

如何为 WordPress 添加无链接的导航菜单

完成后,按添加到菜单按钮。保存更改后,新菜单项将出现在右侧的菜单结构中。

现在可以从右侧的菜单中打开自定义的菜单项目。如果刚刚在 URL 字段中留下“#”号,新菜单项将显示为已链接,但是在单击它时,将返回到他们当前正在浏览页面的顶部。如果删除“#”号标签并将该字段留空,则正在浏览的页面将在单击菜单项时刷新页面。

如何为 WordPress 添加无链接的导航菜单

如何使菜单项不可点击

如果在点击菜单时,既不想返回顶部,也不想刷新当前页面,我们可以通过一些简单的 CSS 样式设置使链接无法点击。在外观 > 菜单中单击页面顶部的屏幕选项并确保选中CSS 类框。

如何为 WordPress 添加无链接的导航菜单

接下来,转到取消链接的菜单项并查找 CSS Classes 选项。在该字段中设置一个 ClASSES 类,如“unclickable”,然后点击保存菜单。

如何为 WordPress 添加无链接的导航菜单

在创建了CSS类后,将以下代码添加到CSS:

.unclickable > a {
   pointer-events: none;
}

这样我们就成功的为 WordPress 添加了无链接的导航菜单。

原创文章,作者:牛奇网,如若转载,请注明出处:https://www.niuqi360.com/wordpress/how-to-add-wordpress-menu-without-link/

发表评论

登录后才能评论