La possibilità di personalizzazione offerta da WordPress e la sua relativa semplicità sono tra le motivazioni principali che portano gli utenti ad utilizzare questo CMS ed a preferirlo agli altri.
In questo post voglio spiegarti come integrare a fianco delle voci del menu un’icona personalizzata, sia attraverso l’uso di un apposito plugin che senza.
Come consiglio sempre, se puoi evitare di utilizzare un plugin su WordPress, fallo! Quindi anche se troverai le indicazioni relative all’estensione, sappi che il secondo metodo è quello che preferisco: con poche righe di codice (che ti dirò dove inserire, non devi conoscere i linguaggi di programmazione) eviti di appesantire, seppur minimamente, la tua installazione di WordPress.
Plugin WordPress per inserire icone nel Menu
Sul repository ufficiale di WordPress ci sono almeno una decina di plugin sviluppati per fare questo lavoro, ossia affiancare un’icona alle voci del menu. Tra i tanti quello maggiormente utilizzato è Menu Icon, che può vantare più di 40.000 installazioni attive.
Una volta scaricato ed installato, questo plugin consentirà di inserire le icone, aggiungendo la voce icon alla configurazione del menu.
Ecco il Plugin in azione: sotto l’etichetta per la voce del menu è reso disponibile l’inserimento di un’icona personalizzata
Il plugin integra moltissime icone, per la precisione comprende le seguenti librerie:
- Dashicons
- Elusive Icons
- Font Awesome
- Foundation Icons
- Genericons
- Fontello
- Immagini (allegati)
- SVG (vettoriale)
Inserire Icone del Menu senza Plugin
Veniamo adesso alla soluzione che preferisco, che richiede pochi minuti e poche righe di codice, garantendo lo stesso risultato.
Nell’esempio che prenderemo in considerazione, aggiungeremo una sola libreria di icone, ossia Font Awesome, gratuita e ricca di ottime icone.
La prima cosa da fare è attivare Font Awesome, per farlo bisogna aggiungere delle righe di codice al plugin personalizzato per aggiungere funzioni al sito WordPress, in alternativa è possibile aggiungere lo stesso snippet all’interno del file functions.php del tema in utilizzo (preferibilmente tema child):
<?php function icone_menu_personalizzate() { wp_register_style( 'fontawesome', 'http:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' ); wp_enqueue_style( 'fontawesome'); } add_action( 'wp_enqueue_scripts', 'icone_menu_personalizzate' ); ?>In questo modo integriamo la libreria, che potrà essere sfruttata per inserire le nostre icone a fianco o al posto delle voci del menu.
Il secondo passaggio consiste nell’inserire la classe CSS alla voce del menu, operazione molto semplice. Basta andare, dalla dashboard, alla voce aspetto e successivamente menu, poi cliccando sulla voce alla quale vogliamo affiancare un’icona. A questo punto non devi far altro che inserire il nome dell’icona scelta nel campo Classi CSS (se non lo visualizzi, attivalo cliccando in alto su impostazioni schermata e spuntando la relativa casella). Trovi tutte le icone ed i loro nomi all’interno di: Icone Font Awesome.
Dopo aver salvato, l’icona sarà già visibile a fianco al Menu, tuttavia è molto probabile che siano necessarie delle correzioni, da fare via CSS, ecco un esempio di CSS da inserire:
.fa::before { float: left; margin-top: 10px; width: 20px; }Ovviamente dovrai sistemare i margini e le altre impostazioni affinché l’icona sia sistemata a dovere.