用于自定义 WordPress 菜单的提示、技巧和最佳插件

已发表: 2018-04-04

菜单是每个网站最重要的部分之一。它们无所不在，可以引导用户浏览您的博客。虽然在 WordPress 中添加导航菜单相对容易，但您可以做更多的事情来为您的网站自定义它。

无论是您想要在菜单上使用小图标，还是想要一个完全不同的系统来处理它，本指南都应有尽有。查看我们在本指南中为您准备的提示、技巧和一些最佳菜单插件：

将图标添加到您的 WordPress 菜单
将登录/注销按钮添加到菜单
在您想要的任何地方显示 WordPress 菜单
如何在 WordPress 菜单中添加搜索框
如何使导航菜单贴在页面顶部
使用插件制作您的粘性导航菜单
如何删除WordPress中的顶级菜单项
WordPress 的前 4 个菜单插件
最好的 WordPress 移动菜单插件

将图标添加到您的 WordPress 菜单

在 WordPress 中创建菜单从未如此简单。您所要做的就是生成页面并将它们添加到您的主页旁边。您的主导航菜单只需点击几下即可完成，但它可能看起来非常简单。

有许多插件可以帮助您创建视觉上令人惊叹的导航菜单。当然，如果您知道怎么做，您可以自己编写一个代码，但是有一种更简单的方法可以使您的常规菜单更加用户友好——通过添加图标。

图标已经成为我们离不开的东西。当您在 WordPress 仪表板、桌面或智能手机和平板电脑上搜索某些内容时，您可能习惯于使用图标。仅使用几次新应用程序后，您更有可能记住它的图标，而不是它附带的所有描述文本。那么，为什么不在菜单项旁边放一个图标，让人们轻松浏览您的网站呢？

菜单图标

价格：免费

如果你不知道怎么做，别担心，这就是你在这里的原因。在指南的这一部分中，我们不会用自定义编码来打扰您，但我们只会向您展示一个简洁的免费插件，您可以在接下来的几分钟内对其进行配置。

转到插件 - >添加新
搜索“菜单图标”
安装并激活插件
导航到外观 -> 菜单
打开导航菜单
在菜单结构下选择要为其选择图标的页面
选择图标，编辑其位置和大小
保存菜单

就是这样！现在去在菜单上找到一些你想要的酷图标并享受你的新设计。当您仍在使用图标时，请不要忘记，您也可以轻松地将网站图标添加到您的 WordPress 博客。

将登录/注销按钮添加到菜单

我们喜欢的众多 WordPress 功能之一是其注册新用户的简便方法。在流行平台上控制不同的用户角色再简单不过了；您可以分配已注册的角色，您甚至可以根据站点的需要创建大量自定义用户角色。

虽然注册它们既快速又容易，但照顾好您的用户可能是一项艰巨的工作。但是您需要竭尽全力使他们在网站上的体验尽可能好。

您可以为他们做的许多事情之一是启用一种简单的方法来登录和退出您的站点。要使登录/注销链接始终触手可及，您可以将这些链接放在主菜单中。首先，菜单中的这些链接非常实用，其次，您的用户可能已经习惯了使用相同登录和注销方式的各种其他应用程序的功能。

在这种情况下，无需获取另一个插件。 我们将在本文的这一部分向您展示的一个简单的 WordPress 功能可以为您做得很好。它会自动在您的菜单上放置正确的链接。这意味着当用户注销时，他将获得“登录”链接，反之亦然。您和用户都不必再担心登录按钮。

如果您准备将这个简单而整洁的登录功能添加到菜单中，那么您必须执行以下操作：

打开functions.php
复制并粘贴以下内容：

 函数 add_login_logout_link($items, $args) {
$loginoutlink = wp_loginout('index.php', false);
$items .= '<li>'。 $loginoutlink .'</li>';
返回 $items;
}
add_filter('wp_nav_menu_items', 
'add_login_logout_link', 10, 2);

保存更改

与我们的大多数代码段一样，您只需将函数复制并粘贴到文件中即可。完成后，您可以继续并重新加载主页。由于您仍处于登录状态，您将在主菜单的最后一个位置看到“注销”链接。请务必检查整个功能，因此请尝试注销并重新登录以确保一切正常。

现在您已经完成了这个小功能，不要忘记您可以在成功登录后轻松地将用户重定向到另一个页面，甚至只向登录或注销的用户显示内容。

此外，现在您有了自定义菜单，您可能有兴趣通过提供自定义短代码在网站上的任何位置显示它。

我们喜欢用这样的小片段来定制 WordPress，你呢？

在您想要的任何地方显示 WordPress 菜单

在 WordPress 达到 3.0 版本之后，很多东西变得更容易使用了。在不同的新功能中，任何人都可以创建导航菜单，如今，每个人只需单击几下鼠标按钮即可构建自己的菜单。

虽然创建可以轻松链接任何帖子、页面、类别或任何外部链接的菜单是小菜一碟，但对于那些不参与 WordPress 开发的人来说，在网站的不同位置显示菜单可能会更大一些。

根据您使用的 WordPress 主题，您可以轻松地在页面顶部显示一个新创建的菜单，我们都习惯于在其中查找导航。您可以选择将菜单放在侧边栏上，甚至放在页脚区域的正下方，但是如果您想在帖子、页面甚至小部件中显示菜单怎么办？

不，您不必创建自定义列表或重新键入整个 HTML 代码来复制链接；您可以利用短代码并将现有菜单放置在您想要的任何位置！

在接下来的几行中，我们将向您展示如何做到这一点，我们相信您会喜欢新的“短代码菜单”功能。

创建短代码并在您想要的任何地方显示 WordPress 菜单

打开functions.php文件
复制并粘贴将注册短代码的代码：

 function menu_function($atts, $content = null) {
 提炼（
 shortcode_atts(
 数组( '名称' => null, ),
 美元
)
 );
 返回 wp_nav_menu(
 大批（
 '菜单' => $name,
 '回声' => 假
)
 );
 }
 add_shortcode('menu', 'menu_function');

保存更改

保存更改后，您将能够在任何地方显示 WordPress 菜单。 您所要做的就是写下短代码，您必须在其中指定要使用的菜单的名称：

[菜单名称=“主菜单”]

在大多数情况下，您的主菜单会附有“主菜单”名称。但是，如果您要使用任何其他菜单，只需在短代码中输入其名称即可。您不必记住每个菜单名称；相反，导航到外观 -> 菜单并浏览菜单列表或创建新菜单。

由于您现在几乎可以在任何地方显示 WordPress 菜单，因此您可以创建大量导航，供您在 WordPress 驱动的网站上使用。您可以在帖子中放置一个，在模板文件中放置另一个，文本小部件等。

如何在 WordPress 菜单中添加搜索框

除非您已删除该功能，否则 WordPress 允许您的访问者搜索您的整个网站。我们多次提到过这个很酷的功能，并向您展示了您可以对搜索页面执行的不同操作。例如，如果只找到一个结果，您可以轻松地将用户重定向到帖子，甚至可以设置自定义 Google 搜索。

如果您浏览过标准的 WP 小部件，您可能已经看到有一个可以放置在侧边栏上的搜索小部件。但是，如果您希望搜索框出现在菜单旁边呢？

在接下来的几行中，我们将向您展示一个功能，该功能会将您的日常搜索框放入导航菜单中。

在菜单中添加搜索框：

打开functions.php
复制并粘贴以下内容：

 add_filter('wp_nav_menu_items','add_search_box', 
10, 2 );
函数 add_search_box( $items, $args ) {
$items .= '<li>' 。 get_search_form( false ) 。 
'</li>';
返回 $items;
}

保存更改

为确保代码对您有用，请确保您的站点中已经添加了导航菜单。

代码非常简单，它唯一的功能是将搜索框添加到您的导航菜单中。最有可能的是，您的搜索框不会与您希望的位置对齐。这意味着您必须告诉 WordPress 将搜索框放在哪里：

