您想创建适合移动设备的响应式 WordPress 菜单吗？
超过一半的网站流量来自移动设备。如果您的导航菜单在智能手机和平板电脑上运行不佳，那么很大一部分受众可能很难在您的网站上找到方向。
在本指南中，我们将向您展示如何创建适合移动设备的响应式 WordPress 菜单。
为什么要创建适合移动设备的响应式 WordPress 菜单？
精心设计的导航菜单将帮助访问者在您的网站上找到方向。然而，仅仅因为您的菜单在台式电脑上看起来很棒，并不意味着它在智能手机和平板电脑上也会看起来很棒。
移动用户约占所有互联网流量的 58%。也就是说，如果您的菜单在移动设备上看起来不佳或无法正常工作，那么您可能会失去一半的受众。这将使您难以实现关键目标，例如增加电子邮件列表、获得销售和发展业务。
话虽如此，让我们看看如何创建一个适合移动设备的响应式菜单，该菜单在智能手机和平板电脑上看起来很棒。只需使用下面的快速链接即可直接跳至您要使用的方法。
方法 1：创建适合移动设备的响应式滑动面板菜单
响应式滑动面板是一种导航菜单，当访问者点击或单击切换按钮时，该菜单会在屏幕上滑动。
这样，菜单始终触手可及，但默认情况下不会占用任何屏幕空间。这一点尤其重要，因为智能手机和平板电脑的屏幕比台式电脑小得多。
如果菜单不断展开，则移动用户可能会使用设备的触摸屏意外触发其链接。这使得滑动面板成为移动响应菜单的不错选择。
添加适合移动设备的滑动面板的最简单方法是使用响应式菜单。
注意：有一个高级版本的 响应式菜单， 带有额外的主题和附加功能，例如 条件逻辑。但是，在本指南中，我们将使用免费插件，因为它拥有创建移动就绪菜单所需的一切。
您需要做的第一件事是安装并激活响应式菜单插件。有关更多详细信息，请参阅我们有关如何安装 WordPress 插件的分步指南。
激活后，您可以使用该插件自定义您之前创建的任何 WordPress 菜单。如果您需要创建新菜单，请参阅我们有关 如何在 WordPress 中添加导航菜单的指南。
如果您的 WordPress 主题已经有内置的移动菜单，那么您需要知道该菜单的 CSS 类，以便可以隐藏它。如果您跳过此步骤，那么移动用户将在您的网站上看到两个重叠的菜单。有关分步说明，请参阅我们有关如何在 WordPress 中隐藏移动菜单的指南。
完成后，转到 响应式菜单»菜单 页面，然后单击“创建新菜单”按钮。
您现在将看到一些可用于菜单的不同主题。
我们在图像中使用“默认主题”，但您可以使用任何您想要的主题。做出决定后，点击“下一步”。
您现在可以输入菜单的名称。这仅供您参考，因此您可以使用任何您想要的东西。
完成后，单击“链接 WordPress 菜单”并选择您要使用的菜单。
如前所述，如果您的主题已有内置移动菜单，那么您需要将其CSS 类添加到“隐藏主题菜单”字段。
如果您升级到高级插件，那么您将获得一些额外的设置。例如，专业版用户可以隐藏特定页面或设备上的菜单。
如果您对菜单的设置感到满意，请单击“创建菜单”。
现在，您将在屏幕右侧看到WordPress 网站的预览，并在左侧看到一些设置。
要查看您的网站在移动设备上的外观，请单击屏幕左下角的移动设备或平板电脑图标。
要自定义菜单在移动设备上的外观和操作方式，请选择“移动菜单”。
然后，单击“容器”。
在这里，您会发现许多不同的设置。
当您进行更改时，实时预览通常会自动更新。考虑到这一点，最好扩展菜单，以便您可以监控移动菜单的外观。为此，只需单击菜单切换按钮即可。
默认情况下，该插件会添加标题和一些“添加更多内容…”文本。
您可以用自己的消息替换它，甚至完全删除文本。要编辑标题，请单击展开“标题”部分。
您现在可以在“标题文本”字段中输入您自己的消息。
您还可以添加标题链接，或添加图标字体和图像。
要自定义标题的外观，请单击“样式”选项卡。
如果您不想显示任何标题文本，请单击以停用“标题”旁边的开关。
如果标题不是必需的，那么删除它将为移动导航菜单中的链接和其他内容创造更多空间。
替换“在此处添加更多内容……” 包含您自己的消息的文本，单击以展开“其他内容”区域。
现在，您可以使用左侧菜单中的设置输入自己的文本、更改文本颜色、更改文本对齐方式等。
要完全删除文本，只需单击以停用切换即可。
再次，这可以为菜单的其余内容创造更多空间。这对于通常屏幕较小的智能手机和平板电脑特别有用。
默认情况下，响应式菜单会将所有菜单项显示为单个列表。但是，您可能更愿意在多列中显示这些链接。如果您的菜单标签较短，这可以很好地发挥作用，因为它允许您在较小的空间中显示更多项目，而不会让菜单看起来混乱。
要尝试不同的列布局，请单击展开“菜单”部分。
您现在可以打开“菜单容器列”下拉列表并选择要使用的列数。
此时，您可能会看到一些“需要更新”文本。如果您看到此消息，请单击它以使用新的列设置更新实时预览。
默认情况下，响应式菜单会向您的 WordPress 菜单添加一个搜索栏。这可以帮助访问者找到有趣的内容，但也会占用宝贵的屏幕空间。
如果您愿意，可以通过停用“搜索”旁边的开关来删除移动用户的搜索栏。
您可以配置更多设置，因此您可能需要花一些时间查看其他选项。然而，这足以创建一个设计良好的移动就绪菜单。
如果您对导航菜单的设置感到满意，请点击“更新”。
现在，只需使用移动设备访问您的WordPress 博客，即可查看正在运行的新菜单。您还可以从桌面查看 WordPress 网站的移动版本。
方法 2. 创建适合移动设备的全屏响应式菜单
另一个选择是添加全屏响应菜单。这是一个自动调整以适应不同屏幕尺寸的菜单，因此无论访问者使用什么设备，导航菜单总是看起来不错。
由于菜单占据了所有可用空间，因此无论屏幕有多小，在智能手机和平板电脑上导航都更容易。
创建全屏菜单的最简单方法是使用全屏菜单 – 移动友好且响应式。该插件允许您仅为移动设备创建全屏菜单，或者您可以在智能手机、平板电脑和台式电脑上显示相同的菜单，以便所有访问者都有相同的体验。
您需要做的第一件事是安装并激活全屏菜单插件。您可以查看我们有关如何安装 WordPress 插件的分步指南 以了解更多详细信息。
激活后，从 WordPress 菜单中选择全屏菜单选项，然后选中以下框：“激活动画全屏菜单”。
我们还建议选中“仅为管理员用户显示菜单”框。这使您可以在配置菜单时看到更改，但在您启用移动菜单之前，访问者不会看到移动菜单。
默认情况下，该插件将在所有设备上显示全屏菜单。如果您只想在智能手机和平板电脑上显示全屏菜单，请选中“仅限移动设备”旁边的框。
完成后，您就可以通过单击“设计/外观”选项卡来微调菜单的外观。
在这里，您可以选择全屏菜单的颜色、字体和动画设置。
进行这些更改时，请注意“初始背景菜单”是菜单的切换图标。同时，“打开的背景菜单”是展开的全屏移动菜单的颜色。
选择菜单颜色后，滚动到“菜单外观”部分。您可以在此处更改菜单的字体颜色、字体系列和字体大小。
请注意，加载额外的字体可能会影响您的 WordPress 网站的性能和速度。对于移动设备来说，这并不总是一个好的选择，因为与台式计算机相比，移动设备的处理能力通常较低。一些访问者的移动互联网连接也可能较差，这将使您的网站加载速度更慢。
完成后，滚动到“动画设置”。
首先，您可以选择当访问者单击切换图标时菜单将如何展开。只需打开“动画类型”下拉菜单，然后从列表中选择一个选项，例如从上到下或从左到右。
当您对菜单的设置感到满意后，就可以通过单击“菜单内容”选项卡添加一些内容了。
在这里，继续打开“选择菜单”下拉菜单，然后选择您想要全屏显示的菜单。
如果您尚未创建导航菜单，请查看我们有关 如何在 WordPress 中添加导航菜单的指南。
如果您想在菜单中显示其他内容，则可以将其添加到“免费 HTML/短代码”框中。它充当迷你页面编辑器，因此您可以输入文本、更改格式、添加项目符号点和编号列表等等。
还有一个复选框将添加指向您的 隐私政策页面的链接。
接下来，您可能想将社交媒体图标添加到 WordPress 菜单中。这些图标将出现在全屏菜单底部的一行中。
要添加这些图标，只需单击展开“社交图标 1”框即可。
您现在可以输入图标的标题，例如“Facebook”。
之后，单击“社交图标”旁边的箭头，然后选择要向移动访问者显示的图标。
最后，在“社交 URL”字段中输入您要使用的地址。
要添加更多图标，只需单击“添加另一个图标”按钮即可。
最后，您可能需要添加 WordPress 搜索栏以帮助访问者找到他们正在寻找的内容。为此，只需选中“添加搜索栏”旁边的框即可。
默认情况下，该插件将显示“搜索某些内容…”消息。但是，您可以通过在“搜索输入占位符”字段中输入内容，将其替换为您自己的自定义消息传递。
例如，如果您经营WooCommerce商店，那么您可能需要使用“开始购物”或“搜索产品”等文本。
如果您对菜单的设置感到满意，请单击“保存更改”按钮。
现在，只需使用移动设备访问您的网站即可查看正在运行的全屏菜单。
您还可以使用WordPress 主题定制器预览网站的移动版本。
奖励：如何向登陆页面添加移动响应菜单
如果您要创建登陆页面或销售页面，那么您会希望设计在移动设备上看起来与在桌面上一样好。
考虑到这一点，我们建议使用SeedProd创建页面。SeedProd 是最好的页面构建器插件，附带 180 多个专业设计的模板。
使用 SeedProd 创建设计后，您可以使用 SeedProd 的现成导航菜单块向页面添加移动响应菜单。此块允许您为菜单设备和桌面创建单独的菜单。
通过这种方式，您可以使用不同的布局，甚至根据用户的设备显示不同的链接。
要了解更多信息，请参阅我们有关如何在 WordPress 中添加自定义导航菜单的指南。
将导航块添加到您的设计后，只需单击“高级”选项卡即可。
在这里，单击展开“设备可见性”部分。
之后，单击“隐藏在桌面上”开关将其激活。现在，这个菜单只会出现在移动设备上。
您现在可以使用左侧菜单中的设置添加链接并更改菜单布局。
我们希望本文能帮助您了解如何创建适合移动设备的响应式 WordPress 菜单。您可能还想查看我们关于如何增加博客流量的指南，或者查看我们专家为 WordPress 用户挑选的最佳分析解决方案。
