• 主頁
  • 文章
  • 指導
  • 在不使用插件的情況下在 WordPress 中創建自定義導航菜單

在不使用插件的情況下在 WordPress 中創建自定義導航菜單

已發表: 2020-11-28

無論您使用什麼 WordPress 主題，它幾乎肯定會提供至少一個菜單位置，您可以在其中顯示您的菜單（通常在您的網站標題中）。 可以從管理區域內輕鬆創建菜單并快速添加到這些預設位置。 但是，如果您需要在網站的其他地方顯示另一個菜單，您會怎麼做？ 在本教程中，我們將了解如何創建自己的導航菜單，該菜單可以顯示在您選擇的位置，而無需使用插件。

我們走吧！

註冊您的新自定義菜單位置

我們需要做的第一件事是註冊新的自定義菜單的位置。 為此，請使用您選擇的文本編輯器（如 Sublime）打開活動主題的 functions.php 文件並添加以下代碼：

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

在這段代碼中，我們使用了add_action()鉤子來添加回調函數my_custom_menu() 。 這意味著my_custom_menu()函數將與每次調用init操作時執行的默認核心函數一起執行。 “我的自定義菜單”字符串是您將在管理頁面中看到的可讀版本。

在函數內部，核心函數 register_nav_menu 用於為我們的主題註冊導航菜單位置。 如果要註冊多個菜單，可以使用register_nav_menus()並在數組中定義菜單位置，如下所示：

 function my_custom_menu() { register_nav_menus( array( 'my-custom-menu' => _( 'My Custom Menu' ), 'my-custom-menu-2' =>_('My Second Custom Menu') ) ); } add_action( 'init', 'my_custom_menu' );

要確認結果，請轉到外觀 > 菜單下的管理區域。 您會注意到您的自定義菜單位置包含在菜單設置中。

注意：如果我們此時選擇此位置，菜單將不會在前端顯示任何內容。

如何顯示我們的自定義菜單

假設我們希望將新菜單位置用於二級水平菜單，該二級菜單將位於我們主題中已經存在的“桌面水平菜單”下方。

為此，我們將在我們希望顯示菜單的主題模板中插入一些代碼。 在本例中，我們使用 Twenty Twenty 主題並編輯其 header.php 文件以顯示我們的菜單。 您將在主題文件夾下找到此文件。

使用編輯器打開 header.php 文件，然後在第 33 行附近的代碼中找到此​​元素。

 <header class="header-footer-group" role="banner">

在本節下方，我們將放置代碼以顯示新的自定義菜單位置：“my-custom-menu”。

 <header class="header-footer-group" role="banner"> <?php wp_nav_menu( array( 'theme_location' => 'my-custom-menu' ) ); ?>

theme_location 值必須與您在我們之前粘貼的 functions.php 代碼中為菜單提供的名稱相同。 在我們的例子中：“我的自定義菜單”。

現在讓我們創建一個測試菜單來看看這是否有效。 為此，請轉到外觀 > 菜單並開始創建新菜單。

將菜單命名為“二級菜單”，為某個位置選擇“我的自定義菜單”，然後點擊“創建菜單”按鈕。

最後將一些項目添加到菜單中（例如菜單項 1、菜單項 2、菜單項 3），然後保存菜單。

讓我們看看我們現在在前端有什麼。

我們已經設法展示了我們的新菜單，但它很亂，不是嗎？

如果我們查看源代碼，我們會注意到 wp_nav_menu() 函數創建了這段 HTML 代碼

<div class="menu-secondary-menu-container"> <ul class="menu"> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-378"><a href="#">Menu item 1</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-381"><a href="#">Menu item 2</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-382"><a href="#">Menu item 3</a></li> </ul> </div>

所以，我們可以使用代碼中描述的類來美化我們的菜單。 為此，我們將使用一些 CSS。 找到 style.css（這通常與 header.php 文件位於同一位置），然後使用編輯器打開它以添加以下代碼：

 ul#menu-secondary-menu { text-align: right; padding: 10px 30px; } ul#menu-secondary-menu li { list-style: none; display: inline-block; padding: 1px; } ul#menu-secondary-menu li:hover { border: 1px solid #c00202; padding: 0; border-radius: 3px; } ul#menu-secondary-menu li a { text-decoration: none; padding: 5px; font-size: 14px; }

