No siempre las funciones del tema de WordPress, que hemos elegido para nuestra web, actúan como nosotros queremos. En este tutorial nos referimos a los links de las redes sociales, que para evitar que el usuario abandone nuestra página, vamos a forzar que se abran en una nueva pestaña del navegador.
Cómo abrir los enlaces a redes sociales en otra pestaña diferente
No sé a vosotros, pero a mi me confunde un poco cuando navego en una web y me salgo al picar en un enlace de terceros, como es el caso de los botones o links para "seguir en redes sociales".
Esta acción muchas veces carga en la misma pestaña donde estamos, forzando el abandono del sitio y posiblemente que el usuario deje de navegar por el contenido de dicha web.
En otro tutorial explicaba como abrir en una nueva pestaña los iconos de las redes sociales de la cabecera y el footer desde un tema hijo, pero en los widgets de la barra lateral es más complicado localizar la línea a modificar.
Si seguiste ese tutorial y no tienes el widget de redes sociales, perfecto. Pero si tienes este widget necesitarás realizar los siguientes pasos y podrás ignorar el proceso anterior, ya que el código que te voy a facilitar afecta a todos los iconos: menú superior, footer y widget.
Opciones de configuración de Elegant Themes
En los temas de Elegant Themes, como Extra y Divi, la solución es muy sencilla, añadir un pequeño código en la pestaña de integración de las opciones del tema.
Esta pestaña "Integración" contiene unas casillas para poder añadir diferentes códigos al tema sin necesidad de editar los archivos del servidor. Y lo mejor de todo es que estos cambios no se pierden con las actualizaciones.
En este caso concreto, necesitamos añadir un script en el head, así que nos aseguramos que la primera pestaña está activa, la que hace referencia al código de la cabecera, y colocamos el código siguiente según el tema que tengamos instalado.
Código EXTRA para abrir redes sociales en una nueva pestaña:
1 2 3 4 5 | <script type="text/javascript"> jQuery(document).ready(function(){ jQuery(".et-extra-social-icons a, .widget_et_social_followers a").attr('target', '_blank'); }); </script> |
Código DIVI para abrir redes sociales en una nueva pestaña:
1 2 3 4 5 | <script type="text/javascript"> jQuery(document).ready(function(){ jQuery(".et-social-icons a").attr('target', '_blank'); }); </script> |
Cómo utilizar el código en otros temas de WordPress
El script es muy cortito y muy simple, y se puede utilizar para cualquier tema de WordPress al que queramos añadir el atributo "target="_blank" en algún enlace concreto, siempre que conozcamos la clase asignada a una etiqueta HTML.
Sólo hay que cambiar las clases (class) de las etiquetas HTML que hay en la línea 3 por la que corresponda en nuestro tema.
Para saber cómo localizar esa etiqueta y la class correspondiente, podéis seguir las indicaciones de este vídeo.
Para añadir el código en la cabecera del tema tendrás que buscar la opción dentro del tema que utilices, modificar el código a través de un tema hijo o instalar un plugin que te permita insertarlo desde la misma administración de WordPress.
Cómo hacer Formulario de contacto- Personalizar el menú de WordPress usando Extra de ejemplo
- Cómo hacer un efecto de paralaje en el tema Extra
- Modificar la cabecera y poner una imagen para personalizar el tema Extra
- Utilizar diferentes fondos en Extra según el dispositivo
- Cómo añadir Breadcrumb o Migas de pan a Extra
0 comentarios