• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Abrir enlaces externos en un nuevo tab automáticamente

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

  • Relación bidireccional entre diferentes tipos de contenido con ACFRelación bidireccional entre diferentes tipos de contenido con ACF
  • Creación dinámica de Custom Post Types en WordPressCreación dinámica de Custom Post Types en WordPress
  • Mostrar / ocultar bloques Gutenberg para usuarios registrados o visitantesMostrar / ocultar bloques Gutenberg para usuarios registrados o visitantes
  • Borrar tablas wp_actionscheduler_actions y wp_actionscheduler_logsBorrar tablas wp_actionscheduler_actions y wp_actionscheduler_logs
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 principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Deshabilitar el editor de bloques para Widgets en WordPress

Konami personalizado en tu sitio WordPress sin usar plugins

Mostrar la fecha de actualización en las entradas de WordPress

Formulario de login sin plugins en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados