用於自定義 WordPress 菜單的提示、技巧和最佳插件

已發表: 2018-04-04

菜單是每個網站最重要的部分之一。它們無所不在，可以引導用戶瀏覽您的博客。雖然在 WordPress 中添加導航菜單相對容易，但您可以做更多的事情來為您的網站自定義它。

無論是您想要在菜單上使用小圖標，還是想要一個完全不同的系統來處理它，本指南都應有盡有。查看我們在本指南中為您準備的提示、技巧和一些最佳菜單插件：

將圖標添加到您的 WordPress 菜單
將登錄/註銷按鈕添加到菜單
在您想要的任何地方顯示 WordPress 菜單
如何在 WordPress 菜單中添加搜索框
如何使導航菜單貼在頁面頂部
使用插件製作您的粘性導航菜單
如何刪除WordPress中的頂級菜單項
WordPress 的前 4 個菜單插件
最好的 WordPress 移動菜單插件

將圖標添加到您的 WordPress 菜單

在 WordPress 中創建菜單從未如此簡單。您所要做的就是生成頁面並將它們添加到您的主頁旁邊。您的主導航菜單只需點擊幾下即可完成，但它可能看起來非常簡單。

有許多插件可以幫助您創建視覺上令人驚嘆的導航菜單。當然，如果您知道怎麼做，您可以自己編寫一個代碼，但是有一種更簡單的方法可以使您的常規菜單更加用戶友好——通過添加圖標。

圖標已經成為我們離不開的東西。當您在 WordPress 儀表板、桌面或智能手機和平板電腦上搜索某些內容時，您可能習慣於使用圖標。僅使用幾次新應用程序後，您更有可能記住它的圖標，而不是它附帶的所有描述文本。那麼，為什麼不在菜單項旁邊放一個圖標，讓人們輕鬆瀏覽您的網站呢？

菜單圖標

價格：免費

如果你不知道怎麼做，別擔心，這就是你在這裡的原因。在指南的這一部分中，我們不會用自定義編碼來打擾您，但我們只會向您展示一個簡潔的免費插件，您可以在接下來的幾分鐘內對其進行配置。

轉到插件 - >添加新
搜索“菜單圖標”
安裝並激活插件
導航到外觀 -> 菜單
打開導航菜單
在菜單結構下選擇要為其選擇圖標的頁面
選擇圖標，編輯其位置和大小
保存菜單

就是這樣！現在去在菜單上找到一些你想要的酷圖標並享受你的新設計。當您仍在使用圖標時，請不要忘記，您也可以輕鬆地將網站圖標添加到您的 WordPress 博客。

將登錄/註銷按鈕添加到菜單

我們喜歡的眾多 WordPress 功能之一是其註冊新用戶的簡便方法。在流行平台上控制不同的用戶角色再簡單不過了；您可以分配已註冊的角色，您甚至可以根據站點的需要創建大量自定義用戶角色。

雖然註冊它們既快速又容易，但照顧好您的用戶可能是一項艱鉅的工作。但是您需要竭盡全力使他們在網站上的體驗盡可能好。

您可以為他們做的許多事情之一是啟用一種簡單的方法來登錄和退出您的站點。要使登錄/註銷鏈接始終觸手可及，您可以將這些鏈接放在主菜單中。首先，菜單中的這些鏈接非常實用，其次，您的用戶可能已經習慣了使用相同登錄和註銷方式的各種其他應用程序的功能。

在這種情況下，無需獲取另一個插件。 我們將在本文的這一部分向您展示一個簡單的 WordPress 功能，它可以為您做得很好。它會自動在您的菜單上放置正確的鏈接。這意味著當用戶註銷時，他將獲得“登錄”鏈接，反之亦然。您和用戶都不必再擔心登錄按鈕。

如果您準備將這個簡單而整潔的登錄功能添加到菜單中，那麼您必須執行以下操作：

打開functions.php
複製並粘貼以下內容：

 函數 add_login_logout_link($items, $args) {
$loginoutlink = wp_loginout('index.php', false);
$items .= '<li>'。 $loginoutlink .'</li>';
返回 $items;
}
add_filter('wp_nav_menu_items', 
'add_login_logout_link', 10, 2);

保存更改

與我們的大多數代碼段一樣，您只需將函數複製並粘貼到文件中即可。完成後，您可以繼續並重新加載主頁。由於您仍處於登錄狀態，您將在主菜單的最後一個位置看到“註銷”鏈接。請務必檢查整個功能，因此請嘗試註銷並重新登錄以確保一切正常。

現在您已經完成了這個小功能，不要忘記您可以在成功登錄後輕鬆地將用戶重定向到另一個頁面，甚至只向登錄或註銷的用戶顯示內容。

此外，現在您有了自定義菜單，您可能有興趣通過提供自定義短代碼在網站上的任何位置顯示它。

我們喜歡用這樣的小片段來定制 WordPress，你呢？

在您想要的任何地方顯示 WordPress 菜單

在 WordPress 達到 3.0 版本之後，很多東西變得更容易使用了。在不同的新功能中，任何人都可以創建導航菜單，如今，每個人只需單擊幾下鼠標按鈕即可構建自己的菜單。

雖然創建可以輕鬆鏈接任何帖子、頁面、類別或任何外部鏈接的菜單是小菜一碟，但對於那些不參與 WordPress 開發的人來說，在網站的不同位置顯示菜單可能會更大一些。

根據您使用的 WordPress 主題，您可以輕鬆地在頁面頂部顯示一個新創建的菜單，我們都習慣於在其中查找導航。您可以選擇將菜單放在側邊欄上，甚至放在頁腳區域的正下方，但是如果您想在帖子、頁面甚至小部件中顯示菜單怎麼辦？

不，您不必創建自定義列表或重新鍵入整個 HTML 代碼來複製鏈接；您可以利用短代碼並將現有菜單放置在您想要的任何位置！

在接下來的幾行中，我們將向您展示如何做到這一點，我們相信您會喜歡新的“短代碼菜單”功能。

創建短代碼並在您想要的任何地方顯示 WordPress 菜單

打開functions.php文件
複製並粘貼將註冊短代碼的代碼：

 function menu_function($atts, $content = null) {
 提煉（
 shortcode_atts(
 數組( '名稱' => null, ),
 美元
)
 );
 返回 wp_nav_menu(
 大批（
 '菜單' => $name,
 '迴聲' => 假
)
 );
 }
 add_shortcode('menu', 'menu_function');

保存更改

保存更改後，您將能夠在任何地方顯示 WordPress 菜單。 您所要做的就是寫下短代碼，您必須在其中指定要使用的菜單的名稱：

[菜單名稱=“主菜單”]

在大多數情況下，您的主菜單會附有“主菜單”名稱。但是，如果您要使用任何其他菜單，只需在短代碼中輸入其名稱即可。您不必記住每個菜單名稱；相反，導航到外觀 -> 菜單並瀏覽菜單列表或創建新菜單。

由於您現在幾乎可以在任何地方顯示 WordPress 菜單，因此您可以創建大量導航，供您在 WordPress 驅動的網站上使用。您可以在帖子中放置一個，在模板文件中放置另一個，文本小部件等。

如何在 WordPress 菜單中添加搜索框

除非您已刪除該功能，否則 WordPress 允許您的訪問者搜索您的整個網站。我們多次提到過這個很酷的功能，並向您展示了可以對搜索頁面執行的不同操作。例如，如果只找到一個結果，您可以輕鬆地將用戶重定向到帖子，甚至可以設置自定義 Google 搜索。

如果您瀏覽過標準的 WP 小部件，您可能已經看到有一個可以放置在側邊欄上的搜索小部件。但是，如果您希望搜索框出現在菜單旁邊呢？

在接下來的幾行中，我們將向您展示一個功能，該功能會將您的日常搜索框放入導航菜單中。

在菜單中添加搜索框：

打開functions.php
複製並粘貼以下內容：

 add_filter('wp_nav_menu_items','add_search_box', 
10, 2 );
函數 add_search_box( $items, $args ) {
$items .= '<li>' 。 get_search_form( false ) 。 
'</li>';
返回 $items;
}

保存更改

為確保代碼對您有用，請確保您的站點中已經添加了導航菜單。

代碼非常簡單，它唯一的功能是將搜索框添加到您的導航菜單中。最有可能的是，您的搜索框不會與您希望的位置對齊。這意味著您必須告訴 WordPress 將搜索框放在哪裡：

