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

Pubblicato: 2023-07-05

Stai cercando un modo per aggiungere le icone dei social media ai menu di WordPress?

I loghi di siti come Facebook e Twitter sono immediatamente riconosciuti da persone di tutto il mondo. Aggiungendo queste icone ai tuoi menu, puoi promuovere i tuoi profili sui social media in un modo accattivante che non occupa molto spazio.

In questo articolo, ti mostreremo come aggiungere le icone dei social media ai menu di navigazione di WordPress.

How to add social media icons to WordPress menus (easy way)

Perché dovresti aggiungere le icone dei social media ai menu?

Aggiungendo icone di social media al tuo sito web, puoi incoraggiare le persone a visitare i tuoi diversi profili di social network. Questo può farti ottenere più follower e coinvolgimento su Facebook, Twitter, Instagram e altro ancora.

Un'opzione è aggiungere le icone dei social media alla barra laterale di WordPress o un'area simile predisposta per i widget. Tuttavia, quando le persone vogliono visitare una nuova pagina, in genere guardano prima il menu di navigazione.

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

Le icone dei social media possono anche attirare l'attenzione del visitatore senza aggiungere altro testo ai tuoi menu. Ciò ti consente di promuovere molti profili diversi in una piccola quantità di spazio.

Detto questo, diamo un'occhiata a come aggiungere facilmente le icone dei social media ai menu di WordPress.

Tutorial video

Iscriviti a WPBeginner

Se preferisci istruzioni scritte, continua a leggere. Basta utilizzare i collegamenti rapidi di seguito per passare direttamente al metodo che si desidera utilizzare:

  • Metodo 1: utilizzo del plug-in Immagine menu (consigliato)
  • Metodo 2: utilizzo dell'editor del sito completo (solo temi a blocchi)
  • Bonus: come promuovere i tuoi profili sui social media

Metodo 1: utilizzo del plug-in Immagine menu (consigliato)

Il modo più semplice per aggiungere le icone dei social media ai menu di WordPress è utilizzare Menu Image. Questo plug-in gratuito ti consente di aggiungere icone di immagini ai menu di navigazione, comprese le icone social.

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

Ad esempio, molte delle principali società 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 plug-in Font Awesome. Ciò consente di sfogliare e importare tutte le icone di Font Awesome direttamente dalla dashboard di WordPress, comprese le icone per tutti i principali social network. Per questo motivo, ti consigliamo di installare il plug-in Font Awesome.

Per istruzioni dettagliate su come configurare Font Awesome, consulta la nostra guida su come aggiungere facilmente i caratteri delle icone nel tuo tema WordPress.

Indipendentemente da come intendi fornire le icone dei social media, dovrai installare e attivare il plug-in Menu Image. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin per 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 .

How to add social media icons to a WordPress menu

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

Queste dimensioni dovrebbero funzionare bene per la maggior parte dei siti Web WordPress, ma puoi modificarle digitando numeri diversi nei campi Immagine del menu 1°, 2° o 3°.

Resizing social media icons 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 principale del tuo sito.

Selecting a WordPress menu to edit

Se desideri aggiungere le icone dei social media a un menu diverso, apri semplicemente il menu a discesa "Seleziona un menu da modificare".

È quindi possibile scegliere un menu dall'elenco e fare clic su "Seleziona".

Editing a WordPress navigation menu

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 nuovo collegamento.

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

Dovrai anche digitare un po' di 'Link Text'. In un passaggio successivo, avrai la possibilità di modificare la posizione in cui questo titolo appare nel menu o persino di nasconderlo completamente.

Adding link text to a website navigation menu

Fatto ciò, fai clic su "Aggiungi al menu".

Questo elemento apparirà ora nella colonna di destra.

Adding social links to a WordPress website

Per aggiungere un'icona di social media, passa semplicemente con il mouse sopra la nuova voce di menu.

Quindi, fai clic sul pulsante "Immagine menu" quando viene visualizzato.

Adding icons and images to a WordPress menu

Nota: se non vedi il pulsante "Immagine menu", fai clic su "Salva modifiche". Ora, il pulsante "Immagine menu" dovrebbe apparire quando passi con il mouse su qualsiasi elemento del menu.

Ora puoi decidere se utilizzare un'immagine dalla 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".

Adding Twitter, Facebook, and other social icons to WordPress

Quindi, seleziona "Fontawesome".

È quindi possibile fare clic su "Marchi".

Adding branded icons to a WordPress navigation menu

Ora vedrai tutte le icone del marchio, comprese le icone per tutti i principali social network. Quando vedi l'immagine che desideri utilizzare, fai un clic.

Un'altra opzione è utilizzare la tua icona dalla libreria multimediale di WordPress selezionando il pulsante di opzione "Immagine". Quindi, fare clic sul collegamento "Imposta immagine".

Adding any file or image to a WordPress navigation menu

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

Non importa da dove ottieni l'icona, l'immagine del menu mostrerà un'anteprima sulla destra.

Previewing icons in a website or blog navigation menu

Ora puoi modificare la visualizzazione del titolo del link sopra, sotto, prima o dopo l'icona del social media utilizzando le impostazioni "Posizione titolo".

Molte icone dei social media sono immediatamente riconoscibili, quindi il titolo del collegamento potrebbe non essere necessario. Se aggiungi 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 di opzione "Nascondi".

Hiding the menu link title text

