Personalizzare i menu di navigazione in WordPress

Anno nuovo, difficoltà nuova.
Una interessante funzionalità di WordPress sono i menu di navigazione, che permettono di creare un set di link personalizzato; con questi menu è possibile dare molta libertà di scelta e modifica dei link a chi utilizza il sito, poiché potrà facilmente accedere ai menu dal pannello di amministrazione Aspetto -> Menu e modificarli a piacimento.
Una possibile difficoltà si presenta se in questo genere di menu è necessario inserire stili e/o script personalizzati; l’unico modo che sembra possibile per farlo è modificare la classe che li definisce.
Il mio problema concreto consisteva in: inserire automaticamente una classe specifica sui link e sulle liste (è possibile inserire una classe specifica sulle liste anche da impostazioni avanzate del menu stesso, ma va fatto singolarmente per ciascun link), e inserire uno script sull’evento onclick (nello specifico, avevo la necessità di tracciare un evento in Analytics, per avere il numero di click su quei link).
Di seguito il codice che ho utilizzato per risolvere il problema, che va inserito nel file functions.php del tema.

class My_New_Walker extends Walker_Nav_Menu {
 
    function start_el(&$output, $item, $depth, $args) {
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
	$classes[] = 'menu-item-' . $item->ID;
 
	//Recupera il testo del link e lo utilizza sia per le classi che per l'evento
	$mio_nome = sanitize_title($item->title);
 
        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
	//Imposta la classe per le liste (<li>)
	$class_names = ' class="' . esc_attr( $class_names ) .' mia_classe_lista_'. $mio_nome .'"';
 
	$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
	$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
 
        $output .= '<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        ) .'"' : '';
 
        $title = apply_filters( 'the_title', $item->title, $item->ID );
 
        $item_output = $args->before;
	//Imposta la classe per i link e inserisce un evento onclick sul link
	$item_output .= '<a'. $attributes .' class="mia_classe_link_'.$mio_nome.'" onclick="setEvent(\'Mio Menu\', \'Click\', \''.$mio_nome.'\');">';
	$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 );
		}
	}
 }

Questo invece il codice da inserire nel tema nel punto dove si vuole far vedere il menu modificato:

wp_nav_menu(
    array (
        'menu'            => 'Mio Menu',
        'walker'          => new My_New_Walker
    )
);

Per completezza, questa la funzione javascript usata per impostare il _trackEvent in Analytics:

function setEvent(category,action,label){
  _gaq.push(['_trackEvent', category, action, label]);
}

Ne approfitto per augurare a tutti Buon Anno Nuovo.

Terzo livello

Tutti a buttarsi sul social, e nessuno che si ricordi cosa vuol dire sociale.

Personalizzare i menu di navigazione in WordPress

Articoli correlati

Lascia un commento

commenti

argomenti

link