¿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.
Artículos Relacionados
(2 votos, promedio: 5,00 de 5)
Cargando...