• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Saltos de enlace en una misma página en WordPress

Saltos de enlace en una misma página en WordPress

Saltos de enlace en WordPress

[ 19 junio 2018 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Básico] [ ]

accesibilidad mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

Salto de enlace en la misma página

 

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:

texto seleccionado para enlace

 
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.

Identificador para salto de enlace

 

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.

salgo de enlace en menú WordPress

 

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.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Animación de saltos de enlace en WordPressAnimación de saltos de enlace en WordPress
  • Crear un sitio One Page en WordPressCrear un sitio One Page en WordPress
  • Mostrar la fecha de actualización en las entradas de WordPressMostrar la fecha de actualización en las entradas de WordPress
  • Fijar Widget lateral en WordPress sin pluginsFijar Widget lateral en WordPress sin plugins
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Daniel Godoy

    8 agosto, 2018

    Me encanta esta pagina!

  2. JULiO

    3 abril, 2019

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

    • Jhon Marreros Guzmán

      3 abril, 2019

      Hola, te sugiero revisar el siguiente artículo: https://decodecms.com/posts-relacionados-sin-plugins-en-wordpress/

      • JULiO

        14 mayo, 2019

        Muchas gracias!!!

  3. Diseño web Sevilla

    29 octubre, 2019

    Gracias Jhon Marreros lo vi buscando en Google y una explicación rápida y sencilla.

  4. bryan

    20 noviembre, 2019

    y con elementor como seria

    • Jhon Marreros Guzmán

      21 noviembre, 2019

      Hola, no habría mayor diferencia, esto es algo estándar de HTML por lo que aplicaría igual.

    • ronal

      13 enero, 2020

      bryan lograste hacerlo con elementor ???

  5. Marta

    2 diciembre, 2019

    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!

    • Jhon Marreros Guzmán

      3 diciembre, 2019

      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.

  6. Sergio

    10 diciembre, 2019

    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?

    • Jhon Marreros Guzmán

      13 diciembre, 2019

      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.

  7. Maria Teresa

    3 enero, 2020

    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

    • Jhon Marreros Guzmán

      7 enero, 2020

      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.

  8. grunx

    2 abril, 2020

    Gracias por el artículo 🙂

  9. Francisco

    10 abril, 2020

    Muy ineresante y útil el artículo. Enhorabuena y gracias.

  10. Eva L.

    18 abril, 2020

    Me sirvió, muchas gracias, muy bien explicado.

  11. diego

    8 mayo, 2020

    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?

    • Jhon Marreros Guzmán

      9 mayo, 2020

      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.

  12. Daniela

    17 mayo, 2020

    Me salvaste. Bien explicadito, con gracia, directo e imágenes. ¡Gracias!

  13. Hugo Arias

    30 julio, 2020

    pero como se hace si codigo…en visual composer y ubermenu … por fa? estare muy mut agradecidos,,

    • Jhon Marreros Guzmán

      3 agosto, 2020

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

  14. Jorge

    1 septiembre, 2020

    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

    • Jhon Marreros Guzmán

      2 septiembre, 2020

      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/

  15. Ana

    15 septiembre, 2020

    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 🙂

    • Jhon Marreros Guzmán

      18 septiembre, 2020

      Hola, que bueno que te sirivió.

  16. Dennis

    13 noviembre, 2020

    Gracias, me ayudó mucho!

  17. Elvi

    5 enero, 2021

    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!!

    • Jhon Marreros Guzmán

      6 enero, 2021

      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.

      • Elvi

        9 enero, 2021

        Gracias por tu pronta respuesta!! Sí, me refería exactamente a eso. Genial, pues estaré pendiente. Gracias!!!

        • Jhon Marreros Guzmán

          14 enero, 2021

          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/

  18. Taisa

    21 febrero, 2021

    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?

  19. Jhon Marreros Guzmán

    22 febrero, 2021

    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.

  20. Edwin Roman

    2 marzo, 2021

    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 💪

    • Jhon Marreros Guzmán

      2 marzo, 2021

      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.

  21. Erik

    25 agosto, 2021

    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.

  22. Magui

    22 septiembre, 2021

    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.

    • Jhon Marreros Guzmán

      24 septiembre, 2021

      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.

  23. Manolo

    11 noviembre, 2021

    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

    • Jhon Marreros Guzmán

      16 noviembre, 2021

      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.

  24. Luna

    24 diciembre, 2021

    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?

    • Jhon Marreros Guzmán

      27 diciembre, 2021

      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.

  25. Jorge

    22 mayo, 2022

    Muchas Gracias, me sirvió 🙌🏻

  26. Pamela

    25 julio, 2022

    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?

    • Jhon Marreros Guzmán

      27 julio, 2022

      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.

  27. Nub

    8 septiembre, 2022

    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.

    • Jhon Marreros Guzmán

      11 septiembre, 2022

      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.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Leer más y Extracto en WordPress

¿Cómo mostrar un menú diferente para usuarios registrados?

Deshabilitar el editor de bloques para Widgets en WordPress

Eliminar campo URL de los comentarios de WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados