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