如何在 WordPress 主题中添加滑动面板菜单

如果您是 WordPress 开发人员或 WordPress 主题设计师，您可能希望在主题编辑器中添加自定义菜单以控制菜单选项。 但是，WordPress 管理仪表板默认没有滑动面板菜单选项。 这意味着您必须求助于第三方插件或模板才能将此功能添加到您的主题中。 因此，今天我们将解释如何在 WordPress 主题中添加滑动面板菜单。

WordPress 主题中的滑动面板菜单：为什么要包含它？

包括侧面板可能很重要的原因有很多。 第一个原因是，如果您花时间开发直观的菜单，访问者将更容易浏览您的 WordPress 网站。 第二个原因是移动设备需要滑动面板。 因此，如果您想让您的网站在移动设备上正常运行，您需要确保拥有它们。 但是，如果您的许多站点用户将使用移动设备，那么在使用 WordPress 之前，在这些较小的显示器上测试菜单的布局是必不可少的。 幸运的是，在移动设备上查看时，许多 WordPress 主题的默认样式将显示适合移动设备的菜单。 WordPress 主题中的全屏响应菜单或动态滑动面板菜单可能是进一步个性化您的移动导航的不错选择。 因此，让我们检查一下将滑动面板菜单集成到 WordPress 主题中。

第一步：安装响应式菜单插件

安装和启用响应式菜单插件是第一步。 这个插件有两个不同的版本，付费版和免费版。 虽然付费版的响应式菜单提供了一些不错的附加功能，例如条件逻辑和更多主题选项，但我们将在本教程中使用开源插件。 打开响应式菜单后，转到响应式菜单 > 菜单。 到达那里后，转到工具栏并点击“创建新菜单”按钮。 为您的新菜单命名，并保存您的工作。 如果它说它是空的，请不要担心。

第二步：选择主题

新的响应式菜单将为您提供四种不同的设计选项。 如果您愿意，可以购买更多主题。 本教程将使用系统选择的主题。 然后，您可以通过选择“下一步”选项继续。 如果您还没有这样做，请为您的响应式菜单命名，然后从您的 WordPress 仪表板中选择您想要显示在侧边栏中的菜单类型。 为了本教程，我们选择了“导航”选项。

如果您希望访问者只看到新的滑动面板菜单，您还可以选择隐藏随 WordPress 主题一起出现的默认菜单。 为此，请使用标有“隐藏主题菜单”的区域输入一些 CSS 代码。 单击“了解更多”按钮以获取有关如何为所选主题输入适当代码的更多信息。 Pro 版为用户添加了更多自定义选项。

第三步：设置

根据您的喜好调整参数后，您可以通过单击“创建菜单”按钮生成菜单。 完成此操作后，您会在右侧看到您网站的预览，底部有切换到手机、平板电脑或桌面模式的选项。 在左侧，您会看到更多个性化设置。 记下菜单选项上方显示的语言。 菜单的标题和插件标记的一行“附加内容”都显示在这里。

从侧面菜单中选择“移动菜单”，然后选择“容器”以更改或隐藏文本。 在标题文本区域，您可以输入任何内容，从“主菜单”到“导航”。 要禁用标题栏，只需将标有“标题”的开关切换到关闭位置。 完成后，转到“其他内容”选项。 您可以选择禁用此功能或将文本替换为其他任何内容。 当您完成自定义菜单时，不要忘记单击页面底部的“更新”按钮。

在您上线之前，进行一些初步测试很重要。 为确保一切正常，您可能希望使用不同于您通常用来访问网站的浏览器。 在此示例中，我们使用了 Google Chrome 浏览器。 为了在移动设备上访问该网站，我们下载了一个名为“ Internet Explore for Android”的应用程序。 我们将该站点的 URL 复制并粘贴到应用程序中，结果令人震惊。 我们发现菜单在横向和纵向方向上的格式都正确，并且所有链接都按预期工作。 不过，当涉及到移动设备时，您的情况可能会有所不同。 我们鼓励您在上线之前在尽可能多的设备和浏览器上测试您的菜单。 如果您确实发现任何问题，现在是时候解决它们了。

第五步：上线

一旦菜单经过测试并且您对一切按计划进行感到满意，就可以将其公开。 单击站点右上角的菜单图标，然后从下拉菜单中选择“菜单设置”。 您会在列表顶部看到一个标题为“移动菜单”的项目列表。 您将在此处输入移动菜单插件页面的网址。 完成后，单击“保存更改”并等待几秒钟以使更改生效。 而已！

结论

既然您知道如何在 WordPress 主题中添加滑动面板菜单，请在您自己的网站上尝试一下。 现在，如果您想用额外的菜单更新您的网站，您知道该怎么做。 希望本文能帮助您学习一项新技能，并且不会让您感到不知所措。