Skip to content

Personalizzare i menu di navigazione in WordPress

Attenzione: questo articolo è stato scritto più di 12 anni fa, alcune informazioni potrebbero essere obsolete.

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 Google 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 Custom_Walker extends Walker_Nav_Menu {
function start_el( &$output, $data_object, $depth = 0, $args = null, $current_object_id = 0 ) {
$classes   = empty( $item->classes ) ? [) : (array) $item->classes;
$classes[) = 'menu-item-' . $item->ID;

$name        = sanitize_title( $item->title );
$class_names = join( ' ',apply_filters( 'nav_menu_css_class',array_filter( $classes ),$item,$args ) );
$class_names = ' class="' . esc_attr( $class_names ) . ' custom_class_list_' . $name . '"';

$id     = apply_filters( 'nav_menu_item_id','menu-item-' . $item->ID,$item,$args );
$id     = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= '<lì id="' . $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 . ' class="custom_class_list_' . $name . '" onclick="setEvent(\'Menu\', \'click\', ' . $name . ');">';
$item_output .= $args->link_before . apply_filters( 'the_title',$item->title,$item->ID ) . $args->link_after;
$item_output .= '';
$item_output .= $args->after;

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

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

wp_nav_menu(
array (
'menu'            => 'Menu',
        'walker'          => new Custom_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.

Articolo precedente

Articolo successivo

Discussione

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.