Los enlaces de anclaje son tan antiguos como la propia web, pero siguen siendo una herramienta organizativa muy útil. En este tutorial, modernizaremos el comportamiento de los enlaces de anclaje utilizando el complemento de WordPress «Desplazamiento de página a id».
Los enlaces ancla difieren de los enlaces de página HTML estándar. Un enlace estándar lleva al visitante a la parte superior de la página de destino. Los enlaces de anclaje llevan al visitante a una ubicación específica en una página. Marcas esa ubicación en la página usando una etiqueta de anclaje.
Entonces, un enlace ancla tiene dos partes: el enlace en sí y el ancla que le dice a dónde ir.
En la mayoría de los navegadores web, al hacer clic en un enlace de anclaje, lo «salta» inmediatamente a la ubicación del anclaje. No hay nada de malo en eso, así es como fueron diseñados para funcionar.
Pero, ¿y si pudiéramos reemplazar ese salto abrupto hacia abajo en la página de WordPress con un desplazamiento suave? El pergamino tiene una sensación más moderna y le permite al visitante saber que todavía está en la misma página, simplemente moviéndose a una nueva ubicación.
Para lograr ese efecto, vamos a utilizar el complemento Page scroll to id .
Instalación del complemento de desplazamiento de página a id
Inicie sesión en su panel de administración de WordPress.
En la navegación de la columna izquierda, pase el mouse sobre el enlace «Complementos» y haga clic en el enlace «Agregar nuevo».
En el cuadro «Buscar complementos…», ingrese «Desplazamiento de página a id».
Una vez que haya localizado el complemento, haga clic en el botón «Instalar ahora».
Haga clic en el botón «Activar».
Usando el complemento de desplazamiento de página a id
El complemento funciona tan pronto como se activa. Sin embargo, hay algunas opciones de configuración, de las que hablaremos más adelante.
Como mencioné, los enlaces ancla tienen dos partes, los enlaces y los objetivos. Puede reconocer un enlace ancla por el hashtag (#) en el enlace.
Por ejemplo, este enlace apunta a un ancla llamada new-section :
Pase a la <a href=” #new-section “>nueva sección</a> para continuar.
La etiqueta de anclaje, que se coloca justo encima de la sección de la página a la que nos dirigimos, tiene este aspecto:
<a id=” nueva-sección “></a>
Echemos un vistazo a cómo creamos enlaces y anclas usando el complemento.
Creación de un enlace de desplazamiento
Creando un enlace en el editor de WordPress Gutenberg:
Abra una página o una publicación en el editor.
Seleccione el texto que se convertirá en el enlace.
Haga clic en el icono de enlace.
Aparecerá el campo para ingresar la URL.
Ingrese el nombre del ancla, comenzando con un hashtag.
Haga clic en el icono «Aplicar».
Creando un enlace en el editor “clásico” de WordPress:
Abra una página o una publicación en el editor.
Seleccione el texto que se convertirá en el enlace.
Haga clic en el icono «Insertar/editar página para desplazarse al enlace de identificación».
Aparecerá una ventana de «desplazamiento de la página al enlace de identificación».
Ingrese el nombre del ancla, comenzando con un hashtag, en el campo «URL/id (por ejemplo, #my-id)».
Haga clic en el botón «Aceptar».
Creación de anclas (u objetivos)
Crear una etiqueta de anclaje en el editor de WordPress Gutenberg:
Abra una página o una publicación en el editor.
Vaya a la ubicación en la página donde desea insertar el ancla.
Encima del bloque al que desea vincular, haga clic en el icono «Agregar bloque».
En la sección «Elementos de diseño», haga clic en el bloque «Desplazamiento de página a id».
Introduce el nombre del ancla. No agregues el hashtag aquí . Eso solo se usa para el enlace.
Guarde o actualice la página o la publicación.
Creando una etiqueta ancla en el editor “clásico” de WordPress:
Abra una página o una publicación en el editor.
Vaya a la ubicación en la página donde desea insertar el ancla.
Coloque el cursor al principio del párrafo o la sección a la que desea vincular.
Haga clic en el icono «Insertar/editar página para desplazarse hasta el objetivo de identificación».
Aparecerá una ventana de «Desplazamiento de página a id de destino».
Ingrese el nombre del ancla en el campo «id (por ejemplo, mi-id)». No uses un hashtag esta vez . Eso solo se usa en el enlace.
Haga clic en el botón «Aceptar».
Guarde o actualice la página o la publicación.
El enlace ancla en la página
Ahora, cuando visita la página, el enlace de anclaje para desplazarse a la identificación está allí. Al hacer clic en él, se desplaza suavemente hacia abajo a la sección anclada.
Le demostraría la maravillosa acción de desplazamiento suave, pero aquí estamos trabajando dentro de las limitaciones de las imágenes estáticas.
Cómo ajustar un sitio con una barra de navegación estática o un encabezado
Si hay una barra de navegación u otro elemento en la parte superior de la página en su sitio, es posible que deba realizar un ajuste.
Los enlaces de anclaje mostrarán el texto de destino en la parte superior de la ventana del navegador. Entonces, si usa, digamos, la barra de administración de WordPress, la primera línea de texto se puede cortar.
Podemos arreglar eso configurando un «desplazamiento».
En la navegación de la columna izquierda, pase el mouse sobre el enlace «Configuración» y haga clic en el enlace «Desplazar página a id».
Desplácese hacia abajo hasta la sección «Compensación».
Sé que la altura de la barra de administración de WordPress es de 32 píxeles, así que ingresaré 32 como la cantidad de píxeles que quiero compensar. Puede que tenga que experimentar para encontrar la compensación perfecta para su sitio.
Desplácese hasta la parte inferior de la página y haga clic en el botón «Guardar cambios».
Ahora, cuando hago clic en el enlace de anclaje, todo el texto de destino está visible.
Más opciones de configuración para desplazamiento de página a id
Tus enlaces ancla deberían estar funcionando ahora. Pero hay un par de opciones de configuración interesantes.
La sección Selector(es) debe dejarse como está a menos que sea bueno con CSS y tenga motivos para cambiar el valor predeterminado.
Puede experimentar con la duración del desplazamiento , el tipo/aceleración del desplazamiento y el comportamiento del desplazamiento . ¿Quién sabía que había tantos tipos diferentes de desplazamiento?
Si cambia la configuración de desplazamiento, intente no hacer nada demasiado extraño. Los usuarios de la web tienen ciertas expectativas cuando se trata de desplazarse y no desea distraerlos innecesariamente.
Hay muchos otros ajustes de configuración, pero son principalmente para usuarios avanzados. Encontré que el complemento funciona muy bien usando la configuración predeterminada.
Qué sucede si desinstala la página, desplácese hasta el complemento de identificación
Si desinstala el complemento, las páginas y las publicaciones que usaron el complemento se verán afectadas.
- Los enlaces y anclas creados por el complemento ya no funcionarán.
- Los códigos cortos del complemento (no hablamos de códigos cortos, pero están disponibles) dejarán de funcionar, por lo que los códigos cortos se mostrarán en cualquier lugar donde se hayan utilizado.
De vuelta a lo basico
Puede parecer un poco desactualizado publicar un tutorial para un complemento de salto de página de WordPress. Los enlaces ancla son tecnología antigua, sí. Pero siguen siendo excelentes herramientas organizativas y no se usan con tanta frecuencia como en el último milenio.
Entonces, ¿por qué alguien se molestaría?
Bueno, hay muchas razones de usabilidad y experiencia de usuario. Pero como propietario de un sitio web, supongo que le preocupa el SEO. Y probablemente sepa que los enlaces internos (enlaces de su sitio a su sitio) contribuyen a un buen SEO .
Ahí tienes Más enlaces internos = mejor SEO.
Es posible que le resulte más fácil crear enlaces de anclaje que encontrar páginas relacionadas en su sitio a las que enlazar. Eso puede ser especialmente cierto si publicas mucho contenido largo.
En cualquier caso, ahora sabe cómo hacer que esos enlaces de anclaje dejen de saltar y comiencen a deslizarse y deslizarse. Y ser suave siempre es algo bueno en mi libro.
¿Utiliza enlaces de anclaje en su sitio web? ¿Si no, porque no? ¿Crees que vale la pena instalar un complemento para modificar su comportamiento predeterminado? Házmelo saber en los comentarios.