專注於架設企業網站,分享WordPress教學和Elementor教學

WordPress菜單教學:10個功能點

更新日期:2024-06-15
本系列教學
WordPress菜單教學:10個功能點
加入讀者學習群
我用的頁面編輯器
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
獨家優惠前3個月7折, 戳上方按鈕註冊即可自動帶入優惠碼LOYSEO
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com 郵箱,註冊易通過
遇到問題,聯繫我

本文講解: 什麼是WordPress菜單、如何添加菜單、如何調整菜單順序、如何將產品分類加入菜單、如何編輯菜單、如何添加自定義菜單、如何添加錨點菜單、如何製作超級菜單(megamenu)、 如何製作產品分類伸縮菜單、如何製作帶圖示的語言菜單。

什麼是WordPress菜單

菜單通常位於網站的頂部和底部,用於方便使用者快速打開關鍵頁面,譬如下方兩張圖片,依次是頂部菜單和底部菜單。

wordpress-navigation
wordpress-footer-navigation

而B2B企業網站的菜單的常見構成:

  1. Home(可省略)、Products、About us、Blog、Contact us
  2. 產品目錄名(若干個)、Company profice、Blog、Contact us

其他諸如Applications、Service、Catalogs / Brochure、Video、Knowledge Center、Technology等等就按實際情況添加。

如何添加菜單

2021年4月更新視頻教學

前提條件:網站中已經有頁面或文章等內容,否則添加菜單時無內容可選。

  1. 進入wordpress後台,滑鼠懸停於外觀菜單
  2. 點擊菜單
  3. 輸入菜單名稱,例如menu
  4. 點擊創建菜單
WordPress菜單教學:10個功能點(2021更新)
  1. 在添加菜單項》頁面欄目下,全選或逐個勾選頁面
  2. 點擊添加到菜單按鈕
  3. 將菜單的顯示位置設為primary,表示用做網站的主導航,一般顯示在網頁頂部區域
  4. 點擊保存菜單
WordPress菜單教學:10個功能點(2021更新)

保存后打開網站,我用的是hello elementor主題,下圖中紅框所示便是剛才添加的主菜單。

WordPress菜單教學:10個功能點(2021更新)

如何調整菜單的順序和層級

如下圖所示,左鍵點選並長按某個菜單后,上下移動即可調整菜單的排序; 左右移動菜單可以調整層級,向左移動是提升層級,向右移動是降低層級。 譬如,在下一章節中,可以將產品類別降低層級,以便作為products的子菜單項。

WordPress菜單教學:10個功能點(2021更新)

如何將woocommerce產品分類加入菜單

在woocommerce中創建完產品類別後,按下圖中的序號順序操作,可以將產品、產品類別加入到“添加菜單項”欄目中,否則默認情況下,你在菜單項欄目中是看不到它們的。

  1. 進入外觀》菜單
  2. 點擊頁面右上方的顯示選項按鈕
  3. 在展開的面板中勾選產品類別
  4. 在展開的面板中勾選產品
  5. 你將會在添加菜單項欄目中看到產品類別和產品供你選擇
WordPress菜單教學:10個功能點(2021更新)

然後,按照上文教過的移動菜單的辦法,將產品分類移動到Products下方作為子菜單。

WordPress菜單教學:10個功能點(2021更新)

保存菜單後去查看一下網站,將看到如下效果

WordPress菜單教學:10個功能點(2021更新)

如何刪除菜單

  1. 點擊需要刪除的菜單右側的? 三角按鈕
  2. 點擊移除/remove按鈕即可實現刪除菜單
how-to-remove-menuitem

如何編輯菜單項以及注意事項

2021年4月更新視頻教學

繼續參考上一張圖,點擊需要編輯的菜單右側的? 三角按鈕,即可進入菜單的修改介面。

需要注意的是:如果你的菜單不是自定義連結,而是直接選用的頁面或產品分類等,那麼,如果在此處修改了它的導航標籤(即菜單的名稱),會導致菜單名稱固化為你在此處修改的內容,而不會自動跟隨頁面或產品分類名稱的修改。

