網(wǎng)站導(dǎo)航是幫助您的用戶到達(dá)他們想去的地方的關(guān)鍵。精心設(shè)計(jì)的菜單可以大大改善用戶體驗(yàn) (UX)，甚至降低跳出率。然而，一個(gè)制作不良的人可以做相反的事情。

幸運(yùn)的是，wordpress使您能夠創(chuàng)建自定義菜單以滿足您網(wǎng)站的需求。您甚至可以使用本機(jī)功能添加一個(gè)緊湊的WordPress下拉菜單，以節(jié)省空間，同時(shí)仍為您的訪問(wèn)者提供清晰的方向。

在這篇文章中，我們將討論為什么網(wǎng)站導(dǎo)航很重要以及下拉菜單如何特別有用。然后我們將引導(dǎo)您了解如何在WordPress中創(chuàng)建它們，并分享一些可以提供幫助的插件。

1. WordPress導(dǎo)航和下拉菜單簡(jiǎn)介
2. 如何在WordPress中創(chuàng)建下拉菜單
3. 用于增強(qiáng)下拉菜單的WordPress插件
4. 改善WordPress下拉菜單的技巧
5. 對(duì)WordPress下拉菜單進(jìn)行故障排除

WordPress導(dǎo)航和下拉菜單簡(jiǎn)介

盡管它們可能并不張揚(yáng)，但導(dǎo)航菜單是任何網(wǎng)站的重要元素。它們幫助用戶快速找到最相關(guān)的頁(yè)面以實(shí)現(xiàn)他們的目標(biāo)，同時(shí)也讓初次訪問(wèn)者了解您必須提供的內(nèi)容：

閃電博網(wǎng)站主導(dǎo)航菜單

擁有精心設(shè)計(jì)的導(dǎo)航菜單是提高轉(zhuǎn)化率和降低跳出率的關(guān)鍵。當(dāng)用戶可以輕松找到您的產(chǎn)品、電子郵件注冊(cè)表單或其他轉(zhuǎn)換內(nèi)容所在的頁(yè)面時(shí)，您就可以更輕松地讓他們進(jìn)行購(gòu)買或注冊(cè)。

另外，如果用戶可以自信地在您的網(wǎng)站上找到他們的路，他們就不必因?yàn)樗麄冏罱K出現(xiàn)在錯(cuò)誤的地方而從您的網(wǎng)頁(yè)中彈跳出來(lái)。幫助他們?cè)诘谝粫r(shí)間做對(duì)既可以改善用戶體驗(yàn)，又可以最大程度地減少挫折感。

在WordPress中，菜單是一個(gè)固有的功能。使用該平臺(tái)創(chuàng)建的任何站點(diǎn)都可以顯示其中一個(gè)或多個(gè)。但是，wordpress主題在設(shè)計(jì)和放置菜單或菜單時(shí)也發(fā)揮著重要作用。

出于這個(gè)原因，您的WordPress菜單可以采用多種不同的形式。最熟悉的是標(biāo)準(zhǔn)的標(biāo)題菜單：

典型標(biāo)題菜單的示例

您通常還可以在頁(yè)面底部包含一個(gè)額外的頁(yè)腳菜單。它可能顯示與您的主菜單相同的內(nèi)容，或提供略有不同的選項(xiàng)：

頁(yè)腳菜單示例

另一種風(fēng)格是菜單疊加，用戶可以隨意打開和關(guān)閉：

疊加菜單示例

或者，您可以考慮使用側(cè)邊欄菜單：

側(cè)邊欄菜單示例

或者您可以合并一個(gè)下拉菜單，有時(shí)也稱為“嵌套”菜單：

下拉菜單示例

這種類型的導(dǎo)航非常適合許多類型的網(wǎng)站。它不會(huì)像覆蓋菜單那樣掩蓋您的內(nèi)容，但不像大標(biāo)題欄或側(cè)邊欄菜單那樣具有侵入性。

通過(guò)在需要時(shí)隱藏某些內(nèi)容，您將節(jié)省屏幕空間，同時(shí)仍為用戶提供一種輕松的方式來(lái)繞過(guò)它。

如何在WordPress中創(chuàng)建下拉菜單

如果您認(rèn)為下拉菜單可能非常適合您的 WordPress 網(wǎng)站，那么設(shè)置一個(gè)非常簡(jiǎn)單。通過(guò)使用WordPress中可用的本機(jī)菜單功能，您只需五個(gè)步驟即可創(chuàng)建一個(gè)適合您需求的自定義導(dǎo)航系統(tǒng)。

第 1 步：創(chuàng)建您的菜單項(xiàng)

創(chuàng)建菜單的第一步是決定在其中包含哪些內(nèi)容。首先導(dǎo)航到?WordPress 儀表板中的外觀 > 菜單：

訪問(wèn)WordPress儀表盤中的菜單編輯器

根據(jù)您的主題，您在菜單編輯器中看到的內(nèi)容會(huì)略有不同。

但是，現(xiàn)在需要注意的是“編輯菜單”選項(xiàng)卡中的第一個(gè)選項(xiàng)。您應(yīng)該會(huì)看到一個(gè)選項(xiàng)，您可以在其中選擇要編輯的現(xiàn)有菜單之一，以及創(chuàng)建新菜單的選項(xiàng)：

在WordPress菜單編輯器頂部創(chuàng)建新菜單鏈接

對(duì)于此示例，我們將選擇后一個(gè)選項(xiàng)并創(chuàng)建一個(gè)新菜單。這包括添加標(biāo)題，然后單擊“創(chuàng)建菜單”?按鈕：

命名和創(chuàng)建新菜單

現(xiàn)在您已準(zhǔn)備好開始向WordPress菜單添加項(xiàng)目。在大多數(shù)情況下，最好使您的菜單盡可能簡(jiǎn)單，同時(shí)仍為用戶提供足夠的信息以到達(dá)他們想去的地方。

包含太多頁(yè)面會(huì)使訪問(wèn)者不堪重負(fù)，并使導(dǎo)航變得更加困難而不是更容易。

有幾種不同的方法可以添加菜單項(xiàng)。前兩個(gè)是Pages和Posts，它們的工作原理非常相似。

將頁(yè)面添加到菜單

在菜單編輯器的側(cè)邊欄中，只需選擇要包含的每個(gè)頁(yè)面或帖子的復(fù)選框，然后單擊“添加到菜單”按鈕：

您的下一個(gè)選擇是合并自定義鏈接。這涉及為您希望引導(dǎo)用戶訪問(wèn)的頁(yè)面提供 URL，然后為其創(chuàng)建一個(gè)簡(jiǎn)短但描述性的標(biāo)簽。之后，您可以?再次單擊“添加到菜單”：

向菜單添加自定義鏈接

最后，您還可以將頁(yè)面和文章類別添加?到導(dǎo)航菜單中。這會(huì)將用戶帶到存檔頁(yè)面，他們可以在其中查看特定主題的所有內(nèi)容。

博客和其他內(nèi)容豐富的網(wǎng)站可能會(huì)發(fā)現(xiàn)此功能特別有用：

將分類添加到菜單

與Pages和 Posts 選項(xiàng)一樣，只需選中您希望包含的分類的復(fù)選框?，?然后選擇添加至菜單?。

第 2 步：組織您的WordPress菜單

添加?完所有菜單項(xiàng)后，您應(yīng)該會(huì)看到它們列在編輯器菜單結(jié)構(gòu)下的各個(gè)圖塊中：

菜單編輯器的菜單結(jié)構(gòu)部分

最初，菜單項(xiàng)將按照您添加它們的順序出現(xiàn)。但是，您可以通過(guò)將它們拖放到位來(lái)輕松修改它們的組織。這將使您能夠創(chuàng)建一個(gè)沒(méi)有下拉功能的簡(jiǎn)單菜單。

