Personalizzazione di Walker_Nav_Menu

Question

Personalizzazione di Walker_Nav_Menu

4 ott 2013, 05:01:18

Visualizzazioni: 30.5K

Voti: 2

Sto cercando una soluzione per modificare l'output di wp_nav_menu solo per un menu di navigazione specifico. Ecco il mio 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"
    )
);

Il Problema

Ho bisogno di trovare un modo per inserire <span>[numero]</span> all'interno dell'elemento anchor. [numero] rappresenta il numero progressivo dell'elemento partendo da 1. Ecco una visualizzazione: esempio di numerazione del menu di navigazione

La struttura del menu dovrebbe essere:

<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>

Attualmente, sto usando un hack jQuery. Funziona ma non c'è garanzia che l'utente possa semplicemente disabilitare JavaScript. Ho esaminato:

Ho l'idea che sia necessario estendere la classe walker ma la mia confusione principale sta nel costruire i link manualmente e inserire informazioni dinamiche prima che il testo del link venga stampato. La domanda su Stack Overflow lo fa ma non spiega come arrivarci.

Aggiunta

Per ottenere il risultato preciso che volevo vedere pastebin. È stato necessario modificare $item->title per seguire la struttura HTML come elencato sopra.

djthoms

123

navigazione walker

Tutte le risposte alla domanda

Commenti

Devo includere la classe nello stesso file della navigazione o questo avviene automaticamente tramite il sistema di hook?

djthoms

4 ott 2013 19:45:28

Crea un file separato wpse8170-menu-walker.php nella root del tuo tema. Copia la classe in questo file. Aggiungi include 'wpse8170-menu-walker.php' nel tuo template.

Eugene Manuilov

4 ott 2013 20:17:05

Grazie mille! Mi sono reso conto di aver commesso un errore da principiante modificando il file sbagliato, lol

djthoms

5 ott 2013 19:18:53

Eugene Manuilov 11.4K · Accepted Answer · 2013-10-04T09:28:08Z

Basta creare la tua classe walker personalizzata ed estendere il metodo start_el. Questo metodo costruisce il link a e sarai in grado di aggiungere il tuo span prima di esso:

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 .'>';

        // aggiungi span con il numero qui
        if ( $depth == 0 ) { // rimuovi l'if se non è necessario controllare la profondità
            $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 );
    }

}

Dopodiché potrai utilizzare questa classe nella tua chiamata alla funzione 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',
    )
);