Come aggiungere icone Fontawesome alle voci di menu con campi personalizzati avanzati
Questo post ti mostrerà come utilizzare i campi personalizzati avanzati (ACF) per consentire l’aggiunta di icone al tuo menu. In questo esempio aggiungeremo un’icona Fontawesome, ma puoi modificare il codice in base alle tue esigenze. Potresti invece aggiungere un selettore di file per i file SVG o qualcos’altro.
Questa guida funzionerà con la versione gratuita di Advanced Custom Fields, ma assicurati di avere la versione 5.6 o successiva.
Aggiunta del gruppo e del campo ACF
Il primo passaggio consiste nell’aggiungere il campo stesso alle voci di menu. Questa guida aggiungerà un input di testo per digitare il nome della classe per l’icona Fontawesome, ma se desideri un’altra soluzione (ad esempio il selettore di file per il file SVG), modifica gli input del campo.
Assicurati che la posizione del tuo gruppo di campi personalizzati avanzati sia impostata su "Voce di menu". Puoi impostarla su "Tutto" oppure puoi specificare per posizioni di menu o menu specifici.
Se stai aggiungendo i tuoi campi e raggruppandoli per codice, imposta il parametro della posizione su ‘ nav_menu_item‘. Fare riferimento al mio riferimento completo per aggiungere campi ACF per codice per saperne di più.
Per quanto riguarda il campo stesso, aggiungeremo un semplice input di testo con il nome ‘ fontawesome_icon‘.
Oppure per codice, aggiungi il campo in questo modo:
Per renderlo più user-friendly è una buona idea aggiungere una descrizione con un collegamento alla panoramica delle icone Fontawesome disponibili. Sto aggiungendo il collegamento per mostrare solo le icone gratuite, non nessuna delle Pro, poiché questa è la libreria che ho nel mio tema.
Dopo aver salvato il campo in admin o nel codice, ora dovresti ottenere il campo aggiuntivo quando espandi una voce di menu:
Una nota sulle classi Fontawesome
Nei "vecchi tempi", prima di Fontawesome 5, fornire una classe Fontawesome poteva essere in qualche modo semplificato per l’utente. Per il carrello potresti semplicemente scrivere “carrello" e nel nostro codice potremmo aggiungere la classe ” fa fa-” e poi la classe data (risultando ” fa fa-shopping-cart“). Ma da Fontawesome 5 le lezioni sono state alquanto complicate.
La classe “globale” ” fa” è stata sostituita con categorie specifiche per il tipo di icona. Ad esempio i social media o i loghi sono nella categoria dei marchi e richiedono la classe " fab", le icone solide richiedono la classe " fas", mentre le icone normali richiedono " far" e così via. Questo è il motivo per cui ora dobbiamo richiedere all’utente del tema di digitare in entrambe le classi Fontawesome. Dovrebbe essere facile trovare la classe giusta in quanto questo è chiaramente mostrato in ogni icona sul sito di Fontawesome:
Ad esempio, devi inserire " fas fa-shopping-cart" nel nostro campo personalizzato su una voce di menu per l’icona del carrello.
Il passaggio successivo e finale è il rendering dell’icona nel menu se è impostata. Per fare ciò utilizziamo il filtro di WordPress [wp_nav_menu_objects](https://developer.wordpress.org/reference/hooks/wp_nav_menu_objects/). Questo filtro viene applicato per ogni menu in tutti i menu renderizzati subito prima di generare il relativo HTML, consentendoci di modificare l’output di testo, le classi e altro.
Il modo in cui desideri visualizzare l’icona dipende di nuovo da te. Vuoi sostituire il testo del link con l’icona o vuoi mostrare l’icona prima o dopo il link testuale? Seguiremo Fontawesome custom emettendo un <i>tag con la classe fornita.
Il modo in cui modifichiamo le voci di menu è scorrere le voci di menu utilizzando passa per riferimento (aggiungendo a &prima della variabile). Ciò significa che qualsiasi modifica che apportiamo all’elemento, verrà applicata all’oggetto degli elementi padre.
Per ogni articolo utilizziamo la funzione Advanced Custom Field get_field()per ottenere il valore del nostro campo, ‘ fontawesome_icon‘. Se è impostato, siamo a posto. L’esempio di codice sopra aggiungerà l’icona prima del testo. Se vuoi aggiungere l’icona dopo il testo, sostituisci la riga #6con:
Oppure, se desideri sostituire il testo con un’icona, senza mostrare alcun testo, sostituisci la riga #6con:
Ho aggiunto un titleattributo in modo che sia un po’ più informativo per l’utente frontend. Poiché il testo viene rimosso, a volte può essere fonte di confusione per l’utente finale a cosa serve la voce di menu. Ma l’ titleattributo assicura che l’utente riceva un suggerimento con il testo della voce di menu quando passa il mouse sopra l’icona. Questo è del tutto facoltativo, ovviamente.
Se si utilizza un campo di un tipo diverso, ad esempio un filepicker per i file SVG, è necessario regolare l’output di conseguenza.
E questo è tutto! Ora dovresti ottenere un’icona Fontawesome ovunque sia visualizzato il menu. Ma probabilmente devi aggiungere un po’ di stile. Ad esempio aggiungendo dello spazio tra l’icona e il testo.
Aggiunta di classi per uno styling più semplice
Puoi aggiungere classi personalizzate al <i>tag o aggiungere altro HTML se necessario.
Se devi aggiungere una classe alla voce di menu di wrapping (l’ lielemento) hai pieno accesso alle classi di voci di menu che verranno applicate nel filtro sopra. Aggiungi una classe di voci di menu personalizzata per le voci di menu con icone in questo modo:
Il menu dovrebbe essere emesso in questo modo:
