Cómo crear un enlace a un punto o ancla de otra página en WordPress

por

Seguro que alguna vez os ha surgido la necesidad de crear un enlace a un ancla o punto concreto de otra página, y así obviar el resto del contenido de esa página porque no es la información que queremos mostrar al pinchar en el link.

Suscríbete a mi canal: 

 

¿Cómo puedo crear un enlace a un ancla en otra pagina?

Lo primero de todo es crear ese ancla o «anchor» donde queremos redirigir al usuario cuando pinche en el enlace.

Para crear un enlace debemos asignar un identificador, que se encontrará en el punto exacto donde queremos llegar. En WordPress se puede hacer de varias formas, dependiendo del sistema que utilicemos para crear las páginas.

Si utilizamos algún tipo de constructor como «Divi Builder» o «Page Builder», por mencionar alguno de los muchos que hay, el identificador lo tenemos que asignar al módulo que utilicemos, y así crear el enlace anclado.

Por lo general, estos constructores tienen un apartado para poder colocar fácilmente un nombre, tanto al identificador como a la clase CSS.

Si no utilizamos ningún sistema de módulos para crear la web, hay que añadir el identificador dentro de la página o entrada, a través de la pestaña HTML del editor.

 

Crear el ancla

Como ya os he dicho, el ancla se crea añadiendo un identificador en el punto al que queremos ir al pinchar con el link.

Este identificador id, se puede añadir a cualquier etiqueta html de nuestra página que ya exista (<div> , <h1> , <strong> , <span> …)

Si queremos que el enlace se dirija a un sub-apartado que tiene un título con las etiqueta <h3>, el id lo añadiríamos de la siguiente forma:

  • <h3 id=»nombreancla»>Título</h3>

Si por cualquier razón no existiera ninguna etiqueta html a la que colocar un id, crearíamos un ancla nuevo (<a>) para evitar tener espacios vacíos utilizando otro tipo de etiquetas.

  • <a id=»nombreancla»></a>

Un apunte aparte, el identificador id que hace referencia al ancla, puede ser cualquier palabra siempre que no coincida con otro id dentro de la página.

 

Crear el link o enlace

La base teórica sobre la que aplicamos un «link-ancla» es la misma para cualquier tipo de página basada en html, pero esta vez voy a centrarme en cómo hacerlo en WordPress, siguiendo el proceso normal para crear un enlace desde el editor.

El enlace lo podemos colocar en un menú, en un anchor-text, una imagen… Cualquier elemento al que se le pueda añadir un link.

Seleccionamos el elemento que incluirá el enlace, y pinchamos en el icono para crear un hipervínculo, el de la forma de cadena, en la casilla aparece, colocamos el enlace del ancla.

Si el ancla se encuentra en la misma página, añadiremos el link escribiendo el nombre que pusimos al identificador en el ancla, precedido de una almohadilla.

  • #nombreancla

Crear enlace a un ancla en la misma página

Ejemplo de link en la misma página

Este enlace te lleva al apartado «Crear·el·ancla«

Si el enlace es en otra página diferente, tenemos que añadir la ruta completa de la página y añadir, de la misma forma, el nombre del ancla precedido de la almohadilla.

  • tudominio.com/pagina-a-la-que-ir/#nombreancla

Crear enlace a un ancla en diferente página

Ejemplo de link a una página diferente

Este enlace te lleva al apartado «Elegant themes» del artículo Plantillas de WordPress

Que no se te olvide guardar los cambios antes de comprobar si funciona o tendrás que volver a crear el enlace.

¿Quieres saber más sobre wordpress? Pincha aquí

 

Juan Martín

Juan Martín

Soy el creador y autor del blog «J Solución creativa», una persona como tú que intenta ganarse la vida en internet. Intento llenar mi blog con contenido útil que pueda ayudar a quien lo necesite y conseguir, con esfuerzo, generar autoempleo y vivir de ello. Si te parece interesante puedes apuntarte a mi newsletter.

Deja un comentario

2 Comentarios

  1. javier moreno

    Dos pequeños apuntes:
    – la / no es necesaria, porque iria a una carpeta del mismo nivel, salvo si en tu direccion se ha ocultado el archivo de pagina (algo no muy recomendable).
    – en ocasiones no interesa que cree un vacio.. se puede cambiar por span id="nombre" o bien crear un:
    <a name="nombre"></a>

    PD: programador y diseñador con mas de 20 años de experiencia.

    Responder
    • Martín

      Hola Javier,
      Agradezco enormemente tu comentario, yo no soy programador y lo que se lo he aprendido de otros "programadores" en internet. Pero tiene más lógica lo que comentas. Me lo apunto y actualizo el artículo. Gracias

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad.

– Responsable de los datos: Juan Martín Pascual
– Finalidad: Controlar spam, gestión y moderación de comentarios
– Legitimación: Tu consentimiento expreso
– Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground.
– Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos

Te aviso de las novedades

Suscríbete a mi boletín y te enviaré el nuevo contenido cuando se publique

VERIFICACIÓN

Para terminar, sólo tienes que confirmar el correo que te hemos enviado.

Pin It on Pinterest

Share This
Ir al contenido