Cómo agregar enlaces de anclaje «fácilmente» en WordPress (paso a paso)

A veces usamos enlaces de anclaje en nuestras publicaciones más largas de WordPress para ayudar a los usuarios a llegar rápidamente a la sección que desean leer. Los enlaces de anclaje se utilizan a menudo en la tabla de la sección de contenido porque ayudan a los usuarios a navegar por un artículo más largo sin volver a cargar la página. También puede ayudar con el SEO, ya que Google puede mostrarlos debajo de sus listas de búsqueda para facilitar la navegación (más sobre esto más adelante). En esta guía paso a paso, explicaremos qué son los enlaces de anclaje y le mostraremos cómo agregar enlaces de anclaje fácilmente en WordPress.

¿Listo? Comencemos con un ejemplo en vivo de enlaces de anclaje. A continuación se muestra una lista de todos los temas que cubriremos en esta guía. Continúe y haga clic en uno de esos enlaces, y se lo dirigirá a esa sección específica.

¿Qué es un enlace de anclaje?

Un enlace de anclaje es un tipo de enlace en la página que lo lleva a una ubicación específica en esa misma página. Permite a los usuarios ir a la sección que más les interesa. Mira la captura de pantalla animada a continuación:

Como puede ver, hacer clic en el enlace de anclaje lleva al usuario a la sección específica de la misma página. Los enlaces de anclaje se utilizan comúnmente en artículos más largos como una tabla de contenido, lo que permite a los usuarios saltar rápidamente a las secciones que desean leer. Otro uso de los enlaces de anclaje es crear enlaces de marcadores en su sitio de WordPress. Esto le permite compartir el enlace del marcador en las redes sociales o en boletines informativos por correo electrónico. Entonces, cuando se cargue la página, sus usuarios saltarán inmediatamente a la sección que desea que vean.
¿Por qué y cuándo debería utilizar enlaces de anclaje?
Un usuario promedio pasa menos de unos segundos decidiendo si permanecer o abandonar su sitio web. Solo tienes esos pocos segundos para convencer a los usuarios de que se queden. La mejor forma de hacerlo es ayudarles a ver rápidamente la información que buscan. Los enlaces de ancla lo facilitan al permitir a los usuarios omitir el resto del contenido e ir directamente a la parte de su interés. Mejora la experiencia del usuario y le ayuda a ganar nuevos clientes / lectores. Los enlaces de anclaje también son excelentes para WordPress SEO. Google puede mostrar un enlace de anclaje en los resultados de búsqueda en forma de «saltar al enlace».

A veces, Google también puede mostrar varios enlaces de esta página como un enlace a enlaces, lo que aumenta la tasa de clics en los resultados de búsqueda. En otras palabras, obtiene más tráfico a su sitio web.

Dicho esto, echemos un vistazo a cómo agregar fácilmente enlaces de anclaje en WordPress.

Cómo agregar enlaces de anclaje manualmente en WordPress

Si solo desea agregar algunos enlaces de anclaje o enlaces de marcadores en su publicación, puede hacerlo fácilmente de forma manual. Básicamente, debe agregar dos cosas para que un texto de anclaje funcione como se espera.

Cree un enlace de anclaje con un signo # antes del texto de anclaje.

Agregue el atributo id al texto donde desea que se lleve al usuario.

Comencemos con la parte del enlace de anclaje.
Paso 1. Crea un enlace de ancla
Primero debe seleccionar el texto que desea vincular y luego hacer clic en el botón Insertar vínculo en el editor de WordPress Gutenberg.

Esto abrirá la ventana emergente de inserción de enlace donde generalmente agrega la URL o busca una publicación o página para vincular. Sin embargo, para un enlace de anclaje, solo usará # como prefijo e ingresará las palabras clave para la sección a la que desea que vaya el usuario.

Después de eso, haga clic en el botón Enter para crear el enlace. Algunos consejos útiles para elegir el texto que se utilizará como enlace # de anclaje:

• Utilice las palabras clave relacionadas con la sección a la que está enlazando.
• No hagas que tu enlace de ancla sea innecesariamente largo o complejo.
• Utilice guiones para separar palabras y hacerlas más legibles.
• Puede usar mayúsculas en el texto de anclaje para que sea más legible. Por ejemplo: # Best-Coffee-Shops-Manhattan.

Una vez que se agrega el enlace, podrá ver el enlace que creó en el editor. Sin embargo, hacer clic en el enlace no hace nada. Esto se debe a que los navegadores no pueden encontrar el enlace de anclaje como ID. Arreglemos esto apuntando los navegadores al área, sección o texto que desea mostrar cuando los usuarios hacen clic en el enlace de anclaje.
Paso 2. Agregue el atributo de ID a la sección vinculada
En el editor de contenido, desplácese hasta la sección a la que desea que vaya el usuario cuando haga clic en el enlace de anclaje. Por lo general, se trata de un encabezado para una nueva sección. A continuación, haga clic para seleccionar el bloque, luego, en la configuración del bloque, haga clic en la pestaña Avanzado para expandirlo. Simplemente puede hacer clic en la pestaña «Avanzado» debajo de la configuración del bloque de encabezado.

