ナビゲーション構文、シンプルな拡張

ワードプレス

「wp_nav_menu」で出力されるメニュー構文は「ul li a」のような最低限。

ここに、少し細工が必要な場合のカスタマイズ方法です。

サブメニュー直前にボタンを挿入

class custom_walker_nav_menu extends Walker_Nav_Menu {
	function start_lvl( &$output, $depth = 0, $args = array() ) {
		$output .= '<button class="submenu-button">▼</button><ul class="sub-menu">';
	}
	function end_lvl( &$output, $depth = 0, $args = array() ) {
		$output .= '</ul>';
	}
}

「sub-menu」直前に「button」が挿入されるので、あとはマウスオーバーやタップに応じてjQuery等でアクションを追加します。

「button」の挿入自体もJavaScriptで簡単にできるので、こちらはwalkerを使わなくてもいいかも。

メガメニュー用コンテナを追加

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

こちらはサブメニューにコンテナを追加します。CSSだけではきれいに整形できない場合に。

呼び出し

$args = array(
	'theme_location'	=> 'primary',
	'container_id'		=> 'navigation-menu',
	'container_class'	=> 'menu-main-container',
	'menu_id'			=> 'menu-main',
	'menu_class'		=> 'menu nav-menu',
	'walker'			=> new custom_walker_nav_menu
);
wp_nav_menu( $args );

メニューを複数登録してあり、そのうちの「primary」に適用しています。「responsive」やら「humbarger」になることもあるでしょう。

クラスやIDは任意で。

 

もっと複雑な入れ子にしたり、見出しを足したり、たいがいの事はこの処理で出来そうです。

 

参考:

メニュータグ wp_nav_menu をカスタマイズしてメガメニューの礎(いしずえ)を築く

ニュータグ wp_nav_menu をカスタマイズして第一階層のメニューのリンクテキストをhタグで囲う