web-dev-qa-db-fra.com

Personnalisation de Walker_Nav_Menu

Je cherche une solution pour ajuster la sortie de wp_nav_menu uniquement sur un menu de navigation spécifique. J'ai mon menu:

wp_nav_menu(
    array(
        "container"         => "nav",
        "container_class"   => "container",
        "container_id"      => "nav",
        "fallback_cb"       => false,
        "menu_class"        => "six columns omega main-nav sf-menu",
        "theme_location"    => "main-nav"
    )
);

Le problème

Je dois trouver un moyen d'insérer <span>[number]</span> à l'intérieur de l'élément d'ancrage. [number] représente le numéro de l'article à partir de 1. Voici un visuel:enter image description here

La structure du menu serait:

<li class="...">
    <a href="#"><span>01.</span>Home</a>
</li>
<li class="...">
    <a href="#"><span>02.</span>Services</a>
</li>
<li class="...">
    <a href="#"><span>03.</span>Portfolio</a>
</li>

Actuellement, j'utilise un hack jQuery. Cela fonctionne, mais rien ne garantit que l'utilisateur peut simplement désactiver JavaScript. J'ai regardé:

J'ai une idée qu'il est nécessaire d'étendre la classe de marcheur, mais ma confusion ultime réside dans la construction manuelle des liens et insertion d'informations dynamiques avant le texte du lien est imprimé. La question du débordement de pile le fait mais n'explique pas comment s'y rendre.

Addenda

Pour obtenir le résultat précis que je voulais voir Pastebin . $item->title devait être modifié pour suivre la structure HTML indiquée ci-dessus.

navigationwalker
2
djthoms

Vous devez juste créer votre propre classe de marcheur et étendre la méthode start_el. Cette méthode génère le lien a et vous pourrez ajouter votre span avant celle-ci:

class Wpse8170_Menu_Walker extends Walker_Nav_Menu {

    var $number = 1;

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $class_names = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<li' . $id . $value . $class_names .'>';

        // add span with number here
        if ( $depth == 0 ) { // remove if statement if depth check is not required
            $output .= sprintf( '<span>%02s.</span>', $this->number++ );
        }

        $atts = array();
        $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
        $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
        $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
        $atts['href']   = ! empty( $item->url )        ? $item->url        : '';

        $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );

        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $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 );
    }

}

Après cela, vous pourrez utiliser cette classe dans votre appel de fonction wp_nav_menu:

wp_nav_menu(
    array(
        "container"         => "nav",
        "container_class"   => "container",
        "container_id"      => "nav",
        "fallback_cb"       => false,
        "menu_class"        => "six columns omega main-nav sf-menu",
        "theme_location"    => "main-nav",
        "walker"            => 'Wpse8170_Menu_Walker',
    )
);
6
Eugene Manuilov