如何在 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 像素或更低尺寸的屏幕上，您將隱藏默認的主導航並顯示漢堡圖標。
單擊或點擊漢堡圖標時，我們在頁腳上複製的菜單會打開為類似側面板的應用程序。
如果你碰巧卡住了，請在下面發表評論。 我將非常樂意提供幫助。 快樂編碼！