Este tutorial explica con todo lujo de detalles cómo añadir numeración automática a los encabezados H2 y H3 de tus entradas en WordPress utilizando exclusivamente CSS counters. Verás la teoría, ejemplos listos para pegar en Appearance → Customize → Additional CSS (o en tu hoja de estilos del tema hijo), variantes para empezar desde un número concreto, excluir algunos encabezados, estilos visuales y las consideraciones de accesibilidad y SEO que debes tener en cuenta.
¿Qué son los CSS counters y por qué usarlos?
Los CSS counters son contadores controlados por CSS que permiten generar contenido automático mediante la pseudoclase ::before o ::after sin tocar el HTML. Ventajas principales:
- No modifica el HTML del contenido (ideal para Gutenberg y editores visuales).
- Fácil de activar/desactivar con CSS (clases, media queries, etc.).
- Muy rápido y mantenible, evita tocar plantillas PHP o insertar scripts.
Limitaciones importantes: el contenido generado por pseudoelementos puede no quedar incluido al copiar/pegar y su lectura por algunos lectores de pantalla puede variar. Más abajo se abordan alternativas si necesitas números en el DOM.
Cómo funcionan (concepto esencial)
La idea básica es:
- Inicializas un contador en el contenedor que envuelve el contenido del artículo (por ejemplo .entry-content).
- Cada H2 incrementa el contador principal y resetea el contador secundario de H3.
- Cada H3 incrementa el contador secundario y construye su contenido como contadorH2.contadorH3.
- Usas pseudoelementos ::before para insertar la numeración delante del encabezado.
Código CSS básico: numeración H2 y H3
Pega este bloque en el CSS de tu tema o en Additional CSS. Está escrito para la clase habitual .entry-content que usan muchos temas si tu tema usa otra clase, cámbiala por la adecuada.
/ Inicializa el contador en el contenedor del post /
.entry-content {
counter-reset: h2counter / h2counter empezará en 0 /
}
/ Cada H2 incrementa el contador de H2 y resetea el contador de H3 /
.entry-content h2 {
counter-increment: h2counter
counter-reset: h3counter
position: relative / útil si quieres posicionar el número con absoluta /
}
/ Inserta el número delante del H2 /
.entry-content h2::before {
content: counter(h2counter) .
display: inline-block
width: 3.2em / ancho reservado para alineación /
margin-right: 0.6em
text-align: right
font-weight: 600
color: #222
}
/ H3: incrementa el contador secundario /
.entry-content h3 {
counter-increment: h3counter
}
/ Inserta número compuesto delante del H3: H2.H3 /
.entry-content h3::before {
content: counter(h2counter) . counter(h3counter)
display: inline-block
width: 4.0em
margin-right: 0.5em
text-align: right
color: #444
}
Explicación línea a línea
- counter-reset: h2counter fija el contador a 0 al inicio del contenedor (por post si usas .entry-content por entrada).
- counter-increment en h2/h3 suma 1 cada vez que aparece ese encabezado.
- h2 { counter-reset: h3counter } asegura que cada nuevo H2 comience a contar H3 desde 0.
- El pseudoelemento ::before
Combinaciones y ajustes comunes
1) Empezar numeración desde un número distinto
Si quieres que la primera H2 aparezca como 3. (por ejemplo, continúas una numeración previa o quieres offset), inicializa el contador con un valor:
.entry-content {
counter-reset: h2counter 2 / el primer incremento dará 3 /
}
2) Excluir ciertos encabezados de la numeración
Si hay títulos que no quieres numerar (por ejemplo títulos de widgets, subtítulos especiales), añade una clase en el editor (p. ej. no-counter) y evita la numeración con reglas específicas:
.entry-content h2.no-counter::before,
.entry-content h3.no-counter::before {
content: none
}
/ Evita que el encabezado afecte al contador (opcional) /
.entry-content h2.no-counter {
counter-increment: none
}
3) Alineación y diseño del número
Puedes jugar con width, text-align, font-weight y color para que los números se alineen y tengan jerarquía visual. Si tu tema aplica padding/margen a los encabezados, ajusta el ancho reservado para que no rompa el flujo del texto.
Integración con tablas de contenido (TOC) y enlaces ancla
Si tu sitio genera una tabla de contenido que enlaza a los encabezados (con id/anchor), la numeración por CSS no modifica el href ni el id, solo muestra números visuales. Para no romper la usabilidad al hacer clic en anchors que están cerca del borde, un patrón útil es añadir un espacio invisible arriba del encabezado sin mover visualmente el contenido.
/ Offset para anclas: crea un pseudo-elemento invisible que desplaza el punto de anclaje /
.entry-content h2::before,
.entry-content h3::before {
/ ya se usa para numeración puedes añadir un pseudo-elemento extra con ::before no posible,
en ese caso usa padding-top y margin-top negativo en el encabezado /
}
/ Alternativa: añade margen superior para compensar el anclaje si tu tema fija cabecera /
.entry-content h2,
.entry-content h3 {
scroll-margin-top: 90px / moderno y recomendable: evita que la cabecera fije el título /
}
Accesibilidad y SEO: ventajas y riesgos
- Los números puestos con ::before son puramente visuales. Algunos lectores de pantalla los anuncian, otros no no es universal.
- Copiar/pegar desde el navegador puede no incluir el contenido generado por pseudoelementos si necesitas que los números formen parte del texto copiable o indexable, debes insertar los números en el DOM (con JavaScript o servidor).
- Si necesitas que los números aparezcan también en fragmentos usados fuera del navegador (por ejemplo exportar a PDF o feeds), usar una solución con JS/PHP será más fiable.
Alternativa: insertar números en el DOM con PHP (opcional)
Si la situación exige que la numeración forme parte del HTML (por ejemplo para copia/SEO o exportaciones), puedes procesar el contenido con un filtro de WordPress que envuelva/añada una etiqueta con el número. Precaución: modificar el contenido con regex puede romper otras cosas (shortcodes, bloques). Usa un enfoque cuidadoso o un plugin especializado.
/
Ejemplo simple (de uso con precaución):
Añade clase a h2/h3 si no tienen clase, para luego manejarlas con CSS.
No es perfecto para todos los casos probar en staging.
/
add_filter(the_content, wp_add_heading_class)
function wp_add_heading_class(content) {
// Añade class=has-counter a h2 que no tengan clase
content = preg_replace(
/]class)([^>])>/i,
,
content
)
content = preg_replace(
/]class)([^>])>/i,
,
content
)
return content
}
Consejos prácticos y pruebas
- Prueba primero en un tema hijo o entorno de staging.
- Verifica la numeración en distintas entradas: comienzos, entradas sin H3, entradas que combinen H2/H3 de forma irregular.
- Comprueba la visualización en móviles y ajusta el ancho reservado para los números.
- Prueba la copia/pegado y la lectura con un lector de pantalla si la accesibilidad es crítica.
- Si usas un plugin de Table of Contents, asegúrate de que la numeración CSS no confunda a su logica si éste ya genera números.
Ejemplo avanzado: numeración con estilo “1 — Título” y color personalizado
.entry-content {
counter-reset: h2counter
}
.entry-content h2 {
counter-increment: h2counter
counter-reset: h3counter
padding-left: 2.6em / deja espacio para el número decorado /
position: relative
}
.entry-content h2::before {
content: counter(h2counter)
position: absolute
left: 0
top: 0
height: 100%
width: 2.0em
display: flex
align-items: center
justify-content: center
background: #f0f4f8
color: #0a58ca
font-weight: 700
border-radius: 4px
margin-right: 0.6em
}
/ H3 más discreto /
.entry-content h3 {
counter-increment: h3counter
padding-left: 3.2em
}
.entry-content h3::before {
content: counter(h2counter) . counter(h3counter)
position: absolute
left: 0
top: 0
color: #6c757d
font-weight: 600
}
Resumen
Los CSS counters son una solución elegante y ligera para numerar automáticamente H2/H3 en WordPress sin tocar el contenido. Son ideales para presentaciones visuales y tablas de contenido que no requieren que los números estén en el DOM. Para casos donde necesitas que los números sean parte del texto (copiar/pegar, exportaciones, SEO específico), considera complementar con JavaScript o una modificación del HTML en servidor.
Implementación sugerida (rápida)
- Copia el CSS principal en Additional CSS de tu tema hijo.
- Revisa en varias entradas y en móvil.
- Si necesitas exclusiones, añade la clase no-counter a los encabezados que no quieras numerar.
- Si necesitas que la numeración sea parte del contenido copiable/indexable, valora una solución JS/PHP con pruebas previas.
Con esto tienes todo lo necesario para implementar una numeración profesional y configurable de H2 y H3 en WordPress con CSS counters.
Leave a Reply