如何向 WordPress 添加超級菜單（+5 個最佳插件）

菜單在您網站的設計和功能中發揮著重要作用。 它們可以幫助訪問者在您的頁面之間導航，並可以提高整體可用性。 儘管如此，當您擁有大量內容時，要弄清楚如何在不顯得擁擠或混亂的情況下顯示它可能具有挑戰性。

這就是大型菜單的用武之地。WordPress 大型菜單可以讓您的網站看起來更專業，並幫助人們更輕鬆地找到他們正在尋找的內容。 另外，您可以使用多種方法將一種方法添加到您的網站。

在這篇文章中，我們將解釋什麼是超級菜單以及在 WordPress 中使用超級菜單的好處。 然後，我們將引導您完成創建一個並探索五個最佳大型菜單插件選項的選項。

什麼是 WordPress 中的超級菜單？

您的 WordPress 菜單是您用來組織和顯示網站頁面的結構。 它通常位於站點的頂部——儘管它也可以位於側面或以另一種獨特的方式顯示。

要訪問內置菜單系統，您可以先登錄您的 WordPress 網站。 然後，從您的管理儀表板中，導航到外觀 →菜單。

默認情況下，WordPress 使用標準菜單，顯示頁面列表，有時帶有單列下拉菜單。 沒有額外的信息或內容，如圖像、描述等——它只是一系列列表。 它通常非常簡單明了，但在涉及頁數或卷數或可以包含的信息時確實會限制您。 這是 WooCommerce 的一個示例：

超級菜單是一種下拉菜單，允許用戶在一個地方訪問大量內容。 大型菜單經常在電子商務網站上使用，並且在其他類型上也越來越受歡迎。 您可以在 Nalgene 網站上看到一個示例，該示例以更多的橫向樣式展示了產品照片、滑塊和其他內容：

主要區別在於大型菜單通常具有多列內容，而傳統的下拉菜單只有一列。 這樣可以提供更強大和更全面的菜單，這對於具有大量信息的網站特別有用。

為什麼在 WordPress 中使用大型菜單？

使用大型菜單的好處之一是它可以減少導航到特定內容所需的點擊次數。 這對於在您的網站上尋找特定內容的訪問者來說非常有用，但它還可以幫助首次訪問者更有效地瀏覽您的網站，從而改善他們的用戶體驗。

超級菜單還可用於改善網站的外觀和感覺，甚至宣傳特定內容或鼓勵您希望訪問者採取的行動。 此外，它們是高度可定制的——因此它們可以發揮您品牌的其餘部分，以提供無縫的、視覺上吸引人的體驗。

如何創建 WordPress 大型菜單

有幾種不同的方法可以在 WordPress 中創建大型菜單。 一種選擇是通過添加自定義代碼手動完成。 另一個（更快更容易）的選擇是使用插件。 讓我們看看如何使用這兩種方法向 WordPress 添加超級菜單。

手動創建大型菜單（無插件）

如果您習慣使用站點文件，這可能是創建高度獨特的東西的好選擇。

在此之前，備份您的 WordPress 網站很重要。 您還可以考慮創建一個臨時站點來構建和測試您的大型菜單，然後再將其發布。 這將幫助您避免任何破壞實時站點功能的問題。

首先，瀏覽到 WordPress 儀表板中的外觀→菜單並命名您的菜單。

單擊創建菜單按鈕。 拖放要包含在大型菜單中的頁面，並在必要時將它們縮進為子菜單。

完成後，您可以選擇Save Menu 。

接下來，導航到您的 cPanel 的文件管理器或使用文件傳輸協議 (FTP) 客戶端連接到您網站的文件。 通過轉到/ wp-content → /themes → /your-theme-or-child-theme → /style.css找到您的主題的樣式表。 在底部，添加以下代碼行：

 .main-navigation ul:hover li ul, .main-navigation ul:hover li ul li ul { display: inherit; }

當有人將鼠標懸停在頂級項目上時，這將使您的子菜單項出現。 現在，我們將自定義代碼以使其更具視覺吸引力，確保每個子級別項目都以全角顯示，項目的各個部分彼此相鄰。 添加此代碼：

 .main-navigation { position: relative; } .main-navigation li { position: static; } .main-navigation ul li:hover ul { display: inherit; position: absolute; left: 0; right: 0; width: 100%; } .main-navigation ul li:hover ul li ul { display: inherit; position: relative; left: 0; } .main-navigation ul li:hover ul li { float: left; position: static; display: block; padding-top: 1em; } .main-navigation ul li:hover ul li ul li { float: none; padding-top: 0; }

然後，您可以使用樣式，使其看起來像您想要的那樣，與您的品牌和網站的其他部分保持一致。 例如，您可能想要切換大型菜單的背景顏色或加粗某些項目。 您可能還想調整列間距或添加照片等額外元素。 如果您是開發人員或有一定程度的代碼經驗，您可以製作您的大型菜單，使其看起來像您想要的那樣！

想要更深入的指南？ Tuts+ 提供了完整的演練。

