Aggiungere icone al menu WordPress

La tendenza oggi è quella di creare siti minimal, semplici e con grafica ridotta all’essenziale. Io sono assolutamente favorevole: i nostri siti devono essere facili da navigare ANCHE da mobile (ricordo che ormai il 50% delle visite avviene via mobile).

A volte però, per dare un tocco di stile, basta veramente poco. Le icone posso essere molto utili in questi casi e possono migliorare l’usabilità del sito.
Inserirle nel menu principale, ad esempio, può dare una svolta all’header ovvero in una delle parti più in vista (e quindi più importante).

Ma come possiamo aggiungere delle belle icone ai menu creati in WordPress?
Beh su alcuni template professionali sono già integrate una serie di icone pronte per essere usate. Per tutto il resto… ci sono i plugin! 😀

 

Menu icon per aggiungere tutte le icone che vuoi

Devo riformulare: “c’è il plugin” perchè Menu icons è potentissimo, completo e funziona benissimo, per questo lo stra-consiglio.

Dopo averlo installato con la solita procedura, possiamo andare direttamente nella sezione Aspetto > Menu per notare che è stato aggiunto un box.

Con esso possiamo selezionare le gallery di icone da importare. Oltre quella pre-installata su wordpress (Dashicons) possiamo trovarne altre, come la super fortawesome che io adoro.

È importante selezionare soltanto i “pacchetti icone” che servono per non caricare tutto indistintamente, così teniamo il sito veloce. Cioè se utilizziamo soltanto le icone Font-Awesome, disabilitiamo le altre.

Ma passiamo all’inserimento pratico di un’icona. Aprendo la scheda di una voce del menu clicchiamo su Icon: Select in fondo.

Si aprirà un popup dal quale andremo a selezionare l’icona che ci serve.

A sinistra possiamo scegliere la raccolta e al centro troviamo tutte le icone. Il plugin è fantastico e permette addirittura di effettuare una ricerca per keyoword.

Una volta selezionata l’icona che più ci piace, possiamo trovare a destra le impostazioni per:
– nascondere l’etichetta (e quindi mostrare solo l’icona senza testo)
– posizione (o prima o dopo il testo)
– allineamento verticale
– grandezza icona

E come se non bastasse… se propio non troviamo l’icona che ci piace tra le 8 milioni presenti, possiamo caricare un’immagine personalizzata!!

Attenzione però, la riproduzione della Monnalisa potrebbe non andare benissimo come icona: se optiamo per questa strada utilizziamo sempre delle immagini molto semplici, belle anche se ridimensionate molto piccole, formato png, senza sfondo e possibilmente monocromatiche.

---

Qualche idea…

Ecco un esempio di un menu che ho creato con i link ai social che utilizzo.
per fare ciò ho creato un nuovo menu, chiamandolo Social, ho inserito dei link personalizzati che puntano ai vari profili e infine, per ogni link, ho selezionato la rispettiva icona.

Il menu ovviamente va posizionato in sidebar usando il widget “menu personalizzato”.

 

Io ho utilizzato fontawesome ma nulla vieta di utilizzare delle icone colorate, scaricate da siti come iconfinder.

In alternativa, per creare un menu con i link social e le icone relative, esiste un altro plugin specifico: Menu social icons.

Ma preferisco di molto il Menu Icons, veramente semplice da usare ma allo stesso tempo potentissimo.

Se l’hai già utilizzato, non trovi sia un plugin perfetto per lo scopo? Se non l’hai ancora fatto che ne pensi di abbellire il sito con delle icone?

Scrivilo nei commenti!