如何在 WordPress 中创建响应式导航菜单
已发表: 2021-07-22在 WordPress 中创建响应式导航菜单的道路是开放式的。 由于 WordPress 提供的灵活性，有无数种方法可以做到这一点。
今天，我将向您展示如何创建一个简洁而平均的响应式导航菜单。 精益是因为我们将在 8 KB 内实现所有这些，并且意味着它将是一个非常高效的导航菜单。 我们只是要镜像您当前的导航菜单，这样您就不必维护两个不同的导航菜单。 通过用一块石头杀死两只鸟，我们将创建一个菜单来统治它们。
在开始之前，我们建议您具备一些基本的前端开发知识。 （我们只要求熟悉而不是熟练，所以请不要惊慌。）基本的 HTML、CSS、jQuery 和 WordPress 知识将是理想的。 这是一个初学者到中级教程，因为它涉及到 WordPress 主题文件的修改。
您还需要访问以下 WordPress 主题文件：
-
functions.php -
header.php -
footer.php -
Style.css
在进行任何修改之前，请务必先备份您的站点，或先在本地环境中测试更改。 您总是希望有办法恢复到原始文件。
我们将使用 bigSlide.js，一个用于创建屏幕外滑动面板的小型 jQuery 插件。 在该插件的网站上，它被描述为“一个用于创建屏幕外滑动面板导航的极小（约 1kb 压缩）jQuery 插件”。 这符合我们精益求精的响应式导航目标。
让我们开始工作吧。
1.下载bigSlide.js最新压缩版。 将文件复制到主题的/js文件夹中。
2. 在您喜欢的代码编辑器中打开functions.php 。 搜索wp_enqueue_script 。 您可能会看到多个实例，因为wp_enqueue_script是向 WordPress 添加脚本的标准方式。
3. 在wp_enqueue_script的最后一个实例之后，添加以下代码段并保存。
wp_enqueue_script( 'my-responive-menu', get_template_directory_uri() . '/js/bigSlide.min.js', array(), '20161214', true ); 4. 打开header.php ，将类push添加到 body 标签后面的第一个 div 中。 此部分通常如下所示：
<body <?php body_class(); ?>><div class="hfeed site">.所以添加后你应该最终得到：
<div class="hfeed site push">. 5. 在header.php中搜索site-navigation 。 这将是一个类或一个 id，具体取决于您的主题。 在大多数 WordPress 主题中，它应该看起来像这样：
&amp;amp;amp;amp;amp;amp;lt;nav class="site-navigation primary-navigation" role="navigation"&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array( 'theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary', 'menu_class' =&amp;amp;amp;amp;amp;amp;gt; 'nav-menu', 'menu_id' =&amp;amp;amp;amp;amp;amp;gt; 'primary-menu' ) ); ?&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;/nav&amp;amp;amp;amp;amp;amp;gt; 6. 在</nav>之前添加以下代码段。 你应该最终得到这个：
&amp;amp;amp;amp;amp;amp;lt;nav class="site-navigation primary-navigation" role="navigation"&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array( 'theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary', 'menu_class' =&amp;amp;amp;amp;amp;amp;gt; 'nav-menu', 'menu_id' =&amp;amp;amp;amp;amp;amp;gt; 'primary-menu' ) ); ?&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;a href="#responsive-menu" class="menu-link"&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;#9776;&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;/nav&amp;amp;amp;amp;amp;amp;gt;在这里，我们正在创建一个用于触发移动菜单的汉堡包图标。
7. 打开footer.php并搜索<?php wp_footer(); ?> <?php wp_footer(); ?> . 在这一行之后，添加以下代码段：
&amp;amp;amp;amp;amp;amp;lt;div class="panel mobile-menu"&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;?php wp_nav_menu( array('theme_location' =&amp;amp;amp;amp;amp;amp;gt; 'primary',) );?&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;/div&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;script&amp;amp;amp;amp;amp;amp;gt; jQuery('.menu-link').bigSlide({ menu: '.mobile-menu', speed: 300, side:"right", easyClose:true});&amp;amp;amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;amp;amp;gt;基本上，我们在页脚上创建了一个隐藏的重复导航菜单。
8. 最后，打开style.css ，在最后一行之后，添加以下代码片段：
.panel{ position: fixed; right: -15.625em; width: 15.625em; background:#222;} .push{position:relative;} .menu-link{display:none;color:#fff;background:#333;border-radius:4px;padding:2px 12px;float:right;} .mobile-menu a{display:block;color:#fff;padding:10px 15px;} .mobile-menu a:hover{background-color:#555;} .mobile-menu li{border-bottom:1px #444 solid;} @media only screen and (max-width:900px) { #primary-menu{display:none;} .mobile-menu #primary-menu{display:block;} .menu-link{display:inline-block;} }我在这里使用了深色方案，但可以随意更改颜色以满足您的需要。
这种方法几乎适用于所有标准的 WordPress 主题。 但是，由于不同的用例和标题布局，您可能需要进行一些调整。
最终，基本面保持不变。 理由是在 900 像素或更低的屏幕尺寸上，您将隐藏默认的主导航并显示汉堡图标。
单击或点击汉堡图标时，我们在页脚上复制的菜单会打开为类似侧面板的应用程序。
如果你碰巧被卡住了，请在下面发表评论。 我将非常乐意提供帮助。 快乐编码！