制作備忘録

仕事でぶちあたった壁の備忘録です。Wordpressが多め。

カスタムメニューの階層 ul要素(.sub-menu) に独自のClass名を付けたい【カスタムウォーカークラス】

デフォルトでは子要素、孫要素の場合もすべて sub-menu となる。
カスタムウォーカークラスを使用して独自のClass付けを行う。

functions.php

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
  function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $submenu = ( $depth > 0 ) ? 'sub-menu' : '';
    $output .= "\n$indent<ul class=\"menu-item__level sub-menu depth-$depth\">\n";
  }
}

header.php など

表示したいメニューに「''walker' => new My_Walker_Nav_Menu(),」を追加する

wp_nav_menu( array(
  'theme_location'=> 'メニュー名', 
    ''walker' => new My_Walker_Nav_Menu(),
  ));