建站
咨詢
售后
建站咨詢
新聞中心
成都創(chuàng)新互聯(lián)長期為近1000家客戶提供的網(wǎng)站建設(shè)服務，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為新賓企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、成都做網(wǎng)站，新賓網(wǎng)站改版等技術(shù)服務。擁有十年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
網(wǎng)站導航是幫助您的用戶到達他們想去的地方的關(guān)鍵。精心設(shè)計的菜單可以大大改善用戶體驗 (UX)，甚至降低跳出率。然而，一個制作不良的人可以做相反的事情。
幸運的是，wordpress使您能夠創(chuàng)建自定義菜單以滿足您網(wǎng)站的需求。您甚至可以使用本機功能添加一個緊湊的WordPress下拉菜單，以節(jié)省空間，同時仍為您的訪問者提供清晰的方向。
在這篇文章中，我們將討論為什么網(wǎng)站導航很重要以及下拉菜單如何特別有用。然后我們將引導您了解如何在WordPress中創(chuàng)建它們，并分享一些可以提供幫助的插件。
WordPress導航和下拉菜單簡介
盡管它們可能并不張揚，但導航菜單是任何網(wǎng)站的重要元素。它們幫助用戶快速找到最相關(guān)的頁面以實現(xiàn)他們的目標，同時也讓初次訪問者了解您必須提供的內(nèi)容：
閃電博網(wǎng)站主導航菜單
擁有精心設(shè)計的導航菜單是提高轉(zhuǎn)化率和降低跳出率的關(guān)鍵。當用戶可以輕松找到您的產(chǎn)品、電子郵件注冊表單或其他轉(zhuǎn)換內(nèi)容所在的頁面時，您就可以更輕松地讓他們進行購買或注冊。
另外，如果用戶可以自信地在您的網(wǎng)站上找到他們的路，他們就不必因為他們最終出現(xiàn)在錯誤的地方而從您的網(wǎng)頁中彈跳出來。幫助他們在第一時間做對既可以改善用戶體驗，又可以最大程度地減少挫折感。
在WordPress中，菜單是一個固有的功能。使用該平臺創(chuàng)建的任何站點都可以顯示其中一個或多個。但是，WordPress主題在設(shè)計和放置菜單或菜單時也發(fā)揮著重要作用。
出于這個原因，您的WordPress菜單可以采用多種不同的形式。最熟悉的是標準的標題菜單：
典型標題菜單的示例
您通常還可以在頁面底部包含一個額外的頁腳菜單。它可能顯示與您的主菜單相同的內(nèi)容，或提供略有不同的選項：
頁腳菜單示例
另一種風格是菜單疊加，用戶可以隨意打開和關(guān)閉：
疊加菜單示例
或者，您可以考慮使用側(cè)邊欄菜單：
側(cè)邊欄菜單示例
或者您可以合并一個下拉菜單，有時也稱為“嵌套”菜單：
下拉菜單示例
這種類型的導航非常適合許多類型的網(wǎng)站。它不會像覆蓋菜單那樣掩蓋您的內(nèi)容，但不像大標題欄或側(cè)邊欄菜單那樣具有侵入性。
通過在需要時隱藏某些內(nèi)容，您將節(jié)省屏幕空間，同時仍為用戶提供一種輕松的方式來繞過它。
如何在WordPress中創(chuàng)建下拉菜單
如果您認為下拉菜單可能非常適合您的 WordPress 網(wǎng)站，那么設(shè)置一個非常簡單。通過使用WordPress中可用的本機菜單功能，您只需五個步驟即可創(chuàng)建一個適合您需求的自定義導航系統(tǒng)。
第 1 步：創(chuàng)建您的菜單項
創(chuàng)建菜單的第一步是決定在其中包含哪些內(nèi)容。首先導航到 WordPress 儀表板中的外觀 > 菜單：
訪問WordPress儀表盤中的菜單編輯器
根據(jù)您的主題，您在菜單編輯器中看到的內(nèi)容會略有不同。
但是，現(xiàn)在需要注意的是“編輯菜單”選項卡中的第一個選項。您應該會看到一個選項，您可以在其中選擇要編輯的現(xiàn)有菜單之一，以及創(chuàng)建新菜單的選項：
在WordPress菜單編輯器頂部創(chuàng)建新菜單鏈接
對于此示例，我們將選擇后一個選項并創(chuàng)建一個新菜單。這包括添加標題，然后單擊“創(chuàng)建菜單” 按鈕：
命名和創(chuàng)建新菜單
現(xiàn)在您已準備好開始向WordPress菜單添加項目。在大多數(shù)情況下，最好使您的菜單盡可能簡單，同時仍為用戶提供足夠的信息以到達他們想去的地方。
包含太多頁面會使訪問者不堪重負，并使導航變得更加困難而不是更容易。
有幾種不同的方法可以添加菜單項。前兩個是Pages和Posts，它們的工作原理非常相似。
將頁面添加到菜單
在菜單編輯器的側(cè)邊欄中，只需選擇要包含的每個頁面或帖子的復選框，然后單擊“添加到菜單”按鈕：
您的下一個選擇是合并自定義鏈接。這涉及為您希望引導用戶訪問的頁面提供 URL，然后為其創(chuàng)建一個簡短但描述性的標簽。之后，您可以 再次單擊“添加到菜單”：
向菜單添加自定義鏈接
最后，您還可以將頁面和文章類別添加 到導航菜單中。這會將用戶帶到存檔頁面，他們可以在其中查看特定主題的所有內(nèi)容。
博客和其他內(nèi)容豐富的網(wǎng)站可能會發(fā)現(xiàn)此功能特別有用：
將分類添加到菜單
與Pages和 Posts 選項一樣，只需選中您希望包含的分類的復選框 ， 然后選擇添加至菜單 。
第 2 步：組織您的WordPress菜單
添加 完所有菜單項后，您應該會看到它們列在編輯器菜單結(jié)構(gòu)下的各個圖塊中：
菜單編輯器的菜單結(jié)構(gòu)部分
最初，菜單項將按照您添加它們的順序出現(xiàn)。但是，您可以通過將它們拖放到位來輕松修改它們的組織。這將使您能夠創(chuàng)建一個沒有下拉功能的簡單菜單。
有幾種方法可以向WordPress菜單添加下拉菜單。
最簡單的是繼續(xù)拖放，但開始在其他菜單項下嵌套某些菜單項：
在博客頁面下嵌套分類
例如，在上圖中，我們將添加到菜單中的三個文章類別移動到博客下，使它們成為“子項目”。在前端，這將創(chuàng)建一個如下所示的下拉菜單：
WordPress下拉菜單示例
如果您想添加包含您網(wǎng)站上所有類別的下拉菜單，您可以通過向菜單添加自定義鏈接來實現(xiàn)。使用“#”作為URL和“類別”或類似的標簽：
為菜單創(chuàng)建類別標簽
然后，您可以將所有類別添加到菜單中，并將它們嵌套在此標簽下。每個類別都可以點擊，但標簽不會：
類別下拉菜單
使用類似的技術(shù)，您還可以在單??個下拉菜單中隱藏所有菜單項。
添加另一個自定義鏈接，使用“#”作為 URL，使用“Menu”作為標簽。然后，將所有其他菜單項嵌套在該菜單項下：
將所有導航鏈接嵌套在一個菜單標簽下
前端的結(jié)果將是一個下拉菜單，其中包含您網(wǎng)站的關(guān)鍵頁面。
正如您在下面的類別項中所見，嵌套在子項下的任何內(nèi)容都將顯示在子菜單中：
WordPress下拉導航菜單
通過以這種方式使用拖放菜單編輯器，您可以創(chuàng)建任何樣式和組合的 WordPress 下拉菜單。但是請記住，太多的菜單項可能會讓用戶感到困惑。
最好限制您合并的子菜單的數(shù)量，以避免導航過度混亂。
第 3 步：將圖像合并到您的WordPress菜單中
如果在第2步結(jié)束時，您的下拉菜單看起來與您想象的完全一樣，您可以跳到第5步進行發(fā)布。但是，如果您想通過自定義來增強菜單，您可能需要采取其他步驟。
要考慮的一種策略是將視覺元素融入您的菜單中，為訪問者提供進一步的指導。雖然描述性標簽很重要，但有時圖像或圖標可以幫助用戶更快地確定特定導航鏈接的位置。
可以使用自定義CSS添加圖像，我們將在稍后討論。但是，我們建議您選擇一個插件，例如Menu Image, Icons Made Easy：
帶有圖像的WordPress下拉菜單
這樣，您不必擔心為了給下拉菜單添加視覺趣味而費心處理任何代碼。
只需安裝插件，然后返回外觀>菜單：
菜單編輯器中的菜單圖像部分
您會看到，您已包含在菜單中的每個頁面現(xiàn)在都有圖像選項。您可以選擇每個頁面的照片、大小和位置。完成后請記住保存更改。
第 4 步：將自定義CSS添加到您的下拉菜單
雖然不建議初學者使用，但中級和高級用戶可能希望在他們的WordPress下拉菜單中加入自己的樣式。但是，在直接進入CSS之前，您需要向菜單中添加一個類。
如果您跳過此步驟，您的自定義CSS可能會導致您網(wǎng)站上的任何其他菜單出現(xiàn)問題。例如，您可能不經(jīng)意間將樣式應用到您的頁腳菜單中，而這些樣式僅適用于主下拉菜單。
在菜單編輯器中，單擊右上角的屏幕選項 ：
菜單編輯器中的屏幕選項選項卡
然后，選中CSS類框：
“屏幕選項”選項卡中的“CSS類”復選框
這將向菜單中的每個頁面添加一個CSS類字段：
菜單編輯器中的CSS類字段
一旦您向菜單項添加一個或多個CSS類，您在樣式表中包含的任何自定義代碼將僅適用于您指定類的菜單中的項目。
您現(xiàn)在可以轉(zhuǎn)到您的樣式表或定制器，并開始處理您的自定義樣式。
第 5 步：在黃金地段發(fā)布您的菜單
一旦您的WordPress下拉菜單結(jié)構(gòu)化以滿足您的需求，并且您已經(jīng)合并了您想要的任何自定義，您就可以將其發(fā)布到您的網(wǎng)站。
根據(jù)您的主題及其支持的菜單位置，此過程會略有不同。對于此示例，我們將使用“二〇二〇”主題。
在菜單編輯器中，向下滾動到“菜單設(shè)置” 部分：
編輯器中的菜單設(shè)置部分
如果您希望新頁面自動添加到您的菜單中，您可以選擇第一個復選框。如果您剛剛開始使用您的網(wǎng)站并且尚未添加所有關(guān)鍵頁面，這可能會很有用。但是，請注意不要意外向菜單中添加太多項目。
在此選項下方，您將看到一個復選框列表，指出您網(wǎng)站的不同區(qū)域，您可以在其中顯示菜單。
二〇二〇主題包括不同的菜單區(qū)域：桌面水平菜單、桌面擴展菜單、移動菜單、頁腳菜單、社交菜單。
在這種情況下，我們創(chuàng)建的菜單最適合 位于站點標題中的桌面水平菜單位置：
二〇二〇主題的桌面水平菜單
您還可以考慮導航到 儀表板菜單區(qū)域中的管理位置 選項卡。在這里，您可以看到您的主題支持的所有菜單位置，以及您分配給每個菜單的菜單：
管理位置選項卡
放置菜單時，查看它們在前端的外觀會很有幫助。
使用實時預覽管理選項
單擊“使用實時預覽管理” 按鈕，使用WordPress定制器查看菜單在您為其選擇的位置中的顯示方式：
定制器中WordPress菜單的實時預覽
然后，您可以直接從定制器發(fā)布您的一個或多個菜單。如果您需要在下拉菜單中添加或刪除項目，您只需返回菜單編輯器并進行必要的調(diào)整即可。
用于增強下拉菜單的WordPress插件
盡管您無需任何額外工具即可創(chuàng)建功能齊全的 WordPress 導航菜單，但有時擴展菜單的功能會很有用。如果您的網(wǎng)站就是這種情況，您可能需要查看一些流行的WordPress菜單插件。
Nested Pages是內(nèi)容豐富的博客創(chuàng)建下拉菜單的有效方式。雖然它主要用于組織文章和頁面，但此插件還會自動生成一個反映您內(nèi)容結(jié)構(gòu)的菜單：
WordPress插件-Nested Pages
雖然在菜單中加入大量項目不一定是可取的，但有時這是不可避免的。
如果您的網(wǎng)站就是這種情況，Max Mega Menu可以幫助您將現(xiàn)有的WordPress菜單組合成一個“超級菜單”：
WordPress插件-Max Mega Menu
隨著移動瀏覽的興起，確保您的菜單在移動設(shè)備上仍然可讀是關(guān)鍵。
WP Mobile Menu與任何響應式主題配對，以幫助您為移動站點的用戶創(chuàng)建導航系統(tǒng)：
WordPress插件-WP Mobile Menus
最后，正如我們已經(jīng)討論過的，在某些情況下，描述性菜單項是不夠的。在這些情況下，您可能需要考慮使用我們在上面第3步中描述的菜單圖像、圖標變得簡單。
您可以使用這些插件中的任何一個來增強您當前的導航系統(tǒng)并使您的 WordPress 下拉菜單更有效。請記住，有時，在導航方面，越簡單越好。只有在可以改善您的用戶體驗并避免使您的網(wǎng)站混亂的情況下才添加額外的功能。
對WordPress下拉菜單進行故障排除
如果您已按上述方式配置菜單，但下拉功能不起作用，則可能有多種原因。
雖然我們無法在此處涵蓋所有問題，但我們可以 幫助您縮小問題的原因，以便您找到合適的解決方案。
通常，出現(xiàn)故障的菜單是自定義菜單和主題之間代碼沖突的結(jié)果。如果您的菜單不起作用，您應該做的第一件事是切換到默認主題，例如二〇二〇。如果您的菜單再次開始運行，您就會知道問題與您的主題有關(guān)。然后，您可以聯(lián)系主題的開發(fā)人員以尋求解決方案。
其他一些可能的原因包括：
- 錯誤輸入的代碼： 仔細檢查您添加的任何自定義CSS是否正確，以及您是否使用了第4步中所述的CSS類。
- 插件不兼容： 嘗試禁用您已安裝的任何與菜單相關(guān)的插件，看看是否能解決問題。
- 過時的jQuery：升級到最新版本的jQuery并嘗試再次打開下拉菜單。
但是，正如我們前面提到的，錯誤菜單背后的潛在原因很多。如果上述解決方案似乎都不起作用，我們建議訪問WordPress支持論壇，或聘請WordPress開發(fā)人員為您修復。
小結(jié)
雖然這似乎是一件小事，但您的 WordPress 網(wǎng)站的導航可以成就或破壞其成功。使用下拉菜單可以節(jié)省用戶屏幕上的空間，同時還使他們能夠輕松瀏覽您的網(wǎng)站并提高轉(zhuǎn)化率。
網(wǎng)頁標題：如何創(chuàng)建WordPress導航下拉菜單
網(wǎng)頁網(wǎng)址：http://fisionsoft.com.cn/article/ccdhhoi.html
