Tutorial WordPress affidabili, quando ne hai più bisogno.
Guida per principianti a WordPress
WPB Cup
25 Milioni+
Siti web che utilizzano i nostri plugin
16+
Anni di esperienza con WordPress
3000+
Tutorial WordPress di esperti

Come aggiungere icone dei social media ai menu di WordPress (modo semplice)

Aggiungere icone dei social media al menu di WordPress è un modo intelligente per promuovere i tuoi profili senza ingombrare il tuo sito. Questi piccoli loghi riconoscibili possono incoraggiare i visitatori a seguirti su varie piattaforme, aumentando potenzialmente la tua presenza online e il tuo coinvolgimento.

Abbiamo scoperto che con WordPress, il modo in cui aggiungi le icone dei social media al tuo menu dipende dall'uso di un tema classico o di un tema a blocchi. Ma abbiamo trovato modi efficaci per farlo per entrambi i tipi di temi.

In questo articolo, ti mostreremo come aggiungere icone dei social media ai menu di WordPress, utilizzando metodi che funzionano sia per i temi classici che per quelli a blocchi.

Come aggiungere icone dei social media ai menu di WordPress (modo semplice)

Perché aggiungere icone dei social media ai menu in WordPress?

Aggiungendo icone dei social media ai tuoi menu di WordPress, puoi spesso ottenere più clic, coinvolgimento e follower su tutti i tuoi profili social.

Le icone dei social media possono anche catturare l'attenzione del visitatore senza aggiungere testo extra ai tuoi menu. Questo ti permette di promuovere molti profili diversi in uno spazio ridotto.

Il processo per aggiungere icone dei social media è diverso da l'inserimento di icone immagine nel tuo menu di WordPress. Questo perché queste immagini devono essere collegate ai tuoi profili social e spesso richiedono uno stile speciale per mantenere il loro aspetto su diversi dispositivi e dimensioni dello schermo.

Inoltre, vorrai assicurarti che queste icone siano riconoscibili e di dimensioni uniformi, il che può essere difficile quando si utilizzano normali file immagine.

Detto questo, diamo un'occhiata a 2 modi semplici per principianti per aggiungere icone dei social media ai menu di WordPress.

Tutorial video

Iscriviti a WPBeginner

Se preferisci istruzioni scritte, continua a leggere. Usa semplicemente i collegamenti rapidi qui sotto per saltare direttamente al metodo che desideri utilizzare:

Il modo più semplice per aggiungere icone dei social media ai menu di WordPress è utilizzare Menu Image.

Quando crei le tue icone social, puoi utilizzare qualsiasi immagine che hai caricato nella libreria multimediale di WordPress.

Ad esempio, molte delle principali aziende di social media forniscono loghi che puoi utilizzare sul tuo sito web, come il toolkit del marchio Twitter. Puoi anche scaricare icone da librerie online come il sito web Font Awesome.

Menu Image si integra anche con il plugin Font Awesome. Questo ti permette di sfogliare e importare tutte le icone di Font Awesome direttamente dalla dashboard di WordPress, incluse le icone per tutti i principali social network.

Ti consigliamo di installare prima il plugin Font Awesome prima di continuare con il tutorial. Per istruzioni dettagliate su come configurare Font Awesome, consulta la nostra guida su come aggiungere facilmente font icona al tuo tema WordPress.

Indipendentemente da come intendi fornire le icone dei social media, dovrai 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, potresti voler dare un'occhiata alle dimensioni delle icone e modificarle se necessario. Per fare ciò, devi andare su Menu Image » Menu Image.

Come aggiungere icone per i social media a un menu di WordPress

Quando crei le tue icone social, puoi utilizzare una qualsiasi delle dimensioni delle immagini di WordPress predefinite, come miniatura, immagine o grande. Menu Image ti consente inoltre di scegliere tra tre dimensioni uniche che sono impostate di default su 24×24, 36×36 e 48×48 pixel.