如何添加自定義連結菜單

使用自定義連結菜單,可以為網站添加第三方網站的連結,譬如社交媒體、你的其他網站,操作步驟如下:

  1. 在添加菜單項欄目中點擊「自定義連結」
  2. 輸入url和鏈接文本
  3. 點擊「添加到菜單」按鈕即可
adding-custom-links-to-wordpress-navigation-menus

如何添加頁面內的錨點菜單

示例:網站的公司介紹沒有單獨的頁面,若想將公司介紹菜單直接連結到首頁中的公司介紹欄目,我們可以通過錨點菜單的形式,將公司介紹菜單錨定到首頁的指定位置。

下文以本示例製作教學,此外,示例網頁是使用Elementor pro製作的,如果你用的是其他編輯器,也是同理去尋找css id等可以作為錨點的設置項。

  1. 請在elementor編輯頁面中,找到錨點需要放置的欄目(section),譬如公司介紹欄目,單擊該欄目以便展開左側的面板
  2. 選擇advanced標籤頁
  3. 選擇advanced欄目
  4. 填入css id,建議用欄目的英文名,單詞之間用-間隔,譬如about-us,然後update保存頁面
add-anchor-links-to-wordpress-navigation-menus

接下來進入菜單頁面,添加自定義連結菜單,其中URL部分由以下兩部分構成

  1. 錨點內容所在頁面的url
  2. # 加上錨點內容的CSS id,即上文中的about-us,組成#about-us
add-anchor-links-to-wordpress-navigation-menus-2

保存菜單后,我們訪問網站,點擊錨點菜單查看效果

add-anchor-links-to-wordpress-navigation-menus

如何製作WordPress超級菜單(mega menu)

接下來我們介紹:什麼是超級菜單、製作超級菜單的熱門免費外掛、製作超級菜單的步驟教學。

什麼是超級菜單(mega menu)

什麼是超級菜單呢? 相比普通菜單而言,超級菜單的展示形式更加豐富,比如菜單裡帶有圖片、視頻、多列子菜單等等,譬如下圖就是一個超級菜單,實現它需要藉助外掛。 如果你還不會創建菜單,請先查看如何在WordPress中製作菜單(7個功能點)

mega-menu

最受歡迎且免費的製作mega menu的外掛程式

最受歡迎且免費的mega menu外掛是Max Mega Menu,但它不適用於使用Elementor pro製作的header的菜單。

如果你使用的是Astra主題付費版,那麼就不需要額外裝外掛程式,Astra主題付費版提供了Mega Menu功能。

如果使用Elementor Pro製作header,那麼需要用的另一個外掛程式Elements kit Elementor addons,它是Elementor的擴展元件,免費版就能提供mega menu功能。 接下來我們用這個外掛程式來講解mega menu的製作

如何製作超級菜單(mega menu)

安裝並啟用Elements kit Elementor addons外掛,若不會安裝外掛,請查看這篇安裝外掛教學

進入菜單頁面,如下圖所示,

  1. 選中Enable this menu for Megamenu content,
  2. 在需要設計mega menu的菜單上懸停,將浮現mega menu按鈕,點擊該按鈕
mega-menu-tutorial
  1. 點擊mega menu按鈕後,將顯示下圖的彈出框,請將megamenu enabled開啟
  2. 然後點擊edit megamenu content,系統會彈出elementor編輯器,請在編輯器中製作megamenu的內容,就像用elementor製作頁面的方法一樣
mega-menu-tutorial-2

如下圖所示,我隨意製作了一個mega menu實例,記得點擊update保存,然後點擊左上角的x關閉介面回到菜單頁面。

mega-menu-tutorial-3

最後依次點擊彈出層上的save按鈕,點擊保存菜單。

mega-menu-tutorial-4

接下來請將Elementor的header範本中的導航元素(nav menu)換成Elements kit Elementor addons提供的導航元素,即下圖中帶有EKIT標記的Nav menu元素,如果你還沒製作過Elementor的Header範本,那麼請先製作一個Header, 然後將下圖中的帶有EKIT的nav menu拖入到頁面中。

