Ofrecer un bloque de tabla de contenido en WordPress para publicaciones de blog (o realmente cualquier otro tipo de contenido escrito extenso) es una buena idea por dos razones:
- Ayuda a los usuarios a buscar en la publicación lo que necesitan (y con suerte no se interpondrá en el camino).
- Proporciona valor SEO.
El complemento SEO de RankMath factores en como parte de la puntuación de tu página (lo que sugiere que deberías tener una), debido a ese segundo punto. Vea lo que probablemente le brinde Google si lo hace bien:
Tiene sentido que otros complementos SEO de WordPress como Yoast ofrecer un bloque de tabla de contenido como una característica adicional integrada del complemento. Si está comprometido a usar Yoast, entonces creo que está bien usar solo eso. Pero admito que no es mi favorito sentirme bloqueado por un complemento porque ofrece una microfunción de la que luego dependes.
Así que cuales son las opciones?
Índice del contenido
Qué buscar en un bloque de tabla de contenido de WordPress
Aquí hay algunas cosas que debe buscar y considerar al elegir un bloque de tabla de contenido:
- Encabezado personalizable — Muchas opciones arrojan un encabezado de "Tabla de contenido" sobre la Tabla de contenido real, lo cual tiene sentido. ¿Puedes apagarlo o personalizarlo? ¿Qué encabezado de nivel es? Tener la capacidad de deshabilitar el encabezado puede ser necesario para el diseño, y tener una opción de niveles de encabezado puede ayudar a garantizar una semántica HTML adecuada.
- Plegable — Con el espíritu de hacer que la tabla de contenido sea menos molesta, muchos ofrecen una función para alternar el bloque de la tabla de contenido entre los estados abierto y cerrado. ¿Quieres eso? ¿Estás de acuerdo con el hecho de que probablemente requiera algo de JavaScript para funcionar? ¿Está alternando de manera accesible? ¿Puede por defecto al estado que desea?
- Elija qué encabezados incluir — Quizá solo quieras todos los
<h2>elementos para formar la Tabla de Contenidos. ¿Puedes hacer eso? ¿Los subtítulos crean una lista "anidada"? ¿Quieres eso? ¿Puede desactivar ciertos niveles de encabezados? ¿Puedes decirle al bloque que solo incluya<h2>a<h4>? ¿Hay otras cosas además de los encabezados que desea que formen parte de la tabla de contenido? - Enlaces editables — Muchos complementos de tabla de contenido en WordPress suelen tomar todos los encabezados palabra por palabra. Tal vez desee acortar, alargar o cambiar un enlace específico en la Tabla de contenido; como en, no tiene que ser el texto exacto del encabezado al que se vincula. ¿Puedes hacer eso?
- Incluir enlaces adicionales — Quizá quiera enlazar a algo que no sea un encabezado de contenido. Tal vez se agrega a la plantilla con un Campo personalizado de WordPress, o es parte de la plantilla general como la sección de comentarios. ¿Puede agregar (o eliminar) esos como encabezados en el bloque?
- Compatibilidad con el editor de bloques — Ese es el punto de esta publicación de blog. No incluí muchas opciones que no tienen un bloque. Pero seguramente hay versiones de la vieja escuela de esto que son
[shortcode]-based o que lo implementan de alguna otra manera. Lo que más me preocupa son los bloques, aunque podría ver fácilmente una situación en la que su objetivo sea colocar la tabla de contenido en otro lugar de una plantilla (¿quizás en la barra lateral?). Entonces, tener múltiples opciones y modularidad podría ser útil. - Opciones de estilo — En lo personal, me gusta traer mi propio estilismo (¡sorpresa!) e incluso elimine las hojas de estilo (o scripts) que un complemento intenta traer consigo para el viaje. Pero puedo imaginar que más personas quieren que la tabla de contenido se vea bien y poder controlarla estéticamente directamente desde el editor. Esto significa que sería bueno tener opciones de bloque para colores, fuentes, espaciado, etc.
- Marcado semántico — Podría valer la pena echar un vistazo al HTML que genera el bloque de tabla de contenido que eliges si es sensato. He visto complementos que generan listas HTML que en realidad no listas de nidos, por ejemplo, pero en su lugar agregue clases a los elementos de la lista para hacerlos vea anidado. No, gracias. No estoy seguro de que exista un formato HTML oficial que sea mejor para SEO, por lo que el marcado semático es lo mejor que puede hacer.
- ID de encabezado — Para que una tabla de contenido vinculada funcione, todos los encabezados deben tener ID para que haya algo a lo que anclarse. Creo que cualquier complemento aquí que valga la pena los agregaría a los encabezados solo en el caso de que no tengan uno, pero es posible que desee verificar eso; de lo contrario, corre el riesgo de romper los enlaces existentes o incluso el estilo y la funcionalidad. Piense también en qué identificaciones se están generando. Por ejemplo, yo uso el Agregar complemento de enlaces de anclaje, que agrega un ícono de enlace (🔗) al lado de todos los encabezados para ofrecer acceso a las ID. Los ID que genera eran idénticos a los ID generados por la tabla de contenido, lo que provocaba un problema de ID duplicado. Solucionable, pero solo tenga en cuenta cosas como esa.
Opción 1: use un complemento de tabla de contenido dedicado
Un complemento de tabla de contenido dedicado es un complemento que se enfoca en nada más que una tabla de contenido. Nada más. Aquí hay algunas opciones sólidas donde ese es el caso.
Índice heroico
La capacidad de editar/agregar/eliminar encabezados de la tabla de contenido, incluso después de que se haya generado automáticamente, es bastante poderosa y exclusiva de este complemento. También le permite abrirlo y cerrarlo (opcionalmente), lo cual es bueno como objetivo para estos, ya que deberían hacer que los enlaces sean útiles en lugar de contenido que se interpone en el camino. Pero tenga en cuenta que esto lo coloca en el territorio de poner en cola secuencias de comandos adicionales, así como estilos que pueden o no ser ideales o algo con lo que se sienta cómodo.
Tabla de contenido fácil
Es no ¡un bloque del Editor de bloques! En cambio, solo se inserta automáticamente, ya sea por tipo de contenido o a través de una casilla de verificación en un metabox.
Me resulta un poco incómodo que no puedas controlar dónde va la tabla de contenido con este complemento. Parece que se inserta cerca de la parte superior de las publicaciones, probablemente justo después de donde <!-- more --> se encuentra.
TOC simple
Este es mi favorito.
Me gusta este porque no agrega ningún script o estilo por defecto. Simplemente crea una lista HTML semántica a partir de los encabezados, los vincula y eso es todo. Así es como me gusta rodar.
Tabla de contenido de LuckyWP
Muchas características, pero me resulta un poco incómodo que no tenga controles de bloque regulares. En cambio, obtiene esta interfaz de usuario completamente personalizada para cambiar la configuración, y no puede obtener una vista previa de cómo se ve en el bloque en sí.
GutenTOC
Parece que este complemento de Tabla de contenido adopta bastante bien el espíritu del Editor de bloques de WordPress, pero la configuración me parece un poco incómoda. Las opciones que ofrece no se sienten terriblemente útiles (¿como viñetas cuadradas para la lista? ¿“15” espacio restante?).
Opción 2: Espere a que se hornee una función de tabla de contenido en Core WordPress
Mientras escribo, hay una solicitud de extracción abierta para habilitar un bloque de tabla de contenido en el complemento de Gutenberg. Presumiblemente, si eso va bien, finalmente llegará al núcleo. Eso sería genial si me preguntas, pero no ayuda a resolver el problema de necesitar un bloque de tabla de contenido en este momento.
Si esta función cae, me inclinaría mucho por usarla. Con suerte, puedo hacer una búsqueda o consulta para encontrar bloques de tabla de contenido existentes en todas las publicaciones, cambiarlos para usar el bloque nativo y eliminar cualquier complemento que tenga.
Opción 3: use un bloque de tabla de contenido que es una subfunción de otro complemento de WordPress
Recomendaría no usar un complemento que haga una gran cantidad de cosas solo porque desea usar una pequeña parte de él. Pero oye, si resulta que te vendría bien un montón de cosas del complemento grande, podría ser una ventaja en cuanto a la administración de menos complementos en general.
Yoast SEO de primera calidad
La versión gratuita de la Yoast SEO plugin no lo tiene, pero por sólo $99 al año, el Complemento Yoast SEO Premium lo hace. Casi no tiene características. Simplemente lo agrega como un bloque y aparece. Puede editar el título o eliminarlo; es casi como un "subbloque".
La lista de enlaces no se puede editar, pero se actualiza en tiempo real a medida que cambia los encabezados en el contenido, que es algo que la mayoría de los otros que probé no hicieron. Súper básico, sin estilo ni características, pero eso me gusta un poco. No ejecutaría Yoast para esta función, especialmente por una prima paga, pero si está usando Yoast de todos modos (a largo plazo), entonces también podría seguir esta ruta.
Complementos definitivos para Gutenberg
Este es probablemente el bloque de tabla de contenido más elegante que he encontrado. Una vez más, estoy cansado de usar un complemento todo en uno para una función específica, pero las otras funciones integradas en este complemento son cosas que puede usar, entonces es una opción sólida.
Opción 4: Enrolle su propio bloque de tabla de contenido de bricolaje
¡Hacer bloques usted mismo no está fuera de discusión! Lo he hecho un par de veces con crear-guten-bloque, aunque probablemente alcanzaría @wordpress/crear-bloque estos días. Esto lo coloca en la tierra de JavaScript, por lo que analizará el contenido de la publicación con JavaScript, encontrará encabezados en el contenido de la publicación y construirá cosas a partir de ahí. Una especie de territorio intermedio a avanzado, diría yo. Por un lado, es una deuda extra técnica, y por otro, al menos tienes el control completo ya que es tu propio código.
Como nos estamos enfocando en los bloques de construcción, Advanced Custom Fields tiene una forma muy poderosa de construir bloques personalizados eso devuelve ese poder a PHP-land. De esa manera, si solo le preocupa crear una tabla de contenido a partir de otros bloques de encabezado, el código se vuelve mucho más fácil.
Bill Erickson tiene una publicación: “Acceda a datos de bloque con PHP usando parse_blocks() y render_block() – que finalmente se convierte literalmente en la construcción de un bloque de tabla de contenido. Esta esencia él proporciona una referencia bastante útil sobre cómo recorrer bloques en una publicación y producir una lista HTML.
¿Favorito?
Si estuviera usando Yoast SEO Premium en un sitio, solo usaría ese. Si no, iría por TOC simple. Eso es lo que hemos hecho aquí en CSS-Tricks. Una vez que la función central cae (🤞), haría un proyecto de día lluvioso de mover todas las publicaciones que actualmente usan el complemento Tabla de contenido para usar el bloque central de WordPress (suponiendo que resulte agradable).
