如何使用wp_nav_menu函式建立WordPress自定義選單

選單是網站上一些最常見的元素。使用WordPress，如果您的主題支援，您可以輕鬆自定義選單並從多個顯示選項中進行選擇。但是，如果您想在自定義位置使用選單，則需要編輯主題檔案並新增wp_nav_menu函式。

通過將此功能與register_nav_menu結合使用，您將能夠在網站的任何位置建立和放置選單。即使您不是開發人員，新增和配置這些功能也相對簡單。此外，您可以直接從WordPress儀表盤編輯選單。

在本文中，我們將討論WordPress的wp_nav_menu函式的工作原理。我們將向您展示哪些引數和類與wp_nav_menu一起使用，然後解釋如何在您的主題中使用該函式。

• wp_nav_menu引數
• wp_nav_menu CSS類
• 步驟 1：使用wp_nav_register函式建立自定義選單
• 步驟 2：編輯您的自定義WordPress選單
• 步驟 3: 使用wp_nav_menu函式顯示新選單

什麼是wp_nav_menu函式？

wp_nav_menu是一個可以在WordPress中顯示自定義選單的功能。與顯示現有頁面列表的wp_page_menu不同， wp_nav_menu僅適用於自定義選單。

您可以將該功能新增到任何主題的模板檔案中，以控制您希望選單出現的位置。這是一個沒有任何特定引數的函式的快速示例：

wp_nav_menu( array $args = array() )

您需要指定要顯示哪個選單才能使程式碼正常工作。實際上，頁面模板中的 wp_nav_menu 示例函式如下所示：

wp_nav_menu( array( 
    'theme_location' => 'custom-menu') );

wp_nav_menu函式可以包含多個引數。在該示例中，我們使用theme_location來指定我們要使用的自定義選單的名稱。

如果您不習慣將程式碼新增到您的網站，您可以選擇WordPress選單外掛。一些工具將使您能夠建立和放置自定義選單，就像您使用wp_nav_menu一樣。

您也許還可以使用一些WordPress頁面構建器。如果您已經在使用這些工具之一，請檢查它是否提供自定義選單功能。

WordPress的wp_nav_menu引數和CSS類

大多數WordPress函式都提供了各種預先確定的引數來修改它們的效果。對於wp_nav_menu，您同時擁有引數和CSS類。

wp_nav_menu引數

您可以使用一個或多個引數自定義wp_nav_menu函式。以下是可用選項：

• ‘menu’ – 表示您正在使用哪個選單。您可以使用ID、slug、名稱或物件來指定選單。
• ‘menu_class’ – 為您的選單配置CSS類。預設情況下，該函式將使用選單類。
• ‘menu_id’ – 指定選單的ID。預設值或ID 是帶有附加或遞增數字的選單的 slug。
• ‘container’ – 選擇用於選單的容器型別。預設情況下，該函式使用div容器。
• ‘container_class’ – 設定一個直接應用於選單容器的CSS類。預設情況下，該選單類將是menu-{menu slug}-container。
• ‘container_id’ – 設定選單容器的ID。與選單的ID一樣，容器將預設使用遞增的 slug。
• ‘fallback_cb’ – 如果WordPress找不到您要顯示的選單，此引數會告訴它應該顯示哪個其他元素。
• ‘theme_location’ – 如果您使用register_nav_menu註冊自定義選單，此引數將顯示它。
• ‘items_wrap’ – 預設情況下，您的選單將以無序列表 (ul)格式顯示。此引數允許您配置如何包裝選單項。
• ‘item_spacing’ – 大多數選單使用空格來分隔專案。如果要禁用該空格，可以將此引數設定為discard。

我們沒有提到一些額外的wp_nav_menu引數，包括用於向選單新增文字的選項。但是，上面列出的引數是將自定義選單新增到主題時使用的主要元素。

下面是一個使用多個引數的函式示例：

<?php
wp_nav_menu( array( 
    'theme_location' => 'custom-menu', 
    'container_class' => 'menu-class'
    'fallback_cb' => ‘wp_page_menu’ ) ); 
?>

如果可用引數的數量似乎過多，請不要擔心。在大多數情況下，您只會使用theme_location和container_class引數。這使得配置函式非常簡單。

wp_nav_menu CSS類

當您使用wp_nav_menu函式時，它會自動將一系列CSS類應用於每個顯示的選單項。

以下是最重要的wp_nav_menu CSS類：

• .menu-item – 此類自動應用於每個選單項。
• .menu-item-has-children – 僅適用於帶有子項的選單項。
• .menu-item-object-{object} – 適用於每個選單項。物件佔位符可以是post_type或分類。
• .menu-item-object-category – 這些選單項對應於特定的WordPress類別。
• .menu-item-object-tag – 對應於 WordPress 標籤的選單項。
• .menu-item-object-page – 靜態頁面中的選單項。
• .menu-item-object-{custom} – 對應於自定義文章型別的專案。
• .menu-item-type-{type} – 適用於每個選單項。型別佔位符可以是post_type或taxonomy 。
• .menu-item-type-post_type – 對應於任何post_type的專案。
• .menu-item-type-taxonomy – 對應於任何分類的專案。

