Inicio Informática Enlaces externos, como abrirlos en nuevo tab de forma automática

Enlaces externos, como abrirlos en nuevo tab de forma automática

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Una vez más aquí. Hoy me encontré una función muy útil para abrir enlaces externos en un nuevo tab del navegador de forma automática. He de decir que esta función la encontré en la web decodecms, pero espero que al autor de la función no le importe demasiado que la modifique un pelín y la publique aquí también. Sobre la solución que aporta esta función, me preguntaron hace una o dos semanas, y mira por donde sin querer me encontré con la solución.

El problema que soluciona esta función es para todos aquellos que tienen un sitio con Wordpress con muchas entradas, y no en todas ellas han agregado correctamente los enlaces externos. Como corregir enlace por enlace sería un trabajo muy tedioso y laborioso, la función que vamos a ver a continuación debería aportar una solución para que cada enlace se abra en un tab nuevo del navegador.

Enlaces en Wordpress

Si eres usuario de Wordpress, sabrás ya que al crear o editar un enlace puedes especificar si quieres que se abra en una pestaña nueva.

Si activamos la opción «Abrir en una nueva pestaña» se va a generar un código HTML que incluye atributos como:

  • tarter=»_blank»
  • rel=»noreferrer noopener»
<a href="https://www.urlexterna.com/" target="_blank" rel="noreferrer noopener">Texto enlace</a>

Función para abrir enlaces externos en una nueva tab

Esta función deberíamos poder agregarla al final del archivo functions.php del tema que utilicemos o en nuestro plugin de funciones.

/*abrir enlaces en un tab nuevo*/

function external_links_new_tab() { 
/*Paramos el PHP*/
?> 
	<script>
		jQuery(".entry-content a[href^=http]").each(function(){
			if(this.href.indexOf(location.hostname) == -1) {
				jQuery(this).attr({
					target: "_blank",
					rel: "noreferrer noopener",
				});
			}
		});
	</script> 
<?php
/*Volvemos a iniciar PHP*/
}
add_action('wp_footer', 'external_links_new_tab', 100);

En este código se utiliza:

  • El Hook footer que hace referencia a la función external_links_new_tab.
  • Utilizamos una prioridad 100. Esta es la más alta que podemos utilizar para que vaya al final del todo el resto del código que podríamos utilizar en este mismo hook.
  • Dentro de la función incluimos el script que hará el trabajo de buscar los enlaces y añadirle los atributos.
  • Se va a llamar directamente a JQuery, evitando así los errores de usar directamente $.
  • Vamos a buscar los enlaces dentro del contenido utilizando la clase .entry-content.
  • Si los enlaces no tienen el atributo href en el nombre del dominio, se considerará un enlace externo.
  • Para los enlaces detectados, se van a agregar los atributos target y rel.

Como espero que se pueda ver, gracias a esta función no es necesario corregir uno por uno los enlaces externos de un sitio realizado con Wordpress para que se abran en una ventana nueva.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.