現在的結果會更整潔，更符合我們演示網站的風格。

額外的菜單定制

WordPress 提供的用於顯示菜單的 wp_nav_menu() 函數帶有一系列選項，可讓您進一步自定義它。

'主題位置'

如上所述，該參數對應於functions.php中傳遞給register_nav_menus()函數的鍵

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

'菜單類'

有一個“ menu_class ”選項，允許您為菜單指定自己的類。

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

您可能已經註意到，該類不會替換任何其他類，而是添加到 ul 元素中。

'menu_id'

與 class 選項不同，menu_id 選項替換了當前菜單 id。 <ul> 元素生成的 HTML 將是這樣的。

 <ul class="menu">

不使用此選項時，id 將是 menu slug，在使用多個實例時將遞增。

'容器'

此參數定義菜單周圍元素的類型。 默認值為“div”。 例如，如果您使用此代碼：

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container' => 'nav', ) );

你會得到這個結果：

'container_class'

這是一個應用於菜單父元素的類：

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

您還可以使用 'before' 和 'after' 參數在每個菜單項鍊接之前或之後插入內容。 如果您想在前面添加破折號或圖標或將菜單項包裝在 span 標記中，這將非常有用。 您可以自己嘗試下面的示例以查看實際情況：

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<span class="menulink">', 'after' => '</span>', ) );
 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '-', ) );
 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '-', ) );

您還可以將圖標添加到菜單項。 例如，嘗試安裝 Font Awesome 插件以包含他們的圖標庫，並使用“之前”菜單選項將字體真棒圖標應用於菜單項。 

 wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'before' => '<i class="fas fa-caret-right"></i>', ) );

您可以在插件的圖標列表中找到每個圖標的代碼。

沃克參數

最後但同樣重要的是，我們將提供一個示例，說明 walker 參數如何幫助自定義菜單。 如果您不知道 WordPress walker 類是什麼，那麼以下內容可能沒有多大意義。 我們建議先閱讀“熟悉 WordPress Walker 課程”。

 wp_nav_menu( array( 'walker' => new Walker_Custom_Menu ) );

為了演示 Walker 類，我們將在菜單上添加一個“子項”。

我們將覆蓋 WordPress 提供的默認 Walker 類。 它位於 wp-includes/class-walker-nav-menu.php 文件中。 為此，請轉到您的 function.php 文件並插入以下代碼：

 if ( !class_exists('My_Nav_Menu_Walker') ) { class My_Nav_Menu_Walker extends Walker { var $tree_type = array( 'post_type', 'taxonomy', 'custom' ); var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' ); function start_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "\n$indent"; $output .= "<i class=\"dropdown icon\"></i>\n"; $output .= "<div class=\"menu\">\n"; } function end_lvl(&$output, $depth) { $indent = str_repeat("\t", $depth); $output .= "$indent</div>\n"; } function start_el(&$output, $item, $depth, $args) { $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes = in_array( 'current-menu-item', $classes ) ? array( 'current-menu-item' ) : array(); $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); $class_names = strlen( trim( $class_names ) ) > 0 ? ' class="' . esc_attr( $class_names ) . '"' : ''; $id = apply_filters( 'nav_menu_item_id', '', $item, $args ); $id = strlen( $id ) ? '' : ''; $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $item_output = $args->before; $item_output .= '<a'. $attributes . $id . $value . $class_names . '>'; $item_output .= '<div class="item">'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= '</div>'; $item_output .= "</a>\n"; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } } }

現在在你的 headers.php 中用這個替換你的菜單代碼（我們將故意輸出兩個菜單版本只是為了比較結果）：

 wp_nav_menu(); // Default 'walker' => new Walker_Nav_Menu() wp_nav_menu( array( 'walker' => new My_Nav_Menu_Walker() ) );

將此代碼與原始 Walker_Nav_Menu 類進行比較，您會注意到$tree_type和$db_fields保持不變，但其餘部分已更改。 花點時間比較同一菜單的這兩個版本上的代碼和 HTML 輸出，並嘗試通過使用 My_Nav_Menu_Walker 類來試驗自己。

結論

網站上的菜單顯然非常重要！ 能夠完全控制菜單的放置和輸出擴展了您作為主題開發人員的能力，並在設計網站時開闢了一系列令人興奮的新可能性，而不必依賴插件，這總是很棒的。