如何在WordPress中制作導(dǎo)航菜單（7個(gè)功能點(diǎn)）

在wordpress中添加導(dǎo)航菜單是初級的操作，但對于新手而言依舊會遇到一些問題，接下來我們就逐一講解。

什么是導(dǎo)航菜單

導(dǎo)航菜單通常位于網(wǎng)站的頂部和底部，用于方便用戶快速打開關(guān)鍵頁面，譬如下方兩張圖片，依次是頂部導(dǎo)航菜單和底部導(dǎo)航菜單。

而B2B外貿(mào)網(wǎng)站的導(dǎo)航菜單的常見構(gòu)成：

Home（可省略）、Products、About us、Blog、Contact us

產(chǎn)品目錄名（若干個(gè)）、Company profice、Blog、Contact us

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

如何添加導(dǎo)航菜單

前提條件：網(wǎng)站中已經(jīng)有頁面或文章等內(nèi)容，否則添加菜單時(shí)無內(nèi)容可選。

1. 進(jìn)入wordpress后臺，鼠標(biāo)懸停于外觀菜單
2. 點(diǎn)擊菜單
3. 輸入菜單名稱，例如menu
4. 點(diǎn)擊創(chuàng)建菜單

1. 在添加菜單項(xiàng)》頁面欄目下，全選或逐個(gè)勾選頁面
2. 點(diǎn)擊添加到菜單按鈕
3. 將菜單的顯示位置設(shè)為primary，表示用做網(wǎng)站的主導(dǎo)航，一般顯示在網(wǎng)頁頂部區(qū)域
4. 點(diǎn)擊保存菜單

保存后打開網(wǎng)站，我用的是hello elementor主題，下圖中紅框所示便是剛才添加的主導(dǎo)航菜單。

如何調(diào)整導(dǎo)航菜單的順序和層級

如下圖所示，左鍵點(diǎn)選并長按某個(gè)菜單后，上下移動即可調(diào)整菜單的排序；左右移動菜單可以調(diào)整層級，向左移動是提升層級，向右移動是降低層級。譬如，在下一章節(jié)中，可以將產(chǎn)品類別降低層級，以便作為products的子菜單項(xiàng)。

如何將Woocommerce產(chǎn)品分類加入導(dǎo)航菜單

在woocommerce中創(chuàng)建完產(chǎn)品類別后，按下圖中的序號順序操作，可以將產(chǎn)品、產(chǎn)品類別加入到“添加菜單項(xiàng)”欄目中，否則默認(rèn)情況下，你在菜單項(xiàng)欄目中是看不到它們的。

1. 進(jìn)入外觀》菜單
2. 點(diǎn)擊頁面右上方的顯示選項(xiàng)按鈕
3. 在展開的面板中勾選產(chǎn)品類別
4. 在展開的面板中勾選產(chǎn)品
5. 你將會在添加菜單項(xiàng)欄目中看到產(chǎn)品類別和產(chǎn)品供你選擇

然后，按照上文教過的移動菜單的辦法，將產(chǎn)品分類移動到Products下方作為子菜單。

保存菜單后去查看一下網(wǎng)站，將看到如下效果

如何刪除菜單

1. 點(diǎn)擊需要刪除的菜單右側(cè)的三角按鈕
2. 點(diǎn)擊移除/remove按鈕即可實(shí)現(xiàn)刪除菜單

如何編輯菜單項(xiàng)以及注意事項(xiàng)

繼續(xù)參考上一張圖，點(diǎn)擊需要編輯的菜單右側(cè)的?三角按鈕，即可進(jìn)入菜單的修改界面。

需要注意的是：如果你的菜單不是自定義鏈接，而是直接選用的頁面或產(chǎn)品分類等，那么，如果在此處修改了它的導(dǎo)航標(biāo)簽（即菜單的名稱），會導(dǎo)致菜單名稱固化為你在此處修改的內(nèi)容，而不會自動跟隨頁面或產(chǎn)品分類名稱的修改。

如何添加自定義鏈接菜單

使用自定義鏈接菜單，可以為網(wǎng)站添加第三方網(wǎng)站的鏈接，譬如社交媒體、你的其他網(wǎng)站，操作步驟如下：

1. 在添加菜單項(xiàng)欄目中點(diǎn)擊“自定義鏈接”
2. 輸入url和鏈接文本
3. 點(diǎn)擊“添加到菜單”按鈕即可

如何添加頁面內(nèi)的錨點(diǎn)菜單

示例：網(wǎng)站的公司介紹沒有單獨(dú)的頁面，若想將公司介紹菜單直接鏈接到首頁中的公司介紹欄目，我們可以通過錨點(diǎn)菜單的形式，將公司介紹菜單錨定到首頁的指定位置。

下文以本示例制作教程，此外，示例網(wǎng)頁是使用Elementor pro制作的，如果你用的是其他編輯器，也是同理去尋找css id等可以作為錨點(diǎn)的設(shè)置項(xiàng)。

1. 請?jiān)趀lementor編輯頁面中，找到錨點(diǎn)需要放置的欄目（section），譬如公司介紹欄目，單擊該欄目以便展開左側(cè)的面板
2. 選擇advanced標(biāo)簽頁
3. 選擇advanced欄目
4. 填入css id，建議用欄目的英文名，單詞之間用-間隔，譬如about-us，然后update保存頁面

接下來進(jìn)入菜單頁面，添加自定義鏈接，其中URL部分由以下兩部分構(gòu)成

錨點(diǎn)內(nèi)容所在頁面的url

# 加上錨點(diǎn)內(nèi)容的CSS id，即上文中的about-us，組成#about-us

保存菜單后，我們訪問網(wǎng)站，點(diǎn)擊錨點(diǎn)菜單查看效果

（來源：B2B獨(dú)立站教程Bonnie）

以上內(nèi)容屬作者個(gè)人觀點(diǎn)，不代表雨果網(wǎng)立場！本文經(jīng)原作者授權(quán)轉(zhuǎn)載，轉(zhuǎn)載需經(jīng)原作者授權(quán)同意。

（來源：B2B獨(dú)立站教程Bonnie）