向第三行代碼中的 <li> 標籤添加一個類：

 $items .= '<li class="searchbox-position">' 。 
get_search_form( false ) 。 '</li>'

保存更改
打開 style.css
複製並粘貼 CSS 代碼：

 .searchbox-位置{
 邊距頂部：15px；
 右邊距：20px；
 }

根據自己的喜好更改代碼
保存更改

希望您將盒子完美地嵌套在菜單旁邊。將盒子安裝在您想要的位置並不需要太多。不要忘記設置搜索框本身的樣式並享受該功能。

如果您想更好地控制菜單和搜索框，請查看如何向菜單添加圖標以及如何為喜歡口述搜索詞的訪問者添加語音搜索選項。您可以使用菜單和搜索選項執行更多操作，因此請測試我們的搜索框並學習新知識。

如何使導航菜單貼在頁面頂部

您可能見過導航菜單貼在頁面頂部並跟隨您滾動冒險的每一步的網站。該功能可能是您在 WordPress 網站上想要的東西，在指南的這一部分，我們將向您展示如何創建一個。

它不僅有一個功能性的一面，菜單總是觸手可及，而且看起來也非常漂亮和流暢。

如果您有一些 CSS 知識，那麼您將不會遇到使菜單具有粘性的問題。您只需將一段代碼添加到 Style.css 文件中，然後您就可以享受新的菜單功能。

打開您的樣式表 (style.php)
查找.nav-menu或.genesis-nav-menu （或類似的，取決於您使用的主題）
將以下代碼用於主菜單容器：

 .導航菜單{
 位置：固定；
 背景：#333；
 頂部：0px；
 右：0px；
 左：0px；
 z-索引：99；
 }

正如您可以從代碼中猜到的，重要的部分出現在您需要修復 menu 位置的第二行。之後，您可以將頂部、右側和左側元素設置為 0 像素或將它們移動到距頁面頂部或左右邊距的任意距離（例如：top: 10px 會將您的菜單放置在距頁面 10 像素的位置）您網站的上邊距）。

更新您的文件並享受您的粘性導航菜單

如果您不喜歡弄亂代碼，您可以使用插件使您的菜單具有粘性。

使用插件製作粘性導航菜單

我們教您如何通過更改主題中的一行 CSS 代碼來創建粘性導航菜單。但是，無論這多麼容易，並不是每個人都喜歡瀏覽 WordPress 文件並自己編輯代碼。如果您是那種類型的人，或者您需要更多地控制菜單，請不要擔心。 您可以使用插件輕鬆設置菜單並使其具有粘性。在本文的這一部分，我們將向您展示一些最好的。

UberMenu 粘性擴展

價格： 8 美元

UberMenu Sticky Extension 是 UberMenu 插件的附加組件，這意味著您必須先安裝此插件才能使擴展工作。擴展使一切變得簡單；安裝後，您就可以使菜單具有粘性了。 無論您將菜單放在哪裡，一旦用戶開始滾動，菜單就會固定在頁面頂部並使其易於訪問。

為了確保移動用戶可以訪問菜單的每個部分，一旦檢測到移動設備，粘性選項就會關閉。這裡沒有什麼可添加的 - 查看官方網站上的演示，如果您已經擁有 UberMenu，請繼續使您的菜單具有粘性。

我的粘性菜單

價格：免費 - 演示

該插件旨在用於二十十三主題。但是如果你稍微調整一下，你可以在任何你喜歡的主題上使用它。默認情況下，它使用主題的導航 CSS 類“.navbar”。 所以如果你想在其他主題上使用它，你必須找到你的主題用來描述導航菜單的類並更改該類的名稱。

如果您的主題是響應式的，該插件也將響應。如果您想更多地修改它，歡迎您輸入您的自定義 CSS 樣式，讓您的粘性菜單更加個性化。

滾動上的粘性菜單（或任何東西！）

價格：免費

此插件將允許您將菜單放在頂部並使其具有粘性。但不僅如此，該插件還允許您通過為元素找到正確的選擇器來使任何元素具有粘性。這意味著當用戶滾動瀏覽您的網站時，您可以將您的徽標甚至整個標題卡在頁面頂部。為了使一切正常，您必須對 HTML 和 CSS 有所了解，以便找到正確的選擇器。

