Tutorial Divi: Cómo añadir más iconos sociales

Publicado por Fernando el 11 Nov, 2016

El tema Divi contiene ajustes para tres iconos de medios sociales por defecto: Twitter, Google+ y Facebook, pero ¿y si quieres mostrar más iconos en tu cabecera o pie de página?

Afortunadamente es bastante fácil, y tenemos 2 maneras de conseguirlo.

Añadir más iconos sociales a Divi con código

Para añadir iconos sociales a Divi manualmente lo primero que debemos hacer es localizar el archivo /Divi/includes/social_icons.php. Lo ideal es que crees una carpeta /includes/ en tu tema hijo y sea ahí donde copies el archivo social_icons.php, así podrás seguir actualizando Divi sin perder los cambios que hagamos ¿vale?

Una vez creada la carpeta y copiado el archivo a tu tema hijo ábrelo con tu editor de código favorito. Una vez dentro verás el código para los tres iconos sociales por defecto…

Pues bien, será ahí donde añadiremos nuestros nuevos iconos sociales. Para poner un ejemplo vamos a añadir un icono para LinkedIn, así que el código a incluir sería este:

<li class="et-social-icon et-social-linkedin">
<a target="_blank" href="https://www.linkedin.com/">
<span><?php esc_html_e( 'Linkedin', 'Divi' ); ?></span>
</a>
</li>

</a>

</li>

El código lo añadiremos justo después de la línea <?php endif; ?> y antes de la etiqueta de cierre </ul>, con lo que el código resultante en tu archivo social_icons.php quedaría así:

Solo tienes que acordarte de que la URL que pongas en el código, en el ejemplo https://www.linkedin.com, sea la de tu perfil social; por ejemplo https://linkedin.com/in/fernandotellado. Por supuesto, guarda los cambios al archivo.

Ahora solo nos queda añadir un poco de CSS para que se vea nuestro nuevo icono, así que ve a la hoja de estilos de tu tema hijo (el archivo style.css) y añade lo siguiente al final del archivo:

.et-social-linkedin a:before { 
	content: '\e09d';
}

.et-social-linkedin a:before {

content: '\e09d';

}

Guarda los cambios y ya verás el nuevo icono junto al resto de iconos activos previamente.

mas-iconos-sociales-en-divi

¿Que no quieres el icono de LinkedIn? Pues mira tú por donde Divi incluye los códigos para otros iconos sociales, estos:

Dribble = e09b
Flickr = e0a6
Instagram = e09a
Myspace = e0a1
Pinterest = e095
Skype = e0a2
Tumblr = e097
Vimeo = e09c
YouTube = e0a3

Solo tienes que modificar el código o añadir nuevos, por ejemplo:

<li class="et-social-icon et-social-skype">
<a target="_blank" href="http://www.skype.com/">
<span><?php esc_html_e( 'Skype', 'Divi' ); ?></span>
</a>
</li>
.et-social-skype a:before { 
	content: '\e0a2';
}

</a>

</li>

.et-social-skype a:before {

content: '\e0a2';

}

Añadir más iconos sociales a Divi con un plugin

Ahora bien ¿no quieres o no te atreves a tocar código? Puedes usar la joya de plugin llamada Divi Booster que, entre muchas otras personalizaciones, incluye la posibilidad de añadir todos los iconos sociales disponibles en Divi a un clic.

Simplemente instálalo, lo activas, y en el menú Divi verás un submenú nuevo llamado Divi Booster. En la sección Site-Wide Settings -> Icons tienes la posibilidad de añadir todos los iconos disponibles de la manera más fácil posible.

Ya que estás, también puedes forzar a que los enlaces a tus perfiles sociales se abran en nueva pestaña/ventana, algo que en Divi no viene por defecto.

El plugin Divi Booster es casi obligatorio si usas Divi, al menos altamente recomendable, pues incluye decenas de personalizaciones más que útiles, de las que marcan diferencias, esas pequeñas cosas que echas de menos en Divi, por solo 19$ en un único pago.