Tutorial WordPress: Estilizar la navegación de comentarios paginados con CSS

Introducción

En sitios WordPress con muchos comentarios suele activarse la paginación de comentarios para mejorar la carga y la usabilidad. La salida HTML predeterminada de WordPress para la navegación paginada de comentarios es funcional, pero casi nunca encaja a la perfección con el diseño de un tema. Este artículo ofrece una guía completa y práctica para estilizar la navegación de comentarios paginados con CSS: desde la estructura HTML que genera WordPress, hasta patrones accesibles, responsive, soporte RTL y un ejemplo completo listo para usar.

Estructura HTML que genera WordPress

WordPress suele renderizar la navegación de comentarios con funciones como paginate_comments_links() o the_comments_navigation(). Una estructura típica generada por the_comments_navigation() es algo así:


  Comment navigation
  ← Older Comments
  Newer Comments →

Cuando se usa paginate_comments_links(), el HTML será similar al de paginación numerada (con clases como page-numbers). Un ejemplo típico:


  larr Older
  1
  2
  3
  Next rarr

Objetivos al estilizar

Claridad visual: botones prev/next o números claramente legibles.
Accesibilidad: focus visible, etiquetas para lectores de pantalla y contraste suficiente.
Consistencia con el tema: variables para colores y tamaños reutilizables.
Responsive: buen comportamiento en móviles (espacio reducido).
Soporte RTL y modo oscuro: considerar direccionalidad y preferencias del usuario.

Pequeños estilos base — ejemplo mínimo

Estos estilos son un punto de partida para mejorar rápidamente la apariencia y usabilidad.

/ Contenedor general /
.comment-navigation,
.comment-pagination {
  display: flex
  gap: 0.5rem
  align-items: center
  justify-content: center
  margin: 2rem 0
  flex-wrap: wrap / permite saltos en pantallas pequeñas /
}

/ Enlaces de paginación (prev, next, números) /
.comment-pagination .page-numbers,
.comment-navigation .nav-previous,
.comment-navigation .nav-next {
  display: inline-flex
  align-items: center
  gap: 0.5rem
  padding: 0.45rem 0.8rem
  background: #f5f7fa
  color: #1a1a1a
  text-decoration: none
  border-radius: 6px
  border: 1px solid rgba(20,20,20,0.06)
  font-size: 0.95rem
}

/ Estado actual (número de página activa) /
.comment-pagination .page-numbers.current {
  background: #1e73be
  color: #fff
  font-weight: 600
  border-color: rgba(0,0,0,0.05)
}

/ Hover y focus (mejor interacción para teclado) /
.comment-pagination .page-numbers:hover,
.comment-navigation .nav-previous:hover,
.comment-navigation .nav-next:hover,
.comment-pagination .page-numbers:focus,
.comment-navigation .nav-previous:focus,
.comment-navigation .nav-next:focus {
  background: #e6f0fb
  outline: none
  transform: translateY(-1px)
  box-shadow: 0 6px 18px rgba(30,115,190,0.08)
  transition: transform 120ms ease, box-shadow 120ms ease
}

/ Enfoque visible (preferible a outline por defecto) /
.comment-pagination .page-numbers:focus-visible,
.comment-navigation .nav-previous:focus-visible,
.comment-navigation .nav-next:focus-visible {
  box-shadow: 0 0 0 4px rgba(30,115,190,0.12)
}

Iconos y flechas sin imágenes

Para evitar depender de imágenes o icon fonts, usamos pseudo-elementos y contenido Unicode o SVG en background. Así mantenemos buena escalabilidad y control con CSS.

/ Flechas usando pseudo-elementos /
.comment-navigation .nav-previous::before,
.comment-navigation .nav-next::after {
  display: inline-block
  font-size: 1.05em
  color: inherit
}

/ Flecha izquierda antes del texto /
.comment-navigation .nav-previous::before {
  content: ←
  margin-right: 0.45rem
}

/ Flecha derecha después del texto /
.comment-navigation .nav-next::after {
  content: →
  margin-left: 0.45rem
}

