あくまで自分用の覚え書きなので文章とか適当です...

wp_nav_menu(
	array(
		'theme_location' => 'globalnav',
		'depth'          => 2,
		'container'      => '',
		'menu_class'     => 'globalnav__list',
		'menu_id'        => 'globalnav__list',
		'fallback_cb'    => false,
		'walker'         => new My_Globalnav_Walker(), //←これを加える
	)
);
//Walker_Nav_Menuクラスを継承
class My_Globalnav_Walker extends Walker_Nav_Menu {
	function start_lvl(&$output, $depth=0, $args=null) { } //レベルの最初の部分(= <ul>)
	function end_lvl(&$output, $depth=0, $args=null) { } //レベルの最後の部分(= </ul>)
	function start_el(&$output, $item, $depth=0, $args=null, $id=0) { } //HTML要素の最初(= <li><a>)
	function end_el(&$output, $item, $depth=0, $args=null) { } //HTML要素の最後(= </li>)
}

子メニューがある場合に親にトグルボタンを追加する例

class My_Globalnav_Walker extends Walker_Nav_Menu {
	function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
		$output .= "<li class='globalnav__item" . implode( ' ', $item->classes ) . "'>";
		$output .= '<a href="' . $item->url . '">';
		$output .= $item->title;

		if ( $args->walker->has_children ) {
			$output .= '<button class="globalnav__toggle" aria-label="サブメニューを開閉する"><span></span></button>';
		}

		$output .= '</a>';
	}
}

もっと細かく条件を付けることも可能

wp_nav_menu([
    'walker' => new My_Globalnav_Walker(),
    'show_toggle' => true
]);
if ($args->show_toggle && $args->walker->has_children) {
	$output .= '<button class="globalnav__toggle" aria-label="サブメニューを開閉する"><span></span></button>';
}

子メニューの囲みをカスタムする例

class My_Globalnav_Walker extends Walker_Nav_Menu {
	function start_lvl( &$output, $depth = 0, $args = array() ) {
		$output .= '<div class="globalnav-child"><ul class="globalnav-child-list">';
	}
	function end_lvl( &$output, $depth = 0, $args = array() ) {
		$output .= '</ul></div>';
	}
}

//depth=0 1階層目の子、depth=1 2階層目の子...だんだん深くなる
//条件分岐の例(表示は下の画像)
function start_lvl( &$output, $depth = 0, $args = array() ) {
	$indent  = str_repeat( "\t", $depth );
	$submenu = ( $depth > 0 ) ? 'sub-menu' : '';
	$output .= "\n$indent<ul class\"dropdown-menu $submenu depth-$depth\">\n";
}
スポンサーリンク