Muchas de las elecciones de diseño que hará se relacionan con la usabilidad de referencia y la experiencia del usuario (UX) de su sitio. Además, el contenido del blog – en general, lectura las páginas de su sitio web – tienen mucho valor. Si se casa con ambos, a menudo considerará formas de mejorar la UX de su contenido. Los enlaces de anclaje de WordPress son la base de la UX de su contenido.
Trate los enlaces de anclaje como navegación interna para una publicación determinada. Puede colocarlos en cualquier lugar, pero los encabezados son un caso de uso común. Esto permite al lector saltarse la publicación si lo desea sin perder el rumbo. Este es un problema de UX de primer nivel, y algo en lo que la mayoría de los propietarios de sitios web deberían pensar.
Para mostrarle lo simple que es usarlos, en esta publicación veremos los enlaces de anclaje de WordPress. Antes de entrar en las diferentes formas de agregarlos, hablemos de lo que son y lo que pueden hacer por usted.
¿Qué es un enlace de anclaje?
En general, un enlace ancla es un elemento en el que se puede hacer clic en la navegación integrada. Es específico de una parte del contenido y lo llevará a un punto posterior de la página. Los usamos en Recursos WP para ayudarlo a seguir los diferentes pasos en los tutoriales:
Si hace clic en el enlace, la página irá a la sección correspondiente que especifique. Es una implementación simple que puede marcar una gran diferencia en la usabilidad de su sitio web. Más adelante hablaremos de algunos de estos casos.
Por qué quieres usar enlaces ancla en WordPress
Mencionamos la usabilidad como un motivador clave para usar enlaces de anclaje de WordPress, y es una razón principal sólida para usarlos. Sin embargo, hay muchos casos de uso en los que puede agregarlos a su sitio. Por ejemplo:
- Si desea ofrecer a sus lectores contenido muy largo (como publicaciones de 3000 palabras), a menudo tendrá una tabla de contenido. Este es un uso personalizado de las líneas de anclaje.
- Los anclajes también pueden funcionar cuando comparte publicaciones desde marcadores. Si coloca un ancla en una URL, el lector saltará directamente al punto que desea que vea.
- Su optimización de motor de búsqueda (SEO) puede ganar fuerza ya que en algunos casos los motores de búsqueda mostrarán estos enlaces de anclaje de WordPress como entradas separadas.
En resumen, si desea que los lectores permanezcan en su sitio y se interesen en su contenido, los enlaces de anclaje de WordPress son un arma vital en la batalla por el tráfico. En cuanto a cómo agregarlos a su sitio web, le mostraré las siguientes secciones.
¿Cómo agregar enlaces anclados a cualquier código HTML?
La base para agregar enlaces a los anclajes de WordPress es HTML. De hecho, puede usarlos en cualquier sitio web, no solo en WordPress. Hay dos partes: el ancla y la etiqueta.
Primero agregará el enlace al ancla como cualquier otro hipervínculo, usando <a> Etiquetas. Para el enlace en sí, usará un «octothorpe» (también conocido como hash o hash) delante de él:
<a href="#anchor-link">Click further down the page</a>
Sin embargo, si hace clic en esto, el enlace no irá a ninguna parte. para hacerlo funcionar en algún lugaragregaras lo mismo href enlace como un id más en contenido, sin octothorpe:
<h2 id="anchor-link">Our Anchored Heading</h2>
Esto combinará ambas etiquetas y creará la navegación integrada necesaria. Tenga en cuenta que estamos usando una etiqueta de encabezado aquí, pero puede ser cualquier etiqueta HTML. Puede usar etiquetas de párrafo, etiquetas de imagen o cualquier otro elemento del código HTML, siempre que coloque a los usuarios donde deberían estar.
Cómo agregar enlaces a su ancla de WordPress (3 formas)
¡Ahora le mostraremos un ejemplo real de enlaces de anclaje de WordPress! Esto es lo que cubriremos en las próximas secciones:
- Puede agregar anclas a Elementos del editor de bloquesy establecer los ID de otros elementos. Esto también es posible en el Editor clásico.
- Constructores de sitios web como Elementor, ofrecerá un módulo que le permite agregar enlaces de anclaje de WordPress a su contenido.
- Hay complementos que se pueden agregar líneas de anclaje automáticas al contenido, lo que le ahorra algo de tiempo de configuración.
Primero, veremos el enfoque manual. Por difícil que parezca, usar el Editor de bloques lo hace simple.
1. Use el enfoque manual para agregar enlaces de anclaje al editor de bloques
Para la mayoría de los usuarios, el Editor de bloques ofrece todo lo que necesita para agregar enlaces de anclaje de WordPress a su contenido. Para comenzar, seleccione el fragmento de texto al que desea vincular, como lo haría con un hipervínculo:
Luego conviértalo en un enlace con la opción adecuada y agregue su etiqueta de ancla, precedida por un octothorpe:
Sabrás si esto es correcto ya que verás la palabra «Interno» al lado del enlace. Después de guardar, navegue a la parte del contenido a la que desea anclar. Usaremos el encabezado.
querrás ir a Bloque > Avanzado en la barra lateral derecha y expandirlo. verás allí Anclaje HTML campo:
Aquí, agregue el texto del enlace de anclaje de WordPress, sin octohorpe. Eso es todo lo que necesita hacer y si ve la vista previa en vivo, verá que el enlace de anclaje está funcionando.
Añadir enlaces ancla al editor clásico
El proceso del Editor clásico es una especie de híbrido entre el enfoque HTML completamente manual y el editor de bloques. Primero agregará un enlace a su contenido en la página visual…
… luego cambiará al editor de texto y agregará el ancla al elemento seleccionado:
Cuando vuelva al editor visual, verá el enlace en su lugar, pero es posible que no funcione como se esperaba hasta que obtenga una vista previa de su publicación.
2. Agregue enlaces anclados con el complemento Site Builder
La mayoría de los complementos de creación de páginas, como Elementor o Beaver Builder, ofrecen módulos para agregar enlaces de anclaje a su contenido. Pueden ser tan flexibles como HTML porque pueden ir a cualquier lugar donde puedan ir otros módulos.
Por ejemplo, en Elementor utilizará el elemento del menú Anchor:
Para usarlo, arrástrelo al punto seleccionado. Le recomendamos que lo coloque delante de cualquier elemento de encabezado, o al menos delante de la sección que desea anclar.
Después de guardar los cambios, puede probar el enlace de anclaje. Diferentes creadores de páginas usan diferentes métodos para agregar enlaces a WordPress Anchor, y también encontrarás diferentes implementaciones en la interfaz. Sin embargo, el concepto es el mismo y obtendrá los mismos resultados finales.
3. Use un complemento para agregar enlaces de anclaje automáticos a su sitio
Si desea agregar más funciones a su sitio web y ayudar a sus enlaces anclados de WordPress, puede usar el complemento Tabla de contenido (ToC). Hay algunos disponibles, pero la mayoría no tienen pruebas para las versiones actuales de WordPress o no tienen actualizaciones periódicas. Sin embargo Enchufe SimpleTOC marca todas las casillas correspondientes:
Por supuesto, debe instalar y activar el complemento como de costumbre y luego ir al Editor de bloques. Luego guarde el contenido y luego busque el bloque SimpleTOC:
Cuando agregue esto a su publicación, descargará automáticamente enlaces a cualquier título en su contenido. ToC mostrará estos encabezados y no tendrá que hacer ningún etiquetado manual.
Sin embargo, puede restringir algunos encabezados de ToC si lo desea. si agregas simpletoc-hidden Clase CSS para el bloque de encabezado Clases adicionales de CSS campo, esto los ocultará de su ToC. Puede encontrar este campo en el mismo lugar que el HTML: campo ancla W Bloque > Avanzado Barra lateral:
Esta es una implementación simple que puede no tener el mismo nivel de flexibilidad que los métodos manuales, pero es rápida y le permite usar los enlaces de anclaje de WordPress de la manera habitual sin mucho esfuerzo.
Al final
La experiencia del usuario es primordial, por lo que es importante pensar en todas las formas en que puede hacer que su tiempo en su sitio sea significativo. Los enlaces de anclaje de WordPress pueden lograr esto. Ayudan a crear una navegación de contenido integrada y esto, a su vez, ayudará a los usuarios a desplazarse hasta el contenido que necesitan sin confusión ni retrasos.
Esta publicación ha cubierto varias formas de agregar enlaces de anclaje de WordPress a su sitio web. He aquí un resumen rápido:
- Puede agregarlos como parte de las etiquetas HTML en cualquier sitio web, no solo en WordPress.
- El Editor de bloques le permite agregar anclas de la misma manera que agrega hipervínculos.
- Los creadores de sitios web como Elementor a menudo tienen módulos dedicados que le permiten agregar anclas a su contenido.
- Enchufar como SimpleTOC puede agregar enlaces de anclaje automáticos de WordPress a su contenido. En algunos casos, el complemento actualizará la tabla de contenido para que coincida con los encabezados de su publicación.
¿Crees que los enlaces ancla de WordPress ofrecen valor para el SEO y los lectores, y si no, qué les ayuda a involucrarse? ¡Háganos saber en la sección de comentarios!
