Come aggiungere le icone dei social media al menu di WordPress

Pubblicato: 2020-10-24

Indipendentemente dal fatto che tu gestisca un'azienda o un sito personale, devi assicurarti che gli utenti possano condividere i tuoi contenuti sui social media. Ecco perché in questo post ti mostreremo come aggiungere le icone dei social media al menu di WordPress .

Perché aggiungere le icone dei social media al menu di WordPress?

Secondo studi recenti, quasi il 50% della popolazione mondiale utilizza almeno un social network. Collegare il tuo sito a Facebook o aggiungere feed di Instagram al tuo sito Web sono buone opzioni, ma c'è qualcos'altro che puoi fare per far crescere la tua presenza sui social media. Il menu è uno degli elementi più importanti del tuo sito. Inoltre, è una delle prime cose che gli utenti vedono quando visitano il tuo sito. Ad esempio, dai un'occhiata al menu principale del nostro sito web.

intestazione quadlayer Quindi, per personalizzare il tuo sito e sfruttare al meglio i tuoi canali di social media, puoi aggiungere le icone dei social media al menu di WordPress. Inoltre, puoi visualizzare icone su altre aree del tuo sito che supportano widget come il piè di pagina, la barra laterale e così via.

Anche se alcuni temi come Divi includono alcune opzioni per aggiungere le icone dei social media al menu, la maggior parte dei temi non include questa funzione. E WordPress non include nemmeno una funzionalità nativa per includere le icone nel menu.

Quindi, in questo post, ti mostreremo tre metodi per aggiungere facilmente le icone dei social media al tuo menu di WordPress .

Come aggiungere le icone dei social media al menu di WordPress

Esistono tre modi principali per aggiungere le icone dei social media al menu di WordPress:

  1. Con plugin
    1. Menu Quad
    2. Icone sociali WP
  2. Dal personalizzatore del tema
  3. Usando manualmente le icone di FontAwesome

In questa guida, descriveremo passo dopo passo ogni metodo in modo che tu possa scegliere quello che ti piace di più.

1) Plugin

L'uso dei plug-in è il modo più semplice per includere le icone dei social media nel menu. Ci sono diverse opzioni là fuori, quindi, per semplificarti la vita, abbiamo elencato due dei migliori plugin che puoi usare.

1.1) Menu Quad

Aggiungi le icone dei social media al menu di WordPress - QuadMenu

QuadMenu è lo strumento migliore per personalizzare facilmente e portare i menu di WordPress al livello successivo. Questo è un plugin freemium. È disponibile una versione gratuita con funzionalità di base e tre piani premium dotati di funzionalità più avanzate e supporto prioritario.

prezzo quad-menu

Per aggiungere le icone dei social media al tuo menu, è necessaria la versione premium. Vediamo quindi come installarlo e attivare il plugin sul tuo sito.

Installazione e attivazione

Innanzitutto, devi acquistare il plug-in e scaricare i file sul desktop. Quindi, prima di installarlo, devi installare la versione gratuita sul tuo sito. Per farlo, vai alla dashboard del tuo WP> Plugin> Aggiungi nuovo . Quindi, usa la barra di ricerca e cerca QuadMenu. Successivamente, premi Installa e quindi Attiva .

installa il plug-in quadmenu

Dopo l'attivazione, utilizza i file della versione premium che hai scaricato in precedenza e installali sul tuo sito.

installa quadmenu premium Una volta attivato il plugin, dovrai verificare la tua chiave di licenza. Dalla dashboard del tuo account QuadMenu, vedrai l'opzione delle licenze.

licenze quadmenu

Copia la chiave da lì e incollala nel campo delle licenze con il tuo indirizzo email registrato per verificare la tua chiave.

opzione di licenza quadmenu

Il plug-in è disponibile nel nostro negozio, Envato e nel mercato Elegant, quindi utilizza il menu a discesa per selezionare l'opzione appropriata per il tuo acquisto. Dopo averlo verificato, sei a posto.

Aggiungi le icone dei social media al menu di WordPress con QuadMenu

QuadMenu funziona con qualsiasi tema gratuito o premium. Per questa demo, utilizzeremo GeneratePress ma il processo è simile a qualsiasi altro tema. Per prima cosa, andiamo alle impostazioni del plug-in andando su QuadMenu> Opzioni .

