如何在WordPress中創建下拉菜單(入門指南)


您要創建一個下拉菜單並將其添加到您的WordPress網站嗎?

當您將鼠標懸停在菜單上的項目上時,下拉菜單顯示鏈接列表。

我們使用WPBeginner上的下拉菜單,繼續並將鼠標​​移到頂部的導航菜單上。

在此初學者指南中,我們將向您展示如何通過逐步說明在WordPress中輕鬆創建下拉菜單。

在WordPress中創建下拉菜單

為什麼要在WordPress中使用下拉菜單?

WordPress帶有內置的菜單管理系統,可讓您輕鬆地將導航菜單添加到WordPress網站。

導航菜單是指向您網站主頁的鏈接,這些鏈接通常在網站徽標旁邊緊靠頂部顯示為水平行。

典型的導航菜單,帶有水平行的鏈接

如果您要開始寫博客或創建只有幾個頁面的網站,則可以將它們添加到單行中。

但是,如果您經營在線商店或大型網站,則可能需要嚮導航菜單添加更多鏈接。

下拉菜單僅在用戶將鼠標移至父項時才顯示菜單鏈接,從而幫助您解決空間有限的問題。 它們還允許您按主題或層次結構組織菜單結構。

下拉菜單示例

最後,它們看起來也不錯。

話雖如此,現在讓我們來看看如何輕鬆創建WordPress下拉菜單將其添加到您的網站。

影片教學

訂閱WPBeginner

如果您不喜歡該視頻或需要更多說明,請繼續閱讀。

步驟1.選擇具有下拉菜單支持的主題

WordPress帶有內置的菜單管理系統,但是顯示這些菜單完全取決於您的WordPress主題。

默認情況下,幾乎所有WordPress主題都支持下拉菜單。 但是,某些主題可能沒有適當的菜單支持。

您需要確保您使用的是支持下拉菜單的WordPress主題。

您如何知道您使用的主題是否支持下拉菜單?

您只需訪問主題的網站,即可在該網站上找到主題演示的鏈接。 從那裡可以看到演示是否在導航菜單中顯示了下拉菜單。

如果不是,那麼您將需要找到一個WordPress主題。

請參閱我們的指南,了解如何為您的網站選擇完美的WordPress主題。

以下是一些出色的主題,它們支持開箱即用的下拉菜單。

  • Astra –這是一個多功能的WordPress主題,帶有多個入門站點和大量功能。
  • StudioPress主題–基於創世紀主題框架,這些專業主題針對性能進行了高度優化。
  • OceanWP –一種流行的WordPress主題,適用於所有類型的網站。
  • Ultra –由Themify構建器提供支持,此拖放式WordPress主題附帶漂亮的模板和靈活的主題選項。
  • Divi –由Elegant Themes流行的主題,使用Divi頁面構建器,並具有大量的拖放功能,包括下拉菜單。

話雖如此,現在讓我們看一下如何創建一個下拉WordPress菜單。

步驟1.在WordPress中創建導航菜單

如果您已經在網站上設置了導航菜單,則可以跳到下一步。

首先創建一個簡單的菜單。

外觀»菜單 頁,然後點擊頂部的“創建新菜單”鏈接。

創建菜單

接下來,您需要為導航菜單​​提供一個名稱。 此名稱不會在您的網站上公開顯示。 菜單名稱的目的是幫助您識別WordPress管理區域內的菜單。

菜單名稱

輸入菜單名稱,然後單擊“創建菜單”按鈕。

WordPress現在將為您創建一個新的空白菜單。

讓我們將頂部鏈接添加到導航菜單。 這些項目將出現在菜單的第一行。

只需從左欄中選擇要添加的頁面,然後單擊“添加到菜單”按鈕。 您還可以選擇博客文章,類別或添加自定義鏈接。

將頁面添加到菜單

現在,您將看到這些頁面出現在新菜單的右列中。

步驟2.將子項添加到菜單

子項目是將顯示在下拉菜單中的項目。 根據您想要組織菜單的方式,可以將它們添加到任何現有項目下。

為了本教程的緣故,我們將在博客鏈接下添加類別。

只需從左欄中選擇要添加的項目,然後單擊“添加到菜單”按鈕。 您的項目現在將出現在右列中。

新菜單項添加到菜單

但是,這些鏈接將顯示為常規項目。 我們需要使它們成為父菜單的子項。

您可以簡單地將菜單項拖放到父項下。 稍微向右移動它,它將成為一個子項目。

添加子菜單項以創建下拉菜單

對您要在下拉菜單下顯示的所有鏈接重複此過程。

完成後,請不要忘記單擊“保存菜單”按鈕來存儲您的更改。

步驟3.發布您的下拉菜單

如果您正在編輯網站上已經存在的菜單,那麼它將立即開始出現在您的網站上。

但是,如果它是一個新菜單項,那麼您現在需要選擇一個主題位置來顯示此菜單。

WordPress主題可以在不同位置顯示菜單。 每個主題都定義了自己的菜單位置,您可以選擇要在此處顯示的菜單。

您可以在“菜單設置”下的右列中找到此選項。 選擇“顯示位置”設置旁邊的選項,然後單擊“保存菜單”按鈕。

選擇主題位置

現在,您可以訪問您的網站以查看下拉菜單的運行情況。

下拉菜單預覽

創建交互式下拉菜單的提示

導航菜單很重要,因為這是用戶想要查看特定信息時會首先看到的菜單。

正確使用它們可以幫助您的用戶在您的網站上找到自己的方式。 它還將幫助您在網站上獲得更多的瀏覽量,轉化和銷售量。

以下是有關使導航菜單與下拉菜單更具交互性的一些技巧。

1.您可以創建多級下拉菜單

將鏈接設為另一個鏈接的子項目會使它顯示在下拉菜單中。 您也可以在另一個子項目下面添加一個子項目,以創建多級下拉菜單。

多級菜單

您的主題會自動將其顯示為下拉菜單中的子菜單。

多級下拉菜單

2.您也可以創建多個下拉菜單

您可以在菜單中的任何頂部鏈接下創建一個下拉菜單。 您甚至可以在主導航菜單中添加多個下拉菜單。

主菜單中的多個下拉菜單

3.創建帶有實時預覽的菜單

如果菜單過於復雜,則可以切換到視覺預覽。 去 外觀»定制 啟動實時主題定制器。

從那裡,單擊“菜單”選項卡,然後選擇導航菜單。 現在,您將在左列中看到一個拖放菜單編輯器,並在右面板中實時預覽您的站點。

通過實時預覽自定義WordPress菜單

4.在WordPress中創建一個大型大型菜單作為下拉菜單

下拉菜單一次僅顯示一個下拉菜單。 如果您想將網站的完整結構顯示為僅在用戶將鼠標懸停在主菜單上時才顯示的大型菜單,該怎麼辦?

超級菜單示例

超級菜單確實顯示為下拉菜單,但它們可以顯示更多鏈接,子菜單等等。 有關詳細說明,請參閱有關如何在WordPress中創建大型菜單的分步教程。

我們希望本文能幫助您學習如何輕鬆地在WordPress中創建下拉菜單。 您可能還想看看我們的指南,該指南如何在WordPress中創建粘性浮動導航菜單以及如何在WordPress中嚮導航菜單添加圖像圖標。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。