在wordpress中添加導航菜單是初級的操作,但對于新手而言依舊會遇到一些問題,接下來我們就逐一講解。
什么是導航菜單
導航菜單通常位于網站的頂部和底部,用于方便用戶快速打開關鍵頁面,譬如下方兩張圖片,依次是頂部導航菜單和底部導航菜單。
而B2B外貿網站的導航菜單的常見構成:
Home(可省略)、Products、About us、Blog、Contact us
產品目錄名(若干個)、Company profice、Blog、Contact us
其他諸如Applications、Service、Catalogs / Brochure、Video、Knowledge Center、Technology等等就按實際情況添加。
如何添加導航菜單
前提條件:網站中已經有頁面或文章等內容,否則添加菜單時無內容可選。
- 進入wordpress后臺,鼠標懸停于外觀菜單
- 點擊菜單
- 輸入菜單名稱,例如menu
- 點擊創建菜單
- 在添加菜單項》頁面欄目下,全選或逐個勾選頁面
- 點擊添加到菜單按鈕
- 將菜單的顯示位置設為primary,表示用做網站的主導航,一般顯示在網頁頂部區域
- 點擊保存菜單
保存后打開網站,我用的是hello elementor主題,下圖中紅框所示便是剛才添加的主導航菜單。
如何調整導航菜單的順序和層級
如下圖所示,左鍵點選并長按某個菜單后,上下移動即可調整菜單的排序;左右移動菜單可以調整層級,向左移動是提升層級,向右移動是降低層級。譬如,在下一章節中,可以將產品類別降低層級,以便作為products的子菜單項。
如何將Woocommerce產品分類加入導航菜單
在woocommerce中創建完產品類別后,按下圖中的序號順序操作,可以將產品、產品類別加入到“添加菜單項”欄目中,否則默認情況下,你在菜單項欄目中是看不到它們的。
- 進入外觀》菜單
- 點擊頁面右上方的顯示選項按鈕
- 在展開的面板中勾選產品類別
- 在展開的面板中勾選產品
- 你將會在添加菜單項欄目中看到產品類別和產品供你選擇
然后,按照上文教過的移動菜單的辦法,將產品分類移動到Products下方作為子菜單。
保存菜單后去查看一下網站,將看到如下效果
如何刪除菜單
- 點擊需要刪除的菜單右側的三角按鈕
- 點擊移除/remove按鈕即可實現刪除菜單
如何編輯菜單項以及注意事項
繼續參考上一張圖,點擊需要編輯的菜單右側的?三角按鈕,即可進入菜單的修改界面。
需要注意的是:如果你的菜單不是自定義鏈接,而是直接選用的頁面或產品分類等,那么,如果在此處修改了它的導航標簽(即菜單的名稱),會導致菜單名稱固化為你在此處修改的內容,而不會自動跟隨頁面或產品分類名稱的修改。
如何添加自定義鏈接菜單
使用自定義鏈接菜單,可以為網站添加第三方網站的鏈接,譬如社交媒體、你的其他網站,操作步驟如下:
- 在添加菜單項欄目中點擊“自定義鏈接”
- 輸入url和鏈接文本
- 點擊“添加到菜單”按鈕即可
如何添加頁面內的錨點菜單
示例:網站的公司介紹沒有單獨的頁面,若想將公司介紹菜單直接鏈接到首頁中的公司介紹欄目,我們可以通過錨點菜單的形式,將公司介紹菜單錨定到首頁的指定位置。
下文以本示例制作教程,此外,示例網頁是使用Elementor pro制作的,如果你用的是其他編輯器,也是同理去尋找css id等可以作為錨點的設置項。
- 請在elementor編輯頁面中,找到錨點需要放置的欄目(section),譬如公司介紹欄目,單擊該欄目以便展開左側的面板
- 選擇advanced標簽頁
- 選擇advanced欄目
- 填入css id,建議用欄目的英文名,單詞之間用-間隔,譬如about-us,然后update保存頁面
接下來進入菜單頁面,添加自定義鏈接,其中URL部分由以下兩部分構成
錨點內容所在頁面的url
# 加上錨點內容的CSS id,即上文中的about-us,組成#about-us
保存菜單后,我們訪問網站,點擊錨點菜單查看效果
(來源:B2B獨立站教程Bonnie)
以上內容屬作者個人觀點,不代表立場!本文經原作者授權轉載,轉載需經原作者授權同意。
來源:喜運達

加入賣家交流群
快速對接各種平臺優質資源

標簽:718track國際物流郵差小馬海外倉越南搬廠物流科倫坡海運拼箱海運貨運柬埔寨中國貨運到泰國物流關于國際貨代往泰國快遞越南旅游專線越南到中國海運費多少錢一噸