WordPressのカスタムメニューのHTML構造をある程度自由にしたい人向けの記事を今日は書こうと思います。wp_nav_menuって設定値が多いので、初心者には超便利な反面フレームワーク使うような人たちになると迷惑な場合があります。カスタムメニューに設定値で検索したデータくれればこっちでなんとかするってばって思うんですけど、どうやらそれっぽい関数を僕は見つける事ができませんでした。とりあえずwp_nav_menuの項をCODEXをなになに～と読んでみると、カスタムウォーカー機能なるものが存在すると書いてあります。とりあえずこれは何かとか、使い方についてできるだけ説明しようと思います。
自分好みのHTML構造でカスタムメニューが作れる
カスタムウォーカークラスが何か分かりませんが、とりあえずこのクラスを継承して、start_lvlメソッドとstart_elメソッドを編集すれば、好きな構造でカスタムメニューのHTMLを生成できます。
使い方
functions.phpなりなんなりに、どーんとコピペします。
</p>
<p>class クラス名は何でもいい extends Walker_Nav_Menu {</p>
<p>// add classes to ul sub-menus<br />
function start_lvl( &$output, $depth ) {<br />
// depth dependent classes<br />
$indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent<br />
$display_depth = ( $depth + 1); // because it counts the first submenu as 0<br />
$classes = array(<br />
'sub-menu',<br />
( $display_depth % 2 ? 'menu-odd' : 'menu-even' ),<br />
( $display_depth >=2 ? 'sub-sub-menu' : '' ),<br />
'menu-depth-' . $display_depth<br />
);<br />
$class_names = implode( ' ', $classes );</p>
<p> // build html<br />
$output .= "\n" . $indent . '<ul class="' . $class_names . '">' . "\n";<br />
}</p>
<p>// add main/sub classes to li's and links<br />
function start_el( &$output, $item, $depth, $args ) {<br />
global $wp_query;<br />
$indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent</p>
<p> // depth dependent classes<br />
$depth_classes = array(<br />
( $depth == 0 ? 'main-menu-item' : 'sub-menu-item' ),<br />
( $depth >=2 ? 'sub-sub-menu-item' : '' ),<br />
( $depth % 2 ? 'menu-item-odd' : 'menu-item-even' ),<br />
'menu-item-depth-' . $depth<br />
);<br />
$depth_class_names = esc_attr( implode( ' ', $depth_classes ) );</p>
<p> // passed classes<br />
$classes = empty( $item->classes ) ? array() : (array) $item->classes;<br />
$class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );</p>
<p> // build html<br />
$output .= $indent . '<li id="nav-menu-item-'. $item->ID . '" class="' . $depth_class_names . ' ' . $class_names . '">';</p>
<p> // link attributes<br />
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';<br />
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';<br />
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';<br />
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';<br />
$attributes .= ' class="menu-link ' . ( $depth > 0 ? 'sub-menu-link' : 'main-menu-link' ) . '"';</p>
<p> $item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s',<br />
$args->before,<br />
$attributes,<br />
$args->link_before,<br />
apply_filters( 'the_title', $item->title, $item->ID ),<br />
$args->link_after,<br />
$args->after<br />
);</p>
<p> // build html<br />
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );<br />
}<br />
}</p>
<p>
wp_nav_menuの引数にwalker => new 継承したクラス名を入れてやると、クラスが呼べます。
<br />
wp_nav_menu(<br />
array('walker' => new クラス名は何でもいい())<br />
);<br />
さっき作ったクラスを編集して自分なりのHTMLを作れます。とりあえず、自分は、ulタグとliタグを削除して、aタグに特定のクラスを付けたかったので、
</p>
<p>class mainmenunav extends Walker_Nav_Menu {</p>
<p> function start_lvl( &$output, $depth ) {</p>
<p> //ラッパーのDivとかulとかnavの設定用メソッド</p>
<p> //入れ子関係を判断して付けるulにつけるクラスを変えてるのではないかと。<br />
$indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' ); // code indent<br />
$display_depth = ( $depth + 1); // because it counts the first submenu as 0<br />
$classes = array(<br />
'sub-menu',<br />
( $display_depth % 2 ? 'menu-odd' : 'menu-even' ),<br />
( $display_depth >=2 ? 'sub-sub-menu' : '' ),<br />
'menu-depth-' . $display_depth<br />
);<br />
$class_names = implode( ' ', $classes );</p>
<p> //ラッパーが必要な場合ここはコメントアウトしてはいけない。</p>
<p> //$output .= "\n" . $indent . '<ul class="' . $class_names . '">' . "\n";</p>
<p> }</p>
<p> function start_el( &$output, $item, $depth, $args ) {</p>
<p> global $wp_query;<br />
$indent = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' );</p>
<p> // メニューの入れ子関係のフラグ付けプログラム<br />
$depth_classes = array(<br />
( $depth == 0 ? 'main-menu-item' : 'sub-menu-item' ),<br />
( $depth >=2 ? 'sub-sub-menu-item' : '' ),<br />
( $depth % 2 ? 'menu-item-odd' : 'menu-item-even' ),<br />
'menu-item-depth-' . $depth<br />
);<br />
$depth_class_names = esc_attr( implode( ' ', $depth_classes ) );</p>
<p> // liタグにつけるクラス生成用プログラムじゃないかな<br />
$classes = empty( $item->classes ) ? array() : (array) $item->classes;<br />
$class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );</p>
<p> // ここでリストがつく</p>
<p> // $output .= $indent . '<li id="nav-menu-item-'. $item->ID . '" class="' . $depth_class_names . ' ' . $class_names . '">';</p>
<p> // Aタグの属性設定<br />
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';<br />
$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';<br />
$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';<br />
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';<br />
$attributes .= ' class=" btn btn-dark btn-small ' . ( $depth > 0 ? 'sub-menu-link' : 'main-menu-link' ) . '"';</p>
<p> $item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s',<br />
$args->before,<br />
$attributes,<br />
$args->link_before,<br />
apply_filters( 'the_title', $item->title, $item->ID ),<br />
$args->link_after,<br />
$args->after<br />
);</p>
<p> //item_output = 表示されるAタグ<br />
//item = 表示されるデータの原型<br />
//depth = 入れ子になってるかどうかのフラグ<br />
//args = クエリの元だと思う。正直分からん。</p>
<p> $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );<br />
}<br />
}</p>
<p>
こーんな感じで書きました。
とりあえず自分の推測ですが、コメントも書いておいたので、WordPressのカスタムメニューを何とかしたい人は参考にしてみてください。
コメント