WordPress: aggiungere e visualizzare la descrizione per le voci del menu di navigazione

Per poter aggiungere una descrizione a ciascuna voce del menu di navigazione di WordPress, la prima cosa da fare è andare nella sezione Menu, selezionare Opzioni schermo e mettere un segno di spunta sulla voce Descrizione. Fatto questo, potete aggiungere una descrizione a ciascuna voce del vostro menu di navigazione cliccando sul box corrispondente. Ma come visualizzare tale descrizione nel sito? Ecco come fare.

Nel file functions.php occorre creare una classe PHP che estende la classe di WordPress Walker_Nav_Menu. Nella nostra classe dovremo replicare esattamente la struttura della classe genitrice e aggiungere un elemento span con la nostra descrizione subito dopo il link di ciascuna voce, ossia una struttura come <li><a>Link</a><span class="nav-desc">Descrizione</span></li>:

class Description_Walker extends Walker_Nav_Menu
{
    /**
     * Output dell'elemento iniziale.
     *
     * @param  string $output Usata per aggiungere contenuto extra.
     * @param  object $item   Oggetto rappresentante ciascuna voce del menu.
     * @param  int $depth     Livello di annidamento delle voci.
     * @param  array $args    Stringhe aggiuntive.
     * @return void
     */
    function start_el(&$output, $item, $depth, $args)
    {
        $classes     = empty ( $item->classes ) ? array () : (array) $item->classes;

        $class_names = join(
            ' '
        ,   apply_filters(
                'nav_menu_css_class'
            ,   array_filter( $classes ), $item
            )
        );

        ! empty ( $class_names )
            and $class_names = ' class="'. esc_attr( $class_names ) . '"';

        $output .= "<li id='menu-item-$item->ID' $class_names>";

        $attributes  = '';

        ! empty( $item->attr_title )
            and $attributes .= ' title="'  . esc_attr( $item->attr_title ) .'"';
        ! empty( $item->target )
            and $attributes .= ' target="' . esc_attr( $item->target     ) .'"';
        ! empty( $item->xfn )
            and $attributes .= ' rel="'    . esc_attr( $item->xfn        ) .'"';
        ! empty( $item->url )
            and $attributes .= ' href="'   . esc_attr( $item->url        ) .'"';

        // Inserisce la descrizione solo per le voci di livello superiore
        // Potete cambiare il valore per $depth
        
        $description = ( ! empty ( $item->description ) and 0 == $depth )
            ? '<span class="nav-desc">' . esc_attr( $item->description ) . '</span>' : '';

        $title = apply_filters( 'the_title', $item->title, $item->ID );

        $item_output = $args->before
            . "<a $attributes>"
            . $args->link_before
            . $title
            . '</a> '
            . $args->link_after
            . $description
            . $args->after;

        // L'output non viene mostrato ma solo restituito dal metodo
        
        $output .= apply_filters(
            'walker_nav_menu_start_el'
        ,   $item_output
        ,   $item
        ,   $depth
        ,   $args
        );
    }
}

Quindi nel tema occorre aggiungere un'instanza della nostra classe alla funzione wp_nav_menu() tramite il parametro walker:

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

Una volta che si è compreso il funzionamento degli oggetti di tipo Walker di WordPress, tutto diventa più lineare. La cosa che vi posso consigliare è di studiare il codice originale della classe Walker_Nav_Menu che si trova in wp-includes/nav-menu-template.php. La documentazione ufficiale di WordPress di fatto si basa su questo file.