Aggiungi le icone dei social media al menu di WordPress - Opzioni Quadmenu Lì vedrai diverse opzioni di personalizzazione come:

  • Menù primario
  • reattivo
  • Tema predefinito
  • personalizzare
  • Sociale
  • Importa/Esporta
Configura le opzioni social

Nel nostro caso, dobbiamo aggiungere le icone dei social media al nostro menu principale. Quindi, selezioneremo l'opzione Social .

opzione sociale

Vedrai diverse opzioni predefinite che puoi modificare o eliminare a seconda dei canali che hai. Hanno già assegnato icone con i profili dei social media.

Tuttavia, puoi anche personalizzarli facendo clic sul pulsante + Aggiungi icona . Inoltre, puoi aggiungere nuovi canali di social media premendo il pulsante + . aggiungi icone

Diciamo che vuoi cambiare l'icona di Facebook. Premi + Aggiungi icona e vedrai un pop-up con molte icone tra cui puoi scegliere.

tutte le icone disponibili

Ci sono molte icone, quindi ti consigliamo di utilizzare la funzione di ricerca per filtrare i risultati.

cerca icona fb Come puoi vedere, abbiamo cercato le icone di Facebook. Ti mostrerà tutte le icone disponibili relative alla tua query di ricerca, quindi seleziona quella che ti piace e salvala. Puoi anche modificare i titoli e gli URL. Dopo aver apportato tutte le modifiche desiderate in QuadMenu, salvare le impostazioni.

salva le impostazioni del plug-in quadmenu

Successivamente, vai ai menu di WordPress. Vedrai tutti i menu disponibili lì. Per utilizzare le opzioni QuadMenu nel menu, è necessario contrassegnarlo come QuadMenu Dev nelle impostazioni del menu . Successivamente, salva il menu.

opzione di sviluppo quadmenu

Al caricamento della pagina successiva, vedrai le opzioni QuadMenu. opzioni del menu quad

Sotto le voci QuadMenu, vedrai l'elenco delle icone Social . Selezionali e premi Aggiungi al menu .

aggiungi icone social al menu

Successivamente, vedrai la sezione Social sotto le opzioni del menu principale. Passa il mouse sopra e vedrai le opzioni di personalizzazione di QuadMenu.

icone sociali quadmenu

Se hai bisogno di una personalizzazione aggiuntiva, seleziona quell'opzione. Altrimenti, premi il pulsante Salva menu e sei a posto.

Aggiungi le icone dei social media al menu di WordPress - Salva il menu di wordpress

Icone nel menu (anteriore)

Ora è il momento di controllare i risultati. Quindi, vai alla home page del tuo sito web e vedrai le icone social. E quando ci passi sopra con il mouse, le icone verranno visualizzate.

Aggiungi le icone dei social media al menu di WordPress - QuadMenu final

Questo è tutto! Hai aggiunto con successo le icone dei social media ai menu di WordPress con QuadMenu .

1.2) Icone del menu WP

Se non puoi permetterti plug-in premium, non preoccuparti. Abbiamo una soluzione gratuita per te. In questa sezione, ti mostreremo come aggiungere icone dei social media al tuo WordPress con un plug-in gratuito chiamato Icone del menu WP. Aggiungi le icone dei social media al menu di WordPress - Plugin per le icone del menu WP

Installazione e attivazione

Innanzitutto, installa e attiva le icone del menu WP sul tuo sito.

installa il plugin per le icone del menu wp Questo strumento è molto facile da usare e non richiede alcuna personalizzazione aggiuntiva.

Personalizzazione delle icone dei menu

Se non hai un menu sul tuo sito, puoi crearne uno dalla sezione di configurazione. crea menu

Assegna una posizione al tuo menu e poi sei pronto per aggiungere elementi ad esso. Per aggiungere i tuoi profili social al menu, scegli la voce Collegamenti personalizzati . Dovrai inserire l'URL della pagina che desideri collegare e un'etichetta. Quindi, premi Aggiungi al menu .

aggiungi link facebook al menu Dopo aver aggiunto l'icona al menu, la pagina di configurazione sarà simile a questa.

