walker classについて改めて勉強中

管理画面から簡単にメニューを追加したり、並び替えたりと、便利な wp_nav_menu ですが、それでもやはり自動的に出力できる内容には限度があります。

ですが、 walker class とよばれる仕組みを使えば、かなりかゆいところまで手が届きます。

例えば、カスタムメニューに「クラス」という項目があります ((初期状態では非表示ですが、ページ上部の「表示オプション」からチェックを入れると表示されます。))が、これはメニューの <li> タグに対してクラスを与えるもので、<a>タグにクラスを振ることはできません。

ですが、walker classを使用すれば、それができるようになります ((ただし、「クラス」に入力した内容というよりは、メニューの<li>に出力されるクラス全部を書き出してしまいますので、このままだと大量のクラスがつきますが…。)) 。

以前にも似たようなことを書きましたが、今回はもっと本格的な感じで、より複雑な事が行えます。

とりあえずコードを書いてみた

たとえば、先に挙げた、<a>タグ側にもクラスを付ける場合はこのように書けます。

functions.phpに書きます。

class gNav_walker extends Walker_Nav_Menu {
   function start_el(&$output, $item, $depth, $args) {
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
        $class_names = $value = '';
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
        $class_names = ' class="' . esc_attr( $class_names ) . '"';
        $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
        $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
        $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
        $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
        $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
        $item_output = $args->before;
        $item_output .= '<a'. $attributes .$class_names.'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

class gNav_walker extends Walker_Nav_Menu {

function start_el(&$output, $item, $depth, $args) {

global $wp_query;

$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

$class_names = $value = '';

$classes = empty( $item->classes ) ? array() : (array) $item->classes;

$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );

$class_names = ' class="' . esc_attr( $class_names ) . '"';

$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';

$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';

$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';

$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';

$item_output = $args->before;

$item_output .= '<a'. $attributes .$class_names.'>';

$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;

$item_output .= '</a>';

$item_output .= $args->after;

$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );

}

13行目に $class_names というのがあり、その前に <li> が見えることから、ここがメニューのリストを作る部分だということが判り、名前からもここにリストのクラスが出力されていることが予想できますね。

これをメニューのリンク部分（<a>タグ）にもくっつけてあげれば、リンクにもクラスを与えることができそうです。

$item_outputの部分を書き換えていけば、メニューの背景に画像を敷いたり、管理画面の「メニュー」で設定したラベルに勝手にへんな語尾をつけたりもできますｗ

23行目がリンクに挟まれたリンク文字部分ですので、その次の行に、

$item_output .= '';

1	$item_output .= '';

を追加してその中に文字を追加してあげればOK。まぁあまりやらないかもしれませんけどｗ

前回の記事でやったことをwalker classを使用して書くならば、

$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) .$item->description. $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );

$item_output = $args->before;

$item_output .= '<a'. $attributes .'>';

$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) .$item->description. $args->link_after;

$item_output .= '</a>';

$item_output .= $args->after;

$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );

といった具合でしょうか？

メニューを出力するコードを書き換える

ここまでで準備は完了ですが、このままではまだなにも変わりませんので、利用したいメニューに walker class を適用させるためのコードを追記します。

wp_nav_menu( array(
'theme_location' => 'Custom_NAV_gNav',
'container' => 'nav',
'container_id' => 'gNav',
'menu_class' => 'cf',
'echo' => true,
'depth' => 1,
'walker' => new gNav_walker()
));

wp_nav_menu( array(

'theme_location' => 'Custom_NAV_gNav',

'container' => 'nav',

'container_id' => 'gNav',

'menu_class' => 'cf',

'echo' => true,

'depth' => 1,

'walker' => new gNav_walker()

));

みたいな感じです。

基本的な設定は普段通りの wp_nav_menu ですが、最後に walker というパラメータが増えてますね。

ここで先ほど作成した walker class を呼び出すことで、その設定に基づいてメニューが出力されるようになるってことですね。

まだもうちょっと詳しく調べていけばもっといろいろできそうな気がします。

参考リンク

WordPressで、カスタムメニューの表示内容を変更する方法

[解決済み] wp_list_categoriesのリストにクラス付加 (6 件の投稿)

NeGiMeMo.net

walker classについて改めて勉強中

とりあえずコードを書いてみた

メニューを出力するコードを書き換える

参考リンク

いいね:

コメントするコメントをキャンセル

関連投稿

walker classについて改めて勉強中

とりあえずコードを書いてみた

メニューを出力するコードを書き換える

参考リンク

Share this:

いいね:

コメントする コメントをキャンセル

関連投稿

コメントするコメントをキャンセル