如何在 WordPress 中創(chuàng)建下拉菜單（初學(xué)者指南）

您想在 wordpress 中創(chuàng)建下拉菜單嗎？

當(dāng)您將鼠標(biāo)懸停在菜單項(xiàng)上時(shí)，下拉菜單會(huì)顯示鏈接列表。這是在小空間中顯示大量選項(xiàng)的好方法，并通過(guò)將內(nèi)容組織為類(lèi)別和子類(lèi)別來(lái)幫助訪問(wèn)者找到他們正在尋找的內(nèi)容。

在本初學(xué)者指南中，我們將向您展示如何在 WordPress 中創(chuàng)建下拉菜單。

為什么在 WordPress 中使用下拉菜單？

WordPress 附帶一個(gè)內(nèi)置的菜單管理系統(tǒng)，可讓您輕松地將導(dǎo)航菜單添加到您的 WordPress 網(wǎng)站。

導(dǎo)航菜單是指向網(wǎng)站最重要頁(yè)面的鏈接，通常顯示在網(wǎng)站徽標(biāo)旁邊的一行中。

如果您要?jiǎng)?chuàng)建 WordPress 博客或創(chuàng)建只有幾個(gè)頁(yè)面的網(wǎng)站，那么將菜單創(chuàng)建為單行可能是有意義的。這使訪問(wèn)者可以一目了然地看到您的所有重要頁(yè)面。

但是，如果您經(jīng)營(yíng)在線商店或大型網(wǎng)站，那么您可能需要向?qū)Ш讲藛翁砑哟罅挎溄印＿@可能會(huì)讓訪問(wèn)者不知所措，并使您的網(wǎng)站看起來(lái)混亂而復(fù)雜。

下拉菜單通過(guò)僅在訪問(wèn)者將鼠標(biāo)懸停在父項(xiàng)上時(shí)顯示菜單鏈接來(lái)解決此問(wèn)題。它們還允許您將內(nèi)容組織為主題、類(lèi)別或組。

即使您的網(wǎng)站有數(shù)百甚至數(shù)千個(gè)頁(yè)面，這也可以幫助訪問(wèn)者找到他們正在尋找的內(nèi)容。

話雖這么說(shuō)，讓我們看看如何輕松創(chuàng)建 WordPress 下拉菜單，然后將其添加到您的網(wǎng)站。

視頻教程

https://www.youtube.com/embed/Kt_c_Ug8IHc?version=3&rel=0&fs=1&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent訂閱 WPBeginner

https://www.youtube.com/subscribe_embed?usegapi=1&channel=wpbeginner&layout=default&count=default&origin=https%3A%2F%2Fwpbeginner.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-Static%2F_%2Fjs%2Fk%3Doz.gapi.en.vQiXRrxCe40.O%2Fam%3DAQ%2Fd%3D1%2Frs%3DAGLTcCMBxIGVyXSdvvcs43a64yHt_P7dfg%2Fm%3D__features__#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh&id=I0_1448178294715&parent=https%3A%2F%2Fwpbeginner.com

如果您不喜歡該視頻或需要更多說(shuō)明，請(qǐng)繼續(xù)閱讀。

第 1 步：選擇具有下拉菜單支持的主題

WordPress 附帶一個(gè)內(nèi)置的菜單管理系統(tǒng)，但這些菜單的外觀會(huì)根據(jù)您的WordPress 主題而有所不同。

幾乎所有 WordPress 主題默認(rèn)都支持下拉菜單。但是，某些主題可能沒(méi)有適當(dāng)?shù)南吕С帧Ｊ紫龋枰_保您使用的主題支持下拉菜單。

如何知道您的主題是否支持下拉導(dǎo)航？

如果您從官方 WordPress 存儲(chǔ)庫(kù)下載了主題，則只需訪問(wèn)該主題的頁(yè)面并單擊“預(yù)覽”按鈕即可觀看現(xiàn)場(chǎng)演示。

然后您可以檢查演示是否包含下拉菜單。

如果您使用的是高級(jí) WordPress 主題，那么開(kāi)發(fā)人員可能會(huì)在其網(wǎng)站上提供現(xiàn)場(chǎng)演示。您還可以查看主題的文檔以獲取更多信息。

如果您仍然不確定，那么您可以隨時(shí)向開(kāi)發(fā)人員尋求幫助。有關(guān)此主題的更多信息，請(qǐng)參閱我們的指南，了解如何正確請(qǐng)求 WordPress 支持并獲得支持。

如果您的 WordPress 主題不支持下拉菜單，那么您需要找到一個(gè)支持下拉菜單的主題。有關(guān)大量提示，請(qǐng)參閱我們有關(guān)如何選擇完美 WordPress 主題的指南。您還可以查看我們關(guān)于如何正確更改 WordPress 主題的終極指南。

為了幫助您，這里有一些支持下拉菜單的優(yōu)秀主題：

