解析機能：wp_nav_menuの検査

WordPress 3 で新しいメニュー機能が提供されたとき、ナビゲーション メニューの見方は永遠に変わりました。通常のページ リスト機能を使用したり、カテゴリ メニューやページ メニュー、外部またはハード リンク項目をナビゲーション メニューに統合するために独自のカスタム メニュー機能を構築したりする必要はなくなりました。しかし、この新機能をカスタマイズにどのように活用できるのでしょうか?このチュートリアルでは、wp_nav_menu 関数でできるすべてのことを詳しく説明し、Walker クラスを使用してサブ記述を追加し、その関連関数のいくつかに触れます。

パラメータ

この関数には複数のパラメータが使用可能です。以下は、WordPress.org Codex にリストされているデフォルト値です:

トピックの場所

このパラメータを使用すると、テーマの位置を設定し、メニュー ページでその位置を使用して、ここに表示するメニューを手動で定義することなく、テーマのその部分で動作するメニューを設定できます。ユーザーがその場所のメニューを定義している場合にのみ、条件を使用してメニューを表示できるため、これはテーマのディストリビュータにとって非常に役立ちます。他の唯一の要件は、関数 register_nav_menu() を使用してこれらの場所を登録することです。メニュー サポートをセットアップするとき、これは通常、関数ファイルを通じて行われます。

「primary」という名前のテーマの場所を登録したと仮定して、カスタム メニュー関数パラメーターの構築を開始しましょう。

このパラメータは、どのメニューを使用するかを手動で定義するために使用されます。この例では、使用する正確なメニューの場所を定義するのではなく、共通のメニューの場所を設定しているだけですが、「メイン ナビゲーション」というメニューを使用するように関数に指示したい場合、パラメーターは次のようになります。 リーリー ＃＃＃容器＃＃＃

div

div

や などのさまざまなタグを定義することもできます。この例では、21 のテーマ スタイルはコンテナの存在に依存しているため、コンテナがデフォルトのコンテナ値を変更することは望ましくありません。

nav

リーリー ＃＃＃エコー＃＃＃

バックアップCB

wp_page_menu()

＃＃＃前後＃＃＃

) の前後に配置できるものを定義するために使用されます。これらを使用して、各項目の前に垂直バーを追加したり、ナビゲーション項目をスパン タグで囲んだりできます。

アイテムパッケージ デフォルトでは、項目はメニュー ID とメニュー クラスを持つ順序なしリストに含まれます。必要に応じて、このパラメータを使用してこれを変更できます。 ＃＃＃深さ＃＃＃

wp_nav_menu()

ナビゲーション メニュー項目に説明を追加する

この例では、各メイン メニュー項目にサブ説明を追加します。説明を追加する機能自体は、WordPress メニュー システムですでに利用可能です。この機能をオンにするには、メニューに移動し、右上隅にある「画面オプション」タブを押します。クリックしたオプションが「説明」であることを確認する必要があります。このオプションを選択すると、メニュー項目は次のようになります:

填写完描述后，我们需要创建 walker 类并将其添加到 wp_nav_menu() 参数中。我们将调用该类 description_navigation 因此我们完整的参数代码应如下所示：

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

沃克级

现在我们准备使用 Walker 类添加这些描述：

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 . '
';

		$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 ) ? ''.esc_attr( $item->description ).'' : '';

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

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

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

这里发生了很多事情。有关 Walker 类的更多信息，请参阅另一个教程：了解 Walker 类。您在这里应该理解的最重要的部分是我们正在重建每个链接项的输出并添加描述。在上面代码片段的第 19 行，您可以看到我们在哪里获取项目描述（如果存在），并将其设置为包含在 span 标记中的 $description 的值，以便我们可以单独设置描述的样式。然后，在第 24-29 行中，我们将链接项重新组合在一起，在锚标记结束之前添加描述，以便它成为链接本身的一部分。

使用“二十一十一”主题，您现在应该拥有如下所示的内容：

风格化

让我们添加一些样式以使其更清晰：

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

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

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

这将更改每个链接的高度和填充，导致 span 标记内的描述下降到自己的行，并稍微调整字体大小和颜色以获得如下所示的最终结果：

关系函数

您不仅可以使用 wp_nav_menu() 输出包含所有自定义内容的菜单，您还可以进一步使用其一些相关功能。

has_nav_menu()

此功能非常适合仅显示特定菜单（如果该菜单已分配给您的主题位置）。例如，您可能希望在主题上为用户可能不希望出现在主导航中的较少导航项创建顶部导航。这可能是主页链接、“与我们一起做广告”或其他较低级别的号召性用语。但作为主题分发者，如果您不知道这是否是用户想要使用的内容，只需使用如下条件：

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

wp_get_nav_menu_items()

此函数将从特定菜单返回项目数组。如果您想在不使用 Walker 类的情况下构建自定义菜单列表，这可能特别有用。您会失去很多功能，例如菜单项的当前类，但这是循环遍历菜单项数组以获得简单解决方案的好方法。

结论

当您更多地了解内置参数提供的灵活性并能够通过 Walker Class 进行更好的控制时，您可以做很多事情来自定义导航菜单。需要为每个项目添加另一个带有“icon”类的span标签来自定义图标吗？没问题。

能够完全控制菜单的放置和输出，可以扩展您作为主题开发人员的能力，带来不可估量的可能性。您可以使用 Walker 类来做哪些事情？