fb aggiunto al menu Allo stesso modo, puoi aggiungere altre icone dei social media. In questo caso, abbiamo aggiunto le icone di Twitter, Pinterest e Instagram al nostro menu.

Aggiunti profili social Sulle voci di menu, c'è un pulsante + . Questa è l'impostazione che devi usare per aggiungere icone alle voci di menu, quindi fai clic su di essa.

Aggiungi le icone dei social media al menu di WordPress - aggiungi icona Quindi, vedrai un'ampia selezione di articoli tra cui scegliere.

tutte le icone Ci sono dozzine di icone, quindi usa la funzione di ricerca per filtrare i risultati desiderati. In questo caso, abbiamo selezionato la voce di menu Facebook, quindi cercheremo l'icona di Facebook. icone di facebook Dopo aver selezionato quello che ti piace, vedrai le impostazioni dell'icona nella colonna di destra. Qui puoi visualizzare o nascondere l'etichetta, personalizzare la posizione, le dimensioni e l'allineamento. In questo caso, nasconderemo l'etichetta. Al termine della personalizzazione, fai clic su Salva .

nascondi etichetta Puoi personalizzare le icone di Pinterest, Twitter e Instagram allo stesso modo. Dopo aver aggiunto le icone richieste, salvare il menu.

Aggiungi le icone dei social media al menu di WordPress - Icone del menu WP Salva menu Ora è il momento di controllare il risultato. Vai al frontend del tuo sito web e vedrai le nuove icone.

Aggiungi le icone dei social media al menu di WordPress - Icone del menu WP nel frontend

Ecco come puoi aggiungere le icone dei social media ai menu di intestazione in WordPress con le icone del menu WP . Infine, puoi anche dare uno stile alle tue icone dalla pagina delle impostazioni delle icone del menu WP.

2) Aggiungi le icone dei social media con il Customizer del tema

Se non desideri installare alcun plug-in, puoi includere le icone dei social media nei menu utilizzando il programma di personalizzazione del tema. Alcuni temi premium come Divi, Newspaper o Avada sono dotati di pannelli tematici integrati che ti consentono di personalizzare il tema e aggiungere icone di social media.

Se non sei sicuro che il tuo tema abbia l'opzione per aggiungere le icone dei social media, nella dashboard di WordPress vai su Aspetto > Personalizza > Menu > Visualizza posizioni e controlla se c'è un menu social o un'opzione icona social.

Per la nostra dimostrazione, utilizzeremo il tema Divi di Elegant Themes. Innanzitutto, vai alla dashboard del tuo WP> Aspetto> Personalizza .
personalizza il tema di divi wordpress

Quindi, vai alla personalizzazione dell'intestazione e agli elementi dell'intestazione. Lì vedrai un'opzione per abilitare le icone social dell'intestazione.

mostra le icone social dell'intestazione

Abilita questa opzione e poi la vedrai nell'intestazione del tuo sito web. icone sociali divi

Inoltre, puoi personalizzarli andando su Divi > Opzioni tema .

Aggiungi le icone dei social media al menu di WordPress - Personalizza il tema Divi

Lì puoi abilitare le icone che desideri e inserire l'URL dei tuoi profili sui social media. Le icone dei social media appariranno sia nell'intestazione che nel piè di pagina del tuo sito per impostazione predefinita.

Aggiungi le icone dei social media al menu di WordPress - Icone Divi a piè di pagina

Tuttavia, puoi scegliere di nasconderli tramite le impostazioni di personalizzazione.

nascondi le icone del piè di pagina Altri temi come Giornale e Newsmag hanno le proprie opzioni di personalizzazione, quindi puoi abilitare/disabilitare le icone e visualizzarle direttamente attraverso il pannello del tema dedicato. Se non riesci a trovare la sezione delle icone dei social media nel pannello o nel pannello di personalizzazione del tema, sentiti libero di lasciare un commento qui sotto e cercheremo di aiutarti.

3) Utilizzo di FontAwesome

Infine, puoi aggiungere manualmente le icone dei social media ai tuoi menu in WordPress. Anche se non sei uno sviluppatore o non hai competenze di programmazione, puoi visualizzare le icone dei social media con un po' di codifica HTML. Per farlo, useremo le icone di FontAwesome.

