Introducción

Este artículo explica, paso a paso y con todos los detalles técnicos, cómo implementar un modo lectura en WordPress que estreche el ancho del contenido para mejorar la legibilidad. Verás varias estrategias (solo CSS, toggle con JavaScript persistencia, integración en el tema con PHP) y ejemplos listos para pegar en tu tema o en un plugin sencillo. Todo pensado para ser accesible, responsivo y compatible con distintos temas.

Qué hace el modo lectura y por qué

• Estrechar el ancho para evitar líneas demasiado largas (mejor legibilidad: 60–75 caracteres por línea).
• Aumentar interlineado y ajustar tamaño de fuente para confort visual.
• Opcionalmente centrar el contenido, suavizar colores y reducir distracciones.
• Persistir la preferencia del usuario (localStorage o cookie) para que el modo permanezca activo entre visitas.

Estrategias disponibles

1. Solo CSS: anclar una clase en el DOM mediante el editor del tema o un bloque HTML y que el CSS haga el resto.
2. Toggle con JavaScript: botón que añade/quita una clase, y guarda la preferencia en localStorage.
3. Integración con WordPress: añadir el botón automáticamente desde functions.php (shortcode o hook) y encolar scripts y estilos correctamente.
4. Gutenberg / Bloques: crear un bloque o patrón que inserte el botón en plantillas. (explicación básica aquí para integrarlo manualmente).

1) CSS base — diseño del modo lectura

Este CSS define la clase .reading-mode que puedes aplicar al elemento contenedor principal (por ejemplo ltbodygt o .site). Usa unidades ch o em para controlar la longitud de línea de forma óptima.

/ CSS para modo lectura /
.reading-mode .entry-content,
.reading-mode .post-content,
.reading-mode .content-area {
  max-width: 65ch           / ~65 caracteres por línea /
  margin-left: auto
  margin-right: auto
  padding-left: 1.2rem
  padding-right: 1.2rem
  line-height: 1.6          / mayor interlineado /
  font-size: 1.05rem        / ligera subida de tamaño /
  letter-spacing: 0.01em
  transition: max-width 250ms ease, padding 250ms ease
}

/ Ajustes para elementos internos /
.reading-mode .entry-content img,
.reading-mode .entry-content table,
.reading-mode .entry-content pre {
  max-width: 100%
  margin-left: auto
  margin-right: auto
}

/ Opcional: atenuar barras laterales o fondo /
.reading-mode .sidebar,
.reading-mode .widget {
  opacity: 0.6
}

/ Preferencias de usuario: respetar reduce motion /
@media (prefers-reduced-motion: reduce) {
  .reading-mode .entry-content {
    transition: none
  }
}

/ Evitar romper layout en pantallas pequeñas /
@media (max-width: 780px) {
  .reading-mode .entry-content {
    max-width: 100%
    padding-left: 1rem
    padding-right: 1rem
  }
}

Notas sobre selectores

No todos los temas usan .entry-content. Reemplaza por el selector de tu tema (.post, .content, .site-main, .content-area, etc.). También puedes aplicar la clase al ltbodygt para abarcar múltiples selectores:

/ Ejemplo si la clase se aplica al body /
body.reading-mode .content,
body.reading-mode .site-main {
  max-width: 65ch
}

2) Toggle con JavaScript persistencia

Este JavaScript añade un botón en la página (si lo insertas en la plantilla) o reacciona a un botón existente. Añade/quita la clase reading-mode al ltbodygt y guarda la preferencia en localStorage.

/ Toggle modo lectura y persistencia en localStorage /
(function(){
  var key = wp_reading_mode
  var body = document.body

  function setMode(active){
    if(active){
      body.classList.add(reading-mode)
    } else {
      body.classList.remove(reading-mode)
    }
    try {
      localStorage.setItem(key, active ? 1 : 0)
    } catch(e){}
  }

  / Inicializa según localStorage /
  try {
    var stored = localStorage.getItem(key)
    if(stored === 1){
      setMode(true)
    }
  } catch(e){}

  / Delegación: botón con id #reading-toggle o data attribute /
  document.addEventListener(click, function(e){
    var btn = e.target.closest  e.target.closest([data-reading-toggle])
    if(!btn) return
    e.preventDefault()
    var active = body.classList.contains(reading-mode)
    setMode(!active)

    / Accesibilidad: actualizar estado aria-pressed /
    if(btn.hasAttribute(aria-pressed)){
      btn.setAttribute(aria-pressed, (!active).toString())
    }
  }, false)
})()

