Fungsi analisis: pemeriksaan wp_nav_menu

Apabila WordPress 3 memberikan kami ciri menu baharu, ia mengubah cara kami melihat menu navigasi selama-lamanya. Kami tidak lagi perlu menggunakan fungsi senarai halaman biasa atau membina fungsi menu tersuai kami sendiri untuk menyepadukan kategori dan menu halaman serta item pautan luaran atau keras dalam menu navigasi. Tetapi bagaimanakah kita boleh memanfaatkan ciri baharu ini untuk penyesuaian? Dalam tutorial ini, kami akan menyelami semua yang boleh dilakukan oleh fungsi wp_nav_menu, menambah subperihalan menggunakan kelas Walker dan menyentuh beberapa fungsi yang berkaitan dengannya.

参数

该函数有多个参数可供使用。以下是 WordPress.org Codex 中列出的默认值：

<?php $defaults = array(
	'theme_location'  => ,
	'menu'            => ,
	'container'       => 'div',
	'container_class' => 'menu-{menu slug}-container',
	'container_id'    => ,
	'menu_class'      => 'menu',
	'menu_id'         => ,
	'echo'            => true,
	'fallback_cb'     => 'wp_page_menu',
	'before'          => ,
	'after'           => ,
	'link_before'     => ,
	'link_after'      => ,
	'items_wrap'      => '<ul id=\"%1$s\" class=\"%2$s\">%3$s</ul>',
	'depth'           => 0,
	'walker'          =>
);
?>

<?php wp_nav_menu( $defaults ); ?>

主题位置

使用此参数，我们可以设置主题位置，然后在“菜单”页面上使用该位置来设置在主题的该部分中工作的菜单，而无需手动定义应在此处显示的菜单。这对于主题分发者非常有帮助，因为仅当用户为该位置定义了菜单时，您才能使用条件来显示菜单。唯一的其他要求是您使用函数 register_nav_menu() 来注册这些位置。当您设置菜单支持时，这通常是通过函数文件完成的。

让我们开始构建自定义菜单功能参数，假设我们已经注册了一个名为“primary”的主题位置。

$params = array(
	'theme_location' => 'primary'
);

菜单

此参数用于手动定义应使用哪个菜单。在我们的示例中，我们仅设置一个通用菜单位置，而不是定义要使用的确切菜单位置，但如果我们想要告诉函数使用名为“主导航”的菜单，我们的参数将如下所示：

$params = array(
	'theme_location' => 'primary',
	'menu' => 'Primary Navigation'
);

容器

默认情况下，我们的菜单将包含在 div 中，但如果您像我一样，通常不需要这个，并且可能希望减少 divs 和其他标签的使用量尽可能保持代码整洁。您还可以使用此参数定义不同的标签，例如 html5 <section> 或 <nav>。对于我们的示例，我们不希望容器更改默认容器值，因为二十一主题样式依赖于它的存在。

容器类和容器ID

您几乎可以猜到，这些参数用于设置容器的类和 ID。由于我们完全忽略了这一点，因此我们不需要定义值。

菜单类和菜单 ID

这些工作方式与前面的参数类似，只是这次我们肯定要设置“nav”的 ID，因为这是我们将在样式表中用于设置导航栏样式的 ID。

$params = array(
	'theme_location' => 'primary',
	'container' => false,
	'menu_id' => 'nav'
);

回声

您可以使用此参数来决定是否要显示（回显）结果，或返回它以在 PHP 中使用。该项目是布尔值，因此要返回它，只需将此参数设置为 0。

后备CB

这是一个回调函数，如果没有找到菜单，您可以回退到该函数。默认情况下，它使用旧的支持 wp_page_menu() 并将所有相同的参数传递给该函数。

之前和之后

这些项目用于定义可以在锚标记之前和之后放置的内容 (<a></a>)。您可以使用它们在每个项目之前添加一个竖线，或者将导航项目包装在 span 标记中。

链接之前和链接之后

它们的工作方式与我们之前介绍的项目相同，只是您定义的任何内容都将位于锚标记内。我们的示例不要求我们使用这些，因此我们将忽略它们并保留默认的空项目。

物品包裹

默认情况下，项目包含在带有菜单 ID 和菜单类的无序列表中。如果您愿意，您可以通过此参数进行更改。

深度

当您想要使用同一菜单两次但不希望任何子项显示在您使用 wp_nav_menu()

$params = array(
	'theme_location' => 'primary',
	'menu_id' => 'nav',
	'walker' => new description_walker()
);
wp_nav_menu($params);

Menggunakan parameter ini, kita boleh menetapkan kedudukan tema dan kemudian menggunakan kedudukan itu pada halaman Menu untuk menetapkan menu yang berfungsi dalam bahagian tema tersebut tanpa perlu menentukan secara manual menu yang harus dipaparkan di sini. Ini sangat membantu pengedar tema kerana anda boleh menggunakan syarat untuk memaparkan menu hanya jika pengguna telah menentukan menu untuk lokasi tersebut. Satu-satunya keperluan lain ialah anda menggunakan fungsi register_nav_menu() untuk mendaftarkan lokasi ini. Apabila anda menyediakan sokongan menu, ini biasanya dilakukan melalui fail fungsi.

Mari mula membina parameter fungsi menu tersuai, dengan andaian kami telah mendaftarkan lokasi tema yang dipanggil "utama".

class description_walker extends Walker_Nav_Menu {
	function start_el(&$output, $item, $depth, $args) {
		global $wp_query;
		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

		$class_names = $value = '';

		$classes = empty( $item->classes ) ? array() : (array) $item->classes;

		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
		$class_names = ' class="'. esc_attr( $class_names ) . '"';

		$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

		$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        ) .'"' : '';
		$description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';

		if($depth != 0) {
			$description = $append = $prepend = "";
		}

		$item_output = $args->before;
		$item_output .= '<a'. $attributes .'>';
		$item_output .= $args->link_before .apply_filters( 'the_title', $item->title, $item->ID );
		$item_output .= $description.$args->link_after;
		$item_output .= '</a>';
		$item_output .= $args->after;

		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}

Menu

#nav a {
	line-height: 20px;
	padding: 10px 15px;
}

#nav a span {
	display: block;
	font-size: 11px;
	color: #ccc;
}

#nav a:hover span {
	color: #999;
}

if (has_nav_menu('top-menu')) {
	wp_nav_menu('theme_location='top-menu');
}

$params = array(
	'theme_location' => 'primary',
	'menu_id' => 'nav',
	'walker' => new description_walker()
);
wp_nav_menu($params);

class description_walker extends Walker_Nav_Menu {
	function start_el(&$output, $item, $depth, $args) {
		global $wp_query;
		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

		$class_names = $value = '';

		$classes = empty( $item->classes ) ? array() : (array) $item->classes;

		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
		$class_names = ' class="'. esc_attr( $class_names ) . '"';

		$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

		$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        ) .'"' : '';
		$description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';

		if($depth != 0) {
			$description = $append = $prepend = "";
		}

		$item_output = $args->before;
		$item_output .= '<a'. $attributes .'>';
		$item_output .= $args->link_before .apply_filters( 'the_title', $item->title, $item->ID );
		$item_output .= $description.$args->link_after;
		$item_output .= '</a>';
		$item_output .= $args->after;

		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
	}
}

#nav a {
	line-height: 20px;
	padding: 10px 15px;
}

#nav a span {
	display: block;
	font-size: 11px;
	color: #ccc;
}

#nav a:hover span {
	color: #999;
}

if (has_nav_menu('top-menu')) {
	wp_nav_menu('theme_location='top-menu');
}