mega-menu-tutorial-5

最後訪問網站看一下效果,如下圖所示,將鼠標放到products上,下方即刻浮現剛才製作的mega menu。

mega-menu-tutorial-6

需要注意的是,Megamenu不適合手機端,而Elements kit Elementor addons外掛程式必須付費升級到PRO才能控制手機端不顯示megamenu,這並不意味著我們要付費。

我們可以通過Elementor編輯header,新增一個setion放移動端的菜單,按下圖所示,用可見性開關控制菜單在不同設備上的可見性。 譬如將有megamenu的菜單僅僅在桌面端可見; 而沒有megamenu的菜單僅僅在平板和手機端可見,完美省錢?。

mega-menu-tutorial-7

如何製作產品分類伸縮菜單

在使用WordPress進行架設企業網站時,我們常用WooCommerce進行產品的管理,而在產品列表頁中,我們會在側邊欄中使用小工具(widget)展示產品分類(product categories)和產品子分類,以方便使用者快速篩選目標產品,目前在Astra主題當中, 不提供產品分類的伸縮/摺疊菜單表功能(如下圖所示效果),我們可以使用外掛Iks Menu – WordPress Category Accordion Menu來實現它。 下文我將會逐步介紹如何通過Iks menu製作產品分類伸縮式篩選功能。

備註:我已經採購了iks menu付費版的終生授權,如有需要,可以聯繫我購買

WordPress菜單教學:10個功能點(2021更新)

安裝外掛程式iks menu

你可以直接在WordPress網站後台安裝iks menu,並啟動它。 相關教學:如何安裝Wordpress外掛(3種方法)

WordPress菜單教學:10個功能點(2021更新)

創建產品分類篩選菜單

接下來在後台找到iks menu菜單並將進入,點擊create按鈕創建。

WordPress菜單教學:10個功能點(2021更新)

填寫標題並點擊下一步

WordPress菜單教學:10個功能點(2021更新)

選擇taxonomy並點擊下一步

WordPress菜單教學:10個功能點(2021更新)

選擇product categories並點擊Finish,你可以同理製作文章分類、文章標籤、產品標籤的可摺疊菜單

WordPress菜單教學:10個功能點(2021更新)

此時產品分類的伸縮菜單已經創建完成,我們去編輯一下他

WordPress菜單教學:10個功能點(2021更新)

在編輯頁面中,你講看到如下圖所示的data標籤頁,我們可以配置分類中展示的內容、展示的順序,譬如啟用show posts,那在點擊產品分類后,會展示分類下的產品。

WordPress菜單教學:10個功能點(2021更新)

繼續data的配置,你也可以hide empty terms,這樣沒有產品的分類就不會展示,反之同理;

此外很重要的是分類的排序,外掛程式提供了多種排序方式,譬如按照分類的名字排序,也可以按照產品數量排序(這是我常用的排序方式),然後我會配置為降序排列(DESC),這樣以來,產品數量多的分類就會展示在上方

WordPress菜單教學:10個功能點(2021更新)

下圖是我的常用配置,供參考,其他未提及的配置項都是保持預設配置的。

WordPress菜單教學:10個功能點(2021更新)

除了data配置,你還可以依次點擊menu、display、manage、skins查看配置功能,如果搞不懂這些,就保持預設,我通常會在display中取配置顏色、間距資訊。

WordPress菜單教學:10個功能點(2021更新)

最後,iks menu還提供了幾個免費的皮膚供你選擇,選完皮膚后,點擊右上角的保存按鈕,然後會出現publish按鈕,點擊它。

WordPress菜單教學:10個功能點(2021更新)

然後你將能在彈出層面中得到短代碼(shortcode),複製它,使用短代碼可以將產品分類篩選放到任一頁面上,下文我會以Elementor為示例講解。

WordPress菜單教學:10個功能點(2021更新)

當然你也可以把它放到側邊欄的小工具中,請進入widget標籤頁,點擊go to widgets

WordPress菜單教學:10個功能點(2021更新)

