Come aggiungere descrizioni dei menu nei temi di WordPress

Il sistema di menu di WordPress ha una funzione integrata in cui è possibile aggiungere descrizioni con voci di menu. Tuttavia, questa funzione è nascosta per impostazione predefinita. Anche se abilitato, la loro visualizzazione non è supportata senza aggiungere del codice. La maggior parte dei temi non è stata progettata avendo in mente le descrizioni dei menu. In questo articolo ti mostreremo come abilitare le descrizioni dei menu in WordPress e come aggiungere descrizioni dei menu nei tuoi temi WordPress.

Nota: questo tutorial richiede una buona comprensione dello sviluppo di temi HTML, CSS e WordPress.

Quando e perché si desidera aggiungere le descrizioni dei menu?

Alcuni utenti pensano che l'aggiunta di una descrizione del menu aiuterà il SEO. Tuttavia, pensiamo che il motivo principale per cui vorrai usarli è offrire un'esperienza utente migliore sul tuo sito.

Le descrizioni possono essere utilizzate per dire ai visitatori cosa troveranno se hanno fatto clic su una voce di menu. Una descrizione intrigante attirerà più utenti a fare clic sui menu.

Passaggio 1: attiva le descrizioni dei menu

Vai a Aspetto »Menu. Clicca su Opzioni dello schermo pulsante nell'angolo in alto a destra della pagina. Controlla il descrizioni scatola.

Questo abiliterà il campo delle descrizioni nelle voci del tuo menu. Come questo:

Ora puoi aggiungere le descrizioni dei menu agli elementi nel tuo menu WordPress. Tuttavia, queste descrizioni non saranno ancora presenti 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. In pratica, aggiunge semplicemente una riga di codice per visualizzare le descrizioni delle voci di menu. Aggiungi questo codice nel tuo tema functions.php file.

 la classe Menu_With_Description estende 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 = ''; $ output. = $ indent. ''; $ attributi =! vuoto ($ item-> attr_title)? '': "; $ attributes. =! empty ($ item-> target)? 'target ="'. esc_attr ($ item-> target). '"':"; $ attributi. =! vuoto ($ item-> xfn)? 'rel = "'. esc_attr ($ item-> xfn). '"': "; $ attributes. =! empty ($ item-> url)? 'href ="'. esc_attr ($ item-> url). '"':"; $ item_output = $ args-> prima; $ item_output. = ''; $ item_output. = $ args-> link_before. apply_filters ('the_title', $ item-> title, $ item-> ID). $ Args-> link_after; $ item_output. = '
'. $ item-> description. ''; $ item_output. = ''; $ 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 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 di WordPress. La maggior parte dei temi WordPress aggiunge menu header.php modello. Tuttavia, è possibile che il tema abbia utilizzato qualche altro file modello per visualizzare i menu.

Quello che dobbiamo fare ora è trovare wp_nav_menu () funzione nel tuo tema (molto probabilmente in header.php) e cambiala in questo modo.

   'primary', 'menu_class' => 'nav-menu', 'walker' => $ walker)); ?> 

Nella prima riga impostiamo $ walker utilizzare la classe Walker definita 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. Disegnare le descrizioni

La classe Walker che abbiamo aggiunto in precedenza visualizza le descrizioni degli articoli su questa riga di codice:

 $ item_output. = '
'. $ item-> description. ''; 

Il codice precedente aggiunge un'interruzione di riga alla voce di menu aggiungendo a
tag e quindi avvolge le descrizioni in un intervallo con sotto classe. Come questo:

 
Di
Chi siamo noi?
 

Per modificare il modo in cui le descrizioni vengono visualizzate sul tuo sito, puoi aggiungere CSS nel foglio di stile del tema. Lo stavamo testando 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 questo articolo utile e ti aiuterà a creare menu interessanti con le descrizioni dei menu nel tuo tema. Domande? Lasciali nei commenti qui sotto.

Risorse addizionali

Come stile i menu di navigazione di WordPress

Come aggiungere elementi personalizzati a specifici menu WordPress

I menu di Bill Erickson con la classe descrittiva