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!
Elisa - conlavaligiaverde.com says
Buongiorno, ho bisogno di aiuto
Non capisco cosa sia successo nel mi blog, ma nei menù mi è sparito “icon: select” e con esso tutte le icone. Potete aiutarmi in qualche modo?
Andrea says
Ciao Elisa,
hai aggiornato wp e il plugin all’ultima versione? prova a disattivare e re-installare il plugin.
Marco says
Ciao
Oggi ho aggiornato WP all’ultima versione ed il plugin si è impallato e non funziona più…
Ho visto che non lo aggiornano da 7 mesi…come si può risolvere?! Ti è già capitato per caso?!
grazie mille
Marco
Andrea says
Ciao Marco,
Menu Icons è aggiornato e compatibile con wp 4.7
Prova a cancellarlo del tutto e poi re-installarlo (per sbloccare wordpress c’è questa guida http://www.wppratico.com/come-disattivare-tutti-i-plugin-di-wordpress-dopo-un-errore/)
Giusy says
ciao, mi aiuteresti ad inserire quelle icone che anche tu in questa pagina hai il alto a dx (tonde in black&white), cioè proprio le social icon. Nel mio wordpress, posso inserire tanti social, ma non instagram, in quanto non mi esce proprio nel menu a tendina. Come potrei fare per implementarlo?
Andrea says
Ciao, dipende dal template o dal plugin che stai utilizzando.
walter says
Ciao Andrea, ho scaricato menu icons ma non mi esce il suo menù sulla barra a sx e così non posso scegliere l’icona da inserire, io avrei bisogno di inserire un’icona personalizzata ne menu di destra, tipo al posto di inserire la scritta scuola digitale una sua immagine. mi puoi aiutare. grazie
Andrea says
Ciao,
dopo aver scaricato il plugin devi attivarlo!
Se non funziona devi controllare che non ci siano incompatibilità con il tema e i plugin installati. per fare ciò devi usare il template di default e disattivare momentaneamente tutti i plugin.
In ultima analisi contatti lo sviluppatore del plugin sul sito ufficiale di wordpress.
un saluto
Andrea
Marcello says
Molto bello il tuo blog. Una domanda, sto provando ad inserire le icone nel menu “main navigation” (che replico nello sticky). Non riesco a capire perchè nello sticky le icone le vedo mentre invece nel “main navigation” no….Suggerimenti?
Il sito è http://www.ottima.it
Andrea says
Prova a fare due menu separati, con icone diverse, solo per provare.
Forse c’è qualche interferenza dovuta al fatto che stai usando lo stesso menu su più posizioni.
Buona continuazione su WP Pratico 🙂
Luca says
Ciao, grazie del post molto interessante!
Si possono usare tutte quelle fantastiche icone anche in altri punti del sito? Tipo dentro ai post??
Andrea says
Ciao! Il plugin Menu Icons consente di inserire le icone soltanto nei menu pre-impostati del template in uso e anche nei menu custom da posizionare nei widget.
Prova a dare un occhio a questo plugin https://wordpress.org/plugins/font-awesome-shortcodes/