• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Themes / Abrir enlaces externos en un nuevo tab automáticamente
Anuncio banner webservi

Abrir enlaces externos en un nuevo tab automáticamente

Abrir enlaces externos en un nuevo tab automáticamente

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

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

¿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.

Nuevo enlace WordPress Gutenberg

 
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.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Exportar / importar  la configuración del personalizador de temas en WordPressExportar / importar la configuración del personalizador de temas en WordPress
  • Personalizar página de gracias de WooCommercePersonalizar página de gracias de WooCommerce
  • Configura el tema Twenty Twenty One WordPressConfigura el tema Twenty Twenty One WordPress
  • Leer datos desde otra base de datos en WordPressLeer datos desde otra base de datos en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social

Populares

Modificar el precio de un producto por código en WooCommerce

Habilitar comentarios en el inicio de WordPress

¿Qué son las claves de seguridad en WordPress y cómo cambiarlas?

¿Cómo usar imágenes retina en WordPress?

Recientes

  • Exportar / importar la configuración del personalizador de temas en WordPress
  • Personalizar página de gracias de WooCommerce
  • Configura el tema Twenty Twenty One WordPress
  • Abrir enlaces externos en un nuevo tab automáticamente
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad