Como usuarios de Divi, ya sabréis que Divi, en su Divi – OPCIONES DEL TEMA, tenemos la opción de añadir botones sociales cómodamente, pero que sólo vienen 4 pre configurados: Facebook, Twitter, Google+ y RSS.

como añadir nuevos iconos redes sociales a divi

Qué pasa entonces cuando nuestro cliente quiere añadir Youtube o Instagram por ejemplo?

En esta entrada de blog vamos a ver cómo añadir nuevos iconos sociales a WordPress + Divi, sin salir del backoffice de WordPress.

PASO 1. ACCEDER AL EDITOR DE TEMAS DE WORDPRESS

editor de temas de wordpress

 

PASO 2. ACCEDER A SOCIAL_ICONS.PHP EN ARCHIVOS DEL TEMA

editor de temas de wordpress SOCIAL ICONS INCLUDES

 

PASO 3. EDITAR EL CONTENIDO DE ESTE ARCHIVO, CON TODOS LOS NUEVOS ICONOS QUE QUERAMOS AGREGAR

Para añadir nuevos iconos:

  • Agregar el siguiente código al archivo antes de </ul>

<li class=»et-social-icon et-social-linkedin«>
<a href=»https://www.linkedin.com/company/red-urbansol/» class=»icon»>
<span><?php esc_html_e( ‘Linkedin‘, ‘Divi’ ); ?></span>
</a>
</li>

  • Y editaremos en él 3 elementos: el nombre la red social, el link a donde queremos redirigir, y el icono seleccionado.

editor de temas de wordpress SOCIAL ICONS INCLUDES actualizar archivo codigo nuevos iconos redes sociales

  • Clicaremos en ACTUALIZAR ARCHIVO.

 

TRUCO. Si además deseas que las redes sociales se abran en una nueva ventana, para que el usuario no abandone tu sitio web, puedes añadir al script un TARGET BLANK. 

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

 

Y esto es todo!

Con estos sencillos pasos, podemos agregar tantos iconos sociales como queramos a los que vienen por defecto en Divi 🙂

portada wordpress divi con nuevos iconos redes sociales

Esperamos que os haya sido de ayuda,

Lanzadera Online.