Cómo crear una tabla de contenido en WordPress

Publicado: 2022-10-27

Una tabla de contenido en WordPress puede ser una adición efectiva a las páginas o publicaciones de su sitio web. Son geniales para mejorar la experiencia del usuario y para navegar textos de formato largo. Además, proporcionan una ligera ventaja en SEO.

En este artículo, le mostraremos paso a paso cómo agregar una tabla de contenido a su sitio de WordPress fácilmente con un complemento. Y le mostraremos los sencillos pasos necesarios para crear uno desde cero. Entonces, si está aquí por una tabla de contenido para WordPress, esta publicación tiene lo que necesita.

Esto es lo que cubriremos:

  • ¿Qué es una tabla de contenido?
  • Beneficios de un TOC en WordPress
  • Cómo agregar un TOC con un complemento
  • Cómo crear una TOC manualmente
  • Creando un TOC en Divi

¿Qué es una tabla de contenido en WordPress?

Una tabla de contenido de WordPress es básicamente una lista de los principales encabezados o temas cubiertos en el contenido de una página o publicación. Son geniales para dar a los usuarios una visión general de lo que está por venir. Por lo general, se colocan en la parte superior de una página, justo después del título o párrafo introductorio.

Ejemplos

Por lo general, una tabla de contenido consta de una lista de enlaces de anclaje (o enlaces de salto) a los encabezados correspondientes de la página. Al hacer clic, los enlaces ancla saltan o se desplazan hacia abajo hasta el encabezado correspondiente donde se encontrará el contenido. Esto facilita que los visitantes naveguen por la página.

¿Los beneficios de crear una tabla de contenido en WordPress?

Si es dueño de un negocio o bloguero que usa WordPress, la experiencia del usuario y la optimización de motores de búsqueda (SEO) siempre serán importantes. El uso de una tabla de contenido de WordPress en su sitio puede ayudar con ambos.

Experiencia de usuario

Una tabla de contenido puede ser extremadamente beneficiosa para la experiencia del usuario. Permite a los visitantes orientarse rápida y fácilmente a la información disponible en el contenido.

Además, debido a que contienen enlaces ancla, los visitantes pueden saltar fácilmente a la información que buscan sin tener que desplazarse tanto. Esto puede ahorrar mucho tiempo cuando hay mucho contenido. Incluso los usamos en nuestro Blog de temas elegantes para guías largas, como la guía definitiva para la optimización de velocidad de Divi.

Valor SEO

Tener una tabla de contenido puede darle a su página un impulso en los SERP al brindarle un resultado de búsqueda enriquecido. Esto puede incluir enlaces adicionales a las secciones de su página más populares que aparecen directamente en su resultado de búsqueda.

Resultado de búsqueda de Google

Además, ayudan a los motores de búsqueda a comprender el contexto de rastreo de su página, lo que puede conducir a una mejor indexación o fragmentos destacados. Al crear contenido bien organizado con una tabla de contenido, le brinda a Google y a otros motores de búsqueda una comprensión clara de su contenido.

Cómo agregar automáticamente una tabla de contenido en WordPress usando un complemento

Crear una tabla de contenido en WordPress usando un complemento es, con mucho, la forma más fácil de hacerlo. Y no faltan complementos en el repositorio de WordPress que ayudan a crear una tabla de contenido para todo el sitio para sus publicaciones y páginas y generar enlaces de anclaje automáticamente.

Complementos automáticos de TOC WordPress

Para esta publicación, usaremos el complemento de WordPress Easy Table of Contents para crear una tabla de contenido.

1. Instalar y activar el complemento

Para comenzar, vaya a su panel de control de WordPress y navegue hasta Complemento> Agregar nuevo. Busque el complemento Easy Table of Contents y haga clic para instalarlo y activarlo.

instalar el complemento de tabla de contenido fácil

2. Revisa una publicación para ver si funciona

Una vez que instala y activa el complemento, Easy Table of Contents crea inmediatamente una sección de tabla de contenido en sus publicaciones . Tan pronto como se active en su sitio, puede navegar al front-end y ver la tabla que creó en sus publicaciones.

Ejemplo de publicación en vivo

3. Personalice la configuración de todo el sitio de su tabla de contenido

Después de ver lo que hace el complemento de fábrica, puede visitar la configuración del complemento y adaptarlo a sus necesidades. Para ir a la configuración, vaya a Configuración > Tabla de contenido .

Configuración de todo el sitio

Para la mayoría de las personas, habilitar la tabla de contenido para que aparezca en las publicaciones es probablemente todo lo que necesita. Las páginas son una historia diferente. Si tiene páginas de destino que están diseñadas específicamente como páginas de nivel superior, debe desmarcar mostrar una tabla de contenido en sus páginas (mantener las publicaciones marcadas).

Fácil configuración de la tabla de contenido

Además, verá que Easy TOC reconoce todos sus tipos de publicaciones personalizadas y varias plantillas que puede activar o desactivar.

También hay una gran cantidad de otras opciones para que pruebe, pero todo depende de su sitio web y sus necesidades. La mayoría de los sitios web solo necesitarán usar encabezados H2, H3 o H4 en su tabla de contenido. Demasiados elementos en una tabla de contenido desordenarán su contenido y serán menos útiles que no tener una tabla de contenido.

4. Anular la configuración de todo el sitio para publicaciones individuales

Además de la configuración de todo el sitio, Easy Table of Contents le brinda control de publicación por publicación sobre la tabla de contenido. Sin embargo, para habilitar la configuración de publicaciones individuales de Easy Table of Contents en el Editor de bloques, debe habilitar los Campos personalizados en la sección de preferencias del editor de bloques.

Para hacer esto, haga clic en el icono de engranaje en la parte superior derecha para ver la configuración de la página. De esos ajustes, haga clic en "Preferencias".

Esto abrirá un modal en el centro de tu pantalla. Haga clic en la pestaña "Paneles". Luego, active la opción "Campos personalizados". Esto permitirá que cualquier complemento o configuración de tema que agregue campos personalizados a sus páginas/publicaciones muestre esas configuraciones debajo del editor de bloques.

habilitar campos personalizados

Puede deshabilitar la tabla de contenido para que no aparezca en la página de publicaciones y ajustar otras configuraciones que solo afectan esa página. Esto es perfecto para casos de uso especiales que difieren de la configuración de todo el sitio.

Para deshabilitar la sección Tabla de contenido de una publicación/página en particular, desplácese hacia abajo hasta la configuración del complemento (después de haber habilitado los campos personalizados).

Marque la casilla "Deshabilitar la inserción automática de la tabla de contenido".

Esto elimina la tabla de contenido que se insertaría automáticamente a través de la configuración del complemento.

Deshabilitar TOC en la página o publicación

¡Eso es todo!

Otros complementos de tabla de contenido para WordPress

Además de Easy Table of Contents, hay muchos otros complementos de Table of Contents que podrían servirle bien. Hay algunos complementos gratuitos geniales como LuckyWP Table of Contents que funcionan muy bien con bloques de WordPress y creadores de páginas como Divi. Y hay complementos premium como Fixed TOC que tienen todas las funciones avanzadas que uno necesitaría. Investigue y pruebe algunas para obtener las mejores funciones que se ajusten a sus necesidades.

En general, busque los que son fáciles de usar, tienen soporte incorporado para el marcado de esquema y tienen opciones de estilo decentes. Aquí están los mejores complementos de tabla de contenido para WordPress que recomendamos.

Cómo crear una tabla de contenido en WordPress manualmente

Crear una tabla de contenido desde cero usando el Editor de WordPress puede ser útil para los usuarios que solo necesitan una para algunas publicaciones o páginas y no necesitan la funcionalidad de un complemento para todo el sitio. Y crear uno es bastante simple (y algo divertido) una vez que entiendes el concepto.

