メニュー項目（アイテム）または2階層目以降をカスタマイズ

ナビゲーションメニューでメニュー項目（アイテム）または2階層目以降をカスタマイズするには、walkerプロパティを指定します。

クラスはWalker_Nav_Menuを継承します。
クラス名は何でもよく、またコンストラクタは必要ありません。

クラスは4つのメソッドで構成することができます。

start_lvl

各階層のメニューを囲う要素の開始タグを構築します。

引数名		型	説明
第一引数	&$output	string	出力するHTMLの文字列。連結して指定する。
第二引数	$depth	integer	深さ。
第三引数	$args	array	wp_nav_menuで指定したオプション。

end_lvl

各階層のメニューを囲う要素の終了タグを構築します。

引数名		型	説明
第一引数	&$output	string	出力するHTMLの文字列。連結して指定する。
第二引数	$depth	integer	深さ。
第三引数	$args	array	wp_nav_menuで指定したオプション。

start_el

各メニューアイテムの要素の開始タグを構築します。

引数名		型	説明
第一引数	&$output	string	出力するHTMLの文字列。連結して指定する。
第二引数	$item	object	メニュー（コンテンツ）の情報。
第三引数	$depth	integer	深さ。
第四引数	$args	array	wp_nav_menuで指定したオプション。
第五引数	$id	integer	※ 不明

end_el

各メニューアイテムの要素の終了タグを構築します。

引数名		型	説明
第一引数	&$output	string	出力するHTMLの文字列。連結して指定する。
第二引数	$item	object	メニュー（コンテンツ）の情報。
第三引数	$depth	integer	深さ。
第四引数	$args	array	wp_nav_menuで指定したオプション。

サンプルコード

<nav id="local-navigation">
								<?php
									/**
									 * 第二階層のカスタマイズ
									 */
									class CustomNavMenu extends Walker_Nav_Menu {
										/**
										 * 各階層の開始親要素
										 * ※ 第二階層から適用
										 * @param string $output 出力するHTMLの文字列
										 * @param integer $depth 深さ
										 * @param array $depth wp_nav_menuで指定したオプション
										 */
										public function start_lvl(&$output, $depth = 0, $args = array()) {
											$output .= '<ul class="sub-menu">';
										}

/**
										 * 各階層の終了親要素
										 * ※ 第二階層から適用
										 * @param string $output 出力するHTMLの文字列
										 * @param integer $depth 深さ
										 * @param array $depth wp_nav_menuで指定したオプション
										 */
										public function end_lvl(&$output, $depth = 0, $args = array()) {
											$output .= '</ul>';
										}

/**
										 * 各アイテムの開始要素
										 * @param string $output 出力するHTMLの文字列
										 * @param object $item メニュー（コンテンツ）の情報
										 * @param integer $depth 深さ
										 * @param array $depth wp_nav_menuで指定したオプション
										 * @param integer $id ※ 不明
										 */
										public function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
											$classes = array('item');

if ($item->current_item_ancestor || $item->current_item_parent) $classes[] = 'current-parent';
											if ($item->current) $classes[] = 'current';

$className = count($classes) > 0 ? ' class="'.implode(' ', $classes).'"' : '';

$output .= '<li'.$className.'>';
											$output .= $this->createAnchor($item, $depth, $args);
										}

/**
										 * 各アイテムの終了要素
										 * @param string $output 出力するHTMLの文字列
										 * @param object $item メニュー（コンテンツ）の情報
										 * @param integer $depth 深さ
										 * @param array $depth wp_nav_menuで指定したオプション
										 */
										public function end_el(&$output, $item, $depth = 0, $args = array()) {
											$output .= '</li>';
										}

/**
										 * リンクを生成
										 * @param object $item メニュー（コンテンツ）の情報
										 * @param integer $depth 深さ
										 * @param array $depth wp_nav_menuで指定したオプション
										 * @return string 生成したリンクのHTMLを返す
										 */
										private function createAnchor($item, $depth, $args) {
											$target = !empty($item->target) ? ' target="'.esc_attr($item->target).'"' : '';

$itemOutput  = $args->before;
											$itemOutput .= '<a href="'.esc_attr($item->url).'"'.$target.'>';
											$itemOutput .= $args->link_before;
											$itemOutput .= $item->title;
											$itemOutput .= $args->link_after;
											$itemOutput .= '</a>';
											$itemOutput .= $args->after;

return $itemOutput;
										}
									}

wp_nav_menu(array(
										'container'  => false,
										'items_wrap' => '<ul>%3$s</ul>',
										'walker'     => new CustomNavMenu
									));
								?>
								</nav>

CMS「WordPress」逆引きリファレンス一覧へ戻る