「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は任意で。
もっと複雑な入れ子にしたり、見出しを足したり、たいがいの事はこの処理で出来そうです。
参考: