Divi ci mette a disposizione delle icone social per permettere di far conoscere al nostro pubblico in quali canali siamo presenti. La scelte è però limitata e quindi può essere necessario aggiungere icone social a Divi.

Oggi ti spiegherò come fare.

Le icone social di Divi

Le icone social di Divi a disposizione sono solamente 4: Facebook, Twitter, Instagram e Google+.

Icone social di default di Divi
Le icone già presenti di default

L’ultima risulta inutile dato che il social network di Google è passato ormai a miglior vita. Mi sorprende infatti la sua presenza e la mancanza di altri canali importanti come ad esempio Linkedin.

Fortunatamente aggiungere altre icone social a Divi è semplicissimo!

Quali icone social possiamo aggiungere di base?

Di base possiamo aggiungere facilmente i collegamenti ai seguenti social:

  • Pinterest
  • Linkedin
  • Tumblr
  • Skype
  • Flikr
  • MySpace
  • Dribbble
  • YouTube
  • Vimeo

Di questi canali Divi ha già le icone pronte all’uso e dobbiamo solo indicargli il collegamento al nostro profilo.

Per tutti gli altri social dobbiamo avere a disposizione l’icona in formato PNG e caricarla sul nostro server.

Vediamo quindi la semplice modifica da apportare al nostro tema.

Aggiungere icone social a Divi mediante codice

Prima cosa che devi fare? Esatto, preparare un tema child per Divi, altrimenti ogni modifica che faremo tra poco svanirà al prossimo aggiornamento.

Una volta che avrai creato il tuo tema child seguendo la mia semplice guida che ti ho linkato, dovrai copiare da Divi il file social_icons.php che troveremo nella cartella /Divi/includes/. Lo carichiamo nella stessa cartella del nostro tema child, quindi /tuo-tema/includes/social_icons.php.

Prendo il file social_icons.php da Divi...
Prendo il file social_icons.php da Divi…
...e lo copio nella stessa cartelle del tema Child.
…e lo copio nella stessa cartella del tema child.

Ora dovrai modificare il file appena copiato (quindi la versione del tema child) aggiungendo questo codice prima della chiusura del tag ul (quindi prima di </ul>):

<li class="et-social-icon et-social-linkedin">
    <a href="https://linkedin.com/il-tuo-profilo/‎" class="icon">
        <span><?php esc_html_e( 'LinkedIn', 'Divi' ); ?></span>
    </a>
</li>

Ovviamente questo codice va personalizzato per le vostre esigenze:

  • et-social-linkedin andrà cambiato in base al social network che ti serve (ad es. et-social-pinterest).
  • il link al profilo https://linkedin.com/il-tuo-profilo/ va cambiato con il link al tuo profilo social.
  • La scritta LinkedIn va sostituita con il nome del social network.

Ecco quindi il codice che ho utilizzato io per aggiungere l’icona del mio profilo LinkedIn (il commento in grigio non metterlo!):

Codice per aggiungere icone social a Divi
Il codice (in rosso) andrà aggiunto prima del tag di chiusura (in giallo)!

Se invece ti occorre un icona social che non è presente nella lista che ti ho elencato prima dovrai usare questo codice:

<li class="et-social-icon et-social-linkedin">
    <a href="https://linkedin.com/yourprofileurl/‎" class="icon">
        <img src="https://yoursite.com/icon.png" alt="LinkedIn">
        <span><?php esc_html_e( 'LinkedIn', 'Divi' ); ?></span>
    </a>
</li>

Le modifiche che dovrai apportare sono le stesse, con l’aggiunta che dovrai specificarel’URL del file immagine PNG dell’icona social.

Ora salva e carica il file modificato.

FINITO!

Alternativa plugin…

Se non vuoi sporcarti le mani con il codice esiste un plugin che fa al caso tuo.

Si chiama Divi Icon Party e però costa 27$.

Data la semplicità della modifica ti sconsiglio di aggiungere un plugin non essenziale!

Ce l’hai fatta? Hai avuto difficoltà? Chiedi pure aiuto nei commenti!