Cómo Añadir Enlaces Ancla en WordPress 5

Categorias: Wordpress

Cómo Añadir un Enlaces Ancla en la Misma Página en WordPress 5

Una de las características más habituales desde el principio de Internet son los enlaces o mejor hipervínculo, vínculo, hiperenlace, etc…

Los enlaces en cualquier sitio web, nos llevan a otro contenido al que se hace referencia en sitio web en el que estamos.

Todos hemos visto los típico Click Aquí o Pulsa para Entrar y generalmente nos llevan a otro sitio de la web o incluso a una web externa.

Pero si queremos que un enlace apunte a una parte en concreta del mismo documento se le conoce como enlaces ancla.

Es decir, que haciendo click en una parte específica de una página, no llevará automáticamente a dicha parte, sin tener que hacer scroll ni buscarla.

Esto es bastante interesante si se trata de hacerle la vida más fácil al lector del artículo.

Si estamos ante una información muy extensa, podemos ayudarle a encontrar la información que le interesa de forma precisa y veloz, lo que además de ayudar al usuario, mejora la usabilidad del sitio web, cosa que le gusta a los buscadores.

En contrapartida, el usuario se quedará menos tiempo en nuestro sitio web porque consigue la información que desea de una forma más rápida y si abandona muy rápido la web los buscadores pueden interpretar que el contenido que ofrecemos no es interesante y perjudicarnos en el posicionamiento.

En cualquier caso es un recurso que podemos usar, aunque como todo, no abusar.
 

Creando Enlaces Ancla en WordPress 5

Antes de nada, hay que aclarar que los enlaces ancla no pertenecen a WordPress, si no al HTML con el que están realizado el sitio web.

Esto quiere decir que cualquier sitio HTML puede añadir enlaces ancla y existen decenas de tutoriales si queréis hacerlo editando código HTML, pero aquí vamos a verlo cómo hacerlo con WordPress 5.x

La verdad es que con la llegada de Gutenberg la forma de trabajar con el texto y los elementos en WordPress ha cambiado mucho, para bien o para mal es el editor por el que WordPress ha decidido apostar.

Una de las cosas buenas que nos ha traído Gutenberg, es poder trabajar con los enlaces ancla de manera intuitiva.

Tenemos que tener en cuenta que los enlaces ancla se pueden añadir a los encabezados, es decir a las etiquetas h1, h2, h3, etc…

cabeceras h enlaces ancla en WordPress 5

En la barra lateral derecha del editor, veremos que tenemos las opciones de Bloque y Documento, debemos seleccionar Bloque y seleccionar la cabecera que queremosanclar.

En la parte inferior tenemos la opción de Avanzado, la cual debemos desplegar, lo que dejará a la luz la opción que estamos buscando: Anclaje HTML.

opcion anclaje html - WordPress 5

El texto que tenemos que poner aquí es que el queramos, una palabra identificativa del encabezado estaría bien, ya que es posible que tengamos varios y tengamos que identificarlos.

anadir texto anclaje WordPress 5

Ahora solo nos queda añadir el enlace ancla en el sitio que queramos.

Esto es muy versátil y podemos ponerlo donde queramos, pero es muy habitual añadir un índice al principio del artículo para que el lector puede elegir dónde quiera ir.

En cualquier caso, para conseguir que el texto enlace al ancla que hemos creado solo debemos añadir un enlace al texto con el ancla que hemos elegido, pero poniendo antes una almohadilla #.

Por ejemplo, si el texto ancla es: milpalabras, debemos añadir un enlace en el texto que sea:

#milpalabras

Quedando tal y como se muestra en la imagen:

enlace ancla anadido texto WordPress 5

¡Y ya esta! Si hacemos una vista previa del artículo o la página y hacemos click en el enlace, nos llevará automáticamente al ancla que hemos elegido.

enlace ancla creado wordpress 5.x

Cosas a Tener en Cuenta

Como habéis visto, con el nuevo editor de WordPress Gutenberg, trabajar con enlaces ancla se ha convertido en algo muy sencillo.

Existen otras opciones en forma de plugin si no estáis usando las versiones 5.x de WordPress que os pueden servir para realizar enlaces ancla sin tener que andar tocando código, como por ejemplo:

Aunque si buscáis un poco encontraréis muchos más seguro.

Al añadir un enlace ancla en WordPress 5.x, el cambio es inmediato, es decir que nada más pulsar se muestra el contenido, lo que puede causar cierto desconcierto entre los usuarios.

Existen formas de suavizar este movimiento para que el usuario vea dónde le ha llevado su click, como por ejemplo Page scroll to id, compatible con WordPress 5.x, que puede ayudarnos a solucionar esto o hablar con nuestro diseñador para que los solucione por medio de CSS.
 

Hosting WordPress con Soporte Técnico

Si estás buscando un hosting WordPress que cuente con un servicio de soporte técnico especializado en WordPress, en Hostinet podemos ofrecértelo.

Todos nuestros planes de hosting WordPress SSD cuentan con acceso a nuestro servicio de soporte técnico especializado en la plataforma, para que nunca te quedes colgado cuando surja algún problema en tu CMS.

Además, podrás contactar con nosotros por teléfono atendido desde España y sin 902 o si lo prefieres por correo electrónico.

También contarás con otros extras, como disfrutar de un panel de control como cPanel o poder emitir certificados SSL de manera gratuita.

Todo esto y mucho más, en los planes de hosting WordPress de Hostinet:

Hosting WordPress