如何创建移动响应式 WordPress 菜单
已发表: 2023-01-24你有没有想过创建一个移动响应式 WordPress 菜单？ 您可能已经看到已经做到这一点的网站，但您从来没有能够自己做到这一点。 如果是，那么本文适合您，因为今天，我们将向您展示为您的 WordPress 网站创建和自定义移动菜单的非常简单的方法。
但在我们开始之前，让我们详细看看什么是移动响应式菜单，以及它的好处。
什么是移动响应菜单？
移动响应菜单是专门设计用于智能手机和平板电脑等移动设备的下拉菜单。 这种类型的菜单通常通过点击汉堡包图标来触发，它允许用户浏览您的网站而无需滚动一长串链接。
如果您希望为您的网站创建移动响应式菜单，则需要牢记一些事项。
首先，您需要确保您的菜单在触摸屏上易于使用。 这意味着您的链接应该足够大以便点击，并且它们应该间隔开，这样用户就不会不小心点击错误的链接。
其次，您还希望确保您的菜单在不使用时自动折叠，以便用户在不寻找特定内容时不必滚动浏览它。
最后，您需要考虑您的移动响应菜单将如何与您网站的其余部分一起使用。 如果您使用网站的单独移动版本，您需要确保您的菜单链接将用户重定向到适当的页面。 但是，如果您为整个网站使用响应式设计，请记住您的菜单与其余内容配合得很好。
为什么我们必须创建移动响应菜单？
随着越来越多的人使用他们的移动设备访问互联网，移动响应菜单变得越来越流行。 创建移动响应菜单的主要原因是为了改善移动访问者的用户体验。 移动响应菜单使访问者可以轻松找到他们正在寻找的内容，无论他们使用的是智能手机、平板电脑还是台式电脑。
除此之外，还有一些您想要创建移动响应菜单的原因。
首先，它可以使您的网站对移动用户更加友好。 其次，它可以帮助您节省移动设备上的空间，因为菜单比传统菜单占用的空间更少。 第三，它可以帮助您改进搜索引擎优化 (SEO) ，因为移动用户更有可能点击易于查看和导航的链接。
不仅如此，由于易于导航，人们往往会在您的网站上停留更长时间，从而降低跳出率。
那么，如何创建移动 WordPress 响应式菜单呢？ 这样做很容易。
如何创建移动响应菜单？
您可以通过几种不同的方式创建移动响应式菜单。 当然，最简单的方法是使用插件。 有许多可用的插件可让您创建移动响应式 WordPress 菜单。 或者，您也可以使用 CSS 和 HTML 手动创建您自己的移动响应菜单。
WordPress 有几个免费和付费插件，可让您创建完全响应的移动菜单。 在这里，让我们先来看看几个用户友好且流行的插件。
响应式菜单
响应式菜单是最好的插件之一，可以将您的标准 WordPress 菜单转换为完全符合 W3C 标准的移动设备就绪设计。
使用此插件，您不需要任何编码知识。 您可以通过将 22,500 多个选项与 150 多个自定义选项相结合来创建响应式菜单。 凭借高度可定制的功能和直观的用户界面，您可以立即创建您选择的菜单。
主要特征
- 更改字体和颜色
- 添加搜索栏
- 一键导入导出菜单
- 不同的动画选项
- 预览更改
价钱
响应式菜单提供免费和付费版本。 专业版起价为每年 49美元。
WP 移动菜单插件
WP Mobile Menu是一个移动响应的 WordPress 菜单插件，可让您为您的网站构建令人惊叹的菜单。 您可以制作一个裸露的标题、一个具有三个深度级别的菜单、在菜单处于活动状态时覆盖遮罩等等，以保持您的用户的兴趣。
此外，您可以提交基于文本或图像的徽标并添加背景图片。 使用此插件的高级版本，您可以在特定页面上显示移动菜单、添加页眉实时搜索以及添加页脚菜单。
主要特征
- 禁用特定页面的菜单
- 仅允许登录用户看到菜单
- 选择菜单显示类型
- 包括版权部分
- 不同页面上的替代菜单
价钱
WP Mobile Menu 还提供免费和高级版本。 高级版的起始价格为每月 6.49美元。 此外，您还可以获得14 天无条件退款保证。
因此，这些是 WordPress 的几个顶级响应式菜单插件。 接下来，我们将看到两种创建移动响应式 WordPress 菜单的方法：
- 使用插件
- 以编程方式
所以，事不宜迟，让我们开始吧。
1. 使用 WP 移动菜单插件创建移动响应菜单
对于此演示，我们将使用响应式菜单插件，因为它可以从 WordPress.org 存储库免费获得并且易于使用。
在开始之前，您需要在您的站点上安装并激活该插件。
1.1 安装并激活响应式菜单插件
首先，从 WordPress 管理面板单击插件 > 添加新插件。 使用页面上的搜索栏查找插件的关键字。
要开始安装过程，请在找到所需插件后单击“立即安装”按钮。 之后，要开始使用插件，请单击“激活”按钮。
1.2 创建手机菜单
安装并激活插件后，您可以在 WordPress 仪表板中找到插件设置。 在那里您可以找到 3 个不同的选项：菜单、设置和主题。
单击“菜单”选项后，将打开一个新页面，您可以在其中找到“创建新菜单”按钮。 现在您将看到一个新窗口，您可以在其中选择各种菜单模板。 在免费版本中，您可以获得四种不同的模板。 选择您选择的模板后，单击“下一步”。
然后，您将被重定向到菜单设置。 在这里，您可以为您的菜单添加一个描述性名称，以便您以后可以识别该菜单。
您还可以链接 WordPress 菜单以映射到您现有的菜单。 另一个设置选项是通过添加有效的 CSS 选择器来隐藏现有主题的默认菜单。 我们稍后会看到如何隐藏默认菜单。
接下来，选择要显示菜单的设备。 如果您使用的是专业版，您将可以选择手机、平板电脑和台式机。 但在免费版本中，只有手机和平板电脑选项可用。 最后，您可以选择不同的条件来显示菜单。 同样，此选项在专业版上可用。
用所需的详细信息填写字段后，单击“创建菜单”按钮。 这将再次将您重定向到可以自定义菜单的页面。
但如您所见，新创建的菜单与原始菜单重叠。 现在，通过几个进一步的步骤，我们可以完全隐藏原始菜单。
1.3 隐藏默认菜单
正如我们之前看到的，如果原始的 WordPress 菜单没有被隐藏，它会默认显示在新的响应式汉堡菜单旁边（偶尔会重叠）。 因此，您必须手动隐藏菜单。 为此，请转到响应式菜单插件中的设置 > 常规设置。 隐藏主题菜单的选项位于此处。
您可以通过在字段中插入CSS 选择器来隐藏当前的主题菜单。
现在在添加正确的 CSS 之前，我们必须找出正确的 id 或 class。 为此，右键单击原始菜单并选择“检查元素”，这将显示原始菜单选择器。
在隐藏主题菜单字段中，粘贴如下代码： class=”toggle”或id=”main-mobile-menu” ，id 前缀为“#”或“.” 对于类选择器。
例如，如果选择器为id=”main-mobile-menu” ，您可以在隐藏主题菜单区域中写入#main-mobile- menu。
在我们的例子中，我们的选择器是一个类。 这就是我们粘贴它并添加“.”的原因。 在代码之前。 将选择器与前缀一起粘贴后，确保单击“更新”按钮。
1.4 自定义手机菜单
成功添加菜单后，您可以根据自己的喜好自定义菜单。 您可以从Responsive Menu > Menus找到自定义设置。 在那里你可以找到一个新创建的菜单。 如您所见，有一个按钮显示“自定义”。 只需单击该按钮。
在自定义选项中，您可以更改按钮位置、菜单颜色、图像和背景。 不仅如此，您还可以在 Menu Breakpoint 选项中添加自定义 CSS，让您可以选择激活 Mobile Menu 所需的屏幕宽度。 通过增加断点宽度，也可以在桌面屏幕上显示移动菜单。
2. 以编程方式创建移动响应菜单
在本节中，我们将了解如何以编程方式为您的网站创建响应式菜单。 因此，如果您对编码和编辑核心文件有信心，那么此方法非常适合您。
2.1. 将自定义代码片段添加到 WordPress
在我们进入实际方法之前，为确保不与任何插件或脚本发生冲突，我们始终建议在对核心文件进行任何更改之前生成完整网站的备份。
要添加自定义代码片段，您可以使用代码片段之类的插件或将代码片段直接粘贴到子主题的functions.php文件中，因为此方法需要插入自定义代码。
首先，您可以根据自己的喜好手动创建子主题或使用子主题插件。 对于本教程，我们使用 WP Child Theme Generator 插件创建了一个子主题。
2.2. 创建移动响应式 WordPress 菜单的代码片段
创建子主题后，将以下代码粘贴到 functions.php。 或者，将以下代码添加到您的 CodeSnippets 插件并激活该代码段。
函数 twenty_twenty_child_style_setup() {
register_nav_menu( 'primary-res-navigation', __( 'Primary MobRes Navigation', 'twenty_twenty_child_style_setup' ) );
}
add_action( 'after_setup_theme', 'twenty_twenty_child_style_setup' );
在这里，我们使用 twenty-twenty-child 设置方法将新的响应式自定义菜单命名为“ primary-res-navigation ”。 对于 WordPress 功能，我们使用了“ register_nav_menu” 。 当您将此代码添加到您的function.php时，如下面的屏幕截图所示，您将能够在 WP 管理部分中查看自定义菜单。
因为自定义菜单用作主要标题菜单，所以您必须添加另一个自定义代码以启用主资源导航菜单的显示。 只需添加以下代码行：
wp_nav_menu( array( 'theme_location' => 'primary-res-navigation', 'menu_class' => 'nav-res-navigation' ) ); ？>
然后，只需单击管理菜单，创建一个新的移动菜单，然后添加您希望显示在移动菜单上的自定义链接。 所有这些都应该连接到您的主要移动菜单主题位置。
预览后，这就是您的菜单的外观，具体取决于您使用的主题。
添加新的自定义菜单后，您希望它只出现在移动设备上，而不是台式计算机上。 在这种情况下，我们可以使用 CSS 媒体查询。 只需将以下代码行添加到style.css即可防止移动菜单默认出现：
.nav-res-navigation { 显示：无； }接下来，您应该只在移动屏幕上查看网站时显示primary-res-navigation 菜单，并隐藏主菜单。 您可能还对为菜单添加不同设计的边框感兴趣。 为了使您的菜单更好，您应该将下面的代码片段添加到您的style.css文件中。
@media only screen and (max-width:500px) {
.nav-res-导航{
显示：块；
}
.nav-res-navigationa{
背景：#333；
颜色：#800000；
填充：10px0；
文本对齐：居中；
显示：块；
}
.main-nav-menu{
显示：无；
}
} 
使用这段代码，主菜单将保持隐藏状态，菜单只会显示在一个小屏幕上。
就是这样。 通过这些简单易行的步骤，您可以使用自定义代码创建移动响应式 WordPress 菜单。
结论
创建移动响应菜单可以让移动用户更容易访问您的网站。 使用移动响应菜单，您的网站将在较小的屏幕上易于使用，并且仍将提供与在台式计算机上相同的所有特性和功能。
在本文中，我们讨论了如何为任何 WordPress 网站创建和自定义适合移动设备的菜单。 我们还了解到为什么将它们放在网站上很重要。 此外，我们还查看了前两个响应式菜单插件，因此您可以选择最适合您需要的那个。 最后，我们学习了如何使用响应式菜单插件创建移动响应式 WordPress 菜单。
在向您的网站添加额外功能时，插件方法是最简单但安全的选择。 另一方面，如果您熟悉编码并且不需要插件，则可以使用手动方法。
我们希望您发现这篇文章有用且内容丰富。 如果是这样，请务必查看我们的其他相关博客文章，您可能也会对这些文章感兴趣：
- Elementor 的智能超级菜单 – 完整指南
- 如何编辑 WordPress 仪表板菜单
- 如何将社交媒体图标添加到 WordPress 菜单