將產品分類菜單加入到側邊欄中

接下來進入wordpress的appearance》widget頁面,找到iks menu后,點擊右側的三角,在展開的選項中,找到woocommerce sidebar或product sidebar。

WordPress菜單教學:10個功能點(2021更新)

如果你想在產品列表頁展示分類篩選,就選擇woocommerce sidebar,如果你想在產品詳情頁展示分類篩選,就選擇product sidebar,最後點擊add widget按鈕。

需要注意的是,你必須要將產品列表頁或產品詳情頁配置了側邊欄,相關教學: Astra主題教學:免費架設企業網站–給產品頁面添加側邊欄

當你把iks menu加入到woocommerce sidebar或product sidebar中后,將能看到下圖所示效果,如果你創建了多個iks menu,記得在id中進行選擇,並點擊save按鈕保存

WordPress菜單教學:10個功能點(2021更新)

然後我們進入產品列表頁查看一下,便能看到產品分類篩選了,如下圖所示,圖上方是astra自帶的產品分類篩選功能(不可伸縮),圖下方是iks menu製作的可以伸縮的。 注意:免費版的iks menu不支持在分類後方統計產品數量。

WordPress菜單教學:10個功能點(2021更新)

把產品分類菜單放入到頁面中

以我最愛的Elementor頁面編輯器為例,請使用Elementor編輯目標頁面,然後在左側面板中找到shortcode元素,拖拽到右側畫布中你想放的位置

WordPress菜單教學:10個功能點(2021更新)

然後將上文中複製的shortcode黏貼到輸入框中,如下圖US歐式,你將能看到產品分類菜單已經放入到頁面中了。

WordPress菜單教學:10個功能點(2021更新)

本教學適合以下情況:如果你有多個網站,且網站語言不同,且不是用多語言外掛實現的,那麼此時你可能需要在網站菜單裡添加多語言下拉菜單選項,以便連結到不同的語言網站,譬如下圖這樣的。

WordPress菜單教學:10個功能點(2021更新)

圖中,我是用的主題是Astra付費版,Astra本身的頁頭編輯器提供了語言選項,但是只能橫排或者豎排,無法下拉,而且不同國家的旗幟大小不一致的情況,而本章教學是針對下拉多語言菜單的。

具體操作方法如下

  1. 新增自訂菜單(custom link)
  2. 如下圖所示,依次填入指定語言網站網址與語言圖示,其中語言圖示使用代碼添加,代碼格式如下,代碼中的 /wp-content/uploads/2021/12/chinese.svg 為語言圖示的網址(你需要獲取自己的圖片位址), width=“20” height=“15” 表示圖標的寬度和高度。
<img src="/wp-content/uploads/2021/12/chinese.svg" width="20" height="15">
WordPress菜單教學:10個功能點(2021更新)

你可以在這個網址里下載國家圖示:Country Flags in SVG flag-icons,圖示為svg檔,如果你在WordPress媒體庫里因安全因素無法上傳svg檔時,那麼請新建一個頁面,然後使用Elementor編輯,在編輯器中拖入icon元素,並在icon元素里選擇上傳這個svg即可, 上傳完畢后,可以在媒體庫里編輯這張圖片、獲取圖片的網址。

WordPress菜單教學:10個功能點(2021更新)
在媒體庫里找到圖片后,點擊Edit進入編輯
WordPress菜單教學:10個功能點(2021更新)

在編輯圖片介面的右側,找到File URL,並copy它。

將copy的網址去掉功能變數名稱部分,放入上文的圖示代碼中即可。

点赞

0 / 5 0

Your page rank:

Picture of 外貿建站技術姐Bonnie
外貿建站技術姐Bonnie

Bonnie是LOYSEO的創始人,在建站領域有著超過14年的經驗,熱愛能將想法變為現實的WordPress,更是Elementor的忠實使用者~

LOYSEO
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
獨家優惠前3個月7折, 戳上方按鈕註冊即可自動帶入優惠碼LOYSEO
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com 郵箱,註冊易通過
遇到問題,聯繫我