如何在 WordPress 主題中添加自定義導航菜單

您想在您的 WordPress 主題中添加自定義導航菜單嗎？

所有主題都設置了可以顯示導航菜單的位置。 但是，默認情況下，除了這些預定義位置之外，您不能在其他任何地方添加菜單。

在本文中，我們將向您展示如何將自定義導航菜單添加到 WordPress 主題的任何區域。

為什麼要在 WordPress 主題中添加自定義導航菜單？

導航菜單是指向網站重要區域的鏈接列表。 它們使訪問者可以輕鬆找到有趣的內容，從而增加網頁瀏覽量並降低 WordPress 中的跳出率。

菜單的確切位置將根據您的 WordPress 主題而有所不同。 大多數主題都有多個選項，因此您可以創建不同的菜單並將它們顯示在不同的地方。

要查看當前 WordPress 主題中可以在何處顯示菜單，只需轉到外觀 » 菜單，然後查看“顯示位置”部分。

下圖顯示了 Astra WordPress 主題支持的位置。

但是，有時您可能希望在主題中未列為“顯示位置”的區域中顯示菜單。

考慮到這一點，讓我們來看看如何創建 WordPress 導航菜單，然後將它們添加到您的主題中。 只需使用下面的快速鏈接跳轉到您喜歡的方法。

方法一、在全站編輯中添加自定義導航菜單

如果您使用塊主題，則可以使用完整站點編輯 (FSE) 和塊編輯器添加自定義導航菜單。 有關更多詳細信息，您可以查看我們關於最佳 WordPress 全站編輯主題的文章。

此方法不適用於每個主題，並且不會讓您自定義菜單的每個部分。 如果您想向任何 WordPress 主題添加完全自定義的菜單，那麼我們建議使用頁面構建器插件。

如果您使用的是基於塊的主題，請轉到外觀»編輯器。

這將啟動完整的站點編輯器，其中已選擇您的活動主題模板之一。

如果您想將自定義導航菜單添加到不同的模板，請單擊工具欄中的箭頭並選擇“瀏覽所有模板”。

站點編輯器現在將顯示屬於您的主題的所有不同模板。

只需找到您要編輯的模板，然後單擊即可。

下一步是將導航塊添加到要顯示菜單的區域。

在左上角，單擊藍色的“+”按鈕。

現在，繼續並在搜索欄中輸入“導航”。

當“導航”塊出現時，只需將其拖放到您的佈局上即可。

接下來，單擊以選擇導航塊。

如果您已經創建了要顯示的菜單，請單擊“選擇菜單”並從下拉列表中進行選擇。

另一種選擇是單擊“創建新菜單”，它允許您在完整的站點編輯器中構建導航菜單。

要從空白菜單開始，只需單擊“從空白開始”。

要將項目添加到新菜單，只需單擊“+”圖標。

這將打開一個彈出窗口，您可以在其中添加任何帖子或頁面，並決定是否應在新選項卡中打開這些鏈接。

只需重複這些步驟即可將更多項目添加到菜單中。

如果您對菜單的外觀感到滿意，只需單擊“保存”按鈕即可。 您的網站現在將使用新模板，訪問者可以與您的自定義導航菜單進行交互。

方法 2. 使用 SeedProd 在 WordPress 中創建自定義導航菜單（適用於所有主題）

完整的站點編輯器是將基本自定義菜單添加到基於塊的主題的快速簡便的方法。 但是，如果您想為任何主題添加一個高級的、完全可定制的菜單，那麼您將需要一個頁面構建器插件。

SeedProd 是市場上最好的 WordPress 頁面構建器插件，允許您自定義導航菜單的每個部分。

SeedProd 附帶 180 多個專業設計的模板，您可以將其用作起點。 選擇模板後，您可以使用簡單的拖放操作將自定義導航菜單添加到您的站點。

首先，您需要安裝並激活 SeedProd 插件。 有關更多詳細信息，請參閱我們關於如何安裝 WordPress 插件的分步指南。

