Los saltos de enlace o enlaces ancla son un tipo especial de enlace que te llevarán a una parte específica de una determinada página, aunque mayormente son usados para llevarte a una misma página, es posible usarlo para llevarte a una parte específica de una URLs externa.
Generalidades
Los saltos de enlace son muy útiles cuando tienes una página con mucho contenido, ya que te permitirán desplazarte de manera simple a través de las diferentes secciones.
Supongamos que tienes un contenido similar a lo que se muestra en la imagen adjunta, crearemos un enlace que lleve directamente a la sección señalada.
1- Creando el punto de destino
Primero tenemos que modificar el punto destino hacia el cual el salto de enlace nos llevará. Para ello tenemos que trabajar en la vista HTML y ubicar el título, a este título le agregaremos el atributo ID, es decir un identificador, tal como se muestra en el siguiente código:
<h2 id="donde-conseguirlo">¿Dónde puedo conseguirlo?</h2>
2- Creando el salto de enlace
A continuación crearemos el enlace de ancla, para esto podemos usar la vista de diseño, seleccionando el texto aparecerá una caja para añadir el enlace, también es posible usar opciones de enlace, tal como se ve en la siguiente imagen:
Aparecerá un popup en el cual podemos colocar el enlace. Puesto que el contenido al cual queremos “saltar” esta en la misma página simplemente colocamos el signo # seguido del identificador creado anteriormente.
3- Salto de enlace como ítem de menú
Es posible también hacer un enlace de ancla como ítem de menú para llevar a una parte específica de tu sitio, en este caso tendrías que usar la url absoluta y al final el identificador, tal como se ve en la siguiente imagen.
Conclusión
Como ves, crear saltos de enlace para una página en WordPress es simple, sólo hay que editar un poco de HTML para crear el identificador y luego puedes hacer referencia a este identificador desde cualquier enlace, agregando siempre el símbolo # al inicio.
¿Aún con dudas?, en el siguiente video se explica cada uno de los puntos tratados anteriormente.
Artículos Relacionados
(3 votos, promedio: 5,00 de 5)
Cargando...
Me encanta esta pagina!
Me gustaría saber como crear el menú de “Artículos relacionados” que por ejemplo utilizas tu en esta página.
Hola, te sugiero revisar el siguiente artículo: https://decodecms.com/posts-relacionados-sin-plugins-en-wordpress/
Muchas gracias!!!
Gracias Jhon Marreros lo vi buscando en Google y una explicación rápida y sencilla.
y con elementor como seria
Hola, no habría mayor diferencia, esto es algo estándar de HTML por lo que aplicaría igual.
bryan lograste hacerlo con elementor ???
Hola!
Muy útil el post.
Una pregunta, de cara una estructura web de un site de servicios ¿qué es mejor? ¿Hacer cada servicio como un enlace dentro de la misma página, o crear páginas separadas por cada servicio?
¡Gracias!
Hola, si quieres destacar algún servicio o servicios específicos mejor tenerlos en una página individual cada uno, si todos los servicios son similares y no quieres destacar alguno podrías ponerlos todos en una página.
Hola!
Probé esta función en un contendió dividido por tablas (con el Plugin: Tabby Responsive Tabs – para reducir el contenido extenso), para ir a un contenido especifico dentro de una de las tablas y NO FUNCIONA.
Al parecer solo funciona para CONTENIDO VERTICAL,que se puede ver en una misma cara. Mas NO para CONTENDIÓ HORIZONTAL, segmentado por tablas.
Web Ejemplo: https://www.incredibleperutours.com/es/machu-picchu-and-huayna-picchu-by-train-1-day/
ALGUNA SOLUCIÓN?
Hola Sergio, entiendo que quieres activar un tab específico, lo que sucede es que no hay un ID para ir al tab, es decir la construcción o estructura HTML de tu tabla no esta preparada para esto, pero si que es posible, si revisas por ejemplo el detalle de producto de una tienda en WooCommerce, cada Tab tiene un ID y el enlace se puede acceder con #. Consulta con los desarrolladores del plugin, es posible que tengas una opción para poner un ID al título del tab.
Hola, hice un enlace personalizado y me sale con el hover activado. Es decir, el resto de ítems de menú, que son páginas, cambian de color al pasar el cursor, pero en el ítem que es el enlace está ya con el color cambiado, y no hace ningún tipo de hover al pasar el cursor.
¿Cómo puedo solucionarlo?
Gracias
Hola, entiendo que has colocado el enlace como un ítem de menú, según lo que comentas debe ser por el ítem de menú actual que se esta mostrando, si cambias a otro ítem de menú este aparece seleccionado?, de manera general sería cambiar el color por CSS en caso quieras mostrar otro color.
Gracias por el artículo 🙂
Muy ineresante y útil el artículo. Enhorabuena y gracias.
Me sirvió, muchas gracias, muy bien explicado.
Hola excelente post además muy sencillo de hacer y no utiliza recursos del servidor. Sin embargo note que solo funciona en dispositivos de escritorio y no en dispositivos moviles, sabes como se puede solucionar?
Hola, los saltos de página son un estándar HTML debería funcionarte, prueba ver este sitio web en movil, en el inicio del artículo tienes una tabla de contenido, es la misma lógica.
Me salvaste. Bien explicadito, con gracia, directo e imágenes. ¡Gracias!
pero como se hace si codigo…en visual composer y ubermenu … por fa? estare muy mut agradecidos,,
Hola, si quieres tener esta funcionalidad desde un ítem de menú sería similar usa el ID del elemento destino como parte de la url, es decir usará una url personalizada de menú.
Hola
Muchas gracias por la ayuda, era lo que necesitaba, pero tengo un inconveniente. cree dos enlaces en una misma página a secciones diferentes a parte de los enlaces a otras páginas, pero el problema es que quiero resaltar la página activa y cuando estoy en la pagina con esos enlaces se me resaltan los dos que tienen el enlace en esa misma página. Como puedo hacer para que solo esos enlaces no se resalten o no queden como activos
Muchas gracias
Hola, no me queda claro a lo que te refieres, si te va bien puedes escribirme al formulario de contacto detallando un poco más tu problema: https://decodecms.com/contacto/
Gracias por el post! He conseguido hacer el salto de enlace, que llevaba tiempo intentándolo sin éxito. El vídeo ha sido la ayuda definitiva 🙂
Hola, que bueno que te sirivió.
Gracias, me ayudó mucho!
Mil gracias por el post! Me ayudó enormemente! Mi problema es (como han comentado por arriba) que al añadirlo en un menú, me aparece seleccionado como si estuviera en ese menú aunque no lo esté. Me explico… En la página de inicio tengo una sección #tarifas que es la que he añadido gracias a ti como un submenú dentro del menú Coaching. Pues ahora, cuando estoy en la página “inicio” me sale marcada como página actual tanto la de “inicio” como la de “Coaching” que es la que tiene el submenú con el anclita. ¿Hay alguna manera de que no aparezca seleccionado el menú de Coaching si estoy en Inicio? Miiiiil gracias de antemano!!
Hola, por lo que comentas te refieres a la página activa, efectivamente puesto que la página es la misma en el menú se marcará como activo ambos ítems de menú, asi uno de ellos tenga el parámetro de salto de página. Posiblemente se requiera código javascript para corregir esto. Evaluaré hacer un artículo para tratar ese problema.
Gracias por tu pronta respuesta!! Sí, me refería exactamente a eso. Genial, pues estaré pendiente. Gracias!!!
Hola Elvi, he realizado un artículo relacionado en donde corrijo el problema de ítem activo a través de código, revisa: https://decodecms.com/crear-un-sitio-one-page-en-wordpress/
Estoy probando a usar la funcionalidad de saltos de página (Paginación) dentro de una url de WordPress, que abajo te incluye las páginas 1, 2, 3… para cambiar de página. El caso es si quiero crear un enlace, el anclaje, no funciona… No sé si sea un fallo de WordPress, que sí debería ser capaz de resolverlo, o que haya que hacer algo adicional. ¿Alguna idea?
Hola
Si la referencia del ancla es a una página que no esta cargada entonces no te funcionará, no tiene que ver con WordPress, es HTML, tendrías que especificar la url completa de la página y luego usar el ancla como parte de la url.
Hola Jhon buena noches tengo la plantilla serif lite en mi WordPress estoy utilizando el salto de pagina para llevar de un botón a un formulario en pc funciona bien.. Pero en la versión móvil 📱 no hace ninguna acción como lo puedo corregir muchas gracias 💪
Hola, teóricamente si el enlace te funciona en PC debería funcionarte en móvil. Consulta con los desarrolladores, prueba con otro theme si te sucede lo mismo.
Hola, necesito de su ayuda en el Yoast seo no me acepta los enlaces internos, a pesar de que tiene los enlaces respectivos me da un resultado (0). Tengo tres artículos con este problema.
me encantan tus tutos, hice este link en el menu que lleva a secciones en otras paginas ahora bien,luego del click me lleva a la seccion que puse el ID y recarga la pagina nueva y vuelve en scroll a la seccion. Se nota un sube y baja de scroll molesto al usuario, porque pasa esto, como lo evito? Apreciaria mucho evitar esto, mi cliente me requiere este detalle.
Hola, es posible que tu theme tenga algún efecto scroll, lamentablemente siempre tendrás ese problema salvo que desactives el efecto scroll de tu theme o por código excluir el efecto scroll de esa página específica.
Hola.
He encontrado este hilo sobre los enlaces a otro apartado de la misma página mediante ID y el llamado por # y quería preguntar qué puedo hacer porque a mí no me funciona. Los enlaces están en esta página y están hechos con el plugin shortcoder en una lista que se supone tendría que enlazar dentro de la misma página https://planchadeasar.com/mejor-cocina-de-gas
Hola, veo que en tu lista de enlaces si se crean los IDs, por lo que sólo te faltaría colocar esos IDs como parte del HTML de tu página.
Hola!
Estoy creando saltos de enlace dentro de una misma página. Es un menú de palabras, que al clickear redirigen al detalle del concepto (escrito más abajo). He realizado más de 90 saltos de enlace en la misma, y sin embargo solo el último no funciona (al hacer click, redirige al principio de la página, no al detalle de dicha palabra). Cómo verás, no sé nada de programación, y he intentando ver varias veces si hay algún error y no lo encuentro, también he cambiado la palabra que usé para el enlace, pero nada funciona. Sabes qué puede ser?
Hola, es posible que tengas algún error HTML, es decir, revisa la estructura de tus etiquetas, que todas estén cerradas, las comillas de los atributos, etc. Saludos.
Muchas Gracias, me sirvió 🙌🏻
Hola!! gracias por este post. Estoy inciandome en esto de WordPress, y justo me diste la solución. Me funciona perfecto en la versóin escritorio, pero no se porqué razon en versión mobile no funciona. Que podría estar haciendo mal?
Hola, se usa HTML, si que debería funcionar igual en móvil. Has probado en otros dispositivos?, prueba con esta misma página, la “tabla de contenidos” hace uso de esa funcionalidad. Saludos.
Hola me sirvió mucho tu guia muchas gracias!
Es posible hacer el salto a una imagen de la galeria de productos?
Busco escribir por ejemplo “Ver fotos” y que al “clickear” lleve a una imagen concreta de la galería.
Hola, lo que comentas posiblemente se tenga que hacer con código javascript ya que la funcionalidad de galería muestra un preview en miniaturas que sólo muestran la imagen cuando se hace click sobre la miniatura.