Después de eso, debe agregar el mismo texto que agregó como enlace de anclaje en el campo «HTML Anchor». Asegúrese de agregar el texto sin el prefijo #. Ahora puede guardar su publicación y ver su enlace de anclaje en acción haciendo clic en la pestaña de vista previa. ¿Qué pasa si la sección que desea mostrar no es un título sino solo un párrafo normal o algún otro bloque? En este caso, debe hacer clic en el menú de tres puntos en la configuración del bloque y seleccionar «Editar como HTML».

Esto le permitirá editar el código HTML para ese bloque en particular. Debe seleccionar Buscar la etiqueta HTML del elemento al que desea apuntar. Por ejemplo,

si es un párrafo, o

si es un bloque de tabla, y así sucesivamente. Ahora necesita agregar su ancla como atributo de ID a esta etiqueta, como el siguiente código:

Ahora verá un aviso de que este bloque contiene contenido inesperado o no válido. Debe hacer clic en Convertir a HTML para conservar los cambios que realizó.

Cómo agregar manualmente un enlace de anclaje en el editor clásico

Si todavía está usando el antiguo editor clásico de WordPress, aquí le mostramos cómo agregar el enlace de anclaje / enlace de salto.
Paso 1. Crea el enlace de anclaje
Primero, seleccione el texto que desea convertir en un enlace de anclaje, luego haga clic en el botón «Insertar enlace».

Después de eso, debe agregar su enlace de anclaje con un prefijo de signo # seguido del slug que desea usar para el enlace.
Paso 2. Agregue el atributo de ID a la sección vinculada
El siguiente paso es señalar a los navegadores la sección que desea mostrar cuando los usuarios hagan clic en su enlace de anclaje. Para hacer esto, deberá cambiar al modo «Texto» en el editor clásico. Después de eso, desplácese hacia abajo hasta la sección que desea ver.

Ahora busque la etiqueta HTML que desea orientar. Por ejemplo,

,

,

etc. Debe agregarle el atributo ID con la barra de su enlace de anclaje sin el prefijo #, así:

Ahora puede guardar sus cambios y hacer clic en el botón de vista previa para ver su enlace de anclaje en acción.

Cómo agregar manualmente enlaces de anclaje en HTML

Si está acostumbrado a escribir en modo texto del antiguo editor clásico de WordPress, aquí le mostramos cómo crear manualmente un enlace de anclaje en HTML. Primero, debe crear el enlace de anclaje con un prefijo # usando la etiqueta habitual, como esta: Las mejores cafeterías de Manhattan A continuación, debe desplazarse a la sección que desea mostrar cuando los usuarios hacen clic en el enlace. Por lo general, esta sección es un título (h2, h3, h4, etc.), pero puede ser cualquier otro elemento HTML o incluso un párrafo simple.

etiqueta. Debe agregar el atributo ID a la etiqueta HTML y luego agregar la barra de enlace de anclaje sin el prefijo #.

Los mejores cafés de Manhattan

Ahora puede guardar sus cambios y obtener una vista previa de su sitio web para probar el enlace de anclaje.

Cómo agregar automáticamente encabezados como enlaces de anclaje en WordPress

Este método es adecuado para usuarios que publican artículos largos con regularidad y necesitan crear una tabla de contenido con enlaces de anclaje. Lo primero que debe hacer es instalar y activar el complemento Easy Table of Contents. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress. Este complemento le permite generar automáticamente una tabla de contenido con enlaces de anclaje. Utiliza encabezados para adivinar las secciones de contenido y puede personalizarlo completamente para satisfacer sus necesidades. Tras la activación, simplemente navegue hasta Configuración »Tabla de contenido página para configurar los ajustes del complemento.

Primero, debe habilitarlo para los tipos de publicaciones a las que desea agregar una tabla de contenido. De forma predeterminada, el complemento está habilitado para las páginas, pero también puede habilitarlo para sus publicaciones. También puede activar la opción Autotexto. Esto permite que el complemento genere automáticamente la tabla de contenido para todas las publicaciones, incluidas las publicaciones más antiguas que coinciden con los criterios. Si solo desea generar automáticamente una tabla de contenido para artículos específicos, puede dejar esta opción sin marcar. Luego, desplácese un poco hacia abajo para seleccionar dónde desea que se muestre la tabla de contenido y cuándo desea que se active.

Puede ver otras configuraciones avanzadas en la página y cambiarlas según sea necesario. Recuerde hacer clic en el botón «Guardar cambios» para guardar su configuración. Si ha habilitado la opción Autotexto, ahora puede mostrar un artículo existente con el número especificado de títulos. Notará que el complemento mostrará automáticamente una tabla de contenido antes del primer título del artículo. Si desea generar manualmente una tabla de contenido para artículos específicos, debe editar el artículo donde desea mostrar una tabla de contenido con enlaces de anclaje …