Man mano che apporti modifiche, l'anteprima dal vivo si aggiornerà automaticamente, quindi puoi provare diverse impostazioni per vedere quale sembra la migliore.

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

Resizing social icons on a WordPress navigation menu

Le icone più grandi attireranno l'attenzione del visitatore, ma possono anche distrarre. Con questo in mente, potresti provare diverse dimensioni per vedere cosa funziona meglio sul tuo blog WordPress.

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

Publishing social icons on a WordPress website

Ripeti semplicemente questi passaggi per aggiungere più icone al menu di WordPress.

Puoi persino aggiungere icone ad altri elementi importanti nel menu di navigazione. Ad esempio, potresti aggiungere icone al modulo di contatto o alla pagina di pagamento di WooCommerce.

Quando sei soddisfatto della configurazione del menu, fai clic su "Salva menu".

Publishing a menu with social icons

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

Ecco come appariva sul nostro sito web dimostrativo.

Adding social icons to a WordPress menu

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

WordPress ha un blocco Social Icons integrato che ti consente di creare un menu contenente le icone dei social media e quindi visualizzarle in un bel layout.

An example of a social media navigation menu

Questo blocco viene fornito con icone integrate per tutti i principali social network, quindi non è necessario installare un plug-in come Font Awesome o caricare icone nella libreria multimediale. Tuttavia, puoi solo aggiungere icone e collegamenti di social media al blocco Icone social, quindi non è flessibile come il plug-in Menu Image.

Se utilizzi un tema a blocchi, puoi aggiungere un blocco di icone social a qualsiasi parte del tuo sito Web, come l'intestazione o il piè di pagina. In questo modo, puoi mostrare un menu di social media su tutto il tuo sito web.

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

Accessing the full site editor

Per impostazione predefinita, l'editor completo del sito mostra il modello principale del tuo tema, ma puoi aggiungere icone social a qualsiasi modello o parte del modello. Puoi persino aggiungere icone di social media a parti del tuo sito Web che non puoi modificare utilizzando l'editor di contenuti WordPress standard.

Ad esempio, puoi aggiungere un menu di social media al modello di pagina 404 del tuo sito.

Per visualizzare tutte le opzioni disponibili, devi selezionare "Modelli" o "Parti modello".

Adding social icons to a block-based template

È ora possibile fare clic sul modello o sulla parte del modello che si desidera modificare.

Ad esempio, aggiungeremo le icone dei social media all'intestazione di WordPress, ma i passaggi saranno gli stessi indipendentemente dal modello selezionato.

Adding Twitter, Facebook, Instagram and other social icons to a block-enabled template

Dopo aver effettuato la scelta, WordPress mostrerà un'anteprima del modello o della parte del modello.

Per continuare, fai clic sull'icona della piccola matita.

Editing a block-based header template

Fatto ciò, fai clic sull'icona blu "+" nell'angolo in alto a sinistra.

Nella barra di ricerca, devi digitare "Icone social".

Adding the Social Icons block to WordPress

Quando viene visualizzato il blocco giusto, trascinalo e rilascialo sul modello del tema.

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

Adding social icons to a WordPress template

Nel popup che appare, digita l'icona che desideri aggiungere, ad esempio "Twitter" o "Facebook".

Quando viene visualizzata l'icona a destra, fai semplicemente clic per aggiungerla al tuo blog WordPress.

Adding a Twitter icon to a WordPress navigation menu

Ora, fai clic sulla nuova icona dei social media.

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

Adding URLs to a social media menu

Per aggiungere più icone social a WordPress, fai semplicemente clic sull'icona "+" e ripeti la stessa procedura descritta sopra.

Dopo aver aggiunto tutte le icone dei social media, potresti voler personalizzare il blocco. Per fare ciò, fai clic per selezionare il blocco Icone social, quindi fai clic sulla scheda "Blocca".

Customizing a social block in WordPress

Puoi modificare 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, ti consigliamo di fare clic per abilitare l'interruttore "Apri link in una nuova scheda".

Opening website links in a new browser tab

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

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

Adding labels to a social menu

Successivamente, fai clic sulla scheda "Stili".

Qui puoi modificare lo stile del pulsante facendo clic su "Predefinito", "Solo loghi" o "Forma pillola".

Adding button styles to a navigation menu

Infine, puoi modificare lo spazio tra le icone social utilizzando le impostazioni in "Spaziatura blocco".

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

Publishing a social icons block in WordPress

Ora, se visiti il ​​tuo sito web, vedrai le icone dei social media dal vivo.

Bonus: come promuovere i tuoi profili sui social media

L'aggiunta di icone dei social media ai menu di WordPress è un ottimo modo per ottenere più follower e coinvolgimento sui diversi account. Tuttavia, ci sono molti altri modi per promuovere i tuoi profili Twitter, Facebook e altri social.

Il modo migliore per ottenere più follower e coinvolgimento è incorporare un feed social dal vivo sul tuo sito web. Ciò ti consente di mostrare gli ultimi post di più account, 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 plug-in per feed di social media per WordPress e ti consente di incorporare feed live da Twitter, Instagram, Facebook e altro.

The Smash Balloon social media WordPress plugin

Per ulteriori informazioni, consulta la nostra guida su come aggiungere feed di social media a WordPress.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere le icone dei social media ai menu di WordPress. Potresti anche voler vedere la nostra guida su come incorporare un video di Facebook in WordPress o vedere le nostre scelte di esperti per i migliori plugin di Twitter per WordPress.

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