Una tabla de contenido es básicamente una lista de enlaces de anclaje que saltan a secciones o encabezados específicos de una página. Por lo tanto, si ya ha creado un enlace ancla en una página o en un menú de navegación, ya está familiarizado con los conceptos básicos para crear una tabla de contenido. Si no está familiarizado con los enlaces de anclaje (o enlaces de salto), tenemos una guía completa sobre cómo crear enlaces de anclaje en WordPress.

Aquí se explica cómo crear una tabla de contenido desde cero en una publicación de WordPress:

1. Cree su lista de encabezados para su tabla de contenido

En la parte superior de su página o publicación, cree una lista de todos los encabezados de su tabla de contenido usando un bloque de párrafo (o bloque de lista). Para hacer esto, cree un nuevo bloque de párrafo (o bloque de lista) y agregue el texto del encabezado que corresponda a los encabezados en el contenido de su página a continuación. Asegúrese de que haya un salto de línea después de cada texto de encabezado.

Crear tabla de contenido - Editor de bloques - Crear bloque de párrafo

Una vez hecho esto, asegúrese de verificar que el texto del encabezado en la tabla de contenido coincida con el texto del encabezado en el contenido para una mejor experiencia de usuario.

2. Agregue una ID de anclaje HTML única a cada encabezado en su página o publicación

A continuación, revise el contenido de su página (título por encabezado) y asigne a cada encabezado un ID de anclaje HTML único.

Para hacer esto, vaya a un bloque de encabezado y haga clic en su configuración.

Crear tabla de contenido - Editor de bloques - Pasos 2-4

Después de eso, en la configuración del bloque de encabezado (en la pestaña "Avanzado" del bloque de encabezado), agregue una ID de anclaje HTML al campo. Para este ejemplo, el ancla ancla HTML es "título-uno". Este ID de anclaje se utilizará como destino del enlace de anclaje.

Crear tabla de contenido - Editor de bloques - Pasos 5-6

3. Convierta cada encabezado de su tabla de contenido en un enlace ancla

Una vez que se establece la ID para el elemento de encabezado, podemos volver a nuestro párrafo o bloque de lista que contiene nuestra tabla de contenido. Una por una, resalte cada línea y haga clic en el icono "Enlace" para agregar un enlace.

Crear tabla de contenido - Editor de bloques - Pasos 7-8