Quindi, la prima cosa che devi fare è visitare il sito Web FontAwesome.

Aggiungi le icone dei social media al menu di WordPress - Fontawesome

Usa la funzione di ricerca per trovare le icone di cui hai bisogno. Per questa demo, cercheremo le icone di Twitter .

icone di twitter

Nella pagina successiva, il sito Web ti mostrerà i risultati della ricerca. Scegli quello che ti piace di più.

seleziona logo

Nella pagina successiva, vedrai i dettagli dell'icona che hai selezionato, quindi copia semplicemente il codice HTML dell'icona. Aggiungi le icone dei social media al menu di WordPress - HTML

Aggiunta di icone fantastiche per i caratteri a WordPress

Quindi, vai alla sezione dei menu sul tuo sito WordPress. Sul lato sinistro, vedrai la sezione dei collegamenti personalizzati. Dovrai inserire l'URL del tuo profilo Twitter e incollare il codice HTML che hai appena copiato nel campo Testo del link . Una volta fatto, premi Aggiungi al menu . aggiungi al menu

Successivamente, salva le modifiche. Quindi, vai al frontend del tuo sito e vedrai l'icona.

icona di twitter sul frontend

In questo modo, sarai in grado di aggiungere qualsiasi icona di social media al tuo menu .

Il codice HTML non funziona

Se hai seguito ogni passaggio di questo tutorial ma l'HTML non funziona, prova questo. Se il fab code non funziona, prova a modificare il codice HTML rimuovendo b dal fab .

Quindi, ad esempio, nel nostro caso, il codice HTML finale sarà simile a questo <i class=”fa fa-twitter”></i> invece di <i class=”fab fa-twitter”></i> . Esempio: Aggiungi le icone dei social media al menu di WordPress - Codice HTML modificato

Aggiungi le icone dei social media all'intestazione di WordPress

L'intestazione è uno dei luoghi più popolari in cui potresti voler aggiungere le icone dei social media, quindi vediamo rapidamente come farlo utilizzando il Customizer del tema.

Nota che avrai bisogno di un tema che ti dia la possibilità di aggiungere le icone dei social media al menu. Inoltre, tieni presente che i passaggi potrebbero essere leggermente diversi a seconda del tema, ma dovresti essere in grado di seguire i passaggi senza problemi nella maggior parte dei temi.

Diamo un'occhiata a due opzioni: creare un nuovo menu e modificarne uno esistente.

Aggiunta delle icone dei social media all'intestazione in un nuovo menu

  1. Nella dashboard di WordPress, vai su Aspetto > Menu
  2. Premi il collegamento Crea un nuovo menu accanto al pulsante Seleziona e assegnagli un nome
  3. Ora puoi aggiungere le icone ad esso. Seleziona il nuovo menu e inserisci i social media e gli URL che desideri includere (Instagram, Facebook, YouTube e così via) e premi Aggiungi al menu
  4. Salva le modifiche
  5. Successivamente, posiziona il menu che hai appena creato nella sezione dell'intestazione
  6. Salva le modifiche e il gioco è fatto! È così che aggiungi le icone dei social media all'intestazione di WordPress!

Aggiunta di icone di social media all'intestazione in un menu esistente

  1. Nella dashboard di WordPress, vai su Aspetto > Personalizza > Menu
  2. Vai alla sezione Intestazione e premi il pulsante Aggiungi elementi
  3. Quindi seleziona l'icona della piattaforma di social media che desideri aggiungere, inserisci l'URL e premi Aggiungi al menu . Devi fare lo stesso per ogni social media che vuoi aggiungere
  4. Seleziona la posizione del menu in cui desideri visualizzare le icone. Le opzioni che hai dipenderanno dal tuo tema.
  5. Salva le modifiche. Questo è tutto!

In alternativa, se vuoi aggiungere le icone al piè di pagina, ad esempio, segui la stessa procedura ma seleziona il piè di pagina come posizione per le icone.

Bonus: apri le icone dei social media in una nuova scheda

L'aggiunta di icone dei social media al menu di WordPress ti aiuterà a far crescere la tua presenza sui social media. Tuttavia, il problema è che quando un utente fa clic sull'icona nel tuo menu, la pagina del social media verrà caricata nella stessa finestra e l'utente lascerà il tuo sito. La soluzione è fare in modo che l'icona dei social media carichi la pagina in una nuova scheda. Vediamo come farlo.

Nella dashboard di WordPress, vai su Aspetto > Menu , apri le Opzioni schermo in alto a destra e abilita l'opzione Link Target . Quindi, vai su ciascun elemento del menu e seleziona la casella di controllo Apri collegamento in una nuova scheda . In alternativa, puoi impostare ogni destinazione su _blank.

Infine, salva le modifiche e il gioco è fatto!

Come aggiungere feed social al tuo sito

Oltre ad aggiungere le icone dei social media al tuo menu, puoi anche aggiungere feed social al tuo sito per aumentare il coinvolgimento con i tuoi utenti. Nella sezione, ti mostreremo come collegare Instagram e TikTok al tuo sito web.

Aggiungi un feed Instagram a WordPress

Il modo più semplice per connettere Instagram al tuo sito è utilizzare il plug-in Social Feed Gallery. È uno strumento freemium che ti consente di visualizzare il tuo feed di Instagram in pochi clic.

Innanzitutto, installa e attiva il plug-in da questo link. Quindi, vai alla Galleria dei feed social e accedi al tuo account Instagram.

Successivamente, vai su Social Feed Gallery > Account e avrai la possibilità di accedere al tuo account personale o aziendale (tieni presente che l'account aziendale ha più opzioni). Quindi, aggiungi un account, accedi e concedi all'app le autorizzazioni necessarie per connettere il tuo account a WordPress.

Una volta fatto, vai alla scheda Feed , premi +Feed e aggiungi il feed che desideri visualizzare. Infine, personalizza il tuo feed e una volta terminato, vedrai che il plug-in ti fornisce uno shortcode che puoi incollare su qualsiasi pagina o post per visualizzare il tuo feed.

Per ulteriori informazioni, consulta la nostra guida su come integrare Instagram con WordPress.

Aggiungi un feed TikTok a WordPress

Allo stesso modo, puoi anche collegare il tuo sito a TikTok. Per visualizzare i feed di TikTok, utilizzeremo un plug-in dedicato chiamato WP TikTok Feed. Questo è il plug-in TikTok più popolare per WordPress e ha una versione gratuita e alcuni piani premium.

Dopo aver installato e attivato il plugin, nella dashboard di WordPress , devi collegare il tuo account TikTok e poi andare su Tiktok Feed > Feed . Lì, premi +Feed e aggiungi il feed che desideri visualizzare. Inoltre, vedrai diverse opzioni per personalizzare il modo in cui visualizzi il feed sul tuo sito.

Per ulteriori informazioni a riguardo, dai un'occhiata al nostro tutorial su come incorporare video TikTok in WordPress.

Conclusione

Tutto sommato, aggiungere le icone dei social media ai menu di WordPress è un modo eccellente per aumentare la tua presenza sui social media. In questa guida abbiamo visto 3 modi diversi per farlo:

  1. Con plugin
  2. Dal personalizzatore del tema
  3. Manualmente

Se il tuo tema ti consente di aggiungere icone per impostazione predefinita, non è necessario utilizzare plug-in o codice HTML aggiuntivi. Se preferisci un plugin, ti consigliamo di utilizzare QuadMenu. Ti consentirà di ottenere il pieno controllo dell'intera personalizzazione del menu di WordPress e include anche molte potenti funzionalità.

Tuttavia, se preferisci una soluzione gratuita, dai un'occhiata alle icone del menu WP. È uno strumento semplice che ti aiuterà a includere icone social in pochissimo tempo.

D'altra parte, se non vuoi installare alcun plug-in, puoi aggiungere icone di social media usando un po' di icone HTML e FontAwesome. Questa opzione ti consente anche di personalizzare le icone con un po' di CSS oppure puoi evitare la parte di stile e utilizzare le icone predefinite.

Hai trovato utile questo articolo? Se lo hai fatto, lasciaci un commento qui sotto e condividi questo post sui social media. Per ulteriori tutorial correlati, consulta le seguenti guide:

  • I migliori plugin per aggiungere feed di social media a WordPress
  • Come aggiungere feed di gruppo Facebook a WordPress