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.