web-dev-qa-db-ja.com

カスタムウォーカーナビゲーション - クラスとして連続番号を追加

私は現時点では歩行者を掴むようになっています、しかし私は私の望ましい効果を得るためにいくらかの援助が必要です。

私のwalker関数はこんな感じです：

class ik_walker extends Walker_Nav_Menu{
    //start of the sub menu wrap
    function start_lvl(&$output, $depth) {
        $output .= '<nav class="site-navigation" role="navigation">
                        <ul>';
    }
    //end of the sub menu wrap
    function end_lvl(&$output, $depth) {
        $output .= '
                    </ul>
            <button id="menu" class="menu-button" type="button" role="button" aria-label="Menu Toggle">
              <span class="icon-menu"></span>
            </button>
        </div>';
    }
    //add the description to the menu item output
    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 .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        if(strlen($item->description)>2){ $item_output .= '<br /><span class="sub">' . $item->description . '</span>'; }
        $item_output .= '</a>';
        $item_output .= $args->after;
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

必要なのは、ナビゲーションのa内の各liに対して、cで始まりその後1から始まる数である独自のクラスを持つことです。

<a href="[link]" class="c1"></a>
<a href="[link]" class="c2"></a>
<a href="[link]" class="c3"></a>

可能であれば、どこかに指定できる場合はクラスごとに、それぞれのaの後にspanが必要ですか。私はそこにspanを入れる方法を知っています、しかし私が以下のようなことをする必要があるのであなたが本当に特定の個々のクラスを設定することができるかどうか私の検索から理解できません：

<span class="Paw-icon"></span>

任意の助けは非常に高く評価されるでしょう。

menuswalker
1
Doidgey

これを試してみてください。

class ik_walker extends Walker_Nav_Menu {

    function start_lvl(&$output, $depth) {
        $GLOBALS['ik_walker_counter'] = 0;
        $output .= '<nav class="site-navigation" role="navigation">'.
            '<ul>';
    }

    function end_lvl(&$output, $depth) {
        $output .= '</ul>'.
            '<button id="menu" class="menu-button" type="button" role="button" aria-label="Menu Toggle">'.
            '<span class="icon-menu"></span>'.
            '</button>'.
            '</div>';
    }

    function start_el(&$output, $item, $depth, $args) {
        global $wp_query;
        global $ik_walker_counter;
        $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        ) .'"' : '';
        $attributes .= ' class="c'.(++$ik_walker_counter).'"';
        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        if(strlen($item->description)>2){ $item_output .= '<br /><span class="sub">' . $item->description . '</span>'; }
        $item_output .= '</a>';
        $item_output .= '<span class="'.$args->my_individual_class.'"></span>';
        $item_output .= $args->after;
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }

}

c1からcnまでのクラスは、グローバルな$ik_walker_counter変数によって追跡/カウントされます。これは、新しいレベルを開始するたびにリセットされます。個々のクラスはあなたのウォーカー引数に新しいパラメータとして入ります（例：'my_individual_class' => 'Paw-icon'）。

1
tfrommen