有幾種方法可以向WordPress菜單添加下拉菜單。

最簡(jiǎn)單的是繼續(xù)拖放，但開始在其他菜單項(xiàng)下嵌套某些菜單項(xiàng)：

在博客頁(yè)面下嵌套分類

例如，在上圖中，我們將添加到菜單中的三個(gè)文章類別移動(dòng)到博客下，使它們成為“子項(xiàng)目”。在前端，這將創(chuàng)建一個(gè)如下所示的下拉菜單：

WordPress下拉菜單示例

如果您想添加包含您網(wǎng)站上所有類別的下拉菜單，您可以通過(guò)向菜單添加自定義鏈接來(lái)實(shí)現(xiàn)。使用“#”作為URL和“類別”或類似的標(biāo)簽：

為菜單創(chuàng)建類別標(biāo)簽

然后，您可以將所有類別添加到菜單中，并將它們嵌套在此標(biāo)簽下。每個(gè)類別都可以點(diǎn)擊，但標(biāo)簽不會(huì)：

類別下拉菜單

使用類似的技術(shù)，您還可以在單??個(gè)下拉菜單中隱藏所有菜單項(xiàng)。

添加另一個(gè)自定義鏈接，使用“#”作為 URL，使用“Menu”作為標(biāo)簽。然后，將所有其他菜單項(xiàng)嵌套在該菜單項(xiàng)下：

將所有導(dǎo)航鏈接嵌套在一個(gè)菜單標(biāo)簽下

前端的結(jié)果將是一個(gè)下拉菜單，其中包含您網(wǎng)站的關(guān)鍵頁(yè)面。

正如您在下面的類別項(xiàng)中所見(jiàn)，嵌套在子項(xiàng)下的任何內(nèi)容都將顯示在子菜單中：

WordPress下拉導(dǎo)航菜單

通過(guò)以這種方式使用拖放菜單編輯器，您可以創(chuàng)建任何樣式和組合的 WordPress 下拉菜單。但是請(qǐng)記住，太多的菜單項(xiàng)可能會(huì)讓用戶感到困惑。

最好限制您合并的子菜單的數(shù)量，以避免導(dǎo)航過(guò)度混亂。

第 3 步：將圖像合并到您的WordPress菜單中

如果在第2步結(jié)束時(shí)，您的下拉菜單看起來(lái)與您想象的完全一樣，您可以跳到第5步進(jìn)行發(fā)布。但是，如果您想通過(guò)自定義來(lái)增強(qiáng)菜單，您可能需要采取其他步驟。

要考慮的一種策略是將視覺(jué)元素融入您的菜單中，為訪問(wèn)者提供進(jìn)一步的指導(dǎo)。雖然描述性標(biāo)簽很重要，但有時(shí)圖像或圖標(biāo)可以幫助用戶更快地確定特定導(dǎo)航鏈接的位置。

可以使用自定義CSS添加圖像，我們將在稍后討論。但是，我們建議您選擇一個(gè)插件，例如Menu Image, Icons Made Easy：

帶有圖像的WordPress下拉菜單

這樣，您不必?fù)?dān)心為了給下拉菜單添加視覺(jué)趣味而費(fèi)心處理任何代碼。

只需安裝插件，然后返回外觀>菜單：

菜單編輯器中的菜單圖像部分

您會(huì)看到，您已包含在菜單中的每個(gè)頁(yè)面現(xiàn)在都有圖像選項(xiàng)。您可以選擇每個(gè)頁(yè)面的照片、大小和位置。完成后請(qǐng)記住保存更改。

第 4 步：將自定義CSS添加到您的下拉菜單

雖然不建議初學(xué)者使用，但中級(jí)和高級(jí)用戶可能希望在他們的WordPress下拉菜單中加入自己的樣式。但是，在直接進(jìn)入CSS之前，您需要向菜單中添加一個(gè)類。

如果您跳過(guò)此步驟，您的自定義CSS可能會(huì)導(dǎo)致您網(wǎng)站上的任何其他菜單出現(xiàn)問(wèn)題。例如，您可能不經(jīng)意間將樣式應(yīng)用到您的頁(yè)腳菜單中，而這些樣式僅適用于主下拉菜單。

在菜單編輯器中，單擊右上角的屏幕選項(xiàng)?：

菜單編輯器中的屏幕選項(xiàng)選項(xiàng)卡

然后，選中CSS類框：

“屏幕選項(xiàng)”選項(xiàng)卡中的“CSS類”復(fù)選框

這將向菜單中的每個(gè)頁(yè)面添加一個(gè)CSS類字段：

菜單編輯器中的CSS類字段

一旦您向菜單項(xiàng)添加一個(gè)或多個(gè)CSS類，您在樣式表中包含的任何自定義代碼將僅適用于您指定類的菜單中的項(xiàng)目。

您現(xiàn)在可以轉(zhuǎn)到您的樣式表或定制器，并開始處理您的自定義樣式。

第 5 步：在黃金地段發(fā)布您的菜單

一旦您的WordPress下拉菜單結(jié)構(gòu)化以滿足您的需求，并且您已經(jīng)合并了您想要的任何自定義，您就可以將其發(fā)布到您的網(wǎng)站。

根據(jù)您的主題及其支持的菜單位置，此過(guò)程會(huì)略有不同。對(duì)于此示例，我們將使用“二〇二〇”主題。

在菜單編輯器中，向下滾動(dòng)到“菜單設(shè)置”?部分：

編輯器中的菜單設(shè)置部分

如果您希望新頁(yè)面自動(dòng)添加到您的菜單中，您可以選擇第一個(gè)復(fù)選框。如果您剛剛開始使用您的網(wǎng)站并且尚未添加所有關(guān)鍵頁(yè)面，這可能會(huì)很有用。但是，請(qǐng)注意不要意外向菜單中添加太多項(xiàng)目。

在此選項(xiàng)下方，您將看到一個(gè)復(fù)選框列表，指出您網(wǎng)站的不同區(qū)域，您可以在其中顯示菜單。

二〇二〇主題包括不同的菜單區(qū)域：桌面水平菜單、桌面擴(kuò)展菜單、移動(dòng)菜單、頁(yè)腳菜單、社交菜單。

在這種情況下，我們創(chuàng)建的菜單最適合?位于站點(diǎn)標(biāo)題中的桌面水平菜單位置：

二〇二〇主題的桌面水平菜單

您還可以考慮導(dǎo)航到?儀表板菜單區(qū)域中的管理位置?選項(xiàng)卡。在這里，您可以看到您的主題支持的所有菜單位置，以及您分配給每個(gè)菜單的菜單：

管理位置選項(xiàng)卡

放置菜單時(shí)，查看它們?cè)谇岸说耐庥^會(huì)很有幫助。

使用實(shí)時(shí)預(yù)覽管理選項(xiàng)

單擊“使用實(shí)時(shí)預(yù)覽管理”?按鈕，使用WordPress定制器查看菜單在您為其選擇的位置中的顯示方式：

定制器中WordPress菜單的實(shí)時(shí)預(yù)覽

然后，您可以直接從定制器發(fā)布您的一個(gè)或多個(gè)菜單。如果您需要在下拉菜單中添加或刪除項(xiàng)目，您只需返回菜單編輯器并進(jìn)行必要的調(diào)整即可。

用于增強(qiáng)下拉菜單的WordPress插件

盡管您無(wú)需任何額外工具即可創(chuàng)建功能齊全的 WordPress 導(dǎo)航菜單，但有時(shí)擴(kuò)展菜單的功能會(huì)很有用。如果您的網(wǎng)站就是這種情況，您可能需要查看一些流行的WordPress菜單插件。

