Aggiungere una classe span all'interno del tag ancora wp_nav_menu

Question

Aggiungere una classe span all'interno del tag ancora wp_nav_menu

15 nov 2012, 11:12:19

Visualizzazioni: 27K

Voti: 4

Ho trovato esempi per aggiungere una classe agli elementi di primo livello, così da poter mostrare una freccia negli elementi del menu con sottovoci, ma sembra terribile da gestire con le classi già integrate in WordPress, non riesco a visualizzare la freccia con lo stato corrente e l'hover CSS, rovina tutti gli stati.

L'attuale menu di navigazione è così <li><a>Testo</a></li>

C'è un modo per aggiungere un  all'interno dei tag padre <a></a>?

Esempio,

Aggiungere ⇒  dentro ⇒ <a/></a> tags

Quindi ⇒ <li><a>Testo</a></li> che è il genitore.

Il codice attuale aggiunge i tag  all'esterno dei tag <a></a> che è il genitore

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth, $args) {
        $indent = str_repeat("\t", $depth);
        if('primary' == $args->theme_location && $depth ==0){
            $output .='<span class="arrow"></span>';
        }
        $output .= "\n$indent<ul class=\"sub-menu\">\n";
    }
}

_{Titolo della domanda originale modificato da: "aggiungere classe span dentro <a>"}

chris_r

343

menu navigazione walker

Commenti

dal momento che vuoi modificare l'elemento, non l'intero livello, dovresti estendere la funzione start_el invece di start_lvl. qui puoi aggiungere il  all'interno del <a>.

fischi

15 nov 2012 12:11:20

Tutte le risposte alla domanda

Hai provato a utilizzare i parametri before o link_before negli argomenti dell'array quando dichiari la tua funzione wp_nav_menu?

Nota: usa after o link_after per l'effetto opposto.

Esempio,

wp_nav_menu(

    //argomenti normali qui... ecc.

    'before'    => '<span class="arrow"></span>',

    //oppure 'link_before' => '<span class="arrow"></span>',


);

Dal Codex:

$before
(string) (opzionale) Testo da visualizzare prima del <a> del link
Predefinito: Nessuno

   es. 'before'    => ''

oppure...

$link_before
(string) (opzionale) Testo da visualizzare prima del testo del link
Predefinito: Nessuno

   es. 'link_before'    => ''

Risorse di supporto:

http://codex.wordpress.org/Function_Reference/wp_nav_menu

Adam

16.5K

15 nov 2012 15:55:12

Sia la risposta pubblicata da userabuser che quella di wordpress_designer sono ottime, ma vorrei postare una risposta che è una combinazione delle due.

Con questa soluzione puoi usare la logica per definire dove non vuoi che venga applicato il link_before. Così come puoi specificare cosa vuoi inserire prima del testo del link.

Per prima cosa crea una classe molto semplice come quella qui sotto. Questa classe è effettivamente responsabile solo di verificare quando l'elemento non è un sottomenu ($depth <= 0) e di pulire e memorizzare il valore di link_before.

if ( ! class_exists('PREFIX_Menu_Walker')) {
    class PREFIX_Menu_Walker extends Walker_Nav_Menu {
        public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
            $before = property_exists($args, 'link_before') ? $args->link_before : '';

            // Svuota `link_before` quando si lavora su un elemento di livello root
            if ($depth <= 0 && !empty($before)) {
                $args->link_before = '';
            }

            // Continua con la classe predefinita/core del walker del menu di navigazione di WordPress
            parent::start_el( $output, $item, $depth, $args, $id );

            // Ricorda qual era il valore originale di `link_before` in $args
            $args->link_before = $before;
        }
    }
}

La seconda cosa che dovrai fare è applicare l'argomento walker e l'argomento link_before al tuo array wp_nav_menu, in questo modo:

wp_nav_menu([
    'link_before' => '<span>Ciao</span>',
    'walker' => new PREFIX_Menu_Walker()
]);

luukvhoudt

841

4 dic 2017 15:52:33

chris_r 343 · Accepted Answer · 2012-11-15T22:32:45Z

Questo crea effettivamente due istanze in cui viene visualizzata una classe span all'interno del tag per i livelli primari e secondari, permettendoti di aggiungere immagini diverse alla tua classe span per scopi di progettazione e navigazione.

Questo aiuta gli utenti e gli sviluppatori a mostrare se c'è un menu a discesa nel tuo header e rende anche più semplice la navigazione all'interno del tuo sito web.

1. Aggiungi prima questo codice al tuo functions.php.

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

        $class_names = '';

        $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 . $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 ( 'primary' == $args->theme_location ) {
            $submenus = 0 == $depth || 1 == $depth ? get_posts( array( 'post_type' => 'nav_menu_item', 'numberposts' => 1, 'meta_query' => array( array( 'key' => '_menu_item_menu_item_parent', 'value' => $item->ID, 'fields' => 'ids' ) ) ) ) : false;
            $item_output .= ! empty( $submenus ) ? ( 0 == $depth ? '<span class="arrow"></span>' : '<span class="sub-arrow"></span>' ) : '';
        }
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

2. Aggiungi il codice qui sotto al tuo header.php dove è installato wp_nav_menu.

Spiegato qui sotto c'è il codice che installa il nuovo menu personalizzato, in questo caso sarebbe Nav_Walker_Nav_Menu.

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary', 'walker' => new Nav_Walker_Nav_Menu() ) ); ?>

3. Aggiungi un po' di CSS

In modo da poter mostrare le tue nuove immagini di frecce span all'interno dei tuoi tag nei livelli primari e secondari.

#menu-header-menu li span.arrow { height:12px;background-image: url("images/nav-arrows.png");background-position: -8px -3px;background-repeat: no-repeat;float: right;margin: 0 0px 0 10px;text-indent: -9999px;width: 12px;}
#menu-header-menu li a:hover span.arrow{ height:12px;background-image: url("images/nav-arrows.png");background-position: -39px -3px;background-repeat: no-repeat;float: right;margin: 0 0px 0 10px;text-indent: -9999px;width: 12px;}
#menu-header-menu ul.sub-menu li span.sub-arrow { height:12px;background-image: url("images/nav-arrows.png");background-position: -8px -39px;background-repeat: no-repeat;float: right;margin: -2px 0px 0 10px;text-indent: -9999px;width: 12px;}
#menu-header-menu ul.sub-menu li a:hover span.sub-arrow{ height:12px;background-image: url("images/nav-arrows.png");background-position: -39px -39px;background-repeat: no-repeat;float: right;margin: -2px 0px 0 10px;text-indent: -9999px;width: 12px;}

Spero che questo aiuti! :)