如何刪除WordPress中的頂級菜單項

您可能已經知道 WordPress 是高度可定制的。如果您知道如何編碼或至少找到合適的插件，您就可以轉換您的後端和前端，並向您的訪問者和您的作者展示一個獨特的網站。

在這一部分，我們將向您展示一個簡單的代碼，它允許您從 WordPress 管理頁面中刪除頂級菜單項。

您可以在下面找到的代碼將刪除所有用戶而不是 admins 的所有頂級菜單項。在繼續之前，您應該知道此代碼段僅刪除了菜單項，但知道設置頁面正確路徑的任何人仍然可以使用這些項。如果要完全限制對某些菜單頁面的訪問，則必須更改用戶權限。

刪除頂級菜單項：

打開你的functions.php文件
複製並粘貼以下代碼：

 如果（！current_user_can（'manage_options'））{
add_action('admin_menu', 'my_remove_menus', 999);
}
函數 my_remove_menus() {
remove_menu_page('index.php'); //儀錶盤
remove_menu_page('edit.php'); //帖子
remove_menu_page('upload.php'); //媒體
remove_menu_page('edit.php?post_type=page'); //頁面
remove_menu_page('edit-comments.php'); //註釋
remove_menu_page('themes.php'); //外貌
remove_menu_page('plugins.php'); //插件
remove_menu_page('users.php'); //用戶
remove_menu_page('tools.php'); //工具
remove_menu_page('options-general.php'); //設置
}

保存更改

由於此代碼刪除了您可能不想做的所有頂級菜單，因此可以根據需要隨意修改代碼。每個“remove_menu_page”行負責刪除一頁（在括號中以及代碼行旁邊的註釋中進行了描述）。 只需在菜單中添加或刪除您不想顯示的頁面，然後再保存一次更改。

既然您已經了解瞭如何從菜單中刪除頂級頁面，您可能只想刪除位於頂級頁面下的一些子頁面。

WordPress 的前 4 個菜單插件

一旦您開始構建您的新網站，您遲早會需要一個菜單。您可以使用 WordPress 中的標準菜單選項創建一個，但如果您想要更專業的菜單選項，則必須了解您的 HTML 和 CSS 代碼。這也意味著您將花費一些時間來設計一切以使其完美運行並同時看起來很漂亮。

但是，如果您需要更快的解決方案，或者您根本不知道如何編寫自己的精美菜單，WordPress 允許您安裝一些出色的插件，只需點擊幾下即可製作精美的菜單。沒有任何特定的順序，這裡有一些最好的 WordPress 菜單插件。

優步菜單

價格： 20 美元 - 演示

Uber Menu 的銷量超過 43,000，是 WordPress 最受歡迎的插件之一。一旦您打開演示站點並查看使用此插件創建的菜單是什麼樣子，您就會明白它為何如此受歡迎。一旦你開始列出它的功能，你可能會想要一個。

使用 Uber 菜單創建的菜單將為您的移動訪問者提供響應和触摸功能。您可以創建漂亮的佈局並將圖標、圖像、視頻和地圖放入菜單中。整個表單可以放在子菜單中，這樣您就可以創建聯繫表單，而無需為此添加額外的頁面。該插件是高度可定制的，您可以使用 50 多種樣式設置進行實時預覽。您可以從其他內容自動構建子菜單，在菜單下創建選項卡等等。

動態項目生成
選項卡式子菜單
增強的用戶界面

Morph：可定制的 Fly-Out WordPress 菜單

價格： 20 美元 - 演示

Morph 是專為移動設備設計的彈出式菜單。但是，正如您在演示頁面上看到的，如果您在個人計算機上打開它，它在桌面上看起來也非常棒。

通過使用此插件，您可以隱藏菜單並通過簡單的單擊將其調出。在菜單區域，您可以創建標準的下拉菜單、添加圖片、搜索按鈕，整個區域都是小部件，這意味著您可以嵌入任何您需要和想要的內容。該插件非常可定制，因此您可以選擇所需的顏色、更改圖像高度以及添加或刪除元素以滿足您的需求。如果要將其用於移動設備，則可以輕鬆設置顯示菜單的分辨率。

在桌面和移動設備上都能很好地工作
添加/刪除可自定義的元素
可以被任何元素觸發

英雄菜單

價格： 19 美元 - 演示

無論您想要一個簡單的菜單還是一個複雜的“超級菜單”，您都可以使用 Hero Menu 插件創建一個。您創建的每個菜單都具有響應性，並且在任何設備上看起來都很棒；如果您選擇創建大型菜單，則可以顯示或隱藏項目，因此您不必擔心小屏幕上的佈局。

有針對 Android、iOS 和 Windows Phone 的特殊觸摸支持。選擇全寬或固定寬度導航欄，您只需使用拖放技術即可輕鬆添加額外元素。有超過 60 種預設配色方案，您可以自由使用每一種免費的 Google 字體。使菜單具有粘性，選擇激活距離……這個很棒的插件可以提供更多功能，因此請務必查看 CodeCanyon 上的整個功能列表。

拖放菜單結構構建器
創建簡單菜單或複雜的超級菜單
特色手機導航

多X酒吧

價格： 16 美元 - 演示

Multi-X 欄是一個模塊化插件，允許您將幾乎任何想要的內容放入導航欄中。除了菜單項，您最多可以在欄上放置 8 個項目- 無論是聯繫表單、搜索表單、社交共享圖標、小部件區域等。

有兩種不同的主題供您選擇，外加一個自定義主題，您可以在其中設置自己的顏色，同時自動計算漸變。導航欄可以放置為固定或可滾動菜單。如果您是開發人員，如果您想從 Multi-X bar 創建一個新插件，您會想知道有一組鉤子為您準備好了。這個插件提供了很多，所以一定要看看 CodeCanyon 上的所有功能。

8個嵌入式功能模塊
2個顏色主題+自定義主題
頂部或底部位置

最好的 WordPress 移動菜單插件

我們都知道技術已經走了多遠。智能手機和平板電腦已成為必然，移動設備擁有者的數量也在不斷增加。 WiFi 網絡覆蓋了我們城市的每一個角落，如果沒有，您始終可以通過您的提供商將您的移動設備連接到互聯網。這意味著移動網絡瀏覽者的數量比以往任何時候都多，如果您正在運營網站，則需要照顧好他們。

如果您正在構建一個移動站點或想讓它變得更好，您肯定需要構建一個特殊的移動菜單，以適應任何屏幕尺寸並允許移動用戶更輕鬆地導航。

使用 WordPress，這項任務並不像您想像的那麼難。您不必知道如何編碼或如何設置菜單。您所需要的只是一個插件，您可以根據自己的需要輕鬆安裝和自定義。

在指南的這一部分中，我們將向您展示一些可以為您的 WordPress 網站創建移動菜單的最佳高級插件。所以讓我們向下滾動並看一看。

觸

價格： 18 美元 - 演示

這個高級插件將創建一個乾淨的移動標題，其中嵌入了移動菜單。動畫非常簡單，它們在智能手機屏幕上看起來非常漂亮和流暢。使用 Tactile，您可以創建多級手風琴菜單、創建可滑動的單級水平菜單或創建可飛入您網站的小工具側邊欄。

一切都是可定制的，這意味著您可以用您想要的任何顏色繪製元素，更改背景並設置它們的顏色、不透明度等等。您的菜單可以固定或絕對定位。如果您想要更多地控制移動設備，您可以設置激活此菜單的分辨率。

幾種菜單類型
搜索功能
固定/絕對定位

點按

價格： 10 美元 - 演示

TapTap 將使您能夠為您的 WordPress 網站創建獨特的移動菜單。正如您從演示站點中看到的，您幾乎可以創建任何您想像的東西，並且您的菜單看起來非常整潔。使用此插件，您可以創建多級菜單、決定要顯示哪些元素、添加描述或啟用集成搜索選項。

有兩種菜單按鈕設計和一些動畫可供選擇。您的菜單位置可以是固定的，也可以使用絕對定位。選擇背景樣式並使用多種樣式選項，這樣您就可以將菜單完美地融入您的主題中。最後但並非最不重要的一點是，TapTap 可讓您選擇顯示自身的分辨率。您還想從移動導航菜單中獲得什麼？