向第三行代码中的 <li> 标签添加一个类：

 $items .= '<li class="searchbox-position">' 。 
get_search_form( false ) 。 '</li>'

保存更改
打开 style.css
复制并粘贴 CSS 代码：

 .searchbox-位置{
 边距顶部：15px；
 右边距：20px；
 }

根据自己的喜好更改代码
保存更改

希望您将盒子完美地嵌套在菜单旁边。将盒子放在您想要的位置并不需要太多。不要忘记设置搜索框本身的样式并享受该功能。

如果您想更好地控制菜单和搜索框，请查看如何向菜单添加图标以及如何为喜欢口述搜索词的访问者添加语音搜索选项。您可以使用菜单和搜索选项执行更多操作，因此请测试我们的搜索框并学习新知识。

如何使导航菜单贴在页面顶部

您可能见过导航菜单贴在页面顶部并跟随您滚动冒险的每一步的网站。该功能可能是您在 WordPress 网站上想要的东西，在指南的这一部分，我们将向您展示如何创建一个。

它不仅有一个功能性的一面，菜单总是触手可及，而且看起来也非常漂亮和流畅。

如果您有一些 CSS 知识，那么您将不会遇到使菜单具有粘性的问题。您只需将一段代码添加到 Style.css 文件中，然后您就可以享受新的菜单功能。

打开您的样式表 (style.php)
查找.nav-menu或.genesis-nav-menu （或类似的，取决于您使用的主题）
将以下代码用于主菜单容器：

 .导航菜单{
 位置：固定；
 背景：#333；
 顶部：0px；
 右：0px；
 左：0px；
 z-索引：99；
 }

正如您可以从代码中猜到的，重要的部分出现在您需要修复 menu 位置的第二行。之后，您可以将顶部、右侧和左侧元素设置为 0 像素或将它们移动到距页面顶部或左右边距的任意距离（例如：top: 10px 会将您的菜单放置在距页面 10 像素的位置）您网站的上边距）。

更新您的文件并享受您的粘性导航菜单

如果您不喜欢弄乱代码，您可以使用插件使您的菜单具有粘性。

使用插件制作您的粘性导航菜单

我们教您如何通过更改主题中的一行 CSS 代码来创建粘性导航菜单。但是，无论这多么容易，并不是每个人都喜欢浏览 WordPress 文件并自己编辑代码。如果您是那种类型的人，或者您需要更多地控制菜单，请不要担心。 您可以使用插件轻松设置菜单并使其具有粘性。在本文的这一部分，我们将向您展示一些最好的。

UberMenu 粘性扩展

价格： 8 美元

UberMenu Sticky Extension 是 UberMenu 插件的附加组件，这意味着您必须先安装此插件才能使扩展工作。扩展使一切变得简单；安装后，您就可以使菜单具有粘性了。 无论您将菜单放在哪里，一旦用户开始滚动，菜单将固定在页面顶部并使其易于访问。

为了确保移动用户可以访问菜单的每个部分，一旦检测到移动设备，粘性选项就会关闭。这里没有什么可添加的 - 查看官方网站上的演示，如果您已经拥有 UberMenu，请继续使您的菜单具有粘性。

我的粘性菜单

价格：免费 - 演示

该插件旨在用于二十十三主题。但是如果你稍微调整一下，你可以在任何你喜欢的主题上使用它。默认情况下，它使用主题的导航 CSS 类“.navbar”。 所以如果你想在其他主题上使用它，你必须找到你的主题用来描述导航菜单的类并更改该类的名称。

如果您的主题是响应式的，该插件也将响应。如果您想更多地修改它，欢迎您输入您的自定义 CSS 样式，让您的粘性菜单更加个性化。

滚动上的粘性菜单（或任何东西！）

价格：免费

此插件将允许您将菜单放在顶部并使其具有粘性。但不仅如此，该插件还允许您通过为元素找到正确的选择器来使任何元素具有粘性。这意味着当用户滚动浏览您的网站时，您可以将您的徽标甚至整个标题卡在页面顶部。为了使一切正常，您必须对 HTML 和 CSS 有所了解，以便找到正确的选择器。

