✅Abrir Enlaces Externos Automáticamente en una Nueva Pestaña en WordPress

Si usas Gutenberg en WordPress, seguro que te ha pasado: cada vez que insertas un enlace externo, tienes que hacer clic en el texto del enlace y buscar la opción de «Abrir en una nueva pestaña» y marcarla. Es un poco coñazo, sobre todo si tu post tiene muchos enlaces y quieres que los usuarios no abandonen tu web.

Pero no te preocupes, con un simple snippet de código podemos solucionar este problema automáticamente.

¿Qué Hace Este Código?

El siguiente fragmento de código se encarga de detectar todos los enlaces de una página y comprobar si son externos. Si el dominio del enlace es diferente al de tu web, entonces se configura automáticamente para abrirse en una nueva pestaña.

Código para functions.php

Si quieres que esta función se aplique a todo tu sitio, simplemente copia y pega este código en el archivo functions.php de tu tema hijo o en un plugin de código personalizado como Code Snippets:

function abrir_enlaces_externos_nueva_pestana() {
    ?>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll("a").forEach(function(link) {
                if (link.hostname && link.hostname !== location.hostname) {
                    link.setAttribute("target", "_blank");
                    link.setAttribute("rel", "noopener noreferrer");
                }
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'abrir_enlaces_externos_nueva_pestana');

Lenguaje del código: PHP (php)

Explicación del Código

1. document.addEventListener("DOMContentLoaded", function() {...})
   • Se asegura de que el código se ejecute solo cuando la página haya cargado completamente.
2. document.querySelectorAll("a").forEach(function(link) {...})
   • Selecciona todos los enlaces (<a>) de la página y los recorre uno por uno.
3. if (link.hostname && link.hostname !== location.hostname) {...}
   • Verifica si el enlace es externo (es decir, si el dominio del enlace es distinto al de la web actual).
4. link.setAttribute("target", "_blank");
   • Si el enlace es externo, se le agrega el atributo target="_blank", que lo hace abrirse en una pestaña nueva.
5. link.setAttribute("rel", "noopener noreferrer");
   • Se agregan estos atributos por seguridad y rendimiento, evitando vulnerabilidades como el window.opener.

Conclusión

Este pequeño fragmento de código ahorra tiempo y mejora la experiencia del usuario en tu sitio. Ya no tendrás que marcar manualmente «Abrir en una nueva pestaña» cada vez que agregues un enlace externo en Gutenberg. Todo se hará automáticamente.

Revisa este otro código de productividad que rellena automáticamente los atributos ALT de las imágenes al subirlas. Clic aquí.