為什麼要在WordPress主題中添加自定義導航菜單？
導航菜單是一個指向網站重要區域的鏈接列表。它們使訪問者可以方便地找到有趣的內容，這可以增加頁面瀏覽量並減少WordPress中的跳出率。導航菜單的確切位置將取決於您的WordPress主題。大多數主題提供多個選項，這樣您可以創建不同的菜單並在不同的位置顯示它們。要查看當前主題可以顯示菜單的位置，只需前往「外觀」»「菜單」並查看 “顯示位置” 部分。
某些時候，您可能希望在主題中沒有列為 “顯示位置” 的區域顯示菜單。考慮到這一點，讓我們來看看如何在WordPress主題的任何區域添加自定義導航菜單。只需使用以下的快速鏈接跳轉到您偏好的方法：
- 方法一：使用完整網站編輯器（僅限基於區塊的主題）
- 方法二：使用頁面構建插件（適用於所有主題）
- 方法三：使用代碼在WordPress中創建自定義導航菜單（高級）
方法一：使用完整網站編輯器（僅限基於區塊的主題）
如果您使用的是區塊主題（如ThemeIsle Hestia Pro），那麼可以使用完整網站編輯（FSE）和區塊編輯器添加自定義導航菜單。詳細資訊，您可以參見我們的文章了解最佳的WordPress全站編輯主題。
此方法並不適用於每個主題，並且不能自定義菜單的每一部分。如果您想在任何WordPress主題中添加完全自定義的菜單，我們建議使用頁面構建插件。若您使用的是基於區塊的主題，請前往「外觀」»「編輯器」。預設情況下，完整網站編輯器會顯示主題的主頁範本，但您可以將導航菜單添加到任何區域。要查看所有可用選項，請選擇 “範本” “模板” 或 “頁面”。
步驟
您現在可以點擊範本、範本部分或頁面，然後將自定義導航菜單添加到其中。WordPress會顯示設計預覽。要繼續編輯此範本，請點擊小鉛筆圖標。接下來在您想顯示菜單的區域添加導航區塊。點擊左上角的藍色‘+’按鈕。現在在搜索欄中輸入 “導航”。當出現“導航”區塊時，請將其拖放到您的佈局中。
選擇導航區塊後，如果您已經創建了要顯示的菜單，那麼點擊右側菜單中的三點圖標，選擇“菜單”。然後從下拉列表中選擇一個菜單。另外一種選擇是在完整網站編輯器中構建一個新菜單，比如添加頁面、文章、自訂鏈接等。要向新菜單添加項目，只需點擊‘+’圖標即可。
此彈出窗口允許您添加任何文章或頁面，並決定這些鏈接是否應在新標籤頁中打開。您還可以向WordPress菜單添加搜索欄、社交媒體圖標等。在彈出窗口中，輸入要添加到菜單中的區塊，當其出現時選擇相應選項。然後使用小工具欄和右側菜單中的設置配置此區塊。重複這些步驟以添加更多項目到菜單中。當您對菜單外觀滿意後，請點擊“保存”按鈕。您的網站現在將使用新範本，訪客可以與您的自定義導航菜單進行互動。
方法二：使用頁面構建插件（適用於所有主題）
完整網站編輯器允許您向基於區塊的主題添加菜單。然而，若您想向任何WordPress主題添加高級的、完全自定義的菜單，則需要頁面構建插件。SeedProd是市場上最好的WordPress頁面構建插件，允許您自定義導航菜單的每個部分。SeedProd擁有超過300個專業設計的範本，您可以用作起點。選擇範本後，您可以使用SeedProd的預製導航菜單區塊向網站添加自定義導航菜單。首先，您需要安裝並啟用SeedProd插件。更多詳情，請參閱我們的分步教程了解如何安裝WordPress插件。
步驟
請注意，有一個免費版的SeedProd允許您創建自定義導航菜單，無需編寫代碼。然而，在本教程中，我們將使用SeedProd Pro，因為它有導航菜單區塊、額外範本和高級功能。啟用插件後，SeedProd會要求輸入許可證密鑰。您可以在SeedProd網站上的帳戶中找到此資訊。輸入密鑰後點擊“驗證密鑰”按鈕。完成此操作後，前往SeedProd » 入門頁，點擊‘添加新登陸頁面’按鈕。您現在可以選擇自定義頁面的範本。
為幫助您找到合適的設計，所有SeedProd的範本都按不同的活動類型組織，如即將推出和領導吸引活動。您甚至可以使用SeedProd的範本改善您的404頁面。要仔細查看任何設計，請將鼠標懸停在該範本上，然後點擊放大鏡圖標。當找到想要使用的設計時，點擊‘選擇這個範本’。您選擇了一個範本後，輸入自定義頁面的名稱。SeedProd會根據頁面標題自動創建一個URL，但您可以將該 URL 更改為任何內容。例如，您可以添加相關關鍵字以幫助搜索引擎理解頁面內容。
這可以改善您的WordPress SEO，幫助搜索引擎向尋找與您內容相似的人展示頁面。輸入此資訊後，點擊‘保存並開始編輯頁面’按鈕。大多數範本已經包含一些區塊，其中是所有SeedProd頁面佈局的核心組成部分。要自定義一個區塊，只需在頁面編輯器中點擊選擇它。左側工具欄現在將顯示該區塊的所有設置。例如，下圖中，我們正在更改‘標題’區塊中的文字。
您可以使用左側菜單中的設置對文字進行格式化、更改對齊方式、添加鏈接等。如果選擇‘高級’標籤，則可以訪問更多設置。例如，您可以通過添加框陰影和CSS動畫讓區塊真正突出。要向設計中添加新區塊，只需在左側菜單中找到任一區塊，然後將其拖到頁面上。若要刪除一個區塊，點擊選擇該區塊，然後使用垃圾桶圖標。
由於我們想創建一個自定義導航菜單，因此將一個‘導航菜單’區塊拖到頁面上。這會創建一個導航菜單，其默認項目為‘關於’。您現在可以在SeedProd編輯器中構建新菜單或選擇在WordPress儀表板中已創建的菜單。要顯示之前創建的菜單，點擊‘WordPress菜單’按鈕。現在打開’菜單‘下拉選單並選擇列表中的任意選項。
之後，您可以使用左側菜單中的設置更改字體大小、文本對齊等。如果想在SeedProd中構建新菜單，請選擇‘簡易’按鈕。然後點擊SeedProd默認創建的‘關於’項目以展開。這會打開一些控制項，您可以更改文本並添加菜單項將鏈接到的URL。默認情況下，鏈接將是‘dofollow’並在同一瀏覽器窗口打開。您可以使用URL鏈接部分中的選項更改這些設置。
如下圖所示，我們正在創建一個在新窗口打開的‘nofollow’鏈接。要了解更多此話題，請參閱我們對nofollow鏈接的初學者指南。要向菜單添加更多項目，只需點擊‘添加新項目’按鈕。然後按照上述步驟自定義每個項目。左側菜單還提供設置，用以更改字體大小和文本對齊。您甚至可以創建分隔線，這將出現在每個菜單項之間。之後，前往‘高級’標籤。這裡您可以更改菜單的顏色、間距、排版等高級選項。隨著更改，實時預覽會自動更新，因此您可以嘗試不同設置，以查看在設計中看起來如何。
SeedProd默認情況下在移動和桌面設備上顯示相同的菜單。然而，移動設備的屏幕通常比桌面電腦的小。考慮到這一點，您可能想為移動設備創建單獨的菜單。例如，您可以使用垂直佈局，這樣移動用戶就不需要水平滾動。您可能還想在智能手機和平板電腦上顯示較少的鏈接。要創建適合移動設備的菜單，只需按照上述步驟設計菜單。然後選擇‘高級’標籤並點擊展開‘設備可見性’部分。
現在點擊‘隱藏於桌面’滑動條，直到它變成橙色。現在，SeedProd僅向移動用戶顯示此菜單。當您滿意自定義菜單的外觀時，即可發布它。只需點擊‘保存’旁邊的下拉箭頭，然後選擇‘發布’。現在，如果訪問您的WordPress博客，您將看到自定義導航菜單在運行。
方法三：使用代碼在WordPress中創建自定義導航菜單（高級）
如果您不想設置頁面構建插件，那麼可以使用代碼添加自定義導航菜單。您經常會找到一些指南說明如何將自定義代碼片段添加到主題的functions.php文件中。然而，我們不推薦此方法，因為即使代碼中的小錯誤也可能導致一些常見的WordPress錯誤，甚至完全破壞您的網站。而且，當您更新WordPress主題時，您將失去自定義代碼。這就是為什麼我們建議使用WPCode。
WPCode是最簡單和最安全的方法，可以在無需編輯任何核心WordPress文件的情況下添加自定義代碼。首先，您需要安裝並激活免費的WPCode插件。更多詳情，請參閱我們的分步教程了解如何安裝WordPress插件。啟用後，前往WordPress儀表板中的“代碼片段” » “添加片段”。您將看到所有可以添加到網站的預製片段。這些片段包括允許您完全禁用評論、上傳WordPress通常不支持的文件類型、禁用附件頁面等等。
要創建自己的片段，將鼠標懸停在‘添加您的自定義代碼’上，然後點擊‘使用片段’。首先，輸入自定義代碼片段的標題。這可以是任何有助於您在WordPress儀表板中識別片段的名稱。之後，打開‘代碼類型’下拉選單並選擇‘PHP片段’。完成後，將以下片段粘貼到代碼編輯器中：
function wpb_custom_new_menu() { register_nav_menu('my-custom-menu',__( 'My Custom Menu' )); } add_action( 'init', 'wpb_custom_new_menu' );這將向您的主題添加一個名為‘我的自定義菜單’的新菜單位置。要使用不同的名稱，只需調整代碼片段。如果要向主題添加多個自定義導航菜單，只需在代碼片段中添加另一行。例如，以下代碼片段添加了兩個新菜單位置，名為‘我的自定義菜單’和‘額外菜單’：
function wpb_custom_new_menu() { register_nav_menus( array( 'my-custom-menu' => __( 'My Custom Menu' ), 'extra-menu' => __( 'Extra Menu' ) ) ); } add_action( 'init', 'wpb_custom_new_menu' );之後，滾動到插入選項。如果尚未選擇，則選擇‘自動插入’方法，以便WPCode在整個網站上添加片段。然後打開“位置”下拉選單，點擊‘在所有地方運行’。然後，準備滾動到屏幕頂部，點擊‘不活躍’切換，使其變為‘活躍’。最後，點擊‘保存’使片段生效。之後，前往“外觀”»“菜單”並查看“顯示位置”區域。您應該會看到一個新的