Página con índice y anclas HTML
Esta guía detalla la técnica para construir un índice navegable dentro de una página extensa, utilizando la configuración de Anclas HTML en los bloques de encabezado y enlazados a un patrón con índice.
Fase 1: Preparación Estructural y Composición
Acceso o Creación de la Entidad
Abra la página existente o cree una nueva. Si es una página nueva, ingrese el título y pase al siguiente paso.
Inserción del Patrón con índice
En el área de composición principal, acceda al Selector de Bloques y navegue a la pestaña “Patrones”. Busque la categoría “Estilos de texto” y seleccione el patrón de texto destacado y lista toc. Esto generará la sección donde se alojarán los enlaces navegables.
Fase 2: Definición de anclas HTML
En este paso se etiquetan los bloques que servirán como destino de los enlaces. Pueden ser los bloques de encabezado (H2, H3, etc.) o un bloque que englobe una sección.
Etiquetado del bloque de destino
Seleccione el Título de la Sección al que se desea enlazar (ej. un bloque H2).
Creación de ancla
Con el bloque seleccionado, diríjase al menú lateral derecho, vaya a la pestaña “Bloque” y localice la sección “Avanzado”.
Inserción del ID de Ancla
En el campo “Anclaje HTML”, ingrese un identificador de texto corto y descriptivo. WordPress automáticamente procesará y normalizará este texto cambiando espacios por guiones.
Consideraciones ancla HTML:
- Debe ser única dentro de un documento.
- Distingue entre mayúsculas y minúsculas.
- Puede incluir los siguientes símbolos: guion (-), guión bajo (_), dos puntos (:), punto (.).
- No puede incluir espacios.
- Debe comenzar con el alfabeto.
- Ideal si no tiene tildes
Copia del ID
Copie el texto ingresado en el campo “Anclaje HTML”. Este valor será usado para construir el enlace.
Repita los pasos 4 a 7 por cada sección que desee incluir en el índice.
Fase 3: Construcción del Índice
Retorno al patrón con índice
Vuelva a la parte superior de la página, localice el patrón de texto destacado y lista toc y comience a editar la lista.
Creación del enlace interno
a. Escriba el Texto: Reemplace el texto de ejemplo con el título visible de la sección.
b. Activación del Enlace: Seleccione este texto e inicie la función para agregar un enlace (Ctrl+K o el icono de enlace en la barra de herramientas).
c. Vinculación: En el campo de URL, pegue el texto del Ancla ID previamente copiado, anteponiendo el símbolo numeral (#).
Ejemplo: Si el ID de ancla es direccion-de-servicios-estuciantiles#direccion-de-servicios-estuciantiles
Conservar Cambios
Para finalizar, haga clic en el botón “Guardar” en la parte superior derecha de la pantalla para guardar los cambios en la página.