Abrir enlaces externos en un nuevo tab automáticamente

[ 2 febrero 2021 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

¿Tienes un sitio web con muchas entradas y no en todas has agregado correctamente enlaces externos?, sería muy trabajoso ir haciendo cambios por cada uno de los enlaces. En este artículo veremos cómo abrir los enlaces externos en un nuevo tab de manera automática.

Generalidades

En WordPress, al crear o editar un enlace, puedes especificar para que se abra en una nueva pestaña, tal como se muestra en la siguiente imagen.

El código HTML que se genera incluye atributos adicionales como:

target="_blank"
rel="noreferrer noopener"

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

Código para abrir enlaces externos

Puedes agregar este código al final de tu archivo functions.php de tu tema hijo.

<?php //No copiar esta línea

function dcms_external_links_new_tab() { ?>
	<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 }
add_action('wp_footer', 'dcms_external_links_new_tab', 100);

En el código anterior:

Usamos el Hook wp_footer, que hace referencia a la función dcms_external_links_new_tab
Usamos una prioridad de 100, es una prioridad alta para asegurarnos que vaya al final de todo el resto de código que podría usar este mismo hook
Dentro de la función cortamos la ejecución de PHP para escribir un script que es el que hará el trabajo de buscar los enlaces y agregarles los atributos
Llamamos explicitamente a JQuery, para evitar errores de usar directamente $
Buscamos los enlaces dentro del contenido, es por eso que usamos la clase .entry-content
Si los enlaces no tienen como parte del atributo href el nombre del dominio, entonces será considerado un enlace externo
Para esos enlaces externos detectados agregamos los atributos target y rel, tal como lo habría hecho WordPress si lo hubiéramos realizado de manera manual

Conclusión

No es necesario corregir uno a uno tus enlaces externos, puedes corregirlos de manera automática para que se abran en una nueva ventana de manera simple a través de código.

¿Aún con dudas?, en el siguiente video se detalla cómo usar el código.