Come aggiungere icone social a Divi

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+.

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.

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!):

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!