注意：還有一個免費版本的 SeedProd，允許您在不編寫代碼的情況下創建自定義導航菜單。 但是，在本指南中，我們將使用 SeedProd Pro，因為它有更多模板供您選擇。

激活插件後，SeedProd 將要求您提供許可證密鑰。

您可以在 SeedProd 網站上的帳戶下找到此信息。 輸入密鑰後，單擊“驗證密鑰”按鈕。

完成後，轉到SeedProd » Landing Pages並單擊“添加新的 Landing Page”按鈕。

您現在可以為您的自定義頁面選擇一個模板。

為了幫助您找到合適的設計，SeedProd 的所有模板都被組織成不同的活動類型，例如即將推出和領先擠壓活動。 您甚至可以使用 SeedProd 的模板來改進您的 404 頁面。

要仔細查看任何設計，只需將鼠標懸停在該模板上，然後單擊放大鏡圖標。

當您找到想要使用的設計時，請單擊“選擇此模板”。

我們在所有圖像中都使用“黑色星期五銷售頁面”模板，但您可以使用任何您想要的模板。

選擇模板後，輸入該自定義頁面的名稱。 SeedProd 將根據頁面標題自動創建一個 URL，但您可以將此 URL 更改為您想要的任何內容。

輸入此信息後，單擊“保存並開始編輯頁面”按鈕。

大多數模板已經包含一些塊，它們是所有 SeedProd 頁面佈局的核心組件。

要自定義塊，只需在頁面編輯器中單擊以選中它。

左側工具欄將顯示該塊的所有設置。 例如，在下圖中，我們正在更改“標題”塊中的文本。

您可以使用左側菜單中的設置設置文本格式、更改其對齊方式、添加鏈接等。

要向您的設計添加新塊，只需在左側菜單中找到任何塊，然後將其拖到您的設計中。 如果您想刪除一個塊，只需單擊以選擇該塊，然後單擊垃圾桶圖標。

由於我們要創建自定義導航菜單，因此將“導航菜單”塊拖到頁面上。

這將創建一個帶有單個默認“關於”項的導航菜單。

要自定義此菜單項，請在左側菜單中單擊以選中它。

這將打開一些控件，您可以在其中更改文本，以及添加要鏈接到的菜單項的 URL。

默認情況下，菜單項將是一個“dofollow”鏈接並在同一瀏覽器窗口中打開。 要更改這些設置中的任何一個，只需使用“URL 鏈接”部分中的複選框即可。

在下圖中，我們正在創建一個將在新窗口中打開的“nofollow”鏈接。

要向菜單添加更多項目，只需單擊“添加新項目”按鈕。

然後，您可以按照上述相同的過程自定義這些項目中的每一個。

左側菜單還具有更改字體大小和文本對齊方式的設置。

您甚至可以創建一個分隔線，它會出現在菜單中的每個項目之間。

之後，繼續並切換到“高級”選項卡。 在這裡，您可以更改菜單的顏色、間距、排版和其他高級選項。

當您進行更改時，實時預覽會自動更新，因此您可以嘗試不同的設置來查看您的設計中看起來不錯的部分。

當您對自定義菜單的外觀感到滿意時，就可以發布它了。

只需單擊“保存”旁邊的下拉箭頭，然後選擇“發布”。

您的自定義導航菜單和頁面現在將在您的 WordPress 博客上生效。

方法 3. 使用代碼在 WordPress 中創建自定義導航菜單（高級）

如果您不想設置頁面構建器插件，則可以使用代碼添加自定義導航菜單。 通常，您需要將自定義代碼片段添加到主題的 functions.php 文件中。

但是，我們不建議高級用戶以外的任何人使用此方法，即使這樣，代碼中的一個小錯誤也可能導致許多常見的 WordPress 錯誤，或者完全破壞您的網站。

這就是我們推薦使用 WPCode 的原因。 這是在 WordPress 中添加自定義代碼而無需編輯任何核心 WordPress 文件的最簡單和最安全的方法。

您需要做的第一件事是在您的網站上安裝並激活免費的 WPCode 插件。 有關更多詳細信息，請參閱我們關於如何安裝 WordPress 插件的分步指南。