如您所見，wp_nav_menu CSS類有很多重疊之處。您可以使用的大量選項意味著您可以在使用CSS設定自定義選單樣式時非常具體。

請記住，您還可以使用帶有wp_nav_menu引數的自定義CSS類。如果預先確定的類都沒有針對您想要設定樣式的確切選單或專案，那麼這種方法可能是一個很好的選擇。

如何使用WordPress的wp_nav_menu函式建立和自定義選單

既然您知道wp_nav_menu函式是如何工作的，那麼是時候學習如何在您的主題中使用它了。讓我們從討論wp_nav_register開始。

步驟 1：使用 wp_nav_register 函式建立自定義選單

正如我們之前提到的，wp_nav_menu不允許您建立自定義選單，但允許您放置它們。這意味著您需要在使用該功能之前手動製作選單。

wp_nav_register允許您為特定主題建立或“註冊”選單。您需要編輯主題的functions.php檔案才能使用它。

在開始工作之前，如果您還沒有使用子主題，我們建議您設定一個子主題。使用子主題將防止對主題程式碼的任何更改在您更新時消失。在更改基本檔案之前完全備份您的網站也是明智之舉。

解決此問題後，您需要訪問主題的functions.php檔案。最簡單的方法是導航到儀表盤中的外觀 -> 主題檔案編輯器頁面。

主題編輯器應該開啟到您的活動主題，您可以使用右側的選單選擇functions.php檔案。

或者，您可以使用檔案傳輸協議 (FTP)訪問 functions.php 。如果您更喜歡使用成熟的文字編輯器，我們推薦這種方法。您只需新增一段程式碼，因此內建的WordPress程式碼編輯器就足夠了。

導航到檔案末尾並將以下程式碼新增到其中：

function wpb_custom_new_menu() {
  register_nav_menu('custom-menu',__( 'Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

您需要修改custom-menu選單的名稱和slug，這將是Custom Menu欄位。但是，您可以為自定義選單設定任何名稱。

儲存對functions.php檔案的更改。現在是時候編輯哪些專案將包含在新選單中了。

步驟 2：編輯您的自定義WordPress選單

要編輯您剛剛設定的自定義選單，請前往外觀 -> 選單。查詢螢幕右下角的選單設定部分。

該部分應包括您在第一步中註冊的新選單位置。

要編輯該位置將顯示的專案，請使用“選擇要編輯的選單： ”選項選擇一個選單或建立一個新選單。

然後，使用左側的列表選擇您希望選單包含的元素，然後在“選單結構”部分下重新排列它們。

每個選單項包括一個顯示名稱和一個連結。當您對您的選擇感到滿意時，請記住在“選單設定”下驗證您的新自定義選單是否處於活動狀態。如果是，請將更改儲存到選單。

步驟 3：使用wp_nav_menu函式顯示新選單

在這個階段，您應該有一個使用您的主題註冊的現成選單。但是，儘管選單存在，但在您使用wp_nav_menu函式指定其位置之前，它不會出現在任何地方。

您需要在頁面模板中新增wp_nav_menu函式來放置自定義選單。您有權訪問的頁面模板檔案取決於您使用的主題。

導航到外觀 -> 主題檔案編輯器以訪問儀表盤中的這些檔案。右側的主題檔案部分包含您可以從此螢幕編輯的所有檔案的列表。

在我們的示例中，我們選擇了主題的單頁模板。您需要新增到模板的程式碼應如下所示：

<?php
wp_nav_menu( array( 
    'theme_location' => 'custom-menu', 
    'container_class' => 'menu-class'
    'fallback_cb' => ‘wp_page_menu’ ) ); 
?>

在將更改儲存到模板檔案之前，請記住使用自定義主題的 slug 和您要使用的其他引數更新佔位符。我們在示例中包含了container_class和fallback_cb引數。

但是，您使用的程式碼可以很簡單：

<?php
wp_nav_menu( array( 
    'theme_location' => 'custom-menu' ) ); 
?>

該程式碼的位置將決定頁面上選單的位置。如果您不確定該展示位置的工作原理，您可以在模板檔案中嘗試不同的位置。

我們不建議在編輯模板檔案時更改程式碼的任何其他部分，除非您知道它的作用。由於您只新增了幾行程式碼，因此如果有任何錯誤，您可以將其刪除。

編輯後，通過訪問使用您正在處理的模板的頁面之一來檢查選單是否正在載入。如果選單未顯示，則可能是theme_location引數的slug有錯誤，因此請繼續仔細檢查。

小結

儘管您可以通過WordPress建立自定義選單，但wp不允許您新增自定義選單位置。這就是wp_nav_menu函式的用武之地。使用此功能，您可以在網站的任何部分顯示使用register_nav_menu建立的自定義選單。

以下是如何使用wp_nav_menu函式的快速回顧：

1. 使用register_nav_menu函式建立自定義選單。
2. 編輯您的自定義WordPress選單。
3. 使用wp_nav_menu函式顯示新選單。