創建沒有插件的大型菜單的另一個選項是檢查主題的內置選項。 一些，如 Hestia 主題，默認包含大型菜單選項。 不過，情況並非總是如此。

使用 WordPress 插件創建大型菜單

如果您不習慣編輯站點文件或者您的主題不提供內置的超級菜單選項，那麼您可以使用另一種在 WordPress 中創建超級菜單的方法是使用插件。 有很多可用的選項，我們將在下一節中討論。

雖然這比手動創建更安全，但您仍應在進行任何更改之前備份您的 WordPress 網站。

插件的具體特性和功能將根據您決定使用的工具而有所不同。 但總的來說，這個概念是一樣的。

我們將使用 Max Mega Menu 作為示例。 首先，您可以在 WordPress 網站上安裝並激活該插件。

接下來，您需要通過導航到Appearance → Menus來啟用超級菜單功能。 您可以為菜單選擇所需的位置，然後單擊啟用旁邊的框。

完成後保存更改。 要自定義您的超級菜單外觀和設置，您可以轉到超級菜單→菜單主題。

在這裡，您可以找到多種用於設置菜單樣式的選項。 您可以修改菜單類型及其外觀和功能。

五個最好的 WordPress 大型菜單插件

如果您決定要使用大型菜單 WordPress 插件，則有很多選項可供選擇。 在研究它們時，重要的是要考慮您正在尋找的特定功能以及您的預算。 考慮到這一點，讓我們詳細了解五個最好的 WordPress 大型菜單插件。

1. 最大超級菜單

Max Mega Menu 是一個非常受歡迎的插件，可讓您輕鬆地將高質量、可自定義的菜單添加到您的 WordPress 網站。 它包括一個易於使用的拖放構建器。 它還支持您網站上不同位置的多個大型菜單。

Max Mega 菜單的主要特點：

• 多個可單獨配置的菜單位置
• 網格佈局構建器
• 菜單懸停和過渡選項
• 拖放式構建器
• 簡碼
• 菜單項圖標
• 一個搜索框
• 菜單標誌

Max Mega 菜單的優點：

• 有免費和高級選項可供選擇。
• 它是輕量級的，代碼簡潔。
• 它包括對 WooCommerce 和 Easy Digital Downloads 的支持。
• 您可以將大型菜單放置在多個位置。
• 這些小部件可讓您添加地圖、聯繫表格等。
• 您還可以從頭開始構建大型菜單或使用現有菜單。
• 鍵盤導航可提供更好的可訪問性。

Max Mega 菜單的缺點：

• 高級自定義選項僅適用於專業許可證。
• 高級計劃沒有免費試用。

易於使用：

Max Mega Menu 非常易於使用。 它會自動將現有菜單轉換為大型菜單。 它具有易於瀏覽的用戶友好界面。 專業版許可證還包括更新和優先支持。

定價：

Max Mega Menu 提供具有有限自定義選項的免費版本。 具有高級功能的 Pro 計劃的單站點許可證起價為 29 美元。 這還包括一年的支持。

2. 四重菜單

QuadMenu 是另一個流行的大型菜單插件，無論您的經驗水平如何，它都易於使用。 這個靈活的工具包括一個直觀的拖放構建器以及用於為 WordPress 構建菜單和子菜單的各種樣式和自定義選項。

QuadMenu 的主要特點：

• 拖放式構建器
• 多個菜單位置
• 畫布外、粘性和垂直菜單
• 對齊鏈接的選項
• 浮動下拉菜單
• Font Awesome 圖標和 Google 字體
• 下拉動畫
• 多種過濾器
• 顯示小部件

QuadMenu 的優點：

• 有免費版和高級版。
• 它適合初學者和開發人員。
• 它支持子主題。
• 有自動和手動菜單集成。
• 它直觀且易於使用。
• 專業版提供選項卡和輪播菜單。

QuadMenu 的缺點：

• 高級樣式選項需要專業許可證。
• 實時預覽選項有限。

易於使用：

QuadMenu 適合初學者和開發人員。 拖放式構建器可讓您快速輕鬆地創建和自定義大型菜單。

價錢：

QuadMenu 有一個免費版本。 單個站點的 Pro 許可證起價為 30 美元。

3. 優步菜單

如果您正在尋找優質的大型菜單構建器，UberMenu 值得一試。 這款功能強大、功能豐富的工具使用複雜的網格系統，讓您可以快速構建具有專業外觀的大型菜單。

UberMenu 的主要特點：

• 獨特的網格系統
• 超過 50 種風格設置
• 動態項目生成
• 基於帖子、類別等的子菜單
• 在菜單中添加選項卡的選項
• 觸控式菜單
• 下拉 CSS3 過渡
• 多個菜單觸發器（懸停、懸停意圖和單擊）
• 各種菜單位置
• 靈活的佈局

優步菜單的優點：

• 它在 WordPress 網站所有者中得到廣泛使用和高度評價。
• 有添加自定義 HTML、短代碼和小部件的選項。
• 它使用原生 WordPress 定制器界面。
• 有無限的菜單主題。

優步菜單的缺點：

• 只有高級版本可用。
• 根據您的主題，如果您沒有 CSS/PHP 編程技能，它可能不是最佳選擇。

易於使用：

對於有經驗的 WordPress 用戶來說，使用 UberMenu 可能會輕而易舉，因為該界面是建立在本機定制器之上的。 您可以在構建菜單時查看其實時預覽。 但是，對於 WordPress 初學者來說，這可能比直觀的拖放構建器界面更難導航。

定價：

單個站點的 UberMenu 許可證費用為 26 美元。 這包括六個月的開發人員支持。

4.元素套件

如果您熟悉並使用 Elementor 頁面構建器，ElementsKit 是一個值得考慮的優秀大型菜單插件。 該工具包括一個擴展的自定義模塊庫，具有頁眉和頁腳構建器。

ElementsKit 的主要特點：

• 實時內容界面
• 自定義模塊庫
• 頁眉和頁腳構建器
• 視差滾動
• 超過 200 個預先設計的頁面模板
• 倒計時小部件
• 下拉動畫
• 關閉畫布、粘性和垂直菜單
• 字體真棒圖標
• 明暗主題
• 兩種移動菜單佈局
• 自定義 CSS

ElementsKit 的優點：

• 它與 Elementor 頁面構建器完全集成。
• 它包括拖放功能。
• 它是初學者和用戶友好的。
• 它具有圖標和徽章文本顏色的自定義。
• 它具有內置的 WooCommerce 功能。
• 它提供了高級的大型菜單選項。

ElementsKit 的缺點：

• 除非您使用 Elementor 頁面構建器，否則它並不理想。
• 如果您只是在尋找一個大型菜單構建器工具，那可能會讓人不知所措。

易於使用：

ElementKits 是一個簡單易用的多功能工具。 如果您不熟悉 Elementor，則該界面可能需要一些時間來適應。 雖然，如果您已經使用了頁面構建器插件，您可能很快就會掌握這個附加組件的竅門。

定價：

ElementsKit 提供免費版本。 單個站點的高級許可證起價為每年 39 美元。

5. WP 超級菜單

如果您正在尋找一個簡單直接的免費增值工具來在 WordPress 中構建大型菜單，那麼 WP Mega Menu 是另一個可靠的選擇。 該插件易於使用，並提供了為各種網站構建優質大型菜單所需的所有基本特性和功能。 對於免費工具，它還提供了一組令人印象深刻的自定義和样式選項。

WP Mega Menu 的主要特點：

• 直觀的導航
• 拖放界面
• 創建和保存菜單主題的選項
• 徽標、搜索欄和背景圖片
• Google 字體和 Font Awesome 圖標
• 社會圖標
• 菜單標籤

WP Mega Menu 的優點：

• 它完全免費下載和使用，並提供專業升級。
• 它易於導航和使用。
• 它具有其他插件僅包含在高級版本中的功能。
• 它可以選擇創建和保存菜單主題以在多個網站上使用。

WP Mega Menu 的缺點：

• 與其他插件選項相比，它缺乏為開發人員設計的工具。
• 免費版本沒有粘性或畫布外選項。

易於使用：

WP Mega Menu 是一個對初學者友好的插件，有很多選項。 它帶有一個易於理解和導航的直觀界面。

定價：

WP Mega Menu 是免費的。 但它還提供單個許可證每年 29 美元起的高級計劃。

WordPress 頂級大型菜單插件的比較

有關大型菜單的常見問題解答 (FAQ)

在這一點上，希望您對如何在 WordPress 中創建和添加大型菜單有充分的了解。 但是，讓我們花點時間來總結一些常見問題解答 (FAQ)。

我可以將圖像和圖標添加到 WordPress 大型菜單嗎？

是的，您可以將圖像和圖標添加到 WordPress 大型菜單。 一些插件內置了對此的支持。 或者，您也可以通過編輯網站代碼來添加圖像和圖標。

我可以在我的 WordPress 側邊欄中添加一個大型菜單嗎？

是的，您可以在 WordPress 側邊欄中添加一個大型菜單。 您可以使用一些不同的插件將大型菜單添加到側邊欄。 大多數讓您將菜單顯示為小部件的插件也可以讓您將它們添加到側邊欄。

開始自定義您的 WordPress 菜單

菜單在您網站的設計和功能中起著至關重要的作用，因為它們可用於改善任何網站的外觀和感覺。 因此，如果您有一個包含大量內容和頁面的大型 WordPress 網站，您可能需要考慮添加一個大型菜單。

正如我們在這篇文章中所討論的，您可以使用三種主要方法在 WordPress 中創建大型菜單。 一種是使用您的主題選項來添加大型菜單。 第二種是手動編碼。 如果這些都不可能，或者如果你只是想節省一些時間，你可以嘗試一個超級菜單插件，比如 Max Mega Menu、QuadMenu 或 ElementsKit。

您想進一步提高您的 WordPress 網站的性能嗎？ 除了提供簡單的自動備份和其他 WordPress 安全功能外，Jetpack 還可以幫助提高您網站的速度和用戶體驗！