Últimas noticias de SeedProd

Tutoriales, consejos y recursos de WordPress para hacer crecer tu negocio

Cómo crear enlaces de anclaje en WordPress (sin un plugin)

Cómo crear enlaces de anclaje en WordPress (sin un plugin) 

Escrito por: imagen de autor Stacey Corrin
imagen de autor Stacey Corrin
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.
     Revisado por: John Turner
imagen del revisor John Turner
John Turner es el fundador de SeedProd. Es empresario, desarrollador web, comercializador, administrador de sistemas, administrador de bases de datos, técnico de soporte e incluso sabe cocinar.

¿Estás buscando una forma sencilla de añadir enlaces de anclaje a tus entradas y páginas de WordPress? Los enlaces de anclaje son una forma excelente de añadir una tabla de contenidos a las entradas, ayudando a los usuarios a navegar por artículos largos. También puedes utilizar enlaces de anclaje para aparecer en determinados resultados de búsqueda y mejorar tu posicionamiento.

Este artículo le mostrará cómo crear enlaces de anclaje en WordPress fácilmente.

Antes de empezar, haga clic en cualquiera de los enlaces de anclaje de este índice para saltar a la sección que necesite:

Índice

Como hemos mencionado anteriormente, los enlaces de anclaje también pueden mejorar el SEO de WordPress. Google suele mostrar los enlaces de anclaje en los resultados de búsqueda como un enlace "saltar a" para que los lectores puedan saltar directamente a una sección concreta desde la página de resultados.

Google muestra los enlaces de anclaje como enlaces "saltar a" en los resultados de búsqueda

En ocasiones, Google también muestra varios enlaces de una misma página como enlaces "saltar a". Está demostrado que estos enlaces aumentan el porcentaje de clics en los resultados de búsqueda, lo que se traduce en más tráfico para su sitio web.

Google también puede mostrar varios enlaces de anclaje de un mismo artículo en los resultados de búsqueda.

Entonces, ¿cómo crear un enlace para saltar a una parte específica de una página en WordPress? Averigüémoslo.

Crear enlaces de anclaje en el editor de bloques de WordPress es bastante sencillo. Solo necesitas hacer 2 cosas para que tus enlaces de anclaje funcionen:

  1. Cree un enlace con el signo # justo antes del texto de anclaje
  2. Añade el atributo ID al texto al que quieres que salte el usuario

Siga las instrucciones siguientes para aprender a hacerlo usted mismo.

El primer paso es resaltar el texto al que desea añadir su enlace de anclaje. A continuación, haga clic en el icono de insertar enlace en el editor de bloques de WordPress.

Al hacer clic en el icono se muestra la ventana emergente de inserción de enlace, donde normalmente se añade un enlace de página o se busca una página a la que enlazar.

Añada su enlace de anclaje utilizando el prefijo # y haga clic en intro.

Sin embargo, para los enlaces de anclaje, debe introducir el signo # y las palabras clave de la sección a la que desea que salten los usuarios.

Las palabras clave que utilices deben:

  • Estar relacionado con la sección a la que enlaza
  • No ser demasiado largo ni complicado
  • Utiliza las mayúsculas para que el texto de anclaje sea más legible
  • Incluya guiones para separar las palabras y facilitar su lectura.

Una vez que haya introducido las palabras clave de su enlace de anclaje, haga clic en Intro para crear el enlace. A continuación, puede ver el enlace que ha creado dentro del editor de WordPress, pero hacer clic en él no hará nada.

Esto se debe a que no hay ningún ID conectado al enlace de anclaje, que su navegador busca cuando hace clic en el enlace.

Para solucionarlo, añada el atributo ID al área de contenido a la que desea enlazar.

Paso 2: Añadir el atributo ID al texto enlazado

En el editor de contenidos de WordPress, desplácese hacia abajo hasta el contenido al que desea que salten los usuarios cuando hagan clic en el enlace de anclaje. La sección que necesitas suele ser un encabezado o el principio de un nuevo párrafo.

Ahora, haga clic en el bloque que contiene la sección a la que desea enlazar y navegue hasta la Configuración del bloque en la parte derecha de su página.

En la configuración del bloque, despliegue la pestaña Avanzado e introduzca las mismas palabras clave que utilizó para su enlace de texto de anclaje en el cuadro de anclaje HTML. La única diferencia es que no necesitarás el signo # al principio.

Añada el texto de anclaje a la sección de anclaje HTML de la configuración avanzada del bloque.

Cuando guarde su artículo y lo previsualice, podrá ver su enlace de anclaje en acción. Sólo tienes que hacer clic en él para saltar al contenido que enlazaste anteriormente.

Si el área de contenido a la que desea enlazar no es un título, sino un párrafo o fragmento de texto normal, el proceso es un poco diferente.

En ese caso, haga clic en el bloque para mostrar la configuración del bloque y haga clic en el menú de tres puntos para ver más opciones.

