Añadir más iconos de redes sociales en Divi

Como muchos sabréis, Divi incorpora enlaces a las redes sociales de forma limitada. Es decir, solo podemos configurar Facebook, Twitter y Google Plus. Si queremos añadir más redes sociales debemos modificar algo de código. Pero no mucho, veremos que es muy sencillo.

¿Qué es Divi?

Antes que nada, para los que no conozcáis Divi, este no es más que una plantilla de WordPress que permite personalizar al máximo nuestra web sin tener demasiados conocimientos de Diseño Web, aunque se pueden aplicar dichos conocimientos para que nuestros diseños sean más espectaculares aún.

Si queréis aprender más sobre Divi aquí podéis consultar mis otros artículos donde explico mi experiencia y algunos trucos. Y si os has gustado y queréis adquirir dicha plantilla, podéis conseguir hasta un 20% de descuento si la compráis desde este enlace.

¿Cómo añadir más iconos de redes sociales?

Es muy sencillo.Basta con añadir más estilos a nuestra plantilla y modificar el pie de nuestra web. Para ello, como siempre, os recomiendo trabajar con un Divi Child Theme para evitar perder nuestras modificaciones cuando salga una nueva versión de Divi.

Modificar style.css

Tenemos que añadir lo siguiente a nuestra hoja de estilos de nuestro tema Divi. Si estamos usando el Divi Child Theme tendremos que modificar la hoja de estilos de dicho tema.

Código:

/* Iconos de redes sociales para el footer de Divi */
/* Para añadir más redes sociales hay que editar el fichero /includes/social_icons.php de tu Child Theme */
.et-social-facebook a.icon:before { content: '\e093'; }
.et-social-twitter a.icon:before { content: '\e094'; }
.et-social-google-plus a.icon:before { content: '\e096'; }
.et-social-pinterest a.icon:before { content: '\e095'; }
.et-social-linkedin a.icon:before { content: '\e09d'; }
.et-social-tumblr a.icon:before { content: '\e097'; }
.et-social-instagram a.icon:before { content: '\e09a'; }
.et-social-skype a.icon:before { content: '\e0a2'; }
.et-social-flikr a.icon:before { content: '\e0a6'; }
.et-social-myspace a.icon:before { content: '\e0a1'; }
.et-social-dribbble a.icon:before { content: '\e09b'; }
.et-social-youtube a.icon:before { content: '\e0a3'; }
.et-social-vimeo a.icon:before { content: '\e09c'; }
.et-social-rss a.icon:before { content: '\e09e'; }

Si estamos interesados en añadir otro icono diferente, podéis consultar este enlace de Elegant Themes donde tienen una gran recopilación de iconos y su código CSS:

Modificar social_icons.php

Tenemos que modificar el fichero /includes/social_icons.php con lo siguiente. Si estamos usando Divi Child Theme tendremos que copiar el fichero de Divi en la carpeta de nuestro Child Theme para que podamos aplicar nuestras modificaciones ahí.

Hay que añadir el siguiente código al final del fichero, indicando nuestro nick en cada enlace:

<!-- Añadir estilos de los iconos en el Child Theme -->
<li class="et-social-icon et-social-linkedin">
<a href="https://www.linkedin.com/in/nick‎" class="icon" rel="nofollow" target="_blank">
<span><?php esc_html_e( 'LinkedIn', 'Divi' ); ?></span>
</a>
</li>
<li class="et-social-icon et-social-youtube">
<a href="https://www.youtube.com/user/nick" class="icon" rel="nofollow" target="_blank">
<span><?php esc_html_e( 'YouTube', 'Divi' ); ?></span>
</a>
</li>
<li class="et-social-icon et-social-pinterest">
<a href="https://es.pinterest.com/nick" class="icon" rel="nofollow" target="_blank">
<span><?php esc_html_e( 'Pinterest', 'Divi' ); ?></span>
</a>
</li>
<li class="et-social-icon et-social-instagram">
<a href="https://www.instagram.com/nick" class="icon" rel="nofollow" target="_blank">
<span><?php esc_html_e( 'Instagram', 'Divi' ); ?></span>
</a>
</li>

Resultado

Una vez aplicados los cambios a nuestros ficheros, el resultado es el siguiente:

Como podéis ver, ya aparecen todos los iconos de nuestras redes sociales. Eso sí, para modificar la url destino de cada una tendremos que hacerlo desde el editor de nuestro tema modificando el fichero social_icons.php.

La ventaja de hacerlo de esta manera es que los iconos de redes sociales toman el color predefinido de nuestro tema y no tenemos que modificarlo a mano.