Come aggiungere icone immagine ai menu di navigazione di WordPress

Nel corso degli anni, abbiamo aiutato migliaia di lettori a personalizzare i loro siti WordPress per migliorare sia l'esperienza utente che l'attrattiva visiva. Dalla nostra esperienza pratica con il web design, abbiamo imparato che l'aggiunta di icone immagine ai menu di navigazione di WordPress può migliorare drasticamente l'usabilità del tuo sito.

Questo perché le icone immagine possono fornire indizi visivi intuitivi ai tuoi visitatori, rendendo più facile per loro navigare nel tuo sito. In questo modo, l'interfaccia del tuo sito web è più interattiva e coinvolgente, il che aiuta a ridurre il tasso di rimbalzo.

In questo articolo, ti mostreremo come aggiungere facilmente icone immagine ai menu di navigazione in WordPress. 

Perché aggiungere icone immagine ai menu di navigazione in WordPress?

Di solito, i menu di navigazione di WordPress sono collegamenti di testo semplice. Questi collegamenti funzionano bene per la maggior parte dei siti web, ma non sono sempre interessanti o coinvolgenti. 

Aggiungendo icone immagine al menu di navigazione, puoi incoraggiare i visitatori a prestare attenzione al menu ed esplorare ulteriormente il tuo sito.

Se il tuo menu ha molte opzioni diverse, le icone immagine possono rendere più facile per i visitatori scansionare il contenuto e trovare ciò che stanno cercando. Questo può essere un modo semplice per aumentare le visualizzazioni di pagina e ridurre il tasso di rimbalzo in WordPress. 

Potresti persino usare un'icona immagine per evidenziare la voce di menu più importante, come il link al Checkout nel tuo marketplace online. 

Evidenziando una call to action nel menu, puoi spesso ottenere più iscrizioni, vendite, membri e altre conversioni.

Detto questo, vediamo come puoi aggiungere icone immagine ai tuoi menu di navigazione WordPress. Usa semplicemente i collegamenti rapidi qui sotto per passare direttamente al metodo che desideri utilizzare:

• Metodo 1: Aggiungere icone immagine ai menu di navigazione utilizzando un plugin (veloce e facile)
• Metodo 2: Aggiungere icone ai menu di WordPress utilizzando il codice (più personalizzabile)
• Bonus: Aggiungere icone dei social media ai menu di WordPress

Metodo 1: Aggiungere icone immagine ai menu di navigazione utilizzando un plugin (veloce e facile)

Il modo più semplice per aggiungere icone ai tuoi menu WordPress è utilizzare Menu Image. Questo plugin viene fornito con icone dashIcon che puoi aggiungere con pochi clic.

Se hai configurato Font Awesome sul tuo sito web, puoi facilmente aggiungere queste icone al tuo menu di navigazione utilizzando Menu Image. Per maggiori informazioni su come installare Font Awesome, consulta la nostra guida su come aggiungere facilmente font icona al tuo tema WordPress.

Un'altra opzione è utilizzare immagini o icone dalla libreria multimediale di WordPress.

La prima cosa da fare è installare e attivare il plugin Menu Image. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, fai clic su Menu Image nella bacheca di WordPress. In questa schermata, puoi scegliere se ricevere notifiche di sicurezza e funzionalità o fare clic sul pulsante ‘Salta’.

Questo ti porterà a una schermata in cui puoi configurare le impostazioni del plugin. Per iniziare, vedrai tutte le diverse dimensioni che puoi utilizzare per le icone delle immagini.

Se hai intenzione di utilizzare icone da Font Awesome o dashicons, Menu Image le ridimensionerà automaticamente. Tuttavia, se utilizzi immagini dalla libreria multimediale, dovrai selezionare manualmente la dimensione.

Il plugin supporta le dimensioni predefinite delle immagini di WordPress, come miniature, immagini e grandi. Aggiunge anche tre dimensioni uniche che sono impostate di default su 24x24, 36x36 e 48x48 pixel.

Queste impostazioni dovrebbero funzionare bene per la maggior parte dei siti web, ma puoi rendere le icone più grandi o più piccole digitando numeri diversi per la prima, seconda o terza dimensione dell'immagine del menu.