Edite su bloque de WordPress como HTML

Desde ahí, seleccione la opción Editar como HTML, que le permite editar todo el HTML de ese bloque de contenido.

Now you need to find the HTML tag for the information you want to point to. For example, look for <p> if it’s a paragraph, or <table> if it is a table, and so on.

Una vez que encuentre la etiqueta, añada sus palabras clave de anclaje como atributo id, de forma similar al ejemplo siguiente:

<p id="bali-hiking-adventures">

Tras añadir las palabras clave, es posible que aparezca un aviso explicando que el bloque contiene contenido no válido o inesperado.

Convierte tu bloque de WordPress a HTML para terminar de añadir tu enlace de anclaje

Por lo tanto, haga clic en el botón Convertir a HTML para guardar los cambios.

Si todavía utilizas el editor clásico de WordPress, añadir un enlace de anclaje es ligeramente diferente. Sigue los pasos que se indican a continuación para aprender a crear enlaces de anclaje en el editor de contenido visual clásico de WordPress.

En primer lugar, resalte el texto que desea enlazar y haga clic en el botón Insertar enlace situado en la parte superior del editor de contenidos.

Añada su enlace de anclaje en el editor clásico de WordPress utilizando el prefijo # y el slug de su enlace.

A continuación, añada sus palabras clave de anclaje con el prefijo #, seguido del texto que desea enlazar.

Paso 2: Añadir el atributo ID al texto enlazado

El siguiente paso es dirigir a los navegadores a la sección del contenido a la que desea que los usuarios salten al hacer clic en el enlace de anclaje.

Para ello, cambie al modo Texto en el editor clásico de WordPress y, a continuación, desplácese hasta la sección que desee mostrar.

Cambia al editor de texto y añade el atributo id a tu contenido HTML

Next, find the HTML tag you want your anchor link to target. For example, <h2>, <h3>, <p>, etc.

Ahora añada el atributo ID con las palabras clave de sus enlaces de anclaje sin el prefijo #. He aquí un ejemplo de cómo quedaría:

<h2 id="bali-hiking-adventures">

Ahora puede guardar los cambios y previsualizar el contenido para comprobar que el enlace de anclaje funciona.

Si suele utilizar el modo Texto para escribir contenido en el editor clásico de WordPress, a continuación le explicamos cómo crear manualmente un enlace de anclaje en HTML.

First, create an anchor link with the # prefix using the <a href=” “> tag, similar to the example below:

<a href="#bali-hiking-adventures">Bali Hiking Adventures</a>

Then scroll to the section of content you want to display when users click on your link. Usually, the section is an H2 or H3 tag, but it can also be another HTML element, like a simple paragraph <p> tag.

Una vez que hayas encontrado la etiqueta HTML, añade el atributo ID y el texto de anclaje sin el prefijo # de la siguiente manera:

<h2 id="bali-hiking-adventures">Bali Hiking Adventures</h2>

Ahora puede guardar los cambios y previsualizar el contenido para probar el enlace de anclaje.

Si publica artículos largos con regularidad, puede ahorrar tiempo añadiendo automáticamente enlaces de anclaje a los distintos títulos de su contenido y creando un índice con un plugin de WordPress. Esto facilita que los usuarios encuentren la información que necesitan y elimina la necesidad de crear cada enlace de anclaje manualmente.

Para ello, descargue el plugin Easy Table of Contents e instálelo y actívelo en su sitio web WordPress. Si necesitas un poco de ayuda para hacerlo, sigue estas instrucciones para instalar un plugin de WordPress.

El plugin utiliza los encabezados de tu contenido para adivinar a qué secciones enlazar, y puedes personalizar completamente la configuración en función de tus necesidades.

Una vez que haya instalado y activado el plugin, vaya a Configuración " Tabla de contenido para configurar los ajustes.

Configure los ajustes del plugin de índice fácil

A continuación, active el plugin para los tipos de entrada a los que desea añadir enlaces de anclaje y desmarque las áreas en las que no desea mostrar una tabla de contenidos.

También puede activar la opción de autoinserción. Esto permite al plugin crear una tabla de contenidos automáticamente para todos los tipos de contenido seleccionados, incluidos los contenidos antiguos.

Si sólo desea crear automáticamente un índice para determinados artículos, deje esta opción sin marcar.

A continuación, desplácese por la página para elegir dónde desea mostrar el índice y cuándo desea activarlo.

Elija los ajustes de posición para su tabla de contenidos en WordPress

Por ejemplo, puede mostrar el índice antes o después del primer título y cuando haya un determinado número de títulos en el artículo.

Más abajo puedes elegir un tema que se adapte a la marca de tu sitio y revisar otros ajustes avanzados.

Elija un tema para su tabla de contenidos que coincida con la marca de su sitio web.

No olvide hacer clic en el botón Guardar cambios para conservar la configuración.