多級菜單
2 個菜單按鈕設計和動畫
固定/絕對定位

摩比

價格： 16 美元 - 演示

Mobi 是另一個簡單而出色的 WordPress 插件，可隨時為移動網站提供幫助。通過此添加，您的響應式主題將具有更好的導航。使用直觀的拖放菜單構建器創建菜單後，您可以將其放置在站點的頂部或底部。

所有菜單項都是可自定義的，您可以自由地嚮導航欄添加社交媒體圖標。有超過 700 種圖標字體，您可以使用其中一種 Google 字體來完成您的設計。如果需要，您可以控制來賓和登錄用戶的用戶可見性。

拖放自定義
頂部或底部菜單定位
訪客和登錄用戶的用戶可見性

哇音菜單

價格： 44 美元 - 演示

Wah-menu 是一個可停靠的菜單，非常適合移動網站，專為 iPad 觸摸導航而設計。使用這個高級插件，您最多可以添加 8 個菜單鏈接，這些鏈接將非常適合您的 WordPress 網站的一側。

單擊菜單中的特定圖標後，將出現一個子菜單，其中包含 HTML、嵌入式視頻、地圖和幾乎所有您想要的內容。該插件是高度可定制的，這意味著您可以從 8 種強調色中進行選擇，使用菜單寬度、圖標、鏈接等。使用 WYSIWYG 編輯器創建菜單非常容易。無論您選擇使用深色主題還是淺色主題，您都可以確定它看起來不錯。

所見即所得編輯器
支持 HTML、嵌入視頻等的子菜單。
出站或停靠狀態選項

路徑樣式菜單

價格： 12 美元 - 演示

這個高級插件與您通常用於創建菜單的插件有些不同。 路徑樣式菜單創建了一個按鈕，而不是經典的菜單欄或側邊欄菜單。激活按鈕後，它會在按鈕周圍顯示一個圓形菜單，以您想要的任何方向內聯擴展它，甚至以弧形組織圖標。

如果有多個菜單級別，該按鈕將創建一個返回按鈕，允許用戶再次轉到主菜單。有大量的自定義選項和創建菜單；您可以簡單地使用 WordPress 標準菜單編輯器。如果您正在尋找獨特的移動菜單，請給路徑樣式菜單一個機會。

在按鈕周圍創建菜單
高度可定制
使用標準 WP 菜單編輯菜單

滾動導航

價格： 10 美元 - 演示

另一個獨特的菜單插件，它為您提供了一些很棒的功能，並且可以在您的網站上看起來很棒。 Scrollnav 由一個包含多個菜單選項的圓圈組成。按鈕中間有一個主頁鏈接，頂部鏈接將您邏輯地帶到頁面頂部，有一個搜索框、一個自定義菜單和一個圓圈的自定義鏈接部分。

自定義菜單將提供足夠的空間來創建帶有子菜單的整個菜單，它看起來很棒，並將為您的移動網站提供急需的空間。您可以選擇多種配色方案，並且一切都很容易配置。您絕對應該檢查演示站點以了解這個小插件是如何工作的。

不同功能的圓形按鈕
自定義菜單和自定義鏈接部分
幾種配色方案

滾動到菜單

價格： 24 美元 - 演示

這個簡單的高級插件將為您提供一個很酷的側邊欄菜單，該菜單專為 iOS 和 Android 觸摸導航而構建。創建菜單後，它將具有鏈接到頁面另一部分並自動滾動的圖標。

需要注意的是ScrollTo 不是一個完整的導航菜單，它只是滾動到同一頁面的另一部分。您可以從 750 多個圖標中進行選擇，也可以使用自己的圖像作為菜單項，並且有額外的廣告空間。為了使一切正常，您必須具備基本的 HTML 知識，以便您可以按照說明進行操作。您可能需要多花幾分鐘的時間，但最終結果看起來很棒。

觸控功能
超過 750 個圖標 + 自定義圖像
額外的廣告空間

結論

我們希望您現在已經意識到沒有菜單很難運行網站。即使您運行單頁瀏覽器，您仍然需要在各部分之間進行導航。因此，當您已經在這裡時，請花點時間自定義您的 WordPress 菜單，並儘可能製作出最好的菜單。