Tutorial WordPress: Aplicar CSS solo a usuarios logueados con clases del body

Introducción

Este tutorial explica, con todo lujo de detalles, cómo aplicar CSS únicamente a usuarios logueados en WordPress aprovechando las clases que WordPress añade al elemento body. Verás métodos simples y avanzados, ejemplos prácticos (CSS y PHP) y advertencias sobre caché y seguridad para que la solución funcione de manera fiable en un entorno real.

Cómo funciona (resumen técnico)

WordPress añade automáticamente la clase logged-in al body cuando un usuario ha iniciado sesión. Esa clase permite prefixar selectores CSS para que las reglas solo afecten a usuarios logueados. Además, es posible añadir clases personalizadas al body (p. ej. por rol) usando el filtro body_class, y también condicionar la carga de hojas de estilo desde PHP con is_user_logged_in().

Comprobar las clases del body

Abre una página de tu web estando logueado.
Inspecciona el elemento body con las herramientas del navegador (Inspector) y revisa la lista de clases verás logged-in entre ellas.
Si añades clases mediante el filtro body_class, aparecerán también ahí.

Método 1 — CSS básico: usar .logged-in

La forma más sencilla es prefijar tus selectores con .logged-in. Así, las reglas solo se aplican cuando el body contiene esa clase.

Ejemplo práctico (pon este CSS en el style.css de tu tema hijo o en Apariencia → Personalizar → CSS adicional):

/ Solo para usuarios logueados /
.logged-in .solo-logueados {
  background: #f5f9ff
  border-left: 4px solid #2b9cff
  padding: 12px
}

/ Ocultar un bloque para usuarios logueados /
.logged-in .promo-para-visitantes {
  display: none
}

Método 2 — Añadir clases por rol al body (PHP)

Si necesitas reglas CSS específicas por rol (por ejemplo, administrador vs suscriptor), añade clases del tipo role-rolname al body mediante el filtro body_class. Usa este código en functions.php del tema hijo o en un plugin específico del sitio.

roles )  is_array( user->roles ) ) {
            foreach ( user->roles as role ) {
                classes[] = role- . sanitize_html_class( role )
            }
        }
    } else {
        classes[] = not-logged-in
    }
    return classes
}
?>

Ahora puedes usar reglas como:

/ Solo para administradores /
.logged-in .role-administrator .panel-admin {
  display: block
}

/ Solo para suscriptores /
.logged-in .role-subscriber .ofertas-usuario {
  background: #fffbe6
}

Método 3 — Añadir explícitamente la clase not-logged-in

WordPress no añade por defecto una clase para usuarios no logueados si la necesitas para escribir reglas específicas, agrégala con el filtro body_class (ejemplo anterior ya lo incluye añadiendo not-logged-in para visitantes).

Dónde colocar el CSS

style.css del tema hijo (recomendado para cambios permanentes).
Apariencia → Personalizar → CSS adicional (rápido y seguro si no usas tema hijo).
Encolar una hoja de estilo desde functions.php si necesitas cargarla condicionalmente.

Encolar CSS solo para usuarios logueados (opción alternativa)

En lugar de depender únicamente de la clase del body, puedes encolar un archivo CSS únicamente cuando el usuario esté logueado. Esto evita enviar reglas innecesarias a visitantes y reduce efectos secundarios con algunos sistemas de caché.

Ejemplos prácticos y combinaciones útiles

Algunos ejemplos de reglas útiles prefixadas por .logged-in o por clases de rol:

/ Quitar sombra o cambiar layout solo para usuarios logueados /
.logged-in .hero {
  box-shadow: none
}

/ Mostrar un aviso exclusivo para administradores /
.logged-in .role-administrator .mensaje-admin {
  display: block
  color: #111
}

/ Cambiar enlace de perfil solo para suscriptores /
.logged-in .role-subscriber .link-perfil {
  color: #008080
}

Tabla resumen: selectores y cuándo usarlos

Selector	Uso
.logged-in .selector	Aplicar estilo a cualquier usuario logueado.
.logged-in .role-administrator .selector	Aplicar estilo solo a administradores (requiere añadir clases por rol).
.not-logged-in .selector	Aplicar estilo solo a visitantes no logueados (si añades esta clase).

Consideraciones importantes y buenas prácticas

Seguridad: No uses CSS para proteger contenido sensible. Si algo debe estar restringido, controla el acceso en PHP (p. ej. plantilla o hooks) y no solo con display:none.
Caché: Muchas soluciones de caché no diferencian páginas por clase body. Los caches habituales (varnish, CDNs, plugins de caché) suelen evitar cachear páginas para usuarios logueados, por lo que tu CSS puede comportarse de forma inesperada si el cache está mal configurado. La práctica común es: no cachear contenido personalizado para usuarios logueados o configurar reglas que varién por cookie de login.
Especificidad: Si tus reglas no se aplican, puede ser por la especificidad de otras reglas. Usa selectores más concretos o añade !important con moderación.
Child theme: Haz los cambios en un tema hijo para evitar perder modificaciones en actualizaciones del tema.
Sanitización: Al añadir clases desde PHP, escapa/sanitiza los valores (p. ej. sanitize_html_class o sanitize_text_field) para evitar introducir clases inválidas o inseguras.
Depuración: Usa la herramienta Inspeccionar del navegador y view-source para comprobar que las clases están presentes en el HTML que llega al navegador.

Solución de problemas comunes

No veo la clase logged-in: revisa que realmente estás logueado y que no haya un proxy/caché sirviendo la versión para visitante.
Mi CSS no se aplica: comprueba la especificidad y el orden de carga del CSS encola o coloca la regla en un archivo que se cargue después si es necesario.
Reglas aplicadas a todos: asegúrate de prefijar siempre con .logged-in o con la clase de rol que hayas añadido.

Conclusión

Aplicar CSS solo a usuarios logueados en WordPress es sencillo y flexible usando las clases que WordPress coloca en el body. Para necesidades más avanzadas, añade clases por rol con el filtro body_class y/o encola hojas de estilo de forma condicional con is_user_logged_in(). Mantén en cuenta las implicaciones de caché y recuerda que el control de acceso debe hacerse en el servidor, no solo con CSS.

SushiHost