Divi y los enlaces a las redes sociales

Si usas la plantilla Divi para WordPress habrás comprobado como los enlaces a las redes sociales que añades en la cabecera o pie de la web, se abren en la misma ventana del navegador al hacer clic sobre ellos.

A mí me gusta que si una web contiene enlaces que dirigen a otros dominios, éstos se abran en una nueva pestaña en el navegador, para evitar que se rompa la navegación y reducir el porcentaje de rebote de la visita.

Si quieres cambiar este comportamiento y hacer que tus cuentas sociales aparezcan en una pestaña independiente, te recomiendo añadir una simple función en el tema. Sigue leyendo y te enseñaré cómo hacerlo.

Divi nos permite inyectar fragmentos de código en determinadas áreas de la plantilla para hacer algunas personalizaciones. Para verlas debes acudir a las Opciones del tema, en la administración de WordPress y una vez dentro, abrir las opciones de la pestaña Integración, donde nos aseguraremos de que la opción Activar código del cuerpo esté activa.


Ahora pondremos el cursor en el editor de códigos de Agregar código al < body > y escribiremos la siguiente función jQuery:
Básicamente, lo que hace es añadir el atributo html target="blank" a las etiquetas de enlaces a que tengan como nombre de clase icon, dentro de otro elemento con clase et-social-icon. Una vez añadida, recuerda guardar los cambios.

Ahora podrás comprobar en la vista web como ahora al hacer clic en los iconos sociales de la web se abren en una nueva pestaña del navegador.

Espero que te haya sido de utilidad. Si tienes alguna duda o quieres dejarme feedback puedes escribir un comentario por aquí abajo.