• Astra?– 一個(gè)多用途 WordPress 主題，附帶多個(gè)入門(mén)網(wǎng)站和大量功能。
• StudioPress 主題– 這些專(zhuān)業(yè)主題建立在 Genesis 主題框架之上，可以幫助您的網(wǎng)站更快地加載。
• OceanWP?– 流行的 WordPress 主題，適合各種網(wǎng)站。
• Ultra?– 由Themify構(gòu)建器提供支持，這款拖放式 WordPress 主題配有漂亮的模板和靈活的主題選項(xiàng)。
• Divi –?Elegant Themes的流行主題，使用 Divi 頁(yè)面構(gòu)建器，并附帶大量拖放功能，包括下拉菜單。

話雖這么說(shuō)，讓我們來(lái)看看如何創(chuàng)建 WordPress 下拉菜單。

第 2 步：在 WordPress 中創(chuàng)建導(dǎo)航菜單

讓我們從創(chuàng)建一個(gè)簡(jiǎn)單的菜單開(kāi)始。

如果您已經(jīng)在網(wǎng)站上設(shè)置了導(dǎo)航菜單，則可以跳到下一步。

首先，轉(zhuǎn)到WordPress 儀表板中的外觀 ? 菜單，然后單擊頂部的“創(chuàng)建新菜單”鏈接。

注意：如果您在站點(diǎn)上看不到“外觀”?“菜單”選項(xiàng)，而僅看到“外觀”?“編輯器”，?則意味著您的主題啟用了全站點(diǎn)編輯 (FSE)。在這種情況下，您可以跳到下面的 FSE 部分。

接下來(lái)，您需要輸入導(dǎo)航菜單的名稱(chēng)。

這僅供您參考，因此您可以使用任何可以幫助您識(shí)別 WordPress 管理區(qū)域內(nèi)的菜單的內(nèi)容。

這些頁(yè)面現(xiàn)在將顯示在“菜單結(jié)構(gòu)”下的右側(cè)欄中。

您還可以選擇博客文章、類(lèi)別或添加自定義鏈接。有關(guān)更詳細(xì)的說(shuō)明，請(qǐng)參閱我們有關(guān)如何在 WordPress 中添加導(dǎo)航菜單的指南。

步驟 3：向菜單添加子項(xiàng)

接下來(lái)，我們需要添加將出現(xiàn)在下拉菜單中的子項(xiàng)目。您可以在任何現(xiàn)有菜單項(xiàng)下添加子項(xiàng)。

在本指南中，我們將向您展示如何在“博客”菜單項(xiàng)下添加主題類(lèi)別，但無(wú)論您添加什么內(nèi)容，步驟都是相似的。

在左側(cè)欄中，只需選擇要添加為子項(xiàng)目的所有頁(yè)面，然后單擊“添加到菜單”按鈕。您的項(xiàng)目現(xiàn)在將顯示在右側(cè)欄中。

但是，默認(rèn)情況下，這些鏈接都顯示為常規(guī)菜單項(xiàng)，這意味著它們將添加到頂行。

我們需要將它們作為父項(xiàng)的子項(xiàng)。

為此，只需拖放一個(gè)菜單項(xiàng)并將其放置在所需的父菜單項(xiàng)下即可。然后，只要稍微向右移動(dòng)，它就會(huì)成為一個(gè)子項(xiàng)。

現(xiàn)在，只需對(duì)要在下拉列表中顯示的每個(gè)子項(xiàng)目重復(fù)此過(guò)程即可。

當(dāng)您對(duì)菜單的設(shè)置感到滿意時(shí)，請(qǐng)不要忘記單擊“保存菜單”按鈕來(lái)存儲(chǔ)您的更改。

第 4 步：發(fā)布您的下拉菜單

如果您正在編輯網(wǎng)站上已存在的菜單，那么訪問(wèn)者將立即看到您的更改。

但是，如果您要?jiǎng)?chuàng)建新菜單，則需要為該菜單選擇一個(gè)位置。

每個(gè) WordPress 主題都定義了自己的菜單位置，您將在“菜單設(shè)置”下的右側(cè)列中看到這些位置。只需選中您要使用的位置旁邊的框，然后單擊“保存菜單”即可。

您現(xiàn)在可以訪問(wèn)您的網(wǎng)站以查看正在運(yùn)行的下拉菜單。

如何使用全站點(diǎn)編輯器創(chuàng)建下拉菜單

如果您使用的?是基于塊的主題?（例如?Hestia Pro ），那么您可以使用全站點(diǎn)編輯器將下拉菜單添加到站點(diǎn)的任何部分。

首先，只需轉(zhuǎn)到??WordPress 儀表板中的主題 ??編輯器。

默認(rèn)情況下，全站點(diǎn)編輯器將顯示主題的主頁(yè)模板。

要將下拉菜單添加到網(wǎng)站的不同部分，請(qǐng)單擊“模板”或“模板部分”。

例如，如果您正在創(chuàng)建主導(dǎo)航菜單，那么您通常希望將其添加到標(biāo)題模板部分。

編輯器現(xiàn)在將顯示組成 WordPress 主題的所有布局的列表。

