WordPress: come inserire icone alle voci menu con il plugin Menu Icons

WordPress

Nel tutorial di oggi vedremo come aggiungere icone nel menu del nostro sito WordPress in modo semplice e senza dover ricorrere ai linguaggi di programmazione. Questo sarà possibile grazie al plugin Menu Icons, scaricabile dal backend WordPress seguendo il percorso Plugin -> Aggiungi nuovo, e scrivendo Menu Icons nel campo di ricerca.

icons1

Il primo risultato della ricerca sarà Menu Icons by ThemeIsle. Per installarlo, fare clic su Installa ora e, una volta terminata l’installazione, potrà essere attivato facendo clic su Attiva.

Per poter iniziare a scegliere ed inserire le icone, seguiamo il percorso Aspetto -> Menu nella colonna di sinistra del backend.

icons2

Nella pagina Menu, adesso, possiamo vedere la voce Menu Icons Settings nella sezione Aggiungi voci di menu.

icons3

Facendo clic su Menu Icons Settings, si aprirà un menu con tre schede (a noi interessano solo le prime due). Nella prima, chiamata Global potremo selezionare più stili di icone o cambiare quello prescelto (Dashicons).

icons7

Nella seconda, Current Menu, avremo a disposizione una serie di opzioni che vedremo poi anche per le singole icone (mostra/nascondi icona, posizione, allineamento verticale, grandezza icone/immagini) più due che potremo modificare solo qui, ovvero: SVG Width (dimensione dell’immagine vettoriale caricata) e Image Size (formato delle immagini caricate).

icons8

Per inserire le icone, nella stessa pagina, dovremo innanzitutto aggiungere una voce di menu (nel caso dell’immagine in alto, spuntare la casella Pagina di esempio e fare clic su Aggiungi al menu). Nella sezione della pagina dedicata alla Struttura del menu, dovremo fare clic su Select accanto alla voce Icon.

icons4

Si aprirà così una finestra nella quale avremo a disposizione una vasta gamma di icone. Una volta scelta quella desiderata, basterà fare clic su Seleziona. Prima però, potremo apportare varie modifiche all’icona che abbiamo scelto.

Fra le opzioni possiamo vedere: Hide Label (visualizzare solo l’icona senza testo), Position (decidere se l’icona appare prima o dopo il titolo della sezione), Vertical Align (posizionare l’icona in linea, più in alto o più in basso rispetto al titolo) e Size (dimensione icona).

icons5

Dopo aver terminato le impostazioni, tornando nella schermata Menu, vedremo che l’icona sarà apparsa nella sezione Struttura del menu, ed accanto ad essa sarà disponibile il tasto rosso Remove.

icons6

Dopo aver assegnato le icone alle altre pagine (o sottopagine) che fanno parte del menu, potremo prenderne visione sul nostro sito WordPress.

icons9