Il sistema di menu di WordPress ha una funzionalità integrata in cui è possibile aggiungere descrizioni agli elementi del menu. Tuttavia, questa funzionalità è nascosta per impostazione predefinita. Anche quando è abilitata, la loro visualizzazione non è supportata senza aggiungere del codice. La maggior parte dei temi non è progettata tenendo conto delle descrizioni degli elementi del menu. In questo articolo ti mostreremo come abilitare le descrizioni dei menu in WordPress e come aggiungere descrizioni ai menu nei tuoi temi WordPress.
Nota: questo tutorial richiede una buona comprensione di HTML, CSS e sviluppo di temi WordPress.
Quando e perché vorresti aggiungere descrizioni ai menu?
Alcuni utenti pensano che l'aggiunta di descrizioni ai menu aiuti con la SEO. Tuttavia, pensiamo che il motivo principale per cui vorresti usarle sia offrire una migliore esperienza utente sul tuo sito.
Le descrizioni possono essere utilizzate per dire ai visitatori cosa troveranno se cliccano su un elemento del menu. Una descrizione intrigante attirerà più utenti a cliccare sui menu.
Passaggio 1: Attiva le descrizioni dei menu
Vai su Aspetto » Menu. Fai clic sul pulsante Opzioni Schermata nell'angolo in alto a destra della pagina. Seleziona la casella Descrizioni.
Questo abiliterà il campo descrizioni nei tuoi elementi di menu. Come questo:
Ora puoi aggiungere descrizioni ai menu per gli elementi del tuo menu WordPress. Tuttavia, queste descrizioni non appariranno ancora nei tuoi temi. Per visualizzare le descrizioni dei menu, dovremo aggiungere del codice.
Passaggio 2: Aggiungi la classe walker:
La classe Walker estende la classe esistente in WordPress. Fondamentalmente aggiunge solo una riga di codice per visualizzare le descrizioni degli elementi del menu. Aggiungi questo codice nel file functions.php del tuo tema.
class Menu_With_Description extends Walker_Nav_Menu {
function start_el(&$output, $item, $depth, $args) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = ' class="' . esc_attr( $class_names ) . '"';
$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $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;
$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
Passaggio 3. Abilita Walker in wp_nav_menu
I temi di WordPress utilizzano la funzione wp_nav_menu() per visualizzare i menu. Abbiamo anche pubblicato un tutorial per principianti su come aggiungere menu di navigazione personalizzati nei temi WordPress. La maggior parte dei temi WordPress aggiunge i menu in header.php. Tuttavia, è possibile che il tuo tema abbia utilizzato un altro file di template per visualizzare i menu.
Quello che dobbiamo fare ora è trovare la funzione wp_nav_menu() nel tuo tema (molto probabilmente in header.php) e modificarla in questo modo.
<?php $walker = new Menu_With_Description; ?> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>
Nella prima riga impostiamo $walker per utilizzare la classe walker che abbiamo definito in precedenza in functions.php. Nella seconda riga di codice, l'unico argomento aggiuntivo che dobbiamo aggiungere ai nostri argomenti wp_nav_menu esistenti è 'walker' => $walker.
Passaggio 4. Stile delle descrizioni
La classe walker che abbiamo aggiunto in precedenza visualizza le descrizioni degli elementi in questa riga di codice:
$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
Il codice sopra aggiunge un'interruzione di riga all'elemento del menu aggiungendo un tag
<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.example.com/about/">About<br /><span class="sub">Who are we?</span></a></li>
Per cambiare il modo in cui le tue descrizioni appaiono sul tuo sito, puoi aggiungere CSS nel foglio di stile del tuo tema. Abbiamo testato questo su Twenty Twelve e abbiamo usato questo css.
.menu-item {
border-left: 1px solid #ccc;
}
span.sub {
font-style:italic;
font-size:small;
}
Speriamo che troverai utile questo articolo e che ti aiuterà a creare menu dall'aspetto accattivante con descrizioni dei menu nel tuo tema. Domande? Lasciale nei commenti qui sotto.
Risorse aggiuntive
Come stilizzare i menu di navigazione di WordPress
Come aggiungere elementi personalizzati a menu specifici di WordPress
Menus with Description Class di Bill Erickson
Matthew Blaxton
In PHP 8.0 e versioni successive questo genererà un errore critico.
Devi trovare questa riga:
function start_el( $output, $item, $depth, $args ) {
Modificare quella riga con la seguente dovrebbe far scomparire l'errore:
function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
Supporto WPBeginner
Grazie per averlo condiviso per chi usa PHP 8.
Amministratore
Norman
Ciao,
Come si può rendere cliccabile anche la descrizione?
Supporto WPBeginner
We cover that in step 4
Amministratore
kayvan A.Gilani
Per aggiungere descrizioni ai menu nei miei temi WordPress, ho seguito i passaggi 1 e 2 di questo blog ma non sono riuscito a seguire il passaggio 3 per procedere ed effettuare la modifica completa.
Supporto WPBeginner
Se non riesci a trovare la funzione nel tuo tema, ti consigliamo di contattare il supporto del tuo tema specifico che dovrebbe essere in grado di assisterti.
Amministratore
yiannis
Ciao,
Come disabilitare la descrizione delle categorie di prodotti in max mega menu?
Sono già andato su Mega Menu > Impostazioni generali e ho impostato le descrizioni delle voci di menu su disabilitate, ma il problema persiste.
Supporto WPBeginner
Dovresti contattare il supporto del plugin e loro saranno in grado di assisterti con l'impostazione che non funziona correttamente.
Amministratore
Sergio
Grazie mille!
Supporto WPBeginner
You’re welcome
Amministratore
Lanka
Grazie mille, mi hai salvato
JKLYN
Grazie. Mi hai fatto risparmiare tempo.
dan
Può funzionare con WP_Bootstrap_Navwalker?
dato che ho provato e ha rotto il mio sito...
kalpana
Grazie mille…. è stato molto utile per me…. mi hai salvato la giornata
Steven
come disattivare la descrizione nel layout mobile?
Anzani Zahrani
Ciao.. Aiuto per favore..
Come aggiungere una categoria titolo, senza usare la descrizione della categoria titolo?
Ido Schacham
Totalmente utile, grazie!
Rahman
Ottimo suggerimento ma nella descrizione del menu non supporta i tag html. qualcuno lo sa?
Grazie
Iryna
Ciao ragazzi,
Qualche idea su come permettere i tag html nella descrizione?
remove_filter(‘nav_menu_description’, ‘strip_tags’);
questo non funziona per me.
Damien Carbery
@Iryna: Puoi postare il tuo codice da qualche parte, ad esempio pastebin.com.
Dove chiami remove_filter() determinerà se funziona – deve essere chiamato dopo la chiamata add_filter().
Chiamarlo poco prima della chiamata wp_nav_menu() potrebbe funzionare.
Max
C'è un modo per evitare che la descrizione sia collegata?
Ashok
grazie…ha funzionato. ma nella descrizione del menu non supporta i tag html.
igorasas
Potrebbe essere già lì pronto per essere collegato? Come funzionerà questo hack con il tema "Twenty TwelveVersione: 1.5"
? E proprio come con il plugin wpml?
Ragazzo
Grazie per il suggerimento
Phong
Grazie, questo è stato davvero utile per copiare e incollare questo e avere un quadro rapido.
Chad
Ehi amico, ho aggiunto la classe walker a functions.php, ma non riesco a trovare wp_nav_menu nel tema genesis. Cosa mi manca? Non ho idea di cosa fare dopo?!?!
Ksenia
Spieghi molto bene – dettagliato e chiaro. 1 minuto e le descrizioni delle voci di menu sono a posto. Grazie!
Mary Anne
Grazie mille per questo tutorial. Mi è stato raccomandato e ha funzionato perfettamente per apportare le modifiche che volevo. Tuttavia, apportando queste modifiche, ho perso i miei sottomenu a discesa. Hai idea di cosa abbia influenzato questo nel cambiamento del codice?
Grazie per il tuo tempo e per il tutorial
Supporto WPBeginner
Sembra un problema CSS, ci dispiace non poter essere più specifici. Prova a usare gli strumenti per sviluppatori di Google Chrome per eseguirne il debug.
Amministratore
Paul Renault
Ho implementato le descrizioni dei menu e ha funzionato benissimo. Ora il mio cliente chiede un'interruzione di riga all'interno di una delle descrizioni. Ho provato a inserire un ritorno a capo e un tag
nel campo descrizione tramite l'amministratore. Non appare nel front-end. WP rimuove queste modifiche. C'è un modo per risolvere questo problema?
Supporto WPBeginner
Se il tuo cliente vuole solo spaziatura, puoi usare il CSS per quello.
Amministratore
Paul Renault
Il cliente vuole un'interruzione di riga. C'è un modo per inserire un tag
nella descrizione? Se ne inserisco uno ora viene rimosso.
Barry
Ottimo tutorial ragazzi, voglio solo sapere come implementarlo su un menu personalizzato visualizzato utilizzando il widget Menu personalizzato?
Oryan Consulting
Grazie! Lavoro con WordPress da anni e non ne avevo mai sentito parlare. Stavo cercando di rimuovere le descrizioni perché erano molto ridondanti sul sito su cui sto lavorando. Ho cercato ovunque per capire da dove provenissero.
Oh gioia!
sambassador
funziona!
ma per php 5.4 dovrai far corrispondere gli argomenti di wp walker per la funzione start_el:
function start_el( &$output, $object, $depth = 0, $args = array(), $current_object_id = 0 )
e sostituisci $item con $object.
Steve Covello
Sei un grande!! Ha funzionato perfettamente.
Kevin Gilbert
Perfetto. Era proprio quello che mi serviva per finire un sito. Ho avuto alcuni problemi con il CSS, ma alla fine ho capito e l'ho fatto funzionare. Grazie per i fantastici articoli.
Jon
Ottimo consiglio. Ha funzionato perfettamente!
Jedediah White
Ha funzionato perfettamente per me. Anche la funzione class è perfetta. Grazie mille!
Pankaj
Avevo bisogno di creare la stessa cosa ed ero completamente perso.
Stavo pensando di fare delle cose stupide per portare a termine questa cosa.
Meno male che ho trovato questo post e ho risparmiato tempo e stress!
Adoro semplicemente questo sito, ho imparato così tante cose.
Grazie mille per aver mostrato le cose più semplici qui.
Pankaj
Il tag span appare anche nei sottomenu.
non viene mostrato lì, ma occupa quello spazio che lo rende troppo strano.
esiste una soluzione alternativa per lo stesso problema??
DiTesco
Questo è davvero un ottimo tutorial e mi stavo chiedendo se funzionasse sulla tesi 1.8.5? In caso contrario, sarebbe fantastico se potessi fornirne uno. Ti aiuterò sicuramente a diffonderlo. Pollice in su!
svet
Ho seguito il tuo tutorial e ho aggiunto una descrizione al mio menu. Grazie! Tuttavia, quando sono in modalità mobile, il menu si converte in un menu a discesa e il titolo del menu e la descrizione sono collegati. Ad esempio, se la mia voce di menu è "about" e la descrizione "more about me", la versione mobile mostra "aboutmore about me". C'è un modo per risolvere questo problema?
David
Ho avuto lo stesso problema. Ecco cosa ho fatto.
Ho cambiato questo:
$description = ! empty( $item->description ) ? ‘<span>’.esc_attr( $item->description ).'</span>’ : ”;
In questo:
$description = ! empty( $item->description ) ? ‘<br /><span>’.esc_attr( $item->description ).'</span>’ : ”;
Non sono sicuro che sia la soluzione migliore, ma ha funzionato per me.
Garrett Hyder
Grazie ragazzi, mi sono imbattuto in quello che SVET e DAVID hanno fatto con il menu mobile.
Il codice sembra aver cambiato la mia modifica è stata semplicemente l'aggiunta in uno span con il separatore trattino e nella mia query desktop l'ho semplicemente soppressa poiché non era necessaria lì.
$item_output .= ‘ – ‘;
All'interno della mia query "Solo Desktop", imposta lo span su display none;
@media only screen and (min-width: 740px) {
header #submenu li span.dash { display:none; }
Spero che aiuti, ha risolto il mio problema in modo eccellente.
Nicola
Ottimo post - molto chiaro, esattamente quello di cui avevo bisogno e ha funzionato perfettamente. Grazie!
Samedi Amba
Grazie per il grande tutorial. Ho fatto bene i passaggi principali, come puoi vedere da
http://ueab.ac.ke/demo/index
Ero bloccato con lo styling - come riduco lo spazio tra l'etichetta del menu principale e la descrizione? Il tuo aiuto è molto apprezzato.
Staff editoriale
Ha a che fare con l'altezza della riga della tua classe .menu a del tuo tema. Se la riduci, lo spazio si ridurrà da solo.
Amministratore
Chris Rouse
Ottimo post. Ho provato a approfondire questo argomento prima, ma le istruzioni precedenti che ho trovato non erano così facili da seguire. Sono riuscito a inserire il codice functions.php, a capire come cambiare la classe walker nel mio file header (diverso per il tema che uso, ma semplice) e a far funzionare tutto in circa 15 minuti dall'inizio alla fine.
Un elemento che potresti voler aggiungere è come includere il bordo destro sull'ultimo elemento del menu usando la proprietà :last-child.
.menu-item:last-child { color: #ccc; }
Damien Carbery
Invece di estendere Walker_Nav_Menu sarebbe bello (e più facile) se fosse fornito un filtro, ad esempio:
Se il codice principale avesse:
$item_output .= apply_filters( ‘walker_nav_menu_description’, $item->description);
Quindi la funzione di filtro personalizzata avrebbe solo:
return ” . $description . ”;
Cathy Earle
Ottime informazioni... inizierò ad aggiungerle ai miei siti. Grazie!