如何在 WordPress 中創建自定義菜單結構
已發表: 2015-07-22WordPress 有一個自動的內置導航結構,可以為您創建菜單。 它包括頁面和類別。 它將它們放置在您的主菜單中,您無需執行任何操作,只需在類別中創建頁面或帖子。 如果您只有幾個頁面和類別,這很有效,但過了一段時間它可能會開始失控。 此外,僅僅因為它可以自動處理您的導航並不意味著您應該允許它。
WordPress 將自動為您處理菜單,無需您的任何輸入,但如果您真的想充分利用您的菜單結構,您可以創建自己的自定義菜單。 自定義菜單可讓您完全控制導航結構,並使您的網站看起來更乾淨、更專業。
菜單類型
有幾種不同類型的菜單。 您可以使用的菜單類型取決於主題的功能。 流行的菜單類型包括:
- 主菜單——這個出現在標題下方。 它應該包括您的主要導航和訪問者根據您擁有的網站類型期望的頁面:主頁、關於、聯繫人、博客、投資組合等。
- 二級菜單——這個出現在標題上方。 這應該包括您希望在方便的位置提供給讀者的鏈接和頁面,但不一定在您的主要導航結構中。 這可以是教程、購物車等項目。
- 側邊欄 - 您的自定義菜單可以使用自定義菜單小部件放置在側邊欄中。 您可以使用任意數量的小部件並在其中放置任何菜單。
- 頁腳——您可以為您的頁腳創建一個菜單。 此菜單中的信息通常少於您的主菜單。 根據您網站的需要,它通常包含主頁、關於、聯繫方式、博客等。如果您的網站包含招聘信息、附屬計劃和姊妹網站,它們也可以包含在此處。
- 社交鏈接菜單——這是一個特殊的菜單,可以在諸如二十五等主題中找到,將您的社交媒體鏈接放在您的側邊欄中。 如果主題識別社交網絡,它將提供適當的圖標。 如果不是,那麼它會將名稱顯示為文本(根據您標記鏈接的方式)。
主菜單和輔助菜單是 WordPress 主題中最受歡迎的。 它們中的內容實際上取決於您網站的重點。 您網站的主要焦點應出現在主菜單中。 它應該對您的訪問者有意義,並且是他們期望看到的。
例如,如果您有一家商店,那麼您的購物車應該在主菜單中。 如果你有一個投資組合網站,但你也賣一些東西,那麼你的投資組合應該在你的主菜單中,而購物車應該在二級菜單中。 只需考慮它在邏輯上適合的位置並相應地放置它。
創建您自己的自定義菜單
WordPress 讓您可以輕鬆地手動創建自己的自定義菜單。 您可以從後端創建、調整和應用菜單,也可以從前端選擇菜單以查看它們並在上線之前對其進行測試。
從後端創建菜單
在後端,轉到外觀並選擇菜單。 在前端轉到自定義並選擇導航。
在菜單屏幕上選擇創建新菜單,為菜單命名,然後單擊創建菜單按鈕。
現在您已準備好開始添加導航結構。 在左側,您有頁面、自定義鏈接和類別的框。 您可以將所有這些用作自定義菜單中的鏈接。 在中間你有一些選擇。 您可以允許將所有新頁面自動添加到菜單結構中,或者如果您想擁有更多控制權並自己選擇頁面和類別,請不要選中此項。
頁面
如果左側窗口中的頁面選項卡尚未打開,請選擇它。 要將頁面添加到菜單,請選擇所需的所有頁面並單擊添加到菜單。
如果您希望它們以不同的方式排列,只需將要移動的菜單項拖放到新位置即可。 您甚至可以通過將其拖放到您希望它成為子項的項目的右側,使其成為另一個菜單項的子項。
您可以選擇右側的箭頭打開項目並進行調整,例如更改名稱和位置。 您還可以在此處從菜單結構中刪除該項目。
自定義鏈接
要添加自定義鏈接,請在左側窗口中打開自定義鏈接,添加所需的 URL,然後選擇添加到菜單。 您可以創建任何類型的鏈接,並將它們作為菜單結構的一部分。 這也是您為“社交鏈接”菜單創建鏈接的方式。
然後,您可以將其拖放到菜單結構中所需的位置。
類別
您選擇和添加類別的方式與在左側窗口中選擇和添加頁面的方式相同。 它們的行為方式與菜單中的頁面和鏈接相同。
保存您的菜單
一旦你喜歡你的新菜單結構,保存它,然後你就可以使用它了。
管理位置
有兩種方法可以從後端使用您的菜單。
菜單設置
在您創建菜單的屏幕上,菜單設置下有一組複選框。 您可以選擇任何菜單,然後選擇要使用的位置。 您可以根據需要選擇任意數量。 不要忘記保存它。
管理位置

選擇管理位置選項卡。 在這裡,您可以在下拉框中選擇要使用的菜單。 您不必全部使用它們。 您已經選擇了將在點擊保存的地方使用哪些菜單,並且您剛剛更新了菜單結構。
小部件
WordPress 還有一個自定義菜單小部件,您可以將其拖放到側邊欄中。 從這裡您可以選擇您的菜單。
測試
這是我的測試菜單和側邊欄小部件。 接下來要做的是測試每個項目,以確保其運行順暢且直觀。 不要忘記這一步。 測試您的菜單以查看它是否按您的預期工作非常重要。 顯然,這些不是您應該在您的網站上使用的菜單標題。
使用前端實現所見即所得的視圖
要從前端修改菜單結構,請轉到外觀並選擇自定義。 到達前端后,選擇導航。 從這裡您可以選擇您的菜單。 此視圖的優點是您可以在保存更改之前立即查看更改。 這樣你就可以在提交之前決定你是否喜歡它。 不幸的是,這個系統不會讓你創建它們。
使用 Divi 等主題自定義外觀
一些主題,例如優雅主題的 Divi 2.4,為您提供工具,以便您可以從前端調整菜單的外觀和感覺並立即查看它們的影響。 這樣,您將在保存之前知道訪問者會看到什麼。
這是Divi的菜單調整。 您可以進行相同的調整來更改每個菜單項的外觀。
進一步定制——使用插件來修改你的菜單
有許多可用於 WordPress 的插件,可幫助您使用新特性、外觀和功能修改自定義菜單。 他們添加了大量的 CSS 調整,使它們具有響應性,甚至使它們更快。 以下是一些比較流行的插件。
自定義菜單嚮導小部件
這個免費插件添加了一個自定義菜單小部件,您可以使用簡碼在側邊欄或內容中使用該小部件。 它使您可以完全控制菜單參數,並允許您使用自定義菜單的特定部分。 它還添加了一些自定義類。
您可以顯示菜單的特定部分或整個菜單。 您還可以使輸出成為有條件的。 它將根據您指定的級別數顯示為平面或分層。 您還可以使用 HTML 修改輸出。
小部件的設置易於使用。 您從下拉框中選擇菜單並選擇過濾器、回退、輸出、容器、類、鏈接和替代(這是另一個級別的條件)。 它還為您提供了一個簡碼,因此您可以將菜單粘貼到您的內容中。
Nextend 手風琴菜單
該插件可讓您創建手風琴式菜單,完全控制菜單級別、顏色、動畫等,每個菜單都有自己的設置和皮膚。 您可以控製字體、背景、顏色、圖像等的級別和狀態。它通過使用緩存加速菜單系統,提供各種類型的動畫,無限級別的菜單,並提供 30 種設置。
我喜歡手風琴菜單的工作方式。 您可以在想要使用它們時展開它們,然後在您不想在屏幕上看到它們時隱藏它們以提供更清晰的佈局。 該插件易於使用和設置。 您可以像自定義內容類型一樣創建菜單。 然後,您可以將小部件拖到側邊欄中,並從小部件中選擇菜單。
還有一個專業版,增加了三個主題和支持。 價格從 29 美元起。
響應式菜單
這個免費插件有 70 個選項來調整菜單的外觀、感覺和行為。 您可以調整標題、CSS、動作、大小、動畫、腳本等等。 它適用於移動設備,並且具有從一側拉菜單並設置菜單位置的功能。 它甚至會縮小菜單的 CSS 和 JavaScript。 您還可以添加自定義 HTML 並導入/導出您的設置。
設置中有很多調整,但它們都很容易理解和調整。 還有高級設置,但您可以根據需要忽略它們。 它包括簡碼,如果您願意,您甚至可以將 PHP 代碼添加到您的主題中。
其他用於修改菜單的插件
這是我發現有趣的其他插件的列表。 它們添加或修改菜單的功能,並讓您以各種方式控制它們。
- WordPress 超級菜單
- CSS3 超級下拉菜單
- WP 響應式菜單
- 字體真棒 4 菜單
- 菜單中的簡碼
- 更快的外觀 - 菜單
- 食物和飲料菜單
- 簡單的零售菜單
- 淨化 WordPress 菜單
- 小部件菜單器
創建出色菜單結構的技巧
- 使用您的菜單來保持您的導航結構井井有條。
- 使用盡可能少的級別。 考慮初級和次級。
- 使用對讀者有意義的名稱,而無需他們破譯您的代碼。
- 使用 KISS 方法。 記住——越簡單越好。 菜單應該易於使用和直觀。
- 檢查您喜歡的網站的菜單結構,看看您喜歡什麼,不喜歡什麼。 然後讓你的更好。
最後的想法
添加您自己的自定義菜單結構很容易,這將使您的 WordPress 網站的外觀和感覺更加專業,並使您的結構看起來不隨機。 只需幾分鐘即可創建您自己的菜單集,您可以在上線前查看並試用它們。 您的訪問者會喜歡一種菜單結構,它可以讓他們更快速、更直觀地瀏覽您的網站。
到你了! 您是否創建了自己的自定義菜單結構? 你有什麼要補充的嗎? 您是否使用插件來修改菜單? 在下面的評論中告訴我們。