Tutorial WordPress: Cómo fijar la barra de administración solo para administradores con CSS

Introducción

En este artículo explico, paso a paso y con todo lujo de detalles, cómo fijar la barra de administración de WordPress (wp-adminbar) exclusivamente para usuarios administradores usando CSS y pequeñas ayudas en PHP cuando sea necesario. El objetivo es que la barra quede sticky (fija en la parte superior) solo para administradores y que el resto de visitantes no vean cambios ni desplazamientos inesperados en el diseño.

Qué hace falta y consideraciones previas

Acceso a los archivos del tema: functions.php de un child theme o la posibilidad de añadir un plugin de fragmentos de código (Code Snippets) para insertar PHP.
Conocer si el sitio muestra la barra de administración en el frontend: la barra solo aparece si el usuario está conectado y tiene la opción activada.
Compatibilidad con el tema: algunos temas usan cabeceras fijas propias hay que comprobar solapamientos y z-index.
Responsividad: la altura de la barra cambia entre pantallas grandes y móviles (aprox. 32px/46px), por eso hay que ajustar el espacio superior del contenido.

Enfoques posibles

Solo CSS (si ya existe una clase de rol en el body). Si tu tema o algún plugin añade una clase tipo role-administrator o similar al body, puedes limitar el CSS a esa clase.
Agregar una clase de rol con PHP CSS (recomendado). Añadir una clase al body para usuarios administradores y luego aplicar CSS que fije la barra y ajuste el desplazamiento del contenido.
Encolar un CSS solo para administradores con PHP. Detectar current_user_can(administrator) y encolar (o imprimir) un bloque de estilo en el head solo para administradores.

1) Añadir una clase al body para administradores (PHP)

Esta técnica garantiza que solo los administradores vean el comportamiento. Añade esto en functions.php de tu child theme o en un plugin de snippets:

lt?php
// Añadir clase role-administrator al body cuando el usuario sea administrador
add_filter(body_class,mi_clase_role_administrator)
function mi_clase_role_administrator(classes){
    if ( is_user_logged_in()  current_user_can(administrator) ) {
        classes[] = role-administrator
    }
    return classes
}
?gt

2) CSS para fijar la barra solo para administradores

Una vez añadida la clase, el siguiente CSS fija la barra y evita que el contenido quede oculto por ella. Pégalo en tu hoja de estilos del tema (style.css del child theme) o en el personalizador → CSS adicional.

/ Fijar la barra solo para administradores cuando la barra está visible /
.role-administrator.admin-bar #wpadminbar {
    position: fixed
    top: 0
    left: 0
    right: 0
    z-index: 99999 / ajustar si hay cabeceras con z-index alto /
    width: 100%
}

/ Añadir espacio al contenido para que no quede oculto por la barra (especificar para la altura típica) /
.role-administrator.admin-bar html {
    margin-top: 32px / altura desktop por defecto /
}

/ Ajustes para dispositivos móviles (barra más alta) /
@media screen and (max-width: 782px) {
    .role-administrator.admin-bar html {
        margin-top: 46px / altura móvil típica /
    }
}

/ Si tu tema usa un header fijo con .site-header, puedes en lugar de afectar html
   ajustar directamente el header para no solaparse con la barra /
.role-administrator.admin-bar .site-header {
    position: relative
    z-index: 99998 / menos que #wpadminbar para que la barra quede encima /
}

Notas sobre el CSS

La clase admin-bar la añade WordPress automáticamente al element html o body cuando la barra está visible. Combinamos ambas para mayor seguridad: .role-administrator.admin-bar.
El valor de margin-top puede necesitar ajustes según el tema no todos los temas responden igual, prueba incrementando si ves solapamientos.
Si tienes un header ya fijo, puede ser preferible desplazar ese header en lugar de todo el html para evitar saltos bruscos.

3) Encolar el CSS solo para administradores (alternativa: PHP CSS inline)

Si prefieres no tocar el CSS del tema, puedes imprimir estilos inline solo cuando el usuario sea administrador. Ejemplo para poner en functions.php:

lt?php
add_action(wp_head,mi_adminbar_css_inline)
function mi_adminbar_css_inline(){
    if ( is_user_logged_in()  current_user_can(administrator)  is_admin_bar_showing() ) {
        echo ltstylegt
        echo .admin-bar #wpadminbar{ position:fixed top:0 left:0 right:0 z-index:99999 width:100% }
        echo html.admin-bar{ margin-top:32px }
        echo @media screen and (max-width:782px){ html.admin-bar{ margin-top:46px } }
        echo lt/stylegt
    }
}
?gt

4) Consideraciones prácticas y resolución de problemas

¿No funciona?: comprueba que la clase de rol se está añadiendo (ver el código fuente de la página y busca role-administrator). Si usas la alternativa inline, verifica que el bloque ltstylegt aparece en el ltheadgt.
Solapamiento con cabeceras del tema: ajusta el margin-top o añade reglas específicas para el selector del header (.site-header, .header-wrapper, etc.).
Plugins de caché: limpia la caché después de cambiar CSS o PHP.
Roles personalizados: si quieres aplicar esto a otros roles, cambia la condición PHP o añade clases para cada rol. Ejemplo: current_user_can(editor) o current_user_can(manage_options).
Multisite / capacidades: en algunos entornos se prefieren capacidades en lugar de nombres de rol. Para administradores de red use current_user_can(manage_network) o current_user_can(manage_network_plugins) según el caso.

Tabla rápida: alturas típicas de la barra de administración

Dispositivo	Altura aproximada
Escritorio	32px
Móvil / tablets	46px

Resumen: pasos recomendados

Añade la clase de rol al body vía filter en functions.php (ejemplo más arriba).
Aplica el CSS que fija #wpadminbar y añade margen superior para el contenido solo a .role-administrator.admin-bar.
Prueba en escritorio y móvil ajusta margin-top y z-index según el tema.
Limpia caché y verifica en una ventana privada para evitar efectos de sesión.

Ejemplo final combinado (resumen)

Coloca el fragmento PHP para añadir la clase en functions.php y el CSS en style.css (child theme) tal como se muestra en los ejemplos anteriores. Con eso lograrás que la barra quede fija únicamente para administradores, sin afectar al resto de usuarios.

SushiHost