Queste dimensioni dovrebbero funzionare bene per la maggior parte dei siti web WordPress, ma puoi modificarle digitando numeri diversi nei campi 1°, 2° o 3° Menu Image.

Ridimensionare le icone dei social media in WordPress

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

Per aggiungere icone a un menu di navigazione, vai su Aspetto » Menu. Per impostazione predefinita, WordPress mostrerà il menu primario del tuo sito.

Selezionare un menu di WordPress da modificare

Se desideri aggiungere icone dei social media a una posizione di menu diversa, come un menu fisso e fluttuante, apri il menu a discesa ‘Seleziona un menu da modificare’.

Puoi quindi scegliere un menu dall'elenco e fare clic su ‘Seleziona’.

Modificare un menu di navigazione WordPress

Per istruzioni dettagliate su come creare un nuovo menu, consulta la nostra guida su come aggiungere un menu di navigazione in WordPress.

Per iniziare, dovrai aggiungere ogni profilo social al tuo menu come un nuovo link.

Quando sei pronto, fai clic per espandere la sezione ‘Link personalizzati’ e quindi digita l'indirizzo della pagina dei social media che desideri utilizzare. Ad esempio, potresti inserire l'URL del tuo gruppo Facebook o del tuo canale YouTube.

Dovrai anche digitare del ‘Testo del link’. In un passaggio successivo, avrai la possibilità di modificare dove questo titolo appare nel menu o persino nasconderlo completamente.

Aggiungere testo di link a un menu di navigazione del sito web

Fatto ciò, fai clic su ‘Aggiungi al menu’.

Questo elemento apparirà ora nella colonna di destra.

Aggiungere collegamenti social a un sito web WordPress

Per aggiungere un'icona dei social media, passa il mouse sopra il nuovo elemento del menu.

Quindi, fai clic sul pulsante ‘Immagine del menu’ quando appare.

Aggiungere icone e immagini a un menu di WordPress

Nota: Se non vedi un pulsante ‘Immagine del menu’, fai clic su ‘Salva modifiche’. Ora, il pulsante ‘Immagine del menu’ dovrebbe apparire quando passi il mouse sopra qualsiasi elemento del menu.

Ora puoi decidere se utilizzare un'immagine dalla tua libreria multimediale di WordPress o un'icona fornita da Font Awesome.

Per utilizzare un'icona Font Awesome già pronta, fai clic sul pulsante di opzione accanto a ‘Icona’.

Aggiungere icone di Twitter, Facebook e altri social a WordPress

Quindi, seleziona ‘Fontawesome’.

Puoi quindi fare clic su ‘Brands’.

Aggiungere icone brandizzate a un menu di navigazione WordPress

Ora vedrai tutte le icone di marca, incluse le icone di tutti i principali social network, da Facebook a LinkedIn. Quando vedi l'immagine che vuoi usare, fai semplicemente clic su di essa.

Un'altra opzione è usare la tua icona dalla libreria multimediale di WordPress selezionando il pulsante radio 'Immagine'. Quindi, fai clic sul link 'Imposta immagine'.

Aggiungere qualsiasi file o immagine a un menu di navigazione di WordPress

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

Indipendentemente da dove ottieni l'icona, Menu Image mostrerà un'anteprima sulla destra.

Anteprima delle icone in un menu di navigazione di un sito web o blog

Ora puoi cambiare se il titolo del link appare sopra, sotto, prima o dopo l'icona dei social media utilizzando le impostazioni 'Posizione titolo'.

Molte icone dei social media sono immediatamente riconoscibili, quindi il titolo del link potrebbe non essere necessario. Se stai aggiungendo molte icone social a un menu di navigazione, i titoli possono persino rendere il tuo menu più disordinato e complicato.

Detto questo, potresti voler nascondere il titolo selezionando il pulsante radio 'Nascondi'.

Nascondere il testo del titolo del link del menu

