X
Jhon Marreros Guzmán

Saltos de enlace en una misma página en WordPress

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>
El identificador puede ser cualquier texto, pero evita usar espacios y caracteres especiales.

 

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.

 

En caso ser una url externa tendrías que colocar la url completa seguida de # y el identificador.

 

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.

 

Artículos Relacionados

Categorías: Themes
Etiquetas: accesibilidadmejoras

Ver comentarios (50)

  • Me gustaría saber como crear el menú de "Artículos relacionados" que por ejemplo utilizas tu en esta página.

  • 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.

Deja un comentario