📜  wp 菜单声明 - PHP (1)

📅  最后修改于: 2023-12-03 15:06:02.243000             🧑  作者: Mango

WP菜单声明 - PHP

当我们在开发WordPress主题时,必不可少的就是菜单的创建和声明。在WordPress中,我们可以使用wp_nav_menu()函数来创建并输出菜单。本文将介绍如何在WordPress主题中使用wp_nav_menu()函数创建菜单。

1. 创建菜单

在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',
) );
?>
2. 菜单配置

我们还可以在菜单配置中添加更多选项。例如,我们可以为每个菜单项添加样式类名,以及为其添加图标。这些选项可以在后台外观 > 菜单中自定义添加。

为了使用这些选项,我们需要在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(),它会为我们的菜单项添加样式类名。

3. 自定义菜单解析器类

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()函数创建和声明菜单的全部内容。需要注意的是,在菜单配置中添加了菜单项的其他属性后,我们需要相应地修改函数调用中的参数数组,才能正确输出菜单。