Quando aggiungi icone al tuo menu, vedrai un campo 'immagine al passaggio del mouse' per impostazione predefinita. Questo ti permette di mostrare un'icona diversa quando il visitatore passa il mouse su quella voce di menu.

Tieni presente che questa impostazione è disponibile solo quando utilizzi le tue immagini. Non devi preoccuparti della funzione 'immagine al passaggio del mouse' se prevedi di utilizzare icone dashIcons o Font Awesome.

Mostrare un'icona diversa può aiutare i visitatori a vedere dove si trovano nel menu di navigazione. Questo è particolarmente utile se il tuo menu ha molte voci diverse. Ad esempio, potresti utilizzare colori o dimensioni di icone diverse per evidenziare la voce attualmente selezionata.

Se desideri creare diversi effetti al passaggio del mouse, assicurati di selezionare 'Abilita il campo immagine al passaggio del mouse'.

Fatto ciò, fai clic su 'Salva modifiche' per memorizzare le tue impostazioni.

Per aggiungere icone al menu di navigazione, vai alla pagina Aspetto » Menu. Per impostazione predefinita, WordPress mostrerà il menu principale del tuo sito.

Se desideri modificare un menu diverso, apri il menu a discesa 'Seleziona un menu da modificare' e scegli un menu dall'elenco. Dopodiché, fai clic su 'Seleziona'.

Ora, passa il mouse sulla prima voce di menu a cui desideri aggiungere un'icona. Quando appare 'Immagine del menu', fai clic su di essa.

Ora puoi decidere se utilizzare la tua immagine o scegliere un'icona già pronta, come un'icona Font Awesome.

Per utilizzare un'icona già pronta, fai clic sul pulsante di opzione accanto a 'Icone'.

Puoi quindi fare clic per selezionare qualsiasi icona dashicon o Font Awesome.

Se desideri utilizzare la tua immagine, seleziona il pulsante di opzione accanto a ‘Immagine’ e fai clic sul collegamento ‘Imposta immagine’.

Ora puoi scegliere un'immagine dalla libreria multimediale di WordPress o caricare un nuovo file dal tuo computer.

Se hai selezionato ‘Abilita l’immagine al passaggio del mouse’ nelle impostazioni del plugin, dovrai anche fare clic su ‘Imposta immagine al passaggio del mouse’.

Ora, scegli un’immagine da mostrare quando l’utente passa il mouse su questa voce di menu.

A volte, potresti voler ignorare questa impostazione e mostrare la stessa icona indipendentemente da tutto. Per fare ciò, fai clic su ‘Imposta immagine al passaggio del mouse’ e quindi scegli esattamente la stessa icona.

Se non selezioni un’immagine, l’icona scomparirà completamente quando il visitatore ci passerà sopra il mouse.

Successivamente, apri il menu a discesa Dimensione immagine e scegli una dimensione dall’elenco.

Utilizzare la stessa dimensione per tutte le icone tende a rendere il menu più organizzato. Tuttavia, a volte è una buona idea utilizzare un’icona più grande per la voce più importante.

Ad esempio, se hai creato un negozio online utilizzando un plugin come WooCommerce, potresti utilizzare un’icona più grande per ‘Checkout’ in modo che risalti.

Quando sei soddisfatto dell’icona, è ora di esaminare l’etichetta della voce di menu. Per impostazione predefinita, il plugin mostra l’etichetta del titolo dopo l’icona.

Per modificare ciò, seleziona uno qualsiasi dei pulsanti di opzione nella sezione ‘Posizione titolo’.

Un’altra opzione è rimuovere completamente l’etichetta di navigazione e creare un menu composto solo da icone. Se il tuo menu ha molte voci, questo può renderlo meno disordinato.

Tuttavia, dovresti nascondere le etichette solo se è ovvio cosa significa ogni icona. Se non è chiaro, i visitatori avranno difficoltà a navigare nel tuo blog o sito web WordPress.

Per procedere e nascondere l’etichetta, seleziona il pulsante di opzione accanto a ‘Nessuno’.

