Introducción
Este tutorial detalla, paso a paso y con ejemplos listos para copiar, cómo personalizar el bloque Tabla de contenidos que añaden varios plugins de WordPress usando únicamente CSS. Cubriré cómo identificar selectores, aplicar estilos visuales, mejorar la accesibilidad, adaptar el bloque a móviles, y algunos trucos avanzados (numeración personalizada, iconos, comportamiento sticky, modo oscuro). Todo el código de ejemplo está preparado para pegar en el CSS del tema, en el editor de CSS adicional o en un archivo CSS del child theme.
Preparación: inspeccionar y localizar selectores
Antes de escribir CSS necesitas saber qué HTML genera tu plugin. Abre la página con la Tabla de contenidos y usa las herramientas del navegador (Inspeccionar elemento). Busca clases o ids que identifiquen el contenedor, el título y la lista. Aquí tienes una muestra típica que producen varios plugins (ejemplo ilustrativo):
Otros nombres comunes de selectores:
- #toc, .toc_container, .toc
- .ez-toc-container, .ez-toc-title, .ez-toc-list (Easy TOC)
- .toc_table_of_contents, .toc-title, .toc-list
- .wp-block-table-of-contents o .wp-block-toc (bloques de Gutenberg)
Buenas prácticas antes de tocar estilos
- Trabaja en un tema hijo o en el CSS adicional para no perder cambios con actualizaciones.
- Usa selectores lo más específicos posible para no interferir con otros elementos.
- Evita usar !important salvo cuando sea la única forma de sobrescribir reglas del plugin.
- Prueba en dispositivos móvil y en impresión (vista previa de impresión).
- Comprueba el contraste y los indicadores de foco para accesibilidad.
Ejemplos prácticos de personalización
1) Estilo base: colores, tipografía, espaciado y borde
Este bloque de CSS da una apariencia limpia y moderna al contenedor de la TOC.
/ Selector genérico: ajusta según tu plugin (#toc, .toc_container, .ez-toc-container, etc.) /
#toc.toc_container,
.toc_container,
.ez-toc-container,
.wp-block-toc {
background: #ffffff
border: 1px solid rgba(30,30,30,0.08)
border-radius: 10px
padding: 18px
box-shadow: 0 6px 20px rgba(12,20,30,0.06)
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial
font-size: 15px
line-height: 1.5
color: #1f2937 / texto /
}
/ Título /
.toc_container .toc_title,
.ez-toc-title,
.wp-block-toc .wp-block-toc__title {
font-weight: 700
margin: 0 0 10px 0
color: #111827
font-size: 16px
}
2) Estilizar la lista, separadores y hover
Mejora la legibilidad y feedback visual al pasar el ratón o al navegar con teclado.
.toc_container .toc_list,
.ez-toc-list,
.wp-block-toc .wp-block-toc__list {
margin: 0
padding: 0 0 0 14px
list-style: none
}
/ Items /
.toc_container .toc_list .toc_item,
.toc_list li {
margin: 6px 0
}
/ Enlaces: color, transición y foco /
.toc_container a,
.ez-toc-list a,
.wp-block-toc a {
color: #2563eb
text-decoration: none
transition: color .12s ease, transform .12s ease
outline-offset: 3px
}
.toc_container a:hover,
.toc_container a:focus {
color: #1d4ed8
text-decoration: underline
}
3) Añadir icono o marcador antes de cada enlace (sin imágenes)
Usa pseudo-elementos para añadir un punto o icono SVG simple con CSS.
/ Usando contenido Unicode como marcador /
.toc_container .toc_list li a::before {
content: ●
display: inline-block
color: #9ca3af
font-size: 10px
margin-right: 8px
transform: translateY(-1px)
}
/ Alternativa: pequeño triángulo /
.toc_container .toc_list li a::before {
content: ▸
color: #60a5fa
margin-right: 8px
font-weight: 600
}
4) Numeración automática con counters (listas numeradas sin alterar HTML)
Ideal para una TOC que quieres numerada 1., 1.1, etc. Funciona mejor si la estructura está en listas anidadas.
/ Inicializa contador en el contenedor /
.toc_container .toc_list {
counter-reset: toc-item
}
/ Cada item incrementa y muestra el número /
.toc_container .toc_list > li {
counter-increment: toc-item
}
.toc_container .toc_list > li > a::before {
content: counter(toc-item) .
color: #374151
margin-right: 8px
font-weight: 600
}
/ Para subniveles: 1.1, 1.2 /
.toc_container .toc_list li li {
counter-increment: sub-item
}
.toc_container .toc_list li li a::before {
content: counter(toc-item) . counter(sub-item)
margin-right: 6px
color: #6b7280
}
5) Sticky (fijar la TOC al hacer scroll) y límite de altura con scroll interno
Conviene para páginas largas: el contenedor se queda visible y la lista se desplaza dentro del cuadro.
/ Contenedor sticky — requiere que el ancestro sea scrollable y suficiente espacio /
.sidebar .toc_container,
#toc {
position: sticky
top: 20px
}
/ Límite de altura y scroll interno /
.toc_container .toc_list {
max-height: 60vh
overflow: auto
padding-right: 6px / espacio para el scrollbar visual /
-webkit-overflow-scrolling: touch
}
6) Responsive: ocultar o colapsar la TOC en pantallas pequeñas
Con CSS puro no puedes añadir un botón toggle si el HTML no lo contiene, pero puedes ocultar la TOC en pantallas pequeñas y ofrecer un enlace ancla que la abra usando :target si el contenedor tiene un id.
/ Oculta la TOC en pantallas pequeñas /
@media (max-width: 880px) {
#toc,
.toc_container,
.ez-toc-container {
display: none / simple: oculta en móvil /
}
/ Alternativa: usar :target para mostrar si tienes un enlace hacia #toc /
#toc {
display: none
}
#toc:target {
display: block
position: fixed
inset: 10px
z-index: 9999
background: white
padding: 14px
overflow: auto
border-radius: 8px
box-shadow: 0 12px 40px rgba(0,0,0,0.25)
}
}
7) Modo oscuro (prefers-color-scheme)
Detecta el modo preferido del usuario para ajustar colores automáticamente.
@media (prefers-color-scheme: dark) {
.toc_container {
background: #0f1724
color: #e6eef8
border-color: rgba(255,255,255,0.04)
box-shadow: none
}
.toc_container a {
color: #93c5fd
}
.toc_container a:hover {
color: #bfdbfe
}
}
8) Estilos para impresión
En muchas ocasiones conviene ocultar la TOC al imprimir o mostrar una versión simple.
@media print {
.toc_container, #toc, .ez-toc-container {
display: none !important / O adaptar: mostrar solo texto sin sombras /
}
}
Trucos avanzados y limitaciones
- Mayor especificidad: Si el plugin aplica estilos en línea o con reglas muy específicas, añade selectores más concretos o usa !important como último recurso.
- Interactividad limitada: Con CSS solo no puedes añadir lógica compleja. Puedes mostrar/ocultar con :target (si hay id) o con variantes que dependen del HTML (checkbox hack) si el plugin incluye inputs. Si el plugin no añade esos elementos, no podrás crear un botón toggle funcional solo con CSS.
- Soporte de selectores modernos: :has( ) permite mucho dinamismo (ej. detectar si una lista está expandida), pero no todos los navegadores lo soportan. Úsalo con precaución.
- Accesibilidad: CSS puede mejorar foco y contraste, pero no puede añadir atributos ARIA. Favorece el foco visible y tamaños táctiles adecuados.
Consejos finales y checklist antes de publicar
- Revisa en varios navegadores y tamaños de pantalla.
- Controla el contraste entre el fondo y los enlaces para accesibilidad.
- No elimines indicadores de foco (outline) a menos que reemplaces con otro claro.
- Si modificas numeración o estructura visual, asegúrate de que los enlaces siguen funcionando (href intactos).
- Mantén los cambios organizados en un bloque de CSS con comentarios para futuras revisiones.
Fragmento final de ejemplo completo (lista compacta, fondo contrastado, indicadores de foco)
/ Ejemplo compacto final para pegar tal cual (ajusta selectores si es necesario) /
.toc_container {
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%)
border: 1px solid rgba(16,24,40,0.06)
border-radius: 12px
padding: 16px
font-size: 14px
color: #0f172a
}
.toc_container .toc_title { font-weight:700 margin-bottom:8px font-size:15px }
.toc_container .toc_list { list-style: none padding-left: 10px margin: 0 max-height: 45vh overflow:auto }
.toc_container .toc_list li { margin: 6px 0 }
.toc_container a {
color: #0b66ff
text-decoration: none
transition: color .12s ease, transform .08s ease
padding: 4px 6px
border-radius: 6px
display: inline-block
}
/ foco accesible /
.toc_container a:focus {
outline: 3px solid rgba(59,130,246,0.18)
outline-offset: 3px
}
/ marcador /
.toc_container a::before { content: ▹ margin-right:8px color:#93c5fd font-size:11px }
/ móvil: ocultar la TOC para no saturar la pantalla /
@media (max-width: 700px) {
.toc_container { display: none }
}
Aplica estos fragmentos adaptando los selectores a los que use tu plugin. Con paciencia en la inspección y algunos ajustes de especificidad conseguirás una Tabla de contenidos coherente con el diseño de tu web, totalmente sin tocar PHP ni JavaScript.
Leave a Reply