網站導航是幫助您的使用者到達他們想去的地方的關鍵。精心設計的選單可以大大改善使用者體驗 (UX)，甚至降低跳出率。然而，一個製作不良的人可以做相反的事情。
幸運的是，WordPress使您能夠建立自定義選單以滿足您網站的需求。您甚至可以使用本機功能新增一個緊湊的WordPress下拉選單，以節省空間，同時仍為您的訪問者提供清晰的方向。
在這篇文章中，我們將討論為什麼網站導航很重要以及下拉選單如何特別有用。然後我們將引導您瞭解如何在WordPress中建立它們，並分享一些可以提供幫助的外掛。
WordPress導航和下拉選單簡介
儘管它們可能並不張揚，但導航選單是任何網站的重要元素。它們幫助使用者快速找到最相關的頁面以實現他們的目標，同時也讓初次訪問者瞭解您必須提供的內容：
閃電博網站主導航選單
擁有精心設計的導航選單是提高轉化率和降低跳出率的關鍵。當使用者可以輕鬆找到您的產品、電子郵件登錄檔單或其他轉換內容所在的頁面時，您就可以更輕鬆地讓他們進行購買或註冊。
另外，如果使用者可以自信地在您的網站上找到他們的路，他們就不必因為他們最終出現在錯誤的地方而從您的網頁中彈跳出來。幫助他們在第一時間做對既可以改善使用者體驗，又可以最大程度地減少挫折感。
在WordPress中，選單是一個固有的功能。使用該平臺建立的任何站點都可以顯示其中一個或多個。但是，WordPress主題在設計和放置選單或選單時也發揮著重要作用。
出於這個原因，您的WordPress選單可以採用多種不同的形式。最熟悉的是標準的標題選單：
典型標題選單的示例
您通常還可以在頁面底部包含一個額外的頁尾選單。它可能顯示與您的主選單相同的內容，或提供略有不同的選項：
頁尾選單示例
另一種風格是選單疊加，使用者可以隨意開啟和關閉：
疊加選單示例
或者，您可以考慮使用側邊欄選單：
側邊欄選單示例
或者您可以合併一個下拉選單，有時也稱為“巢狀”選單：
下拉選單示例
這種型別的導航非常適合許多型別的網站。它不會像覆蓋選單那樣掩蓋您的內容，但不像大標題欄或側邊欄選單那樣具有侵入性。
通過在需要時隱藏某些內容，您將節省螢幕空間，同時仍為使用者提供一種輕鬆的方式來繞過它。
如何在WordPress中建立下拉選單
如果您認為下拉選單可能非常適合您的 WordPress 網站，那麼設定一個非常簡單。通過使用WordPress中可用的本機選單功能，您只需五個步驟即可建立一個適合您需求的自定義導航系統。
第 1 步：建立您的選單項
建立選單的第一步是決定在其中包含哪些內容。首先導航到 WordPress 儀表板中的外觀 > 選單：
訪問WordPress儀表盤中的選單編輯器
根據您的主題，您在選單編輯器中看到的內容會略有不同。
但是，現在需要注意的是“編輯選單”選項卡中的第一個選項。您應該會看到一個選項，您可以在其中選擇要編輯的現有選單之一，以及建立新選單的選項：
在WordPress選單編輯器頂部建立新選單連結
對於此示例，我們將選擇後一個選項並建立一個新選單。這包括新增標題，然後單擊“建立選單” 按鈕：
命名和建立新選單
現在您已準備好開始向WordPress選單新增專案。在大多數情況下，最好使您的選單儘可能簡單，同時仍為使用者提供足夠的資訊以到達他們想去的地方。
包含太多頁面會使訪問者不堪重負，並使導航變得更加困難而不是更容易。
有幾種不同的方法可以新增選單項。前兩個是Pages和Posts，它們的工作原理非常相似。
將頁面新增到選單
在選單編輯器的側邊欄中，只需選擇要包含的每個頁面或帖子的覈取方塊，然後單擊“新增到選單”按鈕：
您的下一個選擇是合併自定義連結。這涉及為您希望引導使用者訪問的頁面提供 URL，然後為其建立一個簡短但描述性的標籤。之後，您可以 再次單擊“新增到選單”：
向選單新增自定義連結
最後，您還可以將頁面和文章類別新增 到導航選單中。這會將使用者帶到存檔頁面，他們可以在其中檢視特定主題的所有內容。
部落格和其他內容豐富的網站可能會發現此功能特別有用：
將分類新增到選單
與Pages和 Posts 選項一樣，只需選中您希望包含的分類的覈取方塊 ， 然後選擇新增至選單 。
第 2 步：組織您的WordPress選單
新增 完所有選單項後，您應該會看到它們列在編輯器選單結構下的各個圖塊中：
選單編輯器的選單結構部分
最初，選單項將按照您新增它們的順序出現。但是，您可以通過將它們拖放到位來輕鬆修改它們的組織。這將使您能夠建立一個沒有下拉功能的簡單選單。
有幾種方法可以向WordPress選單新增下拉選單。
最簡單的是繼續拖放，但開始在其他選單項下巢狀某些選單項：
在部落格頁面下巢狀分類
例如，在上圖中，我們將新增到選單中的三個文章類別移動到部落格下，使它們成為“子專案”。在前端，這將建立一個如下所示的下拉選單：
WordPress下拉選單示例
如果您想新增包含您網站上所有類別的下拉選單，您可以通過向選單新增自定義連結來實現。使用“#”作為URL和“類別”或類似的標籤：
為選單建立類別標籤
然後，您可以將所有類別新增到選單中，並將它們巢狀在此標籤下。每個類別都可以點選，但標籤不會：
類別下拉選單
使用類似的技術，您還可以在單個下拉選單中隱藏所有選單項。
新增另一個自定義連結，使用“#”作為 URL，使用“Menu”作為標籤。然後，將所有其他選單項巢狀在該選單項下：
將所有導航連結巢狀在一個選單標籤下
前端的結果將是一個下拉選單，其中包含您網站的關鍵頁面。
正如您在下面的類別項中所見，巢狀在子項下的任何內容都將顯示在子選單中： 
WordPress下拉導航選單
通過以這種方式使用拖放選單編輯器，您可以建立任何樣式和組合的 WordPress 下拉選單。但是請記住，太多的選單項可能會讓使用者感到困惑。
最好限制您合併的子選單的數量，以避免導航過度混亂。
第 3 步：將影象合併到您的WordPress選單中
如果在第2步結束時，您的下拉選單看起來與您想象的完全一樣，您可以跳到第5步進行釋出。但是，如果您想通過自定義來增強選單，您可能需要採取其他步驟。
要考慮的一種策略是將視覺元素融入您的選單中，為訪問者提供進一步的指導。雖然描述性標籤很重要，但有時影象或圖示可以幫助使用者更快地確定特定導航連結的位置。
可以使用自定義CSS新增影象，我們將在稍後討論。但是，我們建議您選擇一個外掛，例如Menu Image, Icons Made Easy：
帶有影象的WordPress下拉選單
這樣，您不必擔心為了給下拉選單新增視覺趣味而費心處理任何程式碼。
只需安裝外掛，然後返回外觀>選單：
選單編輯器中的選單影象部分
您會看到，您已包含在選單中的每個頁面現在都有影象選項。您可以選擇每個頁面的照片、大小和位置。完成後請記住儲存更改。
第 4 步：將自定義CSS新增到您的下拉選單
雖然不建議初學者使用，但中級和高階使用者可能希望在他們的WordPress下拉選單中加入自己的樣式。但是，在直接進入CSS之前，您需要向選單中新增一個類。
如果您跳過此步驟，您的自定義CSS可能會導致您網站上的任何其他選單出現問題。例如，您可能不經意間將樣式應用到您的頁尾選單中，而這些樣式僅適用於主下拉選單。
在選單編輯器中，單擊右上角的螢幕選項 ：
選單編輯器中的螢幕選項選項卡
然後，選中CSS類框：
“螢幕選項”選項卡中的“CSS類”覈取方塊
這將向選單中的每個頁面新增一個CSS類欄位：
選單編輯器中的CSS類欄位
一旦您向選單項新增一個或多個CSS類，您在樣式表中包含的任何自定義程式碼將僅適用於您指定類的選單中的專案。
您現在可以轉到您的樣式表或定製器，並開始處理您的自定義樣式。
第 5 步：在黃金地段釋出您的選單
一旦您的WordPress下拉選單結構化以滿足您的需求，並且您已經合併了您想要的任何自定義，您就可以將其釋出到您的網站。
根據您的主題及其支援的選單位置，此過程會略有不同。對於此示例，我們將使用“二〇二〇”主題。
在選單編輯器中，向下滾動到“選單設定” 部分：
編輯器中的選單設定部分
如果您希望新頁面自動新增到您的選單中，您可以選擇第一個覈取方塊。如果您剛剛開始使用您的網站並且尚未新增所有關鍵頁面，這可能會很有用。但是，請注意不要意外向選單中新增太多專案。
在此選項下方，您將看到一個覈取方塊列表，指出您網站的不同區域，您可以在其中顯示選單。
二〇二〇主題包括不同的選單區域：桌面水平選單、桌面擴充套件選單、移動選單、頁尾選單、社交選單。
在這種情況下，我們建立的選單最適合 位於站點標題中的桌面水平選單位置：
二〇二〇主題的桌面水平選單
您還可以考慮導航到 儀表板選單區域中的管理位置 選項卡。在這裡，您可以看到您的主題支援的所有選單位置，以及您分配給每個選單的選單：
管理位置選項卡
放置選單時，檢視它們在前端的外觀會很有幫助。
使用實時預覽管理選項
單擊“使用實時預覽管理” 按鈕，使用WordPress定製器檢視選單在您為其選擇的位置中的顯示方式：
定製器中WordPress選單的實時預覽
然後，您可以直接從定製器釋出您的一個或多個選單。如果您需要在下拉選單中新增或刪除專案，您只需返回選單編輯器並進行必要的調整即可。
用於增強下拉選單的WordPress外掛
儘管您無需任何額外工具即可建立功能齊全的 WordPress 導航選單，但有時擴充套件選單的功能會很有用。如果您的網站就是這種情況，您可能需要檢視一些流行的WordPress選單外掛。
Nested Pages是內容豐富的部落格建立下拉選單的有效方式。雖然它主要用於組織文章和頁面，但此外掛還會自動生成一個反映您內容結構的選單：
WordPress外掛-Nested Pages
雖然在選單中加入大量專案不一定是可取的，但有時這是不可避免的。
如果您的網站就是這種情況，Max Mega Menu可以幫助您將現有的WordPress選單組合成一個“超級選單”：
WordPress外掛-Max Mega Menu
隨著移動瀏覽的興起，確保您的選單在移動裝置上仍然可讀是關鍵。
WP Mobile Menu與任何響應式主題配對，以幫助您為移動站點的使用者建立導航系統：
WordPress外掛-WP Mobile Menus
最後，正如我們已經討論過的，在某些情況下，描述性選單項是不夠的。在這些情況下，您可能需要考慮使用我們在上面第3步中描述的選單影象、圖示變得簡單。
您可以使用這些外掛中的任何一個來增強您當前的導航系統並使您的 WordPress 下拉選單更有效。請記住，有時，在導航方面，越簡單越好。只有在可以改善您的使用者體驗並避免使您的網站混亂的情況下才新增額外的功能。
您的導航選單是訪問者將首先看到的一些網站元素。除了影響整個網站的導航系統外，WordPress 選單還可以決定使用者體驗的成敗。您需要一個選單欄來幫助訪問者快速找到他們需要的資訊。
因此，您的主選單必須易於使用且具有視覺吸引力，這一點很重要。檢視以下有關優化下拉選單使用以獲得更好使用者體驗的提示。
改善WordPress下拉選單的技巧
使用視覺效果
使下拉選單更具互動性的最佳方法之一是使用外掛將影象圖示新增到其專案中。
例如，Menu Image外掛提供了大量的FontAwesome和DashIcons圖示供您選擇。您可以將所需的元素新增到不同位置的下拉選單中，或者將它們作為滑鼠懸停時觸發的動畫包含在內。
避免使用不必要的圖示過度擁擠空間，因為這會損害選單的可讀性並分散使用者瀏覽您的 WordPress 網站的注意力。
新增自定義CSS
如上所述，您可以將CSS類新增到新選單中。考慮新增自定義CSS以根據您的偏好設定選單樣式以進行高階自定義。
從您的WordPress儀表板盤到外觀->自定義，然後使用附加CSS功能新增您自己的程式碼。在此示例中，我們將頂部選單的字型顏色更改為藍色。
使用瀏覽器中的檢查工具來定位主題的CSS #ID選擇器——您需要它來選擇特定元素進行自定義。
這是我們用來改變字型顏色的程式碼：
#top-menu li.menu-item a {
color:#0051D7;
}
隨意嘗試不同的CSS樣式或使用預製程式碼來簡化設計過程。
啟用多級下拉選單
將子項放在父項或頂級頁面下將自動建立子父關係，啟用多級下拉功能。
一個父選單項可以有多個子項。但是，我們建議每個父項不超過七個子項，以免影響WordPress網站導航體驗。
建立一個超級下拉選單
如果您想在單個下拉選單中顯示大量選項，最好建立一個大型選單。與標準下拉選單不同，大型選單通常包含更多連結和子選單。
由於這種型別的選單顯示了您網站的整個結構，因此訪問者可以從主選單訪問網站的最深處。大型選單非常適合大型網站，因為它們縮短了使用者旅程。
有很多WordPress外掛可以幫助您建立自定義的大型選單。我們使用Max Mega Menu外掛設計了上面的超級選單設計示例。其他值得注意的大型選單外掛包括WP Mega Menu和Hero Mega Menu。
啟用實時預覽
如果您在更改選單位置時需要視覺參考，請選擇頁面頂部的“使用實時預覽管理”按鈕。實時預覽模式在建立複雜的多級下拉選單時特別有用。
在此模式下，使用WordPress定製器所做的所有更改都將實時顯示。您還可以通過實時預覽模式釋出下拉選單。
對WordPress下拉選單進行故障排除
如果您已按上述方式配置選單，但下拉功能不起作用，則可能有多種原因。
雖然我們無法在此處涵蓋所有問題，但我們可以 幫助您縮小問題的原因，以便您找到合適的解決方案。
通常，出現故障的選單是自定義選單和主題之間程式碼衝突的結果。如果您的選單不起作用，您應該做的第一件事是切換到預設主題，例如二〇二〇。如果您的選單再次開始執行，您就會知道問題與您的主題有關。然後，您可以聯絡主題的開發人員以尋求解決方案。
其他一些可能的原因包括：
- 錯誤輸入的程式碼： 仔細檢查您新增的任何自定義CSS是否正確，以及您是否使用了第4步中所述的CSS類。
- 外掛不相容： 嘗試禁用您已安裝的任何與選單相關的外掛，看看是否能解決問題。
- 過時的jQuery：升級到最新版本的jQuery並嘗試再次開啟下拉選單。
但是，正如我們前面提到的，錯誤選單背後的潛在原因很多。如果上述解決方案似乎都不起作用，我們建議訪問WordPress支援論壇，或聘請WordPress開發人員為您修復。
小結
雖然這似乎是一件小事，但您的 WordPress 網站的導航可以成就或破壞其成功。使用下拉選單可以節省使用者螢幕上的空間，同時還使他們能夠輕鬆瀏覽您的網站並提高轉化率。
評論留言