免費參與·100+跨境活動 
免費下載·4000+跨境資料 
免費學習·2000+直播課程 
免費加入·15萬+賣家交流群 
2020-10-29 09:56
在wordpress中添加導航菜單是初級的操作，但對于新手而言依舊會遇到一些問題，接下來我們就逐一講解。
導航菜單通常位于網站的頂部和底部，用于方便用戶快速打開關鍵頁面，譬如下方兩張圖片，依次是頂部導航菜單和底部導航菜單。
而B2B外貿網站的導航菜單的常見構成：
Home（可省略）、Products、About us、Blog、Contact us
產品目錄名（若干個）、Company profice、Blog、Contact us
其他諸如Applications、Service、Catalogs / Brochure、Video、Knowledge Center、Technology等等就按實際情況添加。
前提條件：網站中已經有頁面或文章等內容，否則添加菜單時無內容可選。
保存后打開網站，我用的是hello elementor主題，下圖中紅框所示便是剛才添加的主導航菜單。
如下圖所示，左鍵點選并長按某個菜單后，上下移動即可調整菜單的排序；左右移動菜單可以調整層級，向左移動是提升層級，向右移動是降低層級。譬如，在下一章節中，可以將產品類別降低層級，以便作為products的子菜單項。
在woocommerce中創建完產品類別后，按下圖中的序號順序操作，可以將產品、產品類別加入到“添加菜單項”欄目中，否則默認情況下，你在菜單項欄目中是看不到它們的。
然后，按照上文教過的移動菜單的辦法，將產品分類移動到Products下方作為子菜單。
保存菜單后去查看一下網站，將看到如下效果
繼續參考上一張圖，點擊需要編輯的菜單右側的?三角按鈕，即可進入菜單的修改界面。
需要注意的是：如果你的菜單不是自定義鏈接，而是直接選用的頁面或產品分類等，那么，如果在此處修改了它的導航標簽（即菜單的名稱），會導致菜單名稱固化為你在此處修改的內容，而不會自動跟隨頁面或產品分類名稱的修改。
使用自定義鏈接菜單，可以為網站添加第三方網站的鏈接，譬如社交媒體、你的其他網站，操作步驟如下：
示例：網站的公司介紹沒有單獨的頁面，若想將公司介紹菜單直接鏈接到首頁中的公司介紹欄目，我們可以通過錨點菜單的形式，將公司介紹菜單錨定到首頁的指定位置。
下文以本示例制作教程，此外，示例網頁是使用Elementor pro制作的，如果你用的是其他編輯器，也是同理去尋找css id等可以作為錨點的設置項。
接下來進入菜單頁面，添加自定義鏈接，其中URL部分由以下兩部分構成
錨點內容所在頁面的url
# 加上錨點內容的CSS id，即上文中的about-us，組成#about-us
保存菜單后，我們訪問網站，點擊錨點菜單查看效果
（來源：B2B獨立站教程Bonnie）
以上內容屬作者個人觀點，不代表雨果網立場！本文經原作者授權轉載，轉載需經原作者授權同意。
（來源：B2B獨立站教程Bonnie）
