Cómo vincular a una parte específica de una página de WordPress

Si tiene una página larga en su sitio, vincular a los visitantes directamente a una sección de esa página puede ser más útil que un enlace normal.

Afortunadamente, el editor de Gutenberg lo ha facilitado y no necesita instalar ningún complemento nuevo.

Y para que quede claro, estoy hablando de un enlace como este que lo llevará al encabezado de abajo: desplácese al siguiente encabezado.

Aprenderá a crear enlaces como ese en este tutorial, que puede enlazar con la misma página o con una sección en una página separada.

Este tutorial incluye pasos para el editor clásico también, pero lea el resto de la publicación primero para aprender cómo vincular correctamente.

Cómo vincular a parte de una página

Si prefiere tutoriales en video, puede seguir este tutorial paso a paso en lugar de leer las instrucciones en esta publicación.

Suscríbete para competir temas en Youtube

Para vincular a una parte específica de una página, debe hacer dos cosas.

  1. Agregar un ancla para vincular
  2. Enlace al ancla

Primero, necesita una forma de designar el elemento al que se vinculará. Puede ser cualquier elemento, pero usaremos un encabezado ya que es el elemento más común para vincular.

Una vez que se agrega el ancla, todo lo que necesita hacer es vincularlo usando el editor de vínculos normal y un formato de URL ligeramente diferente.

Será fácil de entender en la práctica, así que comencemos.

Cómo agregar un ancla a un encabezado

Comience seleccionando un bloque de encabezado en el editor. Verá una sección en la barra lateral derecha que está contraída de forma predeterminada.

Bóveda

Abra la sección y lo primero que verá es la opción de anclaje HTML.

Ancla HTMLWordPress llama a esto un ancla, pero los desarrolladores se refieren a esto como la ID del elemento.

Dentro del campo, asigne al encabezado un nombre breve y descriptivo. No puede tener espacios, pero puede usar guiones para separar palabras. Por ejemplo, una sección sobre dieta en un artículo sobre el cuidado de un perro podría tener un ancla como “dieta” o “dieta para perros”.

Una vez que haya agregado el ancla, estará listo para vincularlo.

Los pasos son ligeramente diferentes dependiendo de si el enlace está en la misma página o no. Comencemos con enlaces a la misma página.

Para vincular a un ancla en la misma página, resalte el texto que desea vincular y haga clic en el icono de vínculo (o use el acceso directo cmd + k).

Encabezado del texto del enlace

Luego, en el campo URL, ingrese un hashtag seguido del ancla.

Enlace al anclaWordPress incluso agrega una etiqueta para hacerle saber que este es un enlace “interno”

Una vez que presione enter, se agregará el enlace. Puede obtener una vista previa del artículo para probarlo de inmediato.

Para utilizar esta técnica para un ancla en una página diferente, la URL necesita una pequeña modificación.

La única diferencia es que primero agregará la URL completa seguida del hashtag y el ancla, así:

Enlace de anclaje externo

Es posible que el enlace no funcione sin la barra diagonal al final de la URL antes del ancla, así que asegúrese de incluirla siempre. También puede hacer que su sitio se cargue más rápido al omitir el redireccionamiento automático a la versión de barra diagonal de la URL.

Eso probablemente cubra todo lo que necesita saber sobre cómo agregar enlaces de anclaje internos a WordPress, pero tengo algunos consejos más para mentes curiosas.

Puede utilizar esta misma técnica para crear un sitio web de una página.

Con un sitio de una página, solo tiene una página de inicio, y el menú vincula a los visitantes a diferentes secciones de esa página en lugar de a páginas completamente nuevas.

Para crear este tipo de sitio, creará sus anclas utilizando el mismo método que acaba de aprender. Luego, puede abrir su menú en el Personalizador y usar la sección para vincular sus anclas.

Enlace de ancla de menú

Si utiliza esta técnica para un sitio web de varias páginas, asegúrese de incluir la URL completa antes del hashtag.

Los encabezados no son los únicos elementos que incluyen la opción de anclaje HTML.

También puede agregar anclas a:

  • Párrafos
  • Imagenes
  • Liza
  • Galerias
  • Mesas
  • Citas

De hecho, mientras navegaba por los bloques de Gutenberg, no pude encontrar uno que no fuera compatible con la opción de anclaje HTML.

Dicho esto, si usa un bloque agregado por un complemento, podría faltar esta opción. Además, la opción de ancla no está disponible si está utilizando el editor clásico, así que aquí le mostramos cómo puede editar el HTML para agregar un ancla a cualquier elemento de su sitio.

Si está utilizando el Editor clásico (o un bloque al que le falta el campo de anclaje HTML), existen algunos pasos más para agregar el enlace.

La forma en que se vincula al ancla es la misma. La única diferencia es cómo agrega el ancla al elemento.

Para agregar el ancla, necesita editar el HTML. En el editor de Gutenberg, puede abrir el menú de opciones del bloque y seleccionar. En el Editor clásico, use las pestañas en la parte superior derecha para cambiar de la vista a la vista.

cambiar el editor de publicaciones a la vista de texto

Al ver el HTML, verá que sus encabezados están envueltos con etiquetas HTML como esta:

This is a heading

Para agregar un ancla, debe agregar el atributo ID al encabezado. Aquí hay un ejemplo que le da al encabezado un ancla llamada “dieta para perros”:

This is a heading

Cada elemento HTML puede usar el atributo ID, por lo que no está limitado a los encabezados. En el editor clásico, una gran parte del HTML no se muestra en realidad, pero siempre puede envolver una sección en etiquetas “div” para agregar un ancla, como esta:

Agregar el elemento div no hará ninguna diferencia visual en la página, pero le permitirá vincular directamente a estos párrafos.

Editar el HTML de esta manera funciona exactamente igual, ya sea que esté usando Gutenberg o el Editor clásico. Una vez que el ancla está en su lugar, todo lo que tiene que hacer es vincularlo utilizando el método descrito anteriormente.

Sigue aprendiendo WordPress

Con conocimiento de los enlaces de anclaje y un poco de HTML, puede enlazar a cualquier sección de cualquier página desde cualquier lugar de su sitio.

Si aprender nuevas técnicas de WordPress es emocionante y satisfactorio para usted, probablemente le encantará mi curso gratuito de correo electrónico de WordPress:

Realice el curso de dominio de WordPress de 7 días por correo electrónico

Si no le gusta, puede darse de baja con un solo clic, pero estoy seguro de que obtendrá al menos un nuevo consejo valioso. El curso de correo electrónico de 7 días ofrece tácticas de diseño, marketing y rendimiento para crear un sitio web mejor y completo.

Gracias por leer esta guía sobre cómo vincular partes de páginas en WordPress, y considere compartirla con otra persona usando los botones sociales a continuación.

Ben Sibley

Ben Sibley

Ben Sibley es diseñador y desarrollador de temas de WordPress y fundador de Compete Themes.