xlthlx

I am not an early bird or a night owl. I am some form of permanently exhausted pigeon


Personalizzare i menu di navigazione in WordPress


02 Gennaio 2012

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 (
  • ) $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 .= ''; $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 .= ''; $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 ); } } }
  • 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.

    Customize the navigation menus in WordPress


    02 January 2012

    New year, new difficulty.
    An interesting feature of WordPress are the navigation menus, which allow you to create a custom link set; with these menus you can give a lot of freedom of choice and modification of the links to those who use the site, as they can easily access the menus from the administration panel. Appearance – & gt; Menu and change them as you like.
    A possible difficulty occurs if in this kind of menu it is necessary to insert custom styles and / or scripts; the only way that seems possible to do this is to change the class that defines them.
    My specific problem consisted of: automatically inserting a specific class on the links and on the lists (it is possible to insert a specific class on the lists also from advanced menu settings, but must be done individually for each link), and insert a script about the event onclick (specifically, I needed to track an event in Analytics, to get the number of clicks on those links).
    Below is the code I used to solve the problem, which must be inserted in the theme’s functions.php file.

    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;

    // Retrieve the link text and use it for both the classes and the event
    $ my_name = sanitize_title ($ item-> title);

            $ class_names = join (”, apply_filters (‘nav_menu_css_class’, array_filter ($ classes), $ item, $ args));
    // Set the class for lists ()
    $ class_names = ‘class = “‘. esc_attr ($ class_names). ‘ mia_classe_lista_ ‘. $ my_name.’ “‘;

    $ id = apply_filters (‘nav_menu_item_id’, ‘menu-item-‘. $ item-> ID, $ item, $ args);
    $ id = strlen ($ id)? ‘id = “‘. esc_attr ($ id). ‘”‘: ”;

            $ output. = ”;

    $ 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;
    // Set the class for the links and insert an onclick event on the link
    $ item_output. = ”;
    $ 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);
    }
    }
     }

    Instead, this is the code to insert in the theme at the point where you want to show the modified menu:

    wp_nav_menu (
        array (
            ‘menu’ => ‘My Menu’,
            ‘walker’ => new My_New_Walker
        )
    );

    For completeness, this is the javascript function used to set _trackEvent in Analytics:

    function setEvent (category, action, label) {
      _gaq.push ([‘_ trackEvent’, category, action, label]);
    }

    I take this opportunity to wish everyone Happy New Year.

    Commenta

    le trecce di xlthlx

    22 April 2019

    Does our culture over-prize motherhood? Yes – and it has become worse, we’ve slid backwards. Motherhood is thought of as a choice but some people have that choice taken away. I’m always shocked when people ask: “Have you got children? Why not?” I’ll think: I don’t want to explain that to you. Or: “You’d make […]

    Utilizzando questo blog, accetti l'utilizzo dei cookie. Maggiori informazioni

    Questo sito utilizza i cookie per fornire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o cliccando su "Accetta" permetti il loro utilizzo.

    Chiudi