En este tutorial vamos a aprender a crear enlaces ancla en wordpress que nos permitirá crear enlaces que nos lleven a una zona concreta de nuestra página web.
Los enlaces tipo ancla html son muy fáciles de crear, por eso vamos a crearlos sin necesidad de instalar ningún plugin.
También te recomiendo leer Guía de Seo On Page para WordPress 2018
¿Que es un enlace ancla o anclaje html?
Un enlace ancla es un tipo de enlace html que nos lleva a un elemento concreto de nuestra página web, ya sea un título, una imagen, una sección de nuestra web u otros elementos.
Los enlaces anclados internos se utilizan normalmente para:
- Mejorar la navegabilidad de la página web
- Crear el menú de una web de página única
- Crear un índice para los post
- Enlazar desde una página a un contenido concreto de otra página diferente
¿Cómo crear enlaces ancla en WordPress?
Para crear un enlace ancla en WordPress necesitamos hacer dos cosas.
- Crear el anclaje: El anclaje se crea añadiendo una»ID» (identificación css) al elemento al que quieres que lleve el enlace.
- Crear el enlace ancla: con la identificación del elemento al final de la URL separado con «#»
Es decir, que antes de crear los enlaces ancla tienes que asignar un código ID a los elementos para identificarlos y añadirlo al enlace, lo vemos más adelante.
Primero, vamos a ver como tiene que ser la URL del enlace ancla.
Como puedes observar en la imagen, la URL del enlace ancla tiene que llevar el identificador que le hemos puesto al elemento separado con #id
Por ejemplo, el código de un enlace normal es así: (sin ID)
<a href="http://midominio.com/">texto del enlace</a>
Y los enlaces ancla se crean añadiendo el ID (identificación) de cualquier elemento, en la parte final de la url del enlace.
<a href="http://midominio.com/#id">texto del enlace</a>
En el enlace, puedes poner la ID detrás de la URL absoluta y te llevará al elemento aunque se encuentre en una página diferente.
<a href="http://midominio.com/pagina/#id">texto del enlace</a>
O puedes poner solo el ID y te llevara al elemento si se encuentra en la misma URL.
<a href="#id">texto del enlace</a>
También podemos crear enlaces ancla desde la opción «Enlazar» del editor de texto de WordPress como un enlace normal y añadirle al final de la URL el ID del elemento.
Por lo tanto, antes de crear los enlaces, tenemos que definir los Identificaciones para los elementos a los que queremos llegar.
Como poner anclajes a los elementos de WordPress
La id es una identificación que ponemos en la etiqueta html de un elemento para poder identificarlo para que el enlace ancla te lleve a ese elemento.
Puedes dar una ID a los elementos ya sean párrafos, títulos, imágenes y otros.
Simplemente ves a la pestaña HTML del editor de WordPress y añades id="lo-que-quieras" a un título h2, h3, a una imagen etc… (cambia «lo-que-quieras» por una palabra que describa dónde vas para crear una url amigable)
Si el elemento al que quieres que vaya el enlace no tiene etiqueta html, como los párrafos, puedes usar la etiqueta de párrafo de html <p id="lo-que-quieras">aquí el texto</p>
O poner el contenido en un contenedor utilizando <spam id="lo-que-quieras">aquí el texto</spam>
Poner Id para los enlaces ancla en Divi
Si quieres crear enlaces ancla en Divi, puedes poner ID a casi cualquier elemento de forma sencilla, ya sean, filas, columnas, módulo de slider, modulo call to action, separadores, espacios en blanco etc…
Simplemente abre las opciones de la fila o el módulo y en el apartado CSS personalizado define su identificador CSS.
Poner Id para los enlaces ancla en Visual Composer
Si quieres crear enlaces ancla en Visual Composer para llegar a sus elementos (ahora llamado WPBakery Page Builder for WordPress).
Para ello define el ID del elemento dentro de las opciones de un módulo.
Poner Id para los enlaces ancla en Elementor
En elementor también se pueden poner ID a los elementos para crear enlaces ancla fácilmente.
La opción está en las opciones avanzadas, Id de CSS.
Enlaces ancla en el menú de WordPress
Si queremos, podemos poner los enlaces ancla en el menú de WordPress, esto es muy útil si queremos hacer una página web de una sola página haciendo que el menú nos deslice hasta cada apartado.
Los enlaces con el ID los tenemos que poner en el menú utilizando la opción de «enlaces personalizados»
Consejo
Las ID que creas para los enlaces, formarán parte del enlace ancla, así que intenta hacerlos descriptivos para crear URL,s amigables.
Como ves crear enlaces ancla es muy fácil y no se necesitan plugins para crearlos.
Espero que este tutorial te sea de ayuda.
¿Tienes algún consejo extra? ¡Déjamelo en los comentarios!
Gran post. Ya no se nos escapa cómo crear enlaces ancla. ¡No dejes de ensaeñarnos cosas útiles de WordPress!
Gracias, me ha ayudado a aclararme un poco con los textos ancla, que tengo un jaleo…. Un abrazo!
¿Es lo mismo que el menú que tienes en el menu de este post?, ¿Se hace con algún plugin?
Un saludo
Hola Jose, Tecnicamente es lo mismo, pero el índice de los post esta creado con el plugin Table of content plus, que crea los indices automaticamente, aquí tienes el tutorial https://sensacionweb.com/tabla-de-contenidos-en-wordpress/ por si te interesa.
A mí en mi WordPress las anclas se me solapan con la barra. Es decir pinchas el enlace y no va al párrafo concreto, sino un poco mas abajo porque el inicio del párrafo lo tapa la barra superior.. Eso me fastidia y puede que no me mude a WordPress por eso. Aunque también pasa en blogspot. Solo no me pasa en mi pagina actual, en blogia.
Hola Gerardo, acabo de encontrar tu post y me parece excelente, te felicito. Tengo un problema y no se si puedas ayudarme, estoy creando un sitio web con el tema Jupiter, que usa Wpbakery page builder, el antiguo Visual Composer, quiero hacer igualmente un menú de desplazamiento en la misma página, donde cada enlace me lleve a unas pestañas horizontales en la parte inferior de la página y abran el contenido de cada pestaña en especifico de cada enlace, he logrado que los enlaces se desplacen hacia abajo en la página a donde están las pestañas, pero no logro que las abran, he probado de diferentes maneras y formas la combinación de enlaces e identificadores, pero no lo consigo, crees que puedas aconsejarme
Hola Gerardo, muy buen articulo. Yo tengo un pequeño problema al realizar los pasos para hacer un menú con anclas. Utilizo el tema Avada y cuando hago el ancla en el menu, tal como indicas, se me quedan todos los enlaces del menú que llevan ancla (algunos no llevan), se me quedan destacados como si estuvieran señalados todos, Es decir, por ejemplo si el color de los elementos del menu es negro, pero cuando pulsamos sobre uno de ellos para ir a esa pagina se marca en otro color. Pues en el caso de los elementos con ancla se quedan todos señalados…. Sabrias orientarme por que puede ser??
Mil gracias
Pues debe de ser el estilo de la plantilla, busca en las opciones de la plantilla si hay opciones para retocar el estilo de los enlaces, si no tendrás que cambiarlos con CSS, o también puedes informar al soporte de avada si crees que es un problema del tema.
Un saludo
LA hostia el post. Muy bueno y muchas gracias. Me ha ayudado mucho