La semana pasada me encontré con un pequeño problema en un proyecto que estaba desarrollando con DIVI. Una de las redes sociales que utilizaban para cargar contenido es Slideshare y no había manera de añadir el icono de Slideshare al top-header de la web en DIVI. Por eso he pensado en crear esta pequeña guía para que podáis añadir ese icono o cualquier otro que queráis a la cabecera de vuestra web.

Cómo añadir más iconos sociales ya definidos en DIVI

Por defecto, la versión actual del theme DIVI permite añadir los siguientes iconos sociales:

iconos con soporte divi

Sin embargo, la plantilla permite añadir más iconos de forma relativamente sencilla. Esto es lo que tenéis que hacer.

ATENCIÓN - Como siempre recomiendo, haced copia de seguridad de todo antes de tocar nada. Y si no lo estáis usando ya, trabajad sobre un Child Theme para no perder los cambios que hagáis en la próxima modificación de vuestro Theme. Si aún no sabéis cómo, aquí tenéis una guía sobre cómo crear un child theme.

Bien. Ahora localiza el archivo style.css que hay en la carpeta del theme Divi. Ahí encontrarás las referencias a todas las redes sociales que, aunque no están añadidas por defecto, puedes añadir de forma sencilla a tu sitio web:

.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'; }

Vale, aquí tenemos los iconos que necesitamos a las redes sociales. Pero ¿cómo los añadimos?. Vamos a localizar, dentro de la estructura de carpetas del theme, una carpeta llamada includes y dentro, un archivo que se llama social_icons.php. Esta archivo con su carpeta correspondiente lo podéis replicar, tal cual, en vuestro child theme. En este archivo hay una lista de clases llamadas et-social-icon que son las que cargarán los iconos asociados a las redes sociales. Veamos una de estas estructuras:

<?php if ( 'on' === et_get_option( 'divi_show_facebook_icon', 'on' ) ) : ?>
    <li class="et-social-icon et-social-facebook">
        <a href="<?php echo esc_url( et_get_option( 'divi_facebook_url', '#' ) ); ?>" class="icon">
            <span><?php esc_html_e( 'Facebook', 'Divi' ); ?></span>
        </a>
    </li>
<?php endif; ?>

Como queremos añadir nuevos iconos, lo que tenemos que hacer es replicar esta estructura para cada icono que queramos añadir. Por ejemplo, vamos a añadir un icono para LinkedIn. Crearemos un elemento más de la clase et-social-icon para linkedIn: et-social-linkedin. Como la url no la vamos a obtener desde el personalizador de DIVI, tenemos que incluirla directamente en la etiqueta <a href=”…”>. Con lo que el código generado nos quedaría parecido a este:

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

Guardamos y listo. Ya tendríamos nuestro icono de LinkedIn.

Peroooo… ¿qué pasa si lo que tenemos que añadir es un icono a una red social que NO está en el listado?

Cómo añadir más iconos sociales que no vienen con DIVI

En mi caso, me encontré con un cliente que quería añadir Slideshare a la lista de iconos que aparecen en el encabezado de su web. Pero Slideshare no está en el listado de iconos y enlaces que por defecto tiene DIVI. ¿Cómo lo hacemos entonces?

Bien, primero tenemos que hacer es cargar una fuente adicional a los iconos que proporcionan Elegant Themes, por ejemplo Font Awesome. Podéis descargaros esa fuente en este enlaceAhora tenemos que subir los archivos necesarios para poder utilizar esta fuente en nuestro sitio web. Descomprime los archivos y súbelos vía FTP en la ubicación donde está tu Child Theme. Ahora tenemos que hacer una llamada desde el <head> de nuestro sitio web para cargar esos archivos. Podemos hacerlo desde la opción de Integración que trae DIVI. Busca en el menú lateral la opción DIVI / Opciones del tema y allí ve a la pestaña Integración. En la caja Agregar código al < head > de su blog vamos a escribir el siguiente código:

<link rel="stylesheet" href="wp-content/themes/Divi-child/font-awesome/css/font-awesome.min.css">

Revisa la url y cámbiala si has subido la carpeta font-awesome a una ubicación diferente y tu child theme tiene otro nombre. Este código cargará el archivo css minimizado donde están todas las clases que cargan los iconos de esta fuente, y esas clases son las que vamos a utilizar para añadir el nuevo icono a DIVI.

Como veíamos en el ejemplo anterior, vamos a abrir nuevamente el archivo social_icons.php. Igual que en el caso anterior, vamos a añadir un nuevo elemento a la lista de iconos, pero en esta ocasión la clase que vamos a utilizar no es la que tenemos en el style.css del theme DIVI, sino una de las que tenemos en Font Awesome. Afortunadamente, en su página web podemos encontrar todos los iconos que necesitamos, con su clase correspondiente, así que cómodamente podemos revisarlos y buscar el que más nos guste. Busca el que quieras añadir, en nuestro caso va a ser el icono de Slideshare. Font Awesome nos dice que esta es la clase que tenemos que usar, dentro de la etiqueta <i>:

<i class="fa fa-slideshare" aria-hidden="true"></i>

Y este es el código que tenemos que pegar en nuestro archivo social_icons.php:

<a target="_blank" href="http://es.slideshare.net/tu-cuenta-slideshare">
<span><i class="et-social-icon fa fa-slideshare" aria-hidden="true"></i></span></a>

Guardamos y comprobamos. Ya tenemos nuestro icono. Pero se ve diferente a los demás, no tiene los mismos márgenes y se nota que es “diferente”:

Slideshare es diferente

Tenemos que retocar un poquito para que no haya diferencia. Nos vamos al style.css que tenemos en nuestro child theme y añadimos lo siguiente para modificar márgenes y que el tamaño del icono sea el mismo que el de los demás:

i.et-social-icon.fa.fa-slideshare {
 margin-top: -2px;
 margin-left: 12px;
font-size: 14px;
}

Y listo. Ahora ya podéis añadir todos los iconos y enlaces que queráis a vuestra web.

Este sitio usa cookies. Si continúa navegando da su consentimiento para el uso de dichas cookies y la aceptación de nuestra política de cookies. ACEPTAR

Aviso de cookies

Pin It on Pinterest

Share This