📅  最后修改于: 2023-12-03 15:06:02.243000             🧑  作者: Mango
当我们在开发WordPress主题时,必不可少的就是菜单的创建和声明。在WordPress中,我们可以使用wp_nav_menu()
函数来创建并输出菜单。本文将介绍如何在WordPress主题中使用wp_nav_menu()
函数创建菜单。
在WordPress中,我们可以在后台的外观 > 菜单
中创建菜单。创建好后,我们需要在主题中调用这个菜单。假设我们在后台已经创建了一个菜单,并设置了它的名称为主菜单
,那么我们可以使用以下代码在主题中输出它:
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'menu-class',
) );
?>
函数wp_nav_menu()
有一个参数数组,其中theme_location
表示菜单的位置,menu_class
表示菜单的样式类名。这个参数数组还可以传递其他属性。
如果我们需要创建多个菜单,可以在functions.php
中使用register_nav_menus()
函数注册它们。例如,我们可以在functions.php
中添加以下代码:
<?php
register_nav_menus( array(
'primary' => '主菜单',
'secondary' => '副菜单',
) );
?>
这样就可以在后台创建主菜单
和副菜单
了。接下来,我们可以在主题中使用以下代码输出菜单:
<?php
// 输出主菜单
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'menu-class',
) );
// 输出副菜单
wp_nav_menu( array(
'theme_location' => 'secondary',
'menu_class' => 'menu-class',
) );
?>
我们还可以在菜单配置中添加更多选项。例如,我们可以为每个菜单项添加样式类名,以及为其添加图标。这些选项可以在后台外观 > 菜单
中自定义添加。
为了使用这些选项,我们需要在wp_nav_menu()
函数的参数数组中添加相应的属性。例如,假设我们在菜单配置中为一个菜单项添加了样式类名menu-item-class
,那么我们可以使用以下代码为其添加样式类名:
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'menu-class',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'walker' => new My_Walker_Nav_Menu(),
) );
?>
在上面的代码中,我们添加了一个items_wrap
属性,它定义了我们菜单项的HTML模板。注意,我们还添加了一个自定义的菜单项解析器类My_Walker_Nav_Menu()
,它会为我们的菜单项添加样式类名。
wp_nav_menu()
函数的默认行为是解析menu
数据库表中的菜单项,并创建对应的HTML标记。但是,我们可以自定义菜单解析器类,实现自己的菜单解析和输出。这个过程需要我们创建一个继承自Walker_Nav_Menu
类的类,并实现需要的解析方法。
以下是一个自定义菜单解析器类的例子:
<?php
class My_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$output .= $indent . '<li id="menu-item-' . $item->ID . '" class="' . implode( ' ', $item->classes ) . '">';
$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 . '>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
?>
自定义菜单解析器类需继承自Walker_Nav_Menu
类,并实现相应的菜单解析方法。这里我们重写了start_el
方法,实现按照自己的方式输出菜单项。
以上就是使用wp_nav_menu()
函数创建和声明菜单的全部内容。需要注意的是,在菜单配置中添加了菜单项的其他属性后,我们需要相应地修改函数调用中的参数数组,才能正确输出菜单。