Quando sei soddisfatto di come è impostata la voce di menu, fai clic su ‘Salva modifiche’.

Per aggiungere un’icona ad altre voci di menu, segui semplicemente lo stesso processo descritto sopra.

Una volta terminato, non dimenticare di fare clic sul pulsante ‘Salva menu’. Ora, se visiti il tuo sito web WordPress, vedrai il menu di navigazione aggiornato in tempo reale.

Metodo 2: Aggiungere icone ai menu di WordPress utilizzando il codice (più personalizzabile)

Puoi anche aggiungere icone immagine ai tuoi menu di navigazione utilizzando il CSS.

In questo modo, puoi controllare esattamente dove appaiono le icone nei tuoi menu. Puoi anche usare qualsiasi immagine come icona, quindi è un ottimo modo per aggiungere il tuo marchio.

Prima di iniziare, carica tutti i file immagine che desideri utilizzare come icone. Possono essere foto stock, immagini royalty-free trovate online o grafiche personalizzate create con un'app come Canva.

Dopo aver aggiunto ogni immagine alla libreria multimediale di WordPress, assicurati di copiarne l'URL e incollarlo in un editor di testo come Blocco note. Avrai bisogno di tutti questi collegamenti nel passaggio successivo.

Per trovare l'URL di un'immagine, selezionala semplicemente nella libreria multimediale di WordPress e quindi guarda il campo 'URL del file'.

Per istruzioni più dettagliate, consulta la nostra guida su come ottenere l'URL delle immagini caricate in WordPress.

Dopodiché, devi visitare la pagina Aspetto » Menu dalla dashboard di WordPress.

Successivamente, apri il menu a discesa 'Seleziona un menu da modificare' e scegli il menu a cui desideri aggiungere le icone delle immagini.

Dopodiché, fai clic su 'Seleziona'.

Successivamente, devi abilitare le classi CSS personalizzate facendo clic su 'Opzioni schermo'.

Nel pannello che appare, seleziona la casella accanto a 'Classi CSS'.

Fatto ciò, puoi aggiungere classi CSS personalizzate a qualsiasi elemento del menu di navigazione. È così che collegherai ogni elemento del menu a un'immagine nella libreria multimediale di WordPress.

Puoi chiamare queste classi come preferisci, ma è una buona idea usare qualcosa che ti aiuti a identificare l'elemento del menu.

Per iniziare, fai semplicemente clic sul primo elemento a cui desideri aggiungere un'icona immagine. Nel campo 'Classi CSS (facoltativo)', digita il nome della classe che desideri utilizzare.

Utilizzerai queste classi CSS personalizzate nel passaggio successivo, quindi prendine nota nel tuo Blocco note o in un'app simile.

Segui semplicemente lo stesso processo per aggiungere una classe separata a tutti i tuoi elementi del menu. Dopodiché, fai clic su 'Salva menu' per memorizzare le tue impostazioni.

Ora sei pronto per aggiungere icone immagine ai tuoi menu di navigazione di WordPress usando il CSS.

Spesso, i tutorial di WordPress ti diranno di aggiungere snippet di codice ai file del tuo tema WordPress. Tuttavia, farlo potrebbe causare errori comuni di WordPress e non è molto adatto ai principianti.

Ecco perché consigliamo WPCode.

È il miglior plugin per snippet di codice WordPress utilizzato da oltre 1 milione di siti web e ti consente di aggiungere codice personalizzato senza modificare il file functions.php del tuo tema.

La prima cosa che devi fare è installare e attivare il plugin WPCode gratuito. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, vai su Snippet di codice » Aggiungi snippet.

Questo ti porterà alla pagina ‘Aggiungi Snippet’, dove potrai vedere la libreria di snippet pronti all’uso di WPCode. Questi includono snippet che ti permettono di migliorare la sicurezza di WordPress disabilitando XML-RPC, caricando tipi di file che WordPress non supporta di default, e altro ancora.

Semplicemente passa il mouse sopra ‘Aggiungi il tuo codice personalizzato’ e poi clicca su ‘Usa snippet’ quando appare.

