Genera un plugin de tabla de contenidos ligero
Una buena TOC mejora UX (el lector salta a lo suyo) y SEO (Google muestra anclas como jump links). Casi todos los plugins de TOC son gratis, pero suelen pesar 50KB-200KB de assets para lo que deberían ser 2KB de markup.
Un plugin TOC custom parsea los headings al render, renderiza lista con anclas, resalta sección activa al hacer scroll y pesa prácticamente nada.
¿Por qué generarlo en vez de instalar un plugin existente?
Rank Math y Yoast sugieren añadir TOC y Easy Table of Contents es el estándar. Funciona. Envía JS que puede que no necesites, CSS genérico que acabas sobrescribiendo.
Un plugin generado produce markup limpio que hereda estilos de tu tema. El script para highlight de sección activa son ~1KB min. Auto-insert tras el primer H2 o vía [acme_toc], lo que prefieras.
Al ser tuyo, preferencias pequeñas son cambio de una línea: incluir H4, excluir slugs concretos, colapsable móvil, sticky desktop.
Prompt de ejemplo
Este es el tipo de descripción que genera este plugin. Puedes partir de aquí y ajustar lo que necesites antes de generar.
Nombre del plugin: Acme TOC
Al renderizar post (the_content):
- Parsear H2 y H3 del contenido.
- Dar a cada uno id slug (dashed, lower, dedup).
- Construir <ul> TOC con anclas.
- Insertar tras el primer párrafo en <nav class="acme-toc">.
Tipos: post, acme_case. Saltar si shortcode [no-toc] presente.
Mínimo 3 headings para renderizar.
JS front (2KB):
- IntersectionObserver para highlight.
- Smooth scroll con offset 60px para headers sticky.
- <= 768px colapsable (cerrado, summary "En esta página").
Stylesheet scoped a .acme-toc.Qué suele incluir el plugin generado
- Filtro the_content parseando H2/H3 e inyectando anclas + TOC
- Ids dedup
- Vanilla JS con IntersectionObserver
- Colapsable móvil, sticky desktop opcional
- Shortcode por post para desactivar
- Sin enqueue global en posts sin TOC
Niveles de heading, mínimo, tipos de post y comportamiento móvil en el prompt. Si el tema ya añade anclas, el plugin las reusa.
Preguntas frecuentes
¿Funciona con AMP?
HTML estándar; IntersectionObserver soportado en AMP-lite. AMP full cae a TOC estática sin highlight.
¿Impacto SEO?
Los ids de ancla son lo que Google usa para "jump to". Con ids limpios y estables le das al crawler lo que quiere.