En lugar de una dirección web, agregue un signo de libra o un hashtag (#) más nuestra ID de anclaje. Presiona enter y el enlace se aplicará a ese texto.

Crear tabla de contenido - Editor de bloques - Paso 9

Para nuestro ejemplo, agregamos "#heading-one" para nuestro enlace ancla. El texto del enlace de anclaje debe ser descriptivo pero conciso. Pero también debe resumir con precisión el contenido que se encuentra dentro de esa sección para que los motores de búsqueda puedan leerlo.

Lo más importante es que su enlace de anclaje debe ser único y no debe usarse en ninguna otra parte de la página. Esto se debe a que el uso de la misma ID de anclaje HTML confundirá al navegador y no funcionará según lo previsto.

Una vez que haya terminado, guarde sus cambios y obtenga una vista previa de su página. Pruebe su nueva tabla de contenido haciendo clic en los enlaces de anclaje para asegurarse de que todos salten a los lugares correctos. Si esos enlaces no funcionan, es posible que haya omitido o extraviado el "#" o que sus ID de anclaje y URL de enlace de anclaje no coincidan exactamente.

Crear una tabla de contenido en Divi

Divi Theme Builder es una de las herramientas más robustas y fáciles de usar para sitios web de WordPress. Permite a los creadores de sitios web, propietarios de negocios y especialistas en marketing crear sitios web impresionantes con muchas funciones.

Usar el editor predeterminado de WordPress para crear una tabla de contenido es bastante limitante, especialmente cuando se trata de diseño. Divi hace que sea mucho más fácil crear diseños únicos de tablas de contenido y agregar enlaces de anclaje de desplazamiento suave a cualquier elemento de la página o publicación sin tener que saber HTML o CSS.

Crear una tabla de contenido en Divi Theme Builder

Tenemos un artículo completo sobre cómo crear una sección de tabla de contenido para tu blog. No solo puede encontrar los pasos de instrucciones, sino que también hay una descarga de diseño gratuita para usted. El diseño es para ti si buscas una solución más rápida con el tema Divi.

El mejor complemento de tabla de contenido de Divi

Si está buscando una manera de crear una tabla de contenido en Divi, consulte el complemento Divi Table of Contents Maker.

Complemento del fabricante de la tabla de contenido divi

Este complemento incluye un módulo de tabla de contenido único para Divi que genera automáticamente sus listas, enlaces de anclaje y toda la funcionalidad que necesita con unos pocos clics. ¡Puede usar el módulo en una plantilla de generador de temas para agregar una tabla de contenido automáticamente para todas sus publicaciones de blog! Además, el módulo tiene cientos de configuraciones de personalización y opciones de estilo.

Obtén más información sobre Divi Table of Contents Maker.

Otras soluciones de tabla de contenido a considerar

Si está interesado en otras soluciones para agregar una tabla de contenido en WordPress, aquí hay algunas otras que quizás no conozca y que vale la pena considerar.

Espere un bloque de tabla de contenido incorporado en WordPress Core

Si tiene tiempo para esperar una solución de tabla de contenido, parece que se está trabajando en un bloque de WordPress de tabla de contenido. Y, hay mucha tracción reciente en el proyecto que puede ver en Github Pull y en un diálogo de problemas. Parece un bloque prometedor que traerá la tabla de contenido de forma nativa al editor de bloques de WordPress.

Sin embargo, hay baches en la hoja de ruta, por lo que es incierto si se hará WordPress 6.1 o si estará en una versión posterior.

Busque una función de tabla de contenido en los complementos que ya puede usar

Con todos los complementos robustos que existen. ¿Quién sabe? Existe una posibilidad decente de que tal vez esté usando un complemento actualmente que tiene una función de tabla de contenido oculta en los detalles. Aquí hay un par de complementos populares que ya puede usar y que ofrecen la posibilidad de crear una tabla de contenido en WordPress.

SEO Yoast Premium

Si está utilizando el complemento Yoast SEO para WordPress, es posible que se pregunte qué es el bloque Tabla de contenido y cómo puede ayudarlo. El bloque Tabla de contenido es una característica premium que le permite crear dinámicamente una tabla de contenido para su publicación o página. La mejor parte es que si ya usa Yoast SEO Premium, tiene una solución TOC fácil.

Espectros

Otro complemento que mucha gente usa es Spectra. Spectra ha ido ganando popularidad como una mejora del editor de bloques incorporado para WordPress.

Uno de los bloques incluidos en Spectra es un bloque de tabla de contenido fácil de usar. El bloque tiene una capacidad de personalización de diseño total y se puede implementar sin codificación adicional. Como puede ver, agregue el bloque a su publicación y ajuste la configuración. Tendrás una tabla de contenido en unos segundos. Spectra viene en una versión gratuita y premium.

Conclusión

En conclusión, crear una tabla de contenido en WordPress es fácil y se puede hacer en unos pocos pasos. Al usar un complemento, puede generar automáticamente una tabla de contenido para sus páginas y publicaciones. O bien, puede crear manualmente una tabla de contenido en el editor predeterminado de WordPress o en un creador de páginas como Divi para obtener más configuraciones de diseño. De cualquier manera, tiene el poder de personalizar su sitio web para que los visitantes de su sitio tengan una mejor experiencia de usuario y se vean mejor en los resultados de búsqueda.

¿Utiliza una tabla de contenido en su sitio de WordPress? ¿Tienes un complemento favorito que usas? ¡Cuéntanos en los comentarios!

Imagen destacada a través de IconArt / shutterstock.com