Personalizarea Walker_Nav_Menu

Question

Personalizarea Walker_Nav_Menu

4 oct. 2013, 05:01:18

Vizualizări: 30.5K

Voturi: 2

Caut o soluție pentru a ajusta output-ul wp_nav_menu doar pentru un anumit meniu de navigare. Am meniul meu:

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

Problema

Trebuie să găsesc o modalitate de a insera <span>[număr]</span> în interiorul elementului ancoră. [număr] reprezintă numărul elementului începând cu 1. Iată vizual: Exemplu vizual de meniu numerotat

Structura meniului ar fi:

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

În prezent, folosesc un hack jQuery. Acesta funcționează, dar nu există nicio garanție că utilizatorul nu poate dezactiva pur și simplu JavaScript. Am consultat:

Am o idee că extinderea clasei walker este necesară, dar confuzia mea principală constă în construirea link-urilor manual și inserarea informațiilor dinamice înainte ca textul link-ului să fie afișat. Întrebarea de pe Stack Overflow o face, dar nu explică cum să ajungi acolo.

Completare

Pentru a obține rezultatul exact pe care l-am dorit, vezi pastebin. $item->title trebuia modificat pentru a urma structura HTML așa cum este listată mai sus.

djthoms

123

navigare walker

Toate răspunsurile la întrebare

Comentarii

Trebuie să include clasa în același fișier cu navigația sau acest lucru se întâmplă automat prin sistemul de hook-uri?

djthoms

4 oct. 2013 19:45:28

Creează un fișier separat wpse8170-menu-walker.php în rădăcina temei tale. Copiază clasa în acest fișier. Adaugă include 'wpse8170-menu-walker.php' în template-ul tău.

Eugene Manuilov

4 oct. 2013 20:17:05

Mulțumesc mult! Mi-am dat seama că am făcut o greșeală de începător editând fișierul greșit, lol

djthoms

5 oct. 2013 19:18:53

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

Trebuie doar să creezi propria clasă walker și să extinzi metoda start_el. Această metodă construiește link-ul a și vei putea adăuga tag-ul tău span înaintea acestuia:

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

        // adaugă span cu număr aici
        if ( $depth == 0 ) { // elimină if dacă verificarea adâncimii nu este necesară
            $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 );
    }

}

După aceea, vei putea folosi această clasă în apelul tău al funcției 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',
    )
);