web-dev-qa-db-fra.com

Navire personnalisé - Ajoutez un numéro séquentiel à la classe

Je suis en train de me familiariser avec le marcheur en ce moment, mais j'ai besoin d'aide pour obtenir l'effet souhaité.

Ma fonction de marcheur ressemble à:

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 );
    }
}

Ce dont j'ai besoin, c'est que chaque a de la li du nav, ait sa propre classe qui commence par c, puis un nombre - commençant à 1.

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

J'ai alors besoin d'une span après chaque a, avec une classe quand je peux spécifier quelque part, si possible? Je sais comment obtenir la variable span, mais je ne peux pas comprendre, à partir de mes recherches, si vous pouvez réellement définir des classes spécifiques car je dois effectuer des tâches telles que:

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

Toute aide serait très appréciée.

menuswalker
1
Doidgey

Essayez comme ça:

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 );
    }

}

Vos classes c1 à cn sont suivies/comptées par la variable globale $ik_walker_counter, qui est réinitialisée chaque fois que nous commençons un nouveau niveau. La classe individuelle passe en tant que nouveau paramètre dans vos arguments de marcheur (par exemple, 'my_individual_class' => 'Paw-icon'.

1
tfrommen