Bloques de contenido en WordPress: 4 buenas formas de trucos CSS

Tener un bloque TOC para publicaciones de blog (u otros tipos de contenido escrito largo) en WordPress es una buena idea por dos razones:

• Ayuda a los usuarios a recorrer la publicación para encontrar lo que necesitan (y con suerte no les molestará).
• Proporciona valor para el SEO.

Complemento SEO de RankMath tenlo en cuenta Debido al segundo punto, como parte de la evaluación de tu página (sugiere que deberías tener una). Si lo haces bien, mira lo que Google puede darte:

Otros complementos SEO de WordPress como Yoast tienen sentido Proporciona bloques de directorios como funcionalidad adicional enchufar. Si está comprometido con el uso de Yoast, creo que es bueno usarlo. Pero reconozco que no me gusta que me bloqueen complementos que proporcionan una microfunción de la que dependes.

Así que cuales son las opciones?

contenido

Qué buscar en un bloque del directorio de WordPress

Aquí hay algunas cosas que debe buscar y considerar al elegir un bloque de un directorio:

• Título Personalizado - Muchas opciones colocan el encabezado "Contenido" sobre el contenido real, lo cual tiene sentido. ¿Puedes apagarlo o personalizarlo? ¿Qué nivel de título es? Los diseños pueden requerir la capacidad de deshabilitar títulos, y elegir niveles de encabezado ayuda a garantizar una semántica HTML adecuada.
• plegable - Con el espíritu de hacer que los directorios sean menos molestos, muchos de ellos brindan la capacidad de cambiar bloques de directorios entre estados abiertos y cerrados. quieres esto ¿Está de acuerdo en que puede requerir algo de javascript para funcionar? ¿Hace un interruptor accesible? ¿Puede estar en el estado deseado por defecto?
• Elige títulos para incluir - Tal vez solo quieres todo <h2> Los elementos que componen el directorio. ¿puedes hacerlo? ¿Los subtítulos crean listas "anidadas"? quieres esto ¿Puedes desactivar ciertos niveles de encabezado? ¿Puedes decirle al bloque que incluya solo <h2> atravesar <h4>Además del título, ¿quieres ser parte del directorio?
• enlace editable - Muchos complementos de directorio en WordPress generalmente toman todos los títulos palabra por palabra. Es posible que desee acortar, extender o cambiar un enlace específico en el contenido; por ejemplo, no el texto exacto del título al que está vinculado. ¿puedes hacerlo?
• Incluir otros enlaces - Es posible que desee vincular a algo que no sea el título del contenido. Es posible que se haya agregado a la plantilla usando un campo personalizado de WordPress, o puede ser parte de la plantilla completa, como la sección de comentarios. ¿Puede agregar (o eliminar) estos encabezados al bloque?
• Compatibilidad con el editor de bloques - Este es el significado de esta publicación de blog. No incluí muchas opciones sin barreras, pero debe haber una versión de la vieja escuela de esto. [shortcode]- sobre la base de o aplicarlo de otro modo. Mi principal preocupación son los bloques, aunque puedo ver fácilmente una situación en la que intenta colocar el contenido en otro lugar de la plantilla (¿tal vez en una barra lateral?). Por lo que puede ser útil tener muchas opciones y modularidad.
• opciones de estilo - Personalmente, me gusta ingresar mis propios estilos (¡sorpresa!) E incluso eliminar de la cola cualquier hoja de estilo (o script) que el complemento esté tratando de traer. Pero me imagino a más personas que quieren que el catálogo se vea bien y tengan control estético directamente desde el editor. Esto significa que es mejor tener opciones para bloques de color, fuentes, espaciado, etc.
• marcado semántico - Puede valer la pena mirar el HTML generado por el bloque TOC de su elección, si es razonable. Por ejemplo, he visto listas HTML generadas por complementos que en realidad no insertan listas, pero agregan clases para enumerar elementos para generar ellos. Ver invertido. No, gracias. No estoy seguro de si existe un formato HTML oficial que sea mejor para SEO, por lo que el etiquetado semántico es lo mejor que puede hacer.
• ident. № del título - Para que el contenido relacionado funcione, todos los títulos deben tener números de identificación para que haya algo para anclar. Creo que todos los complementos aquí que valen la pena los agregarán a el encabezado solo si no lo son, pero es posible que desee comprobar esto; de lo contrario, corre el riesgo de romper las relaciones existentes o incluso el estilo y la funcionalidad. Considere también qué identificadores se generan. Por ejemplo, yo uso Agregar un complemento anclado, que agrega un ícono de enlace (() a todos los encabezados para otorgar acceso a la ID. Genera el mismo ID que el directorio, lo que provoca el problema de duplicar el ID. Reparable, pero cuidado con esas cosas.

Opción 1: use un complemento de directorio especial

El complemento de directorio especial es un complemento de solo directorio. no hay otros En este caso, aquí hay algunas opciones sólidas.

Catálogo de los personajes

La capacidad de editar/agregar/eliminar títulos del contenido, incluso si se genera automáticamente, es muy poderosa y única para este complemento. También te permite encenderlo y apagarlo (opcional), lo cual es bueno para estos propósitos, ya que deberían hacer que la conexión sea útil y no interfieran con el contenido. Pero tenga en cuenta que esto lo coloca en la cola de otros guiones y estilos o cosas que le encanta hacer que pueden o no ser perfectas.

directorio sencillo

Está No ¡Bloques del editor de bloques! En cambio, simplemente se inserta automáticamente por el tipo de contenido o por la casilla de verificación para incluir en el cuadro meta.

Me resulta un poco incómodo que no puedas controlar dónde va el directorio de complementos. Parece que se insertará en la parte superior de la publicación, probablemente justo dentro. <!-- more --> se encuentra en

tabla de contenido sencilla

Este es uno de mis favoritos.

Me gusta esto porque no agrega scripts ni estilos predeterminados. Simplemente crea una lista HTML semántica de encabezados, los conecta y eso es todo. Así es como me gusta desplazarme.

Directorio LuckyWP

Muchas funciones, pero me parece un poco inconveniente que no haya controles de bloque regulares. En su lugar, obtendrá esta interfaz de usuario totalmente personalizada para cambiar la configuración, y no podrá visualizar cómo se verá en el bloque en sí.

Buen TOC

Este complemento de directorio parece encapsular 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 muy útiles (¿como viñetas cuadradas en listas? ¿Intervalos de "15" restantes?).

Opción 2: Espere a que la funcionalidad del directorio se incluya en el WordPress principal

Mientras escribo, hay algunos abrir solicitud de descarga Active los bloques de directorio en el complemento de Gutenberg. Probablemente, si va bien, acabará en el núcleo. Esto es genial si me preguntas, pero no ayuda con la necesidad de un bloque de directorio en este punto.

Si se elimina esta característica, me inclinaría mucho a usarla. Espero poder buscar o consultar para encontrar bloques de directorio existentes en todas las publicaciones, cambiarlos para usar mis propios bloques y eliminar todos los complementos existentes.

Opción 3: use un bloque de directorio que sea una subfunción de otro complemento de WordPress

Te aconsejaría que no uses un complemento que hace mucho solo porque quieres usar una pequeña parte, pero bueno, si resulta que puedes usar mucho Lo que obtiene de un complemento grande puede ser una ventaja en términos de administrar menos complementos en general.

Yoast SEO Premium

versión gratuita de Complemento Yoast SEO No, pero solo $ 99 al año, Complemento Yoast SEO Premium hacer. Casi no tiene función. Simplemente lo agregas 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 cuando cambia el título en el contenido, algo que la mayoría de los que he probado no han hecho. Súper básico, sin estilo ni funcionalidad, pero me gusta hasta cierto punto. No ejecutaría Yoast para esta función, especialmente por la prima pagada, pero si todavía usa Yoast (a largo plazo), entonces puede seguir esa ruta.

Complemento definitivo para Gutenberg

Este es probablemente el bloque de directorios más clásico que he encontrado. Nuevamente, estoy cansado de usar un complemento todo en uno para una función en particular, pero las otras funciones incluidas en el complemento son algo que puede uso, entonces esta es una opción sólida.

Opción 4: enrolle su propio bloque del directorio de bricolaje.

No es imposible hacer tus propios bloques, yo lo he hecho varias veces. Crear el bloque, aunque pueda alcanzarlo @ wordpress / crear un bloque Estos días. Esto lo coloca en el ámbito de JavaScript, por lo que utilizará JavaScript para analizar el contenido de la publicación, buscar el título en el contenido de la publicación y crear el contenido a partir de ahí. Hablo de este tipo de campo de nivel medio a alto. Por un lado, este es un deber técnico adicional, por otro lado, al menos tienes el control total, ya que este es tu propio código.

A medida que nos enfocamos en los bloques de construcción, Los campos personalizados avanzados tienen una forma muy poderosa de construir bloques personalizados Esto devuelve este poder al reino de PHP. Esto hace que el código sea mucho más fácil si solo está interesado en crear contenido a partir de otros encabezados.

Bill Erickson tiene una publicación: "Acceso para bloquear datos con PHP parse_blocks() y render_block() - Esto termina construyendo literalmente un bloque desde un directorio. esta esencia Proporciona una guía muy útil sobre cómo recorrer los bloques en una publicación y generar una lista HTML.

¿amor?

Si usara Yoast SEO Premium en mi sitio web, usaría este, si no, iría tabla de contenido sencillaEsto es lo que hacemos en CSS-Tricks. Una vez que la funcionalidad principal caiga (🤞), haré un proyecto de día lluvioso para mover todas las publicaciones que actualmente usan el complemento de directorio para usar el bloque principal de WordPress (suponiendo que salga bien).