Per iniziare, digita un titolo per lo snippet di codice personalizzato. Può essere qualsiasi cosa che ti aiuti a identificare lo snippet nella dashboard di WordPress.

Fatto ciò, apri il menu a tendina ‘Tipo di codice’ e seleziona ‘Snippet CSS’.

Nell’editor di codice, dovrai aggiungere del codice per ogni icona che desideri mostrare.

Per aiutarti, abbiamo creato uno snippet di esempio qui sotto. Puoi procedere e cambiare ‘.carticon’ con la classe CSS personalizzata che hai creato nel passaggio precedente. Dovrai anche sostituire l’URL con un link all’immagine nella tua libreria multimediale di WordPress:

.carticon { background-image: url('http://localhost:10013/wp-content/my-media/cartcheckout.png'); background-repeat: no-repeat; background-position: left; padding-left: 5px; } 

Dovrai adattare lo snippet sopra per ogni singolo elemento del menu che hai creato in precedenza.

Quando sei soddisfatto del tuo codice, scorri fino alla sezione ‘Inserimento’. WPCode può aggiungere codice in diverse posizioni, come dopo ogni post, solo frontend o solo admin.

Per utilizzare il codice CSS personalizzato su tutto il tuo blog o sito web WordPress, fai clic su ‘Inserimento automatico’ se non è già selezionato.

Quindi, apri il menu a discesa ‘Posizione’ e scegli ‘Intestazione sito’.

Dopodiché, sei pronto per scorrere fino in cima allo schermo e fare clic sull’interruttore ‘Inattivo’ in modo che cambi in ‘Attivo’.

Infine, fai clic su ‘Salva snippet’ per rendere live il CSS personalizzato.

Ora, se visiti il tuo sito web, vedrai tutte le icone delle immagini nel tuo menu di navigazione.

A seconda del tuo tema WordPress, potresti dover modificare il CSS in modo che mostri le icone delle immagini esattamente nel punto giusto. In tal caso, vai su Snippet di codice » Snippet di codice nella dashboard di WordPress.

Quindi, passa semplicemente il mouse sullo snippet e fai clic sul link ‘Modifica’ quando appare.

Questo apre l’editor di codice, pronto per apportare alcune modifiche.

Bonus: Aggiungere icone dei social media ai menu di WordPress

Oltre alle icone del menu, puoi anche aggiungere icone di social media al tuo menu di navigazione WordPress. Farlo aiuterà a promuovere i tuoi profili social in modo visivamente accattivante senza occupare troppo spazio sul tuo sito.

Per fare ciò, puoi utilizzare il plugin Menu Image. Dopo l’attivazione, visita semplicemente la pagina Aspetto » Menu dalla dashboard di WordPress ed espandi la scheda ‘Link personalizzati’ nella colonna di sinistra.

Quindi, aggiungi l’URL del tuo ID social media e digita il nome della piattaforma. Successivamente, fai clic sul pulsante ‘Aggiungi al menu’.

Una volta che il profilo social è stato aggiunto come elemento del menu, verrà visualizzato sul lato destro dello schermo.

Qui, devi espandere nuovamente la scheda degli elementi e fare clic sul pulsante ‘Immagine menu’.

Questo aprirà un nuovo prompt sullo schermo dove puoi fare clic sul link ‘Imposta immagine’ per caricare un'icona dei social media dalla tua libreria multimediale.

Se desideri aggiungere un'icona predefinita, puoi selezionare l'opzione ‘Icona’ e aggiungere la tua icona dei social media da FontAwesome.

Infine, fai clic sul pulsante 'Salva modifiche' per memorizzare le tue impostazioni.

Ora hai aggiunto con successo un'icona dei social media al tuo menu di navigazione. Per ulteriori informazioni, consulta il nostro tutorial su come aggiungere icone dei social media nei menu di WordPress.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere icone immagine al tuo menu di navigazione di WordPress. Puoi anche consultare la nostra guida su come aggiungere logica condizionale ai menu in WordPress e come creare un menu di navigazione fisso e fluttuante in WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.