/ Si prefieres una versión más fina con SVG inline (ejemplo como background) /
.comment-pagination .page-numbers.prev {
  background-image: url(data:image/svg xmlutf8,)
  background-repeat: no-repeat
  background-position: left 10px center
  padding-left: 2rem
}

Soporte para lectores de pantalla

WordPress incluye la clase .screen-reader-text, pero por si acaso conviene disponer de una versión CSS que oculte visualmente texto accesible. Este fragmento también asegura que el texto siga disponible para tecnologías de asistencia.

.screen-reader-text {
  position: absolute !important
  width: 1px !important
  height: 1px !important
  padding: 0 !important
  margin: -1px !important
  overflow: hidden !important
  clip: rect(0, 0, 0, 0) !important
  white-space: nowrap !important
  border: 0 !important
}

Accesibilidad: etiquetas ARIA y texto adicional

Si personalizas la salida, añade atributos ARIA y textos descriptivos. Por ejemplo, para prev/next puedes envolver el icono visual y dejar un span con texto para lectores de pantalla (o usar aria-label en el enlace). Ejemplo de marcado en PHP a continuación.

Responsive: comportamiento en móviles

En pantallas estrechas conviene que los elementos no queden demasiado pequeños ni abarrotados. Aquí un ejemplo con media queries para apilar o reducir el espaciado.

@media (max-width: 420px) {
  .comment-navigation,
  .comment-pagination {
    gap: 0.35rem
    padding: 0 0.25rem
  }

  .comment-navigation .nav-previous,
  .comment-navigation .nav-next,
  .comment-pagination .page-numbers {
    padding: 0.35rem 0.6rem
    font-size: 0.9rem
    border-radius: 8px
  }

  / Si quieres apilar prev/next en móviles /
  .comment-navigation {
    flex-direction: column
    align-items: stretch
  }

  .comment-navigation .nav-previous,
  .comment-navigation .nav-next {
    width: 100%
    justify-content: center
  }
}

Reducir movimiento y animaciones respetando preferencias

Considera la preferencia reduce-motion para usuarios que lo soliciten:

@media (prefers-reduced-motion: reduce) {
  .comment-pagination .page-numbers,
  .comment-navigation .nav-previous,
  .comment-navigation .nav-next {
    transition: none
    transform: none
  }
}

Soporte RTL (right-to-left)

Para temas con idiomas RTL, usa propiedades lógicas (margin-inline-start/end) o añade reglas específicas cuando el elemento padre tenga dir=rtl. Con esto invertimos flechas o ajustes de padding si es necesario.

/ Propiedades lógicas para espaciar iconos /
.comment-pagination .page-numbers {
  padding-inline: 0.8rem
}

/ Invertir flechas en RTL /
[dir=rtl] .comment-navigation .nav-previous::before {
  content: → / invertir /
}
[dir=rtl] .comment-navigation .nav-next::after {
  content: ←
}

/ O usar transform para iconos SVG /
[dir=rtl] .comment-pagination .page-numbers.prev {
  transform: scaleX(-1)
}

Colores variables y modo oscuro

Utiliza variables CSS para facilitar la personalización del tema y soportar modo oscuro con prefers-color-scheme:

:root{
  --comment-nav-bg: #f5f7fa
  --comment-nav-color: #1a1a1a
  --comment-nav-accent: #1e73be
}

@media (prefers-color-scheme: dark){
  :root{
    --comment-nav-bg: #22262a
    --comment-nav-color: #eeeef0
    --comment-nav-accent: #2b9af3
  }
}

.comment-pagination .page-numbers,
.comment-navigation .nav-previous,
.comment-navigation .nav-next {
  background: var(--comment-nav-bg)
  color: var(--comment-nav-color)
}

.comment-pagination .page-numbers.current {
  background: var(--comment-nav-accent)
  color: #fff
}

Ejemplo completo de CSS combinando todo

Este bloque condensa los patrones vistos y puede pegarse tal cual en el CSS del tema (o en un archivo específico para la paginación de comentarios).

/ Contenedor /
.comment-navigation,
.comment-pagination {
  display: flex
  gap: 0.5rem
  align-items: center
  justify-content: center
  margin: 2rem 0
  flex-wrap: wrap
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial
  font-size: 0.95rem
}