Si activa la opción de autoinserción, puede previsualizar un artículo con el número correcto de títulos para ver su tabla de contenidos en acción.

Sin embargo, si desea generar un índice manualmente, tendrá que editar cada artículo individualmente.

Para ello, diríjase a la pantalla de edición de su contenido y desplácese hasta la pestaña Tabla de contenidos situada debajo del editor.

A continuación, haga clic en la casilla "Insertar índice" y seleccione los títulos que desea incluir como enlaces de anclaje.

Haga clic en la casilla para insertar un índice en su artículo.

Ahora puede guardar los cambios y previsualizar su artículo. El plugin Easy Table of Contents mostrará automáticamente una lista de enlaces de anclaje como su tabla de contenidos.

Fácil tabla de contenidos con enlaces de anclaje en WordPress

Hemos cubierto varios métodos para añadir enlaces de anclaje a su sitio de WordPress, pero ¿qué pasa si está creando una página de destino?

Por suerte, SeedProd, el mejor tema de WordPress y constructor de páginas de aterrizaje, te permite crear enlaces de anclaje fácilmente.

En su editor visual de arrastrar y soltar, puedes usar el práctico bloque de enlaces de anclaje para enlazar una parte de tu página de destino con otra. Si estás usando SeedProd para crear un tema personalizado de WordPress, puedes usar el mismo método que el que estamos a punto de mostrarte para crear enlaces de anclaje en cualquier parte de tu tema.

Bloque de enlaces de anclaje SeedProd

Sólo tienes que arrastrar el bloque Enlace de anclaje a la parte de la página a la que quieras saltar e introducir un nombre.

Añadir un nombre de enlace de anclaje

A continuación, selecciona el texto de tu página de destino desde el que deseas establecer el enlace, añade el nombre del enlace de anclaje con un hashtag al principio y haz clic en Guardar.

Añada su enlace de texto de anclaje

Ahora, cuando previsualices tu página y pruebes el enlace, saltará automáticamente a la sección correcta.

Enlaces de anclaje en su página de destino

Puedes seguir esta guía paso a paso para crear una página de aterrizaje en WordPress si necesitas ayuda para empezar.

¡Ya está!

Esperamos que este artículo te haya ayudado a aprender cómo crear enlaces de anclaje en WordPress. Ahora puedes ofrecer a tus lectores una mejor experiencia de usuario y mejorar tu SEO para ayudarte a conseguir más tráfico, suscriptores y clientes potenciales.

Si está interesado en saber qué otros plugins puede utilizar para mejorar su sitio web y ahorrar un tiempo precioso, eche un vistazo a los siguientes resúmenes:

Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en dejarnos un comentario con tus preguntas y comentarios.

También puede seguirnos en YouTube, X (antes Twitter) y Facebook para obtener más contenidos útiles para hacer crecer su negocio.

avatar de autor
Stacey Corrin Escritor
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.

Divulgación: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, es posible que ganemos una comisión. Sólo recomendamos productos que creemos que aportarán valor a nuestros lectores.

Comentarios

  1. Tengo un enlace en el pie de página (plantilla), digamos que se llama "contacto". Al hacer clic en él, se cargará la página Acerca de y se desplazará hacia abajo hasta la sección de contacto. ¿Cómo se hace?

    1. Hola Max. Para hacer esto usted tendría que enlazar a la página acerca de y añadir el ancla al enlace URL /about/#contact. Espero que te sirva de ayuda.

  2. Hola! He añadido el enlace de anclaje y creado el atributo id correctamente (comprobado dos y tres veces) pero mi enlace simplemente no funciona - no me lleva a ninguna parte. No puedo encontrar ningún artículo sobre las propuestas de lo que podría estar mal? ¿Qué puede ser? Juro que todo está configurado como debería. ¿Podría haber un plugin o algo en mi tema que lo impide? ¡Gracias!

    1. Hola Tuija,

      ¿Su versión de WordPress está actualizada a la última versión? También puedes probar a asegurarte de que todos tus plugins y temas están actualizados. Si esto no funciona, prueba a desactivar los plugins y activarlos de uno en uno para ver si hay algún conflicto.

  3. Hola

    Busco una solución para que anchor funcione con el menú. La primera página está bien y se desplaza al lugar apropiado. Sin embargo, al hacer clic en el enlace con el ID de anclaje de digamos la página Contáctame, entonces no funciona. Encontré que muestra MYDOMAIN.com/contact-me/#anchorID en lugar de MYDOMAIN.com/#anchorID

    Reemplacé el menú con una URL completa como MYDOMAIN.com/#anchorID. Funcionó, pero los botones con esa URL muestran siempre el color activo que configuré para los botones activos. Además, en el menú móvil, el propio menú no se oculta.
    URL completa funciona, pero ¿cómo resolver botones activos y no ocultar el menú en el móvil?

    ¿Tiene alguien solución para ello? Gracias

Los comentarios están cerrados.