只需單擊要添加下拉菜單的模板或模板部分即可。

WordPress 現(xiàn)在將顯示模板的預(yù)覽。

要編輯此模板，請(qǐng)繼續(xù)并單擊小鉛筆圖標(biāo)。

完成后，單擊左上角的藍(lán)色“+”圖標(biāo)。

在出現(xiàn)的搜索欄中，輸入“導(dǎo)航”。

當(dāng)出現(xiàn)正確的塊時(shí)，將其拖放到您的設(shè)計(jì)上。

現(xiàn)在，只需單擊以選擇該塊，您將看到可用于自定義導(dǎo)航塊的所有不同設(shè)置。

例如，您可以更改布局、編輯顯示設(shè)置、更改文本和背景的顏色以及調(diào)整字體大小。

要將頂級(jí)頁(yè)面添加到菜單中，只需單擊“+”按鈕即可。

然后，選擇“頁(yè)面鏈接”。

在出現(xiàn)的彈出窗口中，開(kāi)始輸入要添加的頁(yè)面的標(biāo)題或 URL。

當(dāng)出現(xiàn)右側(cè)頁(yè)面時(shí)，單擊將其添加到菜單中。

只需重復(fù)此過(guò)程即可將所有頂級(jí)項(xiàng)目添加到下拉菜單中。

完成后，您可以向任何父項(xiàng)添加子菜單。

在右側(cè)菜單中，單擊父項(xiàng)旁邊的虛線圖標(biāo)。然后，選擇“添加子菜單鏈接”。

這對(duì)于具有大量?jī)?nèi)容或許多不同內(nèi)容類(lèi)別的網(wǎng)站非常有用。

例如，如果您使用WooCommerce等插件在線銷(xiāo)售產(chǎn)品，那么您可能有“電子產(chǎn)品”類(lèi)別和“筆記本電腦”子類(lèi)別。不過(guò)，您可能還有其他子類(lèi)別，例如“Apple 筆記本電腦”或“筆記本電腦包和保護(hù)套”。

在這種情況下，為您的在線商店創(chuàng)建多級(jí)下拉菜單可能是有意義的。為此，只需將任何頁(yè)面拖動(dòng)到子項(xiàng)目下方，然后將其稍微向右移動(dòng)即可。

2. 創(chuàng)建多個(gè)下拉菜單

您可以根據(jù)需要?jiǎng)?chuàng)建任意數(shù)量的下拉菜單，然后將它們顯示在網(wǎng)站的不同區(qū)域。

例如，如果您運(yùn)行在線市場(chǎng)，那么您可以創(chuàng)建一個(gè)僅顯示產(chǎn)品類(lèi)別的下拉菜單。

這對(duì)于您的產(chǎn)品頁(yè)面非常有用，但您可能還想為主頁(yè)創(chuàng)建一個(gè)獨(dú)特的下拉菜單，以便購(gòu)物者可以找到您網(wǎng)站的不同區(qū)域，例如聯(lián)系表單和博客。

只需按照上述相同過(guò)程創(chuàng)建一個(gè)新的下拉菜單，然后使用“位置”設(shè)置來(lái)控制該下拉菜單在您網(wǎng)站上的顯示位置。

3. 創(chuàng)建帶有實(shí)時(shí)預(yù)覽的菜單

如果在儀表板中創(chuàng)建下拉菜單變得太復(fù)雜，那么您可以切換到 WordPress 定制器。只需轉(zhuǎn)到外觀?自定義即可啟動(dòng)實(shí)時(shí)主題定制器。

從這里，單擊“菜單”選項(xiàng)卡，然后選擇導(dǎo)航菜單。現(xiàn)在，您將在左側(cè)欄中看到一個(gè)拖放編輯器，并在右側(cè)面板中看到您網(wǎng)站的實(shí)時(shí)預(yù)覽。

您現(xiàn)在可以處理菜單，所做的任何更改都將顯示在實(shí)時(shí)預(yù)覽中。

4. 在 WordPress 中創(chuàng)建一個(gè)大型菜單作為下拉菜單

如果您有大量?jī)?nèi)容，那么您可能很難使用標(biāo)準(zhǔn)下拉菜單來(lái)整齊地組織它們。

相反，您可以將網(wǎng)站的完整結(jié)構(gòu)顯示為大型菜單，僅當(dāng)用戶將鼠標(biāo)懸停在主菜單上時(shí)才會(huì)出現(xiàn)。

超級(jí)菜單類(lèi)似于下拉菜單，但它們可以顯示更多鏈接、子菜單和其他項(xiàng)目。有關(guān)詳細(xì)說(shuō)明，請(qǐng)參閱有關(guān)如何在 WordPress 中創(chuàng)建大型菜單的分步教程。

我們希望本文能幫助您了解如何在 WordPress 中輕松創(chuàng)建下拉菜單。您可能還想查看我們有關(guān)如何正確將 WordPress 從 HTTP 遷移到 HTTPS 的指南，或者我們專(zhuān)家精選的商業(yè)網(wǎng)站必備 WordPress 插件。