/ Variables por defecto /
:root{
  --cn-bg: #f5f7fa
  --cn-color: #1a1a1a
  --cn-accent: #1e73be
  --cn-radius: 8px
}

/ Elementos interactivos /
.comment-pagination .page-numbers,
.comment-navigation .nav-previous,
.comment-navigation .nav-next {
  display: inline-flex
  align-items: center
  gap: 0.45rem
  padding: 0.5rem 0.85rem
  background: var(--cn-bg)
  color: var(--cn-color)
  text-decoration: none
  border-radius: var(--cn-radius)
  border: 1px solid rgba(0,0,0,0.06)
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease
}

/ Current /
.comment-pagination .page-numbers.current{
  background: var(--cn-accent)
  color: #fff
  font-weight: 600
}

/ Hover / Focus /
.comment-pagination .page-numbers:hover,
.comment-navigation .nav-previous:hover,
.comment-navigation .nav-next:hover,
.comment-pagination .page-numbers:focus-visible,
.comment-navigation .nav-previous:focus-visible,
.comment-navigation .nav-next:focus-visible {
  transform: translateY(-1px)
  box-shadow: 0 8px 22px rgba(30,115,190,0.08)
}

/ Pseudo flechas /
.comment-navigation .nav-previous::before { content: ← margin-right: 0.4rem }
.comment-navigation .nav-next::after { content: → margin-left: 0.4rem }

/ Responsive /
@media (max-width: 420px) {
  .comment-navigation { flex-direction: column align-items: stretch }
  .comment-navigation .nav-previous,
  .comment-navigation .nav-next {
    width: 100% justify-content: center
  }
}

/ Reduce motion /
@media (prefers-reduced-motion: reduce) {
  .comment-pagination .page-numbers,
  .comment-navigation .nav-previous,
  .comment-navigation .nav-next {
    transition: none
    transform: none
    box-shadow: none
  }
}

/ Screen reader helper /
.screen-reader-text {
  position: absolute !important
  width: 1px !important
  height: 1px !important
  padding: 0 !important
  margin: -1px !important
  overflow: hidden !important
  clip: rect(0, 0, 0, 0) !important
  white-space: nowrap !important
  border: 0 !important
}

/ Dark mode variables (opcional) /
@media (prefers-color-scheme: dark){
  :root{
    --cn-bg: #242629
    --cn-color: #e6eefc
    --cn-accent: #2485ff
  }
}

Ejemplo PHP breve: personalizar paginate_comments_links()

Si necesitas generar enlaces numerados con clases específicas, este pequeño fragmento muestra cómo añadir wrappers y clases coherentes con los selectores CSS anteriores.

 false,
  prev_text => larr Older,
  next_text => Newer rarr,
  type => array, // devuelve un array para poder envolver con tus clases
)

pages = paginate_comments_links( pagination_args )

if ( ! empty( pages ) ) {
  echo ltdiv class=comment-paginationgt
  foreach ( pages as link ) {
    // Añadir clases adicionales si es necesario
    // WordPress ya devuelve elementos ltagt o ltspangt con clase page-numbers/current
    echo link
  }
  echo lt/divgt
}
?>

Consejos finales y buenas prácticas

Prueba el contraste: Usa herramientas como la extensión de accesibilidad o Lighthouse para comprobar contraste y accesibilidad.
Comprueba con teclado: Navega por la paginación usando Tab y Enter, asegurando focus visible.
Adapta a tu sistema de diseño: Extrae colores y radios de borde a variables globales para consistencia.
Probar en RTL y modo oscuro: No asumas que el layout LTR siempre será suficiente algunos usuarios usan idiomas RTL y dispositivos con modo oscuro.
Evita dependencias innecesarias: Prefiere pseudo-elementos, SVG inline o datos URI para iconos ligeros en lugar de librerías pesadas.

Resumen

Con una combinación de selectores claros, variables CSS, buenas prácticas de accesibilidad y pequeñas adaptaciones responsive, la navegación de comentarios paginados puede integrarse visualmente con cualquier tema. El ejemplo completo proporcionado es un punto de partida: ajústalo a tus tokens de diseño, colores y tipografías del tema para obtener un resultado coherente y accesible.

SushiHost