激活後，轉到Code Snippets » Add Snippet在您的 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' );

在代碼框下方，您將看到插入選項。 如果尚未選擇，請選擇“自動插入”方法，這樣代碼段將自動插入並在您的網站上執行。

之後，打開“位置”下拉菜單並單擊“隨處運行”。

然後，您就可以滾動到屏幕頂部並單擊“非活動”開關，使其變為“活動”。

最後，繼續並單擊“保存”以使該片段生效。

之後，轉到外觀»菜單並查看“顯示位置”區域。

您現在應該看到一個新的“我的自定義菜單”選項。

您現在已準備好將一些菜單項添加到新位置。 有關更多信息，請參閱我們關於如何為初學者添加導航菜單的分步指南。

當您對菜單感到滿意時，下一步就是將其添加到您的 WordPress 主題中。

將自定義導航菜單添加到您的 WordPress 主題

大多數網站所有者在網站徽標或標題之後直接在標題部分下方顯示他們的導航菜單。 這意味著導航菜單是訪問者看到的第一件事。

但是，您可以通過向主題的模板文件添加一些代碼來在任何您想要的地方顯示您的自定義導航菜單。

在您的 WordPress 儀表板中，轉到外觀 » 主題文件編輯器。

在右側菜單中，選擇要編輯的模板。 例如，如果您想在網站的頁眉中顯示自定義導航菜單，那麼您通常需要選擇 header.php 文件。

如需幫助找到正確的模板文件，請參閱我們的指南，了解如何在您的 WordPress 主題中找到要編輯的文件。

選擇模板文件後，您需要添加一個 wp_nav_menu 函數並指定您的自定義菜單的名稱。 例如，在以下代碼片段中，我們將我的自定義菜單添加到主題的標題中：

wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );

添加代碼後，單擊“更新文件”按鈕以保存您的更改。

現在，如果您訪問您的站點，您將看到正在運行的自定義菜單。

默認情況下，您的菜單將顯示為普通的項目符號列表。

您可以通過向您的站點添加自定義 CSS 代碼來設置自定義導航菜單的樣式，以更好地匹配您的 WordPress 主題或公司品牌。

為此，請轉到外觀 » 自定義。

在 WordPress 定制器中，單擊“其他 CSS”。

這將打開一個小型代碼編輯器，您可以在其中輸入一些 CSS。

您現在可以使用添加到主題模板的 CSS 類來設置菜單樣式。 在我們的示例中，這是.custom_menu_class 。

在下面的代碼中，我們添加邊距和填充，將文本顏色設置為黑色，並在水平佈局中排列菜單項：

div.custom-menu-class ul 
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
	display:inline-block;

div.custom-menu-class li 
    padding: 0px 20px 0px 0px;
    display: inline-block;
 

div.custom-menu-class a 
    color:#000;

WordPress 定制器將自動更新以顯示菜單在新樣式下的外觀。

如果您對菜單的外觀感到滿意，請單擊“發布”以使您的更改生效。

有關更多信息，請參閱我們關於如何設置 WordPress 導航菜單樣式的指南。

使用 WordPress 導航菜單做更多事情

使用 WordPress，您可以做的不僅僅是在菜單中顯示鏈接。 以下是如何從導航菜單中獲得更多信息：

• 如何在 WordPress 中添加帶有導航菜單的圖像圖標
• 如何向 WordPress 中的菜單添加條件邏輯
• 如何在您的 WordPress 主題中添加菜單描述
• 如何在 WordPress 中添加全屏響應式菜單
• 如何將大型菜單添加到您的 WordPress 網站

我們希望這份終極指南能幫助您了解如何在 WordPress 中添加自定義導航菜單。 您可能還想了解增加博客流量的最佳方式，以及如何跟踪 WordPress 網站的網站訪問者。

如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲取 WordPress 視頻教程。 您還可以在 Twitter 和 Facebook 上找到我們。

如何在 WordPress 主題中添加自定義導航菜單一文首次出現在 WPBeginner 上。