¿Cómo mostrar la tabla de contenido en la publicación del blog? y podemos desplazarnos a un encabezado particular al hacer clic en los encabezados
- Vaya a la publicación o página a la que desea agregar la tabla de contenido.
- Si no hay ninguno, cree los encabezados que se utilizarán como elementos en la tabla de contenido.
- Haga clic en el primer bloque de encabezado. Aparecerá una barra de herramientas. Barra de herramientas de bloque de Gutenberg para un encabezado H2
- Haga clic en el botón Más opciones (el icono de tres puntos verticales) y seleccione Editar como HTML. Haga clic en Editar como HTML en el editor de WordPress-1
Nombre de la sección
- Agregue un nombre de identificación único a la etiqueta de apertura del encabezado. Un nombre de ID es un identificador único que se agrega a la etiqueta de apertura de un elemento HTML. Esto es lo que parece para un encabezado:
- Repita para el resto de los encabezados de la página (o solo los que desea incluir en la tabla de contenido). Para esta demostración, usaré los nombres de ID "ancla-1", "ancla-2", "ancla-3" y "ancla-4". Agregar nombres de ID a todos los encabezados en la publicación de WordPress
- Desplácese hacia atrás hasta la parte superior de la página. Haga clic en el botón Agregar bloque en la barra de herramientas superior. Agregar botón Bloquear en el editor Gutenberg de WordPress8. Haz clic en el bloque HTML personalizado. Este bloque HTML le permitirá crear la tabla de contenido.
Bloque HTML personalizado en el editor de Gutenberg
- Agregue la tabla de contenido con sus enlaces de salto. Los enlaces de salto son un tipo específico de hipervínculo en el que los lectores pueden hacer clic para "saltar" a diferentes secciones en la misma página. Para crear los enlaces de salto para esta demostración, simplemente llené el atributo href con un hashtag y el nombre de identificación de los encabezados que escribí en el paso anterior. Para crear su tabla de contenido, copie y pegue el siguiente código HTML en el bloque:
<div class="toc"> <p>Table of contents</p> <ol> <li><a rel="noopener" target="_blank" href="#anchor-1">Section 1</a></li> <li><a rel="noopener" target="_blank" href="#anchor-2">Section 2 </a></li> <li><a rel="noopener" target="_blank" href="#anchor-3">Section 3 </a></li> <li><a rel="noopener" target="_blank" href="#anchor-4">Section 4 </a></li> </ol> </div>
- Personalice los nombres de las secciones y los enlaces de salto para que se vinculen a las secciones correctas.