Mentre apporti le modifiche, l'anteprima live si aggiornerà automaticamente, così potrai provare diverse impostazioni per vedere cosa funziona meglio.

Infine, se stai usando la tua immagine, puoi ridimensionare le icone dei social media utilizzando il menu a discesa 'Dimensione immagine'.

Ridimensionare le icone social su un menu di navigazione WordPress

Icone più grandi attireranno l'attenzione del visitatore, ma possono anche essere distraenti. Tenendo conto di ciò, potresti voler provare diverse dimensioni per vedere cosa funziona meglio sul tuo blog WordPress.

Quando sei soddisfatto di come è impostata l'icona dei social media, fai semplicemente clic su 'Salva modifiche'.

Pubblicare icone social su un sito web WordPress

Ripeti semplicemente questi passaggi per aggiungere altre icone al tuo menu WordPress.

Puoi persino aggiungere icone ad altri elementi importanti nel menu di navigazione e evidenziare queste voci di menu per attirare l'attenzione dei tuoi utenti.

Quando sei soddisfatto di come è impostato il menu, fai semplicemente clic su 'Salva menu'.

Pubblicazione di un menu con icone social

Ora puoi visitare il tuo sito web per vedere le nuove icone dei social media in azione.

Ecco come appariva sul nostro sito web demo.

Aggiungere icone social a un menu di WordPress

Metodo 2: Utilizzo dell'editor del sito completo (solo temi a blocchi)

WordPress ha un blocco integrato per le icone social che ti permette di creare un menu contenente icone di social media e poi visualizzarle in un bel layout.

Un esempio di menu di navigazione per i social media

Questo blocco include icone integrate per tutti i principali social network, quindi non è necessario installare un plugin come Font Awesome o caricare icone nella libreria multimediale.

Tuttavia, puoi aggiungere solo icone e collegamenti ai social media al blocco Icone Social, quindi non è flessibile come il plugin Menu Image.

Se stai utilizzando un tema a blocchi, puoi aggiungere un blocco Icone Social in qualsiasi punto del tuo sito web, come l'intestazione o il piè di pagina. In questo modo, puoi visualizzare un menu di social media su tutto il tuo sito web.

Per iniziare, vai su Aspetto » Editor nella dashboard di WordPress.

Selezionare l'Editor del sito completo dal pannello di amministrazione di WordPress

Da qui, vedrai alcuni menu per personalizzare il design del tuo tema a blocchi.

Per aggiungere icone dei social media al tuo menu, fai clic su 'Navigazione'.

Selezione della Navigazione nell'editing completo del sito di WordPress

Il passaggio successivo è fare clic sull'icona a forma di matita 'Modifica'.

Questo aprirà l'Editor Completo del Sito di WordPress.

Cliccare sul pulsante di modifica a matita per la Navigazione nell'Editor del Sito Completo di WordPress

Fatto ciò, sarai in grado di modificare e stilizzare il tuo menu di navigazione, che fa parte del tuo modello di intestazione di WordPress.

Per iniziare, fai clic sull'icona blu '+' nell'angolo in alto a sinistra. Nella barra di ricerca, devi digitare 'Icone Social'.

Aggiungere il blocco Icone Social a WordPress

Quando appare il blocco giusto, trascinalo sul modello del tema.

Per aggiungere la prima icona, fai semplicemente clic sull'icona '+' all'interno del blocco.

Aggiungere icone social a un template di WordPress

Nel popup che appare, digita l'icona che desideri aggiungere, come 'Twitter' o 'Facebook'.

Quando appare l'icona giusta, fai semplicemente clic per aggiungerla al tuo blog WordPress.

Aggiungere un'icona di Twitter a un menu di navigazione di WordPress

Ora, fai clic sulla nuova icona dei social media.

Questo apre una piccola barra dove puoi digitare l'URL a cui desideri collegarti, come la tua pagina Facebook.

Aggiungere URL a un menu di social media

Per aggiungere altre icone social a WordPress, fai semplicemente clic sull'icona '+' e ripeti lo stesso processo descritto sopra.

Dopo aver aggiunto tutte le piattaforme di social media, potresti voler personalizzare il blocco. Per farlo, fai clic per selezionare il blocco Icone Social e quindi fai clic sulla scheda ‘Blocco’.

Personalizzare un blocco social in WordPress

Puoi cambiare la giustificazione, l'allineamento e l'orientamento dell'icona utilizzando le impostazioni ‘Layout’.

Per impostazione predefinita, tutti i collegamenti ai social media si apriranno nella stessa scheda. Per mantenere i visitatori sul tuo sito web, potresti voler fare clic per abilitare l'interruttore ‘Apri collegamenti in una nuova scheda’.

Aprire i link del sito web in una nuova scheda del browser

Per impostazione predefinita, WordPress mostra solo le icone social, senza testo.

Se desideri mostrare testo accanto a ciascuna icona, fai clic per abilitare l'interruttore ‘Mostra etichette’.

Aggiungere etichette a un menu social

Successivamente, fai clic sulla scheda ‘Stili’.

Qui, puoi cambiare lo stile del pulsante facendo clic su ‘Predefinito’, ‘Solo loghi’ o ‘Forma a pillola’.

Aggiungere stili di pulsante a un menu di navigazione

Infine, puoi cambiare lo spazio tra le icone social utilizzando le impostazioni sotto ‘Spaziatura blocchi’.

Quando sei soddisfatto dell'aspetto del menu, fai clic sul pulsante ‘Salva’.

Pubblicare un blocco di icone social in WordPress

Ora, se visiti il tuo sito web, vedrai le icone dei social media in diretta.

Suggerimento bonus: incorpora feed social sul tuo sito WordPress

Aggiungere icone di social media ai menu di WordPress è un ottimo modo per ottenere più follower e interazioni sui tuoi diversi account. Tuttavia, ci sono molti altri modi per promuovere il tuo Twitter, Facebook e altri profili social.

Il modo migliore per ottenere più follower e interazioni è incorporare un feed social live sul tuo sito web. Ciò ti consente di mostrare gli ultimi post dai tuoi siti di social media, insieme a pulsanti che i visitatori possono utilizzare per interagire con i tuoi post o seguirti sui social media.

Il modo migliore per aggiungere feed di social media al tuo sito web è utilizzare Smash Balloon. È il miglior plugin per feed di social media per WordPress e ti consente di incorporare feed live da Twitter, Instagram, Facebook e altro.

Il plugin WordPress per i social media Smash Balloon

Per maggiori informazioni, consulta il nostro tutorial WordPress su come aggiungere feed di social media a WordPress.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere icone di social media ai menu di WordPress. Potresti anche voler consultare il nostro articolo su come creare un menu a tendina in WordPress e la nostra guida definitiva su come aggiungere una barra di ricerca al tuo menu di navigazione.

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

Dichiarazione: Il nostro contenuto è supportato dai lettori. Ciò significa che se fai clic su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come è finanziato WPBeginner, perché è importante e come puoi supportarci. Ecco il nostro processo editoriale.

Il Toolkit WordPress Definitivo

Ottieni l'accesso GRATUITO al nostro toolkit - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Interazioni del lettore