Nested Pages是內(nèi)容豐富的博客創(chuàng)建下拉菜單的有效方式。雖然它主要用于組織文章和頁(yè)面，但此插件還會(huì)自動(dòng)生成一個(gè)反映您內(nèi)容結(jié)構(gòu)的菜單：

WordPress插件-Nested Pages

雖然在菜單中加入大量項(xiàng)目不一定是可取的，但有時(shí)這是不可避免的。

如果您的網(wǎng)站就是這種情況，Max Mega Menu可以幫助您將現(xiàn)有的WordPress菜單組合成一個(gè)“超級(jí)菜單”：

WordPress插件-Max Mega Menu

隨著移動(dòng)瀏覽的興起，確保您的菜單在移動(dòng)設(shè)備上仍然可讀是關(guān)鍵。

WP Mobile Menu與任何響應(yīng)式主題配對(duì)，以幫助您為移動(dòng)站點(diǎn)的用戶創(chuàng)建導(dǎo)航系統(tǒng)：

WordPress插件-WP Mobile Menus

最后，正如我們已經(jīng)討論過(guò)的，在某些情況下，描述性菜單項(xiàng)是不夠的。在這些情況下，您可能需要考慮使用我們?cè)谏厦娴?步中描述的菜單圖像、圖標(biāo)變得簡(jiǎn)單。

您可以使用這些插件中的任何一個(gè)來(lái)增強(qiáng)您當(dāng)前的導(dǎo)航系統(tǒng)并使您的 WordPress 下拉菜單更有效。請(qǐng)記住，有時(shí)，在導(dǎo)航方面，越簡(jiǎn)單越好。只有在可以改善您的用戶體驗(yàn)并避免使您的網(wǎng)站混亂的情況下才添加額外的功能。

您的導(dǎo)航菜單是訪問(wèn)者將首先看到的一些網(wǎng)站元素。除了影響整個(gè)網(wǎng)站的導(dǎo)航系統(tǒng)外，WordPress 菜單還可以決定用戶體驗(yàn)的成敗。您需要一個(gè)菜單??欄來(lái)幫助訪問(wèn)者快速找到他們需要的信息。

因此，您的主菜單必須易于使用且具有視覺(jué)吸引力，這一點(diǎn)很重要。查看以下有關(guān)優(yōu)化下拉菜單使用以獲得更好用戶體驗(yàn)的提示。

改善WordPress下拉菜單的技巧

使用視覺(jué)效果

使下拉菜單更具交互性的最佳方法之一是使用插件將圖像圖標(biāo)添加到其項(xiàng)目中。

例如，Menu Image插件提供了大量的FontAwesome和DashIcons圖標(biāo)供您選擇。您可以將所需的元素添加到不同位置的下拉菜單中，或者將它們作為鼠標(biāo)懸停時(shí)觸發(fā)的動(dòng)畫包含在內(nèi)。

避免使用不必要的圖標(biāo)過(guò)度擁擠空間，因?yàn)檫@會(huì)損害菜單的可讀性并分散用戶瀏覽您的 WordPress 網(wǎng)站的注意力。

添加自定義CSS

如上所述，您可以將CSS類添加到新菜單中?？紤]添加自定義CSS以根據(jù)您的偏好設(shè)置菜單樣式以進(jìn)行高級(jí)自定義。

從您的WordPress儀表板盤到外觀->自定義，然后使用附加CSS功能添加您自己的代碼。在此示例中，我們將頂部菜單的字體顏色更改為藍(lán)色。

使用瀏覽器中的檢查工具來(lái)定位主題的CSS #ID選擇器——您需要它來(lái)選擇特定元素進(jìn)行自定義。

這是我們用來(lái)改變字體顏色的代碼：

#top-menu li.menu-item a {
color:#0051D7;
}

隨意嘗試不同的CSS樣式或使用預(yù)制代碼來(lái)簡(jiǎn)化設(shè)計(jì)過(guò)程。

啟用多級(jí)下拉菜單

將子項(xiàng)放在父項(xiàng)或頂級(jí)頁(yè)面下將自動(dòng)創(chuàng)建子父關(guān)系，啟用多級(jí)下拉功能。

一個(gè)父菜單項(xiàng)可以有多個(gè)子項(xiàng)。但是，我們建議每個(gè)父項(xiàng)不超過(guò)七個(gè)子項(xiàng)，以免影響WordPress網(wǎng)站導(dǎo)航體驗(yàn)。

創(chuàng)建一個(gè)超級(jí)下拉菜單

如果您想在單個(gè)下拉菜單中顯示大量選項(xiàng)，最好創(chuàng)建一個(gè)大型菜單。與標(biāo)準(zhǔn)下拉菜單不同，大型菜單通常包含更多鏈接和子菜單。

由于這種類型的菜單顯示了您網(wǎng)站的整個(gè)結(jié)構(gòu)，因此訪問(wèn)者可以從主菜單訪問(wèn)網(wǎng)站的最深處。大型菜單非常適合大型網(wǎng)站，因?yàn)樗鼈兛s短了用戶旅程。

有很多WordPress插件可以幫助您創(chuàng)建自定義的大型菜單。我們使用Max Mega Menu插件設(shè)計(jì)了上面的超級(jí)菜單設(shè)計(jì)示例。其他值得注意的大型菜單插件包括WP Mega Menu和Hero Mega Menu。

啟用實(shí)時(shí)預(yù)覽

如果您在更改菜單位置時(shí)需要視覺(jué)參考，請(qǐng)選擇頁(yè)面頂部的“使用實(shí)時(shí)預(yù)覽管理”按鈕。實(shí)時(shí)預(yù)覽模式在創(chuàng)建復(fù)雜的多級(jí)下拉菜單時(shí)特別有用。

在此模式下，使用WordPress定制器所做的所有更改都將實(shí)時(shí)顯示。您還可以通過(guò)實(shí)時(shí)預(yù)覽模式發(fā)布下拉菜單。

對(duì)WordPress下拉菜單進(jìn)行故障排除

如果您已按上述方式配置菜單，但下拉功能不起作用，則可能有多種原因。

雖然我們無(wú)法在此處涵蓋所有問(wèn)題，但我們可以?幫助您縮小問(wèn)題的原因，以便您找到合適的解決方案。

通常，出現(xiàn)故障的菜單是自定義菜單和主題之間代碼沖突的結(jié)果。如果您的菜單不起作用，您應(yīng)該做的第一件事是切換到默認(rèn)主題，例如二〇二〇。如果您的菜單再次開始運(yùn)行，您就會(huì)知道問(wèn)題與您的主題有關(guān)。然后，您可以聯(lián)系主題的開發(fā)人員以尋求解決方案。

其他一些可能的原因包括：

• 錯(cuò)誤輸入的代碼：?仔細(xì)檢查您添加的任何自定義CSS是否正確，以及您是否使用了第4步中所述的CSS類。
• 插件不兼容：?嘗試禁用您已安裝的任何與菜單相關(guān)的插件，看看是否能解決問(wèn)題。
• 過(guò)時(shí)的jQuery：升級(jí)到最新版本的jQuery并嘗試再次打開下拉菜單。

但是，正如我們前面提到的，錯(cuò)誤菜單背后的潛在原因很多。如果上述解決方案似乎都不起作用，我們建議訪問(wèn)WordPress支持論壇，或聘請(qǐng)WordPress開發(fā)人員為您修復(fù)。

小結(jié)

雖然這似乎是一件小事，但您的 WordPress 網(wǎng)站的導(dǎo)航可以成就或破壞其成功。使用下拉菜單可以節(jié)省用戶屏幕上的空間，同時(shí)還使他們能夠輕松瀏覽您的網(wǎng)站并提高轉(zhuǎn)化率。