Cómo crear un enlace ancla

Resumen

Cuando hablamos de enlaces ancla, a lo que nos referimos en este artículo es a que, al hacer clic en un elemento, normalmente un texto o un botón, en lugar de ir a otra página, tu sitio web se desplaza a una sección específica. Por lo tanto, no redirige, solo se desplaza.

Los enlaces de la sección «Contenido» son enlaces ancla, pruébalos…

Cómo hacer un enlace ancla en HTML

Es muy fácil. En HTML, los enlaces se crean mediante un elemento de hipervínculo, que tiene este aspecto:

<a href=“”></a>

este elemento tiene el atributo href, que especifica a dónde lleva el enlace. Si fuera algo así:  

<a href=“https://minimalio.org”>Minimalio</a>

Este sería el resultado.. Minimalio (ir a https://minimalio.org)

Pero no queremos eso, queremos desplazarnos a otra sección de la página. Para ello, tenemos que utilizar el símbolo de hashtag: #.

<a href=“#minimalio”>Minimalio</a>

Este sería el resultado. Minimalio (ir a ID Minimalio)

Ahora estamos enlazando a un lugar específico, pero ¿cómo especificamos ese lugar? Lo hacemos con lo que se denomina un ID. Por ejemplo, con un encabezado, quedaría así:

<h3 id=“minimalio”>Minimalio</h3>

Encabezado minimalio con ID minimalio

Cómo crear un enlace ancla en Gutenberg

Fácil, creamos el enlace como cualquier otro enlace, con el símbolo del hashtag.

Y añadimos el ID en el panel lateral, para el bloque dado, en la sección Bloque, en la sección Avanzado, en el ancla HTML. Eso es todo.

Desplazamiento suave

El comportamiento predeterminado del navegador es que el sitio web salta directamente al elemento con el ID dado. Pero eso puede resultar muy confuso y no es una experiencia agradable. El desplazamiento suave es mucho mejor. Antes, esto tenía que hacerse con un código JavaScript especial, pero, por suerte, hoy en día se puede hacer con CSS. Solo hay que añadirlo al CSS adicional en el Personalizador de WP. (Custom CSS Tutorial). Si está utilizando el tema Minimalio, Ya está en el tema.

html {
scroll-behavior: smooth;
}

Área de relleno para un desplazamiento suave

A veces, por ejemplo en este sitio web, donde tengo el encabezado fijo, el ancla se desplazaría hasta el encabezado, pero este quedaría en la parte superior de la página, cubierto por mi encabezado. Y eso resultaría confuso. Para evitarlo, tuve que utilizar un poco de CSS. Recomendaría utilizarlo en casi todos los casos, incluso sin encabezado fijo.

html {
scroll-padding-top: 6rem;
}

Complementos interesantes para enlaces ancla

Antes de empezar a instalar complementos, asegúrate de que entiendes lo que se ha explicado anteriormente y de que realmente los necesitas. Los complementos ralentizan tu sitio web y pueden crear vulnerabilidades.

Add Anchor Links – by Karolína Vyskočilová

Este es un plugin interesante, que será muy apreciado por los usuarios con problemas de accesibilidad. Especialmente aquellos que solo utilizan el teclado. El plugin añade enlaces antes de todos los encabezados, en el tipo de contenido específico que tú defines (normalmente entradas). De este modo, el usuario sólo tiene que utilizar la tecla Tab para desplazarse por los encabezados principales. Es muy útil y un detalle encantador.

https://wordpress.org/plugins/add-anchor-links/

https://kybernaut.cz/en/plugins/add-anchor-links

Automatic Hx Menu – By Julien Crego

Este plugin crea un menú de contenido a partir de todos los encabezados de tu entrada. Así que, en definitiva, es lo mismo que puedes ver aquí, en la parte derecha. Es posible que tengas que utilizar algún CSS personalizado para adaptarlo a tu diseño, pero sin duda es muy útil.

https://wordpress.org/plugins/automatic-hx-menu

Easy Table of Contents – by Magazine3

Es prácticamente lo mismo que Automatic Hx Menu, solo que crea un índice a partir de los encabezados. Este plugin tiene muchas más opciones y configuraciones, pero también lo hace mucho más complicado.

https://wordpress.org/plugins/easy-table-of-contents