64 CommentsLeave a Reply

  1. Infatti gli utenti trovano più facile quando vedono un'icona social per condividere facilmente il post che ritengono utile ai loro amici. Inoltre, si può anche usare il plugin sassy social share, è anche ricco di funzionalità, grazie.

  2. Il plugin Menu Image è fantastico. Ho scritto un articolo a riguardo quando stavo affrontando esattamente lo stesso problema. Creare una cartella principale 'Contatti' nel menu e aggiungere un sottomenu con link a reti sociali insieme alle icone: funziona come per magia. In precedenza, usavo Font Awesome, ed era piuttosto impraticabile. Questa è una soluzione molto più elegante.

    • Ben fatto, Jirí. Grazie per la tua raccomandazione e per aver condiviso ciò che funziona per te. Non ho ancora provato a creare una cartella principale 'Contatti' nel menu con sottomenu collegati alle reti sociali. Proverò a implementare queste cose. grazie.

      • Ciao Mrteesurez,
        Sì, questo plugin è davvero utile. Mi ha fondamentalmente aiutato a migliorare il design grafico del menu. Dovresti assolutamente provarlo. Fai solo attenzione, perché il modo in cui ho impostato il menu e descritto nel mio precedente articolo non si è rivelato la soluzione migliore secondo Google. Avevo una voce principale "Contatti" con un sottomenu, ma nel mio caso, la voce "Contatti" stessa non era cliccabile. Conteneva solo un # invece di un link. Consiglio, se vuoi usare lo stesso approccio che ho usato io, di rendere tutte le voci cliccabili e che portino a una pagina. In questo modo, puoi evitare lo stesso errore che ho commesso e le critiche da Page Speed Insight sul fatto che la voce "Contatti" non è un link che porta da qualche parte.

        • Grazie per la preoccupazione! Apprezzo che tu condivida la tua esperienza con il plugin e la raccomandazione di Google. Terrò sicuramente il tuo consiglio di rendere tutte le voci del menu cliccabili per evitare problemi. La tua intuizione è davvero utile e la terrò a mente quando imposterò i miei menu.

  3. Dato che adoro i tuoi tutorial in articoli, questa volta ho guardato solo il video ed è stato fantastico! Breve, senza fronzoli e dritto al punto. Dovreste includere più tutorial video. Siete bravissimi e ora ho nuove icone nel mio menu (non solo per i miei social). Grazie mille!

  4. Articolo brillante!!! Mi hai fatto risparmiare tempo per creare menu social e aggiungerli nell'intestazione del tema NewsPack, grazie mille.

  5. Grazie per questo, sono riuscito ad aggiungere il logo di Goodreads al mio Menu Social e ho anche scelto la posizione del Menu Social. Tuttavia, quando visualizzo la pagina, viene visualizzata una lente d'ingrandimento accanto al nuovo logo di Goodreads, piuttosto che solo il logo da solo - perché è così e come posso rimuoverla?

    • Dovresti verificare con il supporto del tuo tema per vedere se questo è dovuto al design del tema stesso.

      Amministratore

    • Ti consigliamo innanzitutto di contattare il supporto del plugin affinché dia un'occhiata e si assicuri che non si tratti di un intoppo con il plugin.

      Amministratore

  6. Mi piace questo, ma le icone sono visualizzate in una colonna piuttosto che una accanto all'altra. Come posso risolvere questo problema?

    • Dipenderebbe dal tuo tema specifico, vorresti prima verificare con il supporto del tuo tema per assicurarti che non sia un problema con il modo in cui è stilizzato il loro menu che potrebbe causarlo.

      Amministratore

    • Al momento non abbiamo un set specifico che raccomanderemmo, ma ci sono molte opzioni diverse disponibili a seconda dello stile che stai cercando.

      Amministratore

  7. La configurazione di un link social sul mio sito non corrisponde alle immagini in questo articolo (forse i blocchi di personalizzazione della nostra organizzazione madre lo fanno).

  8. Ciao,

    Ancora una volta, un tutorial fantastico e utile. Sto solo affrontando un problema, però. Per l'ultimo passaggio, quando provo a selezionare l'opzione della posizione del menu, vedo solo l'opzione del menu principale. Come faccio a visualizzare anche l'opzione del menu social?

    • Il tuo tema specifico potrebbe non avere una posizione di menu specifica per i social. Se contatti il supporto del tuo tema, possono chiarire e assistere.

      Amministratore

  9. Sto cercando di capire come aggiungere account di social media al mio blog WordPress. Qualsiasi aiuto è apprezzato. Se ho saltato un passaggio precedente nell'impostazione del sito, mi scuso in anticipo per un commento stupido!

    • Potresti voler verificare con il supporto del tuo tema specifico per assicurarti che non ci sia CSS specifico del tema che stia modificando i tuoi colori.

      Amministratore

  10. Ho provato a nascondere il titolo dal menu. Sembra che quella funzione non abbia funzionato. il titolo è ancora visibile.

    • Dovresti verificare con il supporto del tuo tema specifico per vedere se questo sta sovrascrivendo le tue personalizzazioni

      Amministratore

  11. Ciao! Ho provato a usare questo metodo ma non ho trovato la parte “seleziona immagine”. Riesco solo a inserire l'URL e l'etichetta di navigazione... qualche idea?

    • Potresti voler assicurarti che il plugin sia stato completamente installato e attivato affinché l'immagine selezionata appaia

      Amministratore

  12. Grazie! Sembra una soluzione che funziona meglio rispetto a font awesome! È permesso usare un'immagine, ad esempio, di un'icona di Facebook presa da Google immagini per l'immagine che carico?

    • Dovresti assicurarti di controllare i diritti di utilizzo dell'immagine se ne prendi una da Google, ma se ti è permesso usarla, potresti caricarla sul tuo sito.

      Amministratore

  13. Ho seguito le istruzioni per aggiungere immagini social alla mia area footer e le immagini di Google & Yelp non sono visibili. Le ho fatte allo stesso modo di quelle mostrate. Questo non sembra essere correlato al browser. Suggerimenti?

    • Inizia contattando il supporto del plugin per assicurarti che non ci siano problemi noti con quelle icone o con il modo in cui viene aggiunto il menu

      Amministratore

  14. Le icone sono attualmente sul sito ma non funzionano nemmeno se viene aggiunto il link. Qual è il motivo?

    • Se gli URL sono strutturati correttamente, dovresti informare il supporto del plugin del tuo errore per verificare se l'errore riguarda il plugin stesso.

      Amministratore

  15. Ciao ragazzi,

    Ho installato il plugin. Ho aggiunto 3 account social e ho selezionato la casella di posizione "Main Nav". Il widget ha sostituito il menu principale esistente invece di essere aggiunto ad esso, e invece di mostrare le icone, vengono mostrati i titoli degli account social. Attendo con ansia i vantaggi di questo plugin. Spero che possiate aiutarmi.

    Grazie!

  16. Il mio tema attuale ha icone dei social media nell'intestazione principale in alto nella versione desktop, ma quando si passa alla versione mobile le icone dei social scompaiono. come posso farle rimanere e possibilmente anche i link dell'intestazione?

  17. Grazie per il consiglio, ora uso Simple Social Icons e mi piacciono molto. Hai qualche consiglio su quale plugin usare per visualizzare un pulsante "condividi su Twitter" o "condividi su Facebook" sopra e/o sotto un post, simile a quello che hai sotto il titolo di questo articolo?

  18. C'è un modo per aggiungere un attributo target, in modo che la pagina social si apra in una nuova scheda/finestra?

    • Sì, puoi facilmente aprire i link in una nuova finestra. Se non vedi l'opzione nei tuoi Collegamenti personalizzati per impostazione predefinita, dovrai fare clic sulla scheda "Opzioni schermo" in alto a destra dello schermo e assicurarti che l'opzione "Target del link" sia selezionata.

      Amministratore

  19. Salve,

    Posso ottenere il codice personalizzato per il widget in modo che assomigli a quello di WPbeginner?

    Mi piace l'aspetto del widget per le icone dei social media su WPBeginner, quindi posso ottenere il codice.

    Grazie.

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tieni presente che tutti i commenti sono moderati secondo la nostra politica sui commenti, e il tuo indirizzo email NON verrà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avviamo una conversazione personale e significativa.