Aggiungere un’icona al menu del sito WordPress

13 Set Aggiungere un’icona al menu del sito WordPress

Un’altra risorsa utile nel mondo di WordPress potrebbe essere quella di aggiungere un’icona al menu del sito, nello specifico di questo articolo l’esempio sarà quello di aggiungere un’icona in una delle voci del menu, poiché se il tema scelto non possiede tale funzione, allora questa funzionalità diventa applicabile a tutte le altre voci.

La prima cosa da fare è naturalmente quella di procurarsi (o realizzare di vostro pugno) l’icona desiderata in PNG. In questo esempio fingeremo di voler aggiungere un’icona alla voce del menu “Documenti” e la rinomineremo in “freccia.png”. Una volta salvata e rinominata, lo step successivo sarà quello di caricarla nel sito tramite FTP nella cartella delle imagini del tema, quella chiamata appunto “images”.

Per visualizzare l’icona accanto ad una voce del menu, dobbiamo prima attribuire una classe a quella voce specifica, per farlo dobbiamo entrare in Aspetto > Menu del pannello di WordPress. Qui dobbiamo attivare l’attributo “class” che generalmente WordPress non mostra di default, per farlo basta cliccare sulla voce “Impostazioni schermata” che trovate in alto a destra della pagina del menu ed abilitare la voce “Classi CSS” come mostrato di seguito.

Questo andrà ad aggiungere automaticamente un nuovo campo ad ogni voce del menu di WordPress sottostante, difatti, se ora andiamo ad aprire la nostra voce Documenti (o un’altra qualsiasi), troveremo il campo “Classi CSS (opzionale)” che compileremo con la voce “freccia-icon” e poi salveremo.

Ora non resta che aggiungere un codice CSS che andrà a richiamare la classe appena salvata nel Menu, il codice è il seguente e deve essere aggiunto alla fine del file style.css del vostro tema:

.freccia-icon a{
padding-left: 25px !important;
background-image: url(images/freccia.png);
background-position: left;
background-repeat: no-repeat;
}