Botón HTML sugerido

Inserta este fragmento donde quieras (header, toolbar del post, o dentro de single.php). Si no puedes editar plantillas, crea un shortcode en functions.php — ver sección PHP.

Modo lectura

3) Integración en WordPress (functions.php)

Ejemplo de cómo añadir el botón automáticamente al final del post y encolar el script y el CSS en tu tema child o plugin. Esto evita tocar plantillas y sigue buenas prácticas de WP.

Modo lectura
}
add_shortcode(reading_mode_button, my_reading_mode_button_shortcode)

// 3) Alternativa: añadir botón automáticamente al final del contenido
function my_append_reading_button(content) {
    if(is_singular(post)  in_the_loop()  is_main_query()) {
        btn = 
Modo lectura
        return content . btn
    }
    return content
}
add_filter(the_content, my_append_reading_button)
?>

4) Ejemplo completo: archivos y dónde pegarlos

Sigue estos pasos concretos:

1. Crear archivo reading-mode.css con el CSS del apartado 1 y subirlo al directorio del tema hijo.
2. Crear archivo reading-mode.js con el JS del apartado 2 y subirlo al mismo directorio.
3. Agregar las funciones PHP del apartado 3 en functions.php del tema hijo (o en un plugin personalizado).
4. Probar en varios navegadores y dispositivos, y ajustar selectores según tu tema.

5) Accesibilidad y buenas prácticas

• aria-pressed en el botón para que lectores de pantalla sepan el estado.
• Permitir cambio por teclado (el botón es un elemento focusable por defecto).
• Respetar prefers-reduced-motion para desactivar animaciones si el usuario lo pide.
• Comprobar contraste si se cambia fondo o color del texto.
• Persistencia: usar localStorage es suficiente, pero si tu sitio requiere sincronización entre dispositivos, usa cookies con servidor o preferencia de usuario almacenada en la base de datos (requiere login y mayor complejidad).

6) Ajustes y variantes útiles

• Max-width en em: usar max-width: 42em en lugar de ch si prefieres dependencias del tamaño de fuente del usuario.
• Modo oscuro: combina lectura y modo oscuro para una mejor experiencia nocturna.
• Activación automática: detectar ancho de pantalla para activar solo en pantallas >= 900px.
• Transiciones suaves: añadir transición al contenedor para evitar cambios bruscos.

/ Variante: activar solo en pantallas grandes /
@media (min-width: 900px) {
  .reading-mode .entry-content {
    max-width: 65ch
  }
}

7) Solución de problemas comunes

1. El CSS no tiene efecto: revisa que el selector coincida con tu tema. Usa las herramientas de desarrollador para ver el DOM y el selector correcto.
2. La imagen o tabla se sale del contenedor: añade reglas max-width: 100% y object-fit o overflow-auto para pre/code.
3. El botón no funciona: comprueba la consola para errores de JS y que reading-mode.js esté encolado correctamente.
4. Preferencia no se guarda: algunos navegadores bloquean localStorage en contextos específicos considera cookie como fallback.

8) Ejemplo rápido de fallback a cookie en PHP (opcional)

Si necesitas persistir en servidor para usuarios logueados, puedes leer/escribir una meta user_meta o una opción. Aquí tienes una idea sencilla para guardar la preferencia en user_meta cuando el usuario está logueado (requiere AJAX/endpoint adicional para funcionar al 100%).

Resumen final (práctico)

Implementa primero el CSS de modo lectura y pruébalo aplicando la clase manualmente. Luego añade el botón JavaScript para alternar y guardar en localStorage. Si quieres integración más limpia en WordPress, añade los hooks PHP para encolar los assets y/o un shortcode que te permita insertar el botón sin tocar plantillas. Ajusta selectores según tu tema, respeta la accesibilidad y comprueba el comportamiento en móviles y pantallas grandes.

Recuerda

Usa selectores específicos de tu tema y prueba en varios navegadores. La implementación combinada (CSS JS PHP) ofrece la experiencia más pulida y persistente para tus visitantes.