如何删除WordPress中的顶级菜单项

您可能已经知道 WordPress 是高度可定制的。如果您知道如何编码或至少找到合适的插件，您就可以转换您的后端和前端，并向您的访问者和您的作者展示一个独特的网站。

在这一部分，我们将向您展示一个简单的代码，它允许您从 WordPress 管理页面中删除顶级菜单项。

您可以在下面找到的代码将删除所有用户而不是 admins 的所有顶级菜单项。在继续之前，您应该知道此代码段仅删除了菜单项，但知道设置页面正确路径的任何人仍然可以使用这些项。如果要完全限制对某些菜单页面的访问，则必须更改用户权限。

删除顶级菜单项：

打开你的functions.php文件
复制并粘贴以下代码：

 如果（！current_user_can（'manage_options'））{
add_action('admin_menu', 'my_remove_menus', 999);
}
函数 my_remove_menus() {
remove_menu_page('index.php'); //仪表盘
remove_menu_page('edit.php'); //帖子
remove_menu_page('upload.php'); //媒体
remove_menu_page('edit.php?post_type=page'); //页面
remove_menu_page('edit-comments.php'); //注释
remove_menu_page('themes.php'); //外貌
remove_menu_page('plugins.php'); //插件
remove_menu_page('users.php'); //用户
remove_menu_page('tools.php'); //工具
remove_menu_page('options-general.php'); //设置
}

保存更改

由于此代码删除了您可能不想做的所有顶级菜单，因此可以根据需要随意修改代码。每个“remove_menu_page”行负责删除一页（在括号中以及代码行旁边的注释中进行了描述）。 只需在菜单中添加或删除您不想显示的页面，然后再保存一次更改。

既然您已经了解了如何从菜单中删除顶级页面，您可能只想删除位于顶级页面下的一些子页面。

WordPress 的前 4 个菜单插件

一旦您开始构建您的新网站，您迟早会需要一个菜单。您可以使用 WordPress 中的标准菜单选项创建一个，但如果您想要更专业的菜单选项，则必须了解您的 HTML 和 CSS 代码。这也意味着您将花费一些时间来设计一切以使其完美运行并同时看起来很漂亮。

但是，如果您需要更快的解决方案，或者您根本不知道如何编写自己的精美菜单，WordPress 允许您安装一些出色的插件，只需点击几下即可制作精美的菜单。没有任何特定的顺序，这里有一些最好的 WordPress 菜单插件。

优步菜单

价格： 20 美元 - 演示

Uber Menu 的销量超过 43,000，是 WordPress 最受欢迎的插件之一。一旦您打开演示站点并查看使用此插件创建的菜单是什么样子，您就会明白它为何如此受欢迎。一旦你开始列出它的功能，你可能会想要一个。

使用 Uber 菜单创建的菜单将为您的移动访问者提供响应和触摸功能。您可以创建漂亮的布局并将图标、图像、视频和地图放入菜单中。整个表单可以放在子菜单中，这样您就可以创建联系表单，而无需为此添加额外的页面。该插件是高度可定制的，您可以使用 50 多种样式设置进行实时预览。您可以从其他内容自动构建子菜单，在菜单下创建选项卡等等。

动态项目生成
选项卡式子菜单
增强的用户界面

Morph：可定制的 Fly-Out WordPress 菜单

价格： 20 美元 - 演示

Morph 是专为移动设备设计的弹出式菜单。但是，正如您在演示页面上看到的，如果您在个人计算机上打开它，它在桌面上看起来也非常棒。

通过使用此插件，您可以隐藏菜单并通过简单的单击将其调出。在菜单区域，您可以创建标准的下拉菜单、添加图片、搜索按钮，整个区域都是小部件，这意味着您可以嵌入任何您需要和想要的内容。该插件非常可定制，因此您可以选择所需的颜色、更改图像高度以及添加或删除元素以满足您的需求。如果要将其用于移动设备，则可以轻松设置显示菜单的分辨率。

在桌面和移动设备上都能很好地工作
添加/删除可自定义的元素
可以被任何元素触发

英雄菜单

价格： 19 美元 - 演示

无论您想要一个简单的菜单还是一个复杂的“超级菜单”，您都可以使用 Hero Menu 插件创建一个。您创建的每个菜单都具有响应性，并且在任何设备上看起来都很棒；如果您选择创建大型菜单，则可以显示或隐藏项目，因此您不必担心小屏幕上的布局。

有针对 Android、iOS 和 Windows Phone 的特殊触摸支持。选择全宽或固定宽度导航栏，您只需使用拖放技术即可轻松添加额外元素。有超过 60 种预设配色方案，您可以自由使用每一种免费的 Google 字体。使菜单具有粘性，选择激活距离……这个很棒的插件可以提供更多功能，因此请务必查看 CodeCanyon 上的整个功能列表。

拖放菜单结构构建器
创建简单菜单或复杂的超级菜单
特色手机导航

多X酒吧

价格： 16 美元 - 演示

Multi-X 栏是一个模块化插件，允许您将几乎任何想要的内容放入导航栏中。除了菜单项，您最多可以在栏上放置 8 个项目- 无论是联系表单、搜索表单、社交共享图标、小部件区域等。

有两种不同的主题供您选择，外加一个自定义主题，您可以在其中设置自己的颜色，同时自动计算渐变。导航栏可以放置为固定或可滚动菜单。如果您是开发人员，如果您想从 Multi-X bar 创建一个新插件，您会想知道有一组钩子为您准备好了。这个插件提供了很多，所以一定要看看 CodeCanyon 上的所有功能。

8个嵌入式功能模块
2个颜色主题+自定义主题
顶部或底部位置

最好的 WordPress 移动菜单插件

我们都知道技术已经走了多远。智能手机和平板电脑已成为必然，移动设备拥有者的数量也在不断增加。 WiFi 网络覆盖了我们城市的每一个角落，如果没有，您始终可以通过您的提供商将您的移动设备连接到互联网。这意味着移动网络浏览者的数量比以往任何时候都多，如果您正在运营网站，则需要照顾好他们。

如果您正在构建一个移动站点或想让它变得更好，您肯定需要构建一个特殊的移动菜单，以适应任何屏幕尺寸并允许移动用户更轻松地导航。

使用 WordPress，这项任务并不像您想象的那么难。您不必知道如何编码或如何设置菜单。您所需要的只是一个插件，您可以根据自己的需要轻松安装和自定义。

在指南的这一部分，我们将向您展示一些最好的高级插件，它们可以为您的 WordPress 网站创建移动菜单。所以让我们向下滚动并看一看。

触

价格： 18 美元 - 演示

这个高级插件将创建一个干净的移动标题，其中嵌入了移动菜单。动画非常简单，它们在智能手机屏幕上看起来非常漂亮和流畅。使用 Tactile，您可以创建多级手风琴菜单、创建可滑动的单级水平菜单或创建可飞入您网站的小工具侧边栏。

一切都是可定制的，这意味着您可以用您想要的任何颜色绘制元素，更改背景并设置它们的颜色、不透明度等等。您的菜单可以固定或绝对定位。如果您想要更多地控制移动设备，您可以设置激活此菜单的分辨率。

几种菜单类型
搜索功能
固定/绝对定位

点按

价格： 10 美元 - 演示

TapTap 将使您能够为您的 WordPress 网站创建独特的移动菜单。正如您从演示站点中看到的，您几乎可以创建任何您想象的东西，并且您的菜单看起来非常整洁。使用此插件，您可以创建多级菜单、决定要显示哪些元素、添加描述或启用集成搜索选项。

有两种菜单按钮设计和一些动画可供选择。您的菜单位置可以是固定的，也可以使用绝对定位。选择背景样式并使用多种样式选项，这样您就可以将菜单完美地融入您的主题中。最后但并非最不重要的一点是，TapTap 可让您选择显示自身的分辨率。您还想从移动导航菜单中获得什么？

多级菜单
2 个菜单按钮设计和动画
固定/绝对定位

摩比

价格： 16 美元 - 演示

Mobi 是另一个简单而出色的 WordPress 插件，可随时为移动网站提供帮助。通过此添加，您的响应式主题将具有更好的导航。使用直观的拖放菜单构建器创建菜单后，您可以将其放置在站点的顶部或底部。

所有菜单项都是可自定义的，您可以自由地向导航栏添加社交媒体图标。有超过 700 种图标字体，您可以使用其中一种 Google 字体来完成您的设计。如果需要，您可以控制来宾和登录用户的用户可见性。

拖放自定义
顶部或底部菜单定位
访客和登录用户的用户可见性

哇音菜单

价格： 44 美元 - 演示

Wah-menu 是一个可停靠的菜单，非常适合移动网站，专为 iPad 触摸导航而设计。使用这个高级插件，您最多可以添加 8 个菜单链接，这些链接将非常适合您的 WordPress 网站的一侧。

单击菜单中的特定图标后，将出现一个子菜单，其中包含 HTML、嵌入式视频、地图和几乎所有您想要的内容。该插件是高度可定制的，这意味着您可以从 8 种强调色中进行选择，使用菜单宽度、图标、链接等。使用 WYSIWYG 编辑器创建菜单非常容易。无论您选择使用深色主题还是浅色主题，您都可以确定它看起来不错。

所见即所得编辑器
支持 HTML、嵌入视频等的子菜单。
出站或停靠状态选项

路径样式菜单

价格： 12 美元 - 演示

这个高级插件与您通常用于创建菜单的插件有些不同。 路径样式菜单创建了一个按钮，而不是经典的菜单栏或侧边栏菜单。激活按钮后，它会在按钮周围显示一个圆形菜单，以您想要的任何方向内联扩展它，甚至以弧形组织图标。

如果有多个菜单级别，该按钮将创建一个返回按钮，允许用户再次转到主菜单。有大量的自定义选项和创建菜单；您可以简单地使用 WordPress 标准菜单编辑器。如果您正在寻找独特的移动菜单，请给路径样式菜单一个机会。

在按钮周围创建菜单
高度可定制
使用标准 WP 菜单编辑菜单

滚动导航

价格： 10 美元 - 演示

另一个独特的菜单插件，它为您提供了一些很棒的功能，并且可以在您的网站上看起来很棒。 Scrollnav 由一个包含多个菜单选项的圆圈组成。按钮中间有一个主页链接，顶部链接将您逻辑地带到页面顶部，有一个搜索框、一个自定义菜单和一个圆圈的自定义链接部分。

自定义菜单将提供足够的空间来创建带有子菜单的整个菜单，它看起来很棒，并将为您的移动网站提供急需的空间。您可以选择多种配色方案，并且一切都很容易配置。您绝对应该检查演示站点以了解这个小插件是如何工作的。

不同功能的圆形按钮
自定义菜单和自定义链接部分
几种配色方案

滚动到菜单

价格： 24 美元 - 演示

这个简单的高级插件将为您提供一个很酷的侧边栏菜单，该菜单专为 iOS 和 Android 触摸导航而构建。创建菜单后，它将具有链接到页面另一部分并自动滚动的图标。

需要注意的是ScrollTo 不是一个完整的导航菜单，它只是滚动到同一页面的另一部分。您可以从 750 多个图标中进行选择，也可以使用自己的图像作为菜单项，并且有额外的广告空间。为了使一切正常，您必须具备基本的 HTML 知识，以便您可以按照说明进行操作。您可能需要多花几分钟的时间，但最终结果看起来很棒。

触控功能
超过 750 个图标 + 自定义图像
额外的广告空间

结论

我们希望您现在已经意识到没有菜单很难运行网站。即使您运行单页浏览器，您仍然需要在各部分之间进行导航。因此，当您已经在这里时，请花点时间自定义您的 WordPress 菜单，并尽可能制作出最好的菜单。