Cómo Modificar el CSS del Backend de WordPress

El backend de WordPress, ese panel de administración que utilizás a diario, puede parecer estático y poco personalizable. Sin embargo, existen formas de ajustar su apariencia para adaptarlo mejor a tu flujo de trabajo o simplemente hacerlo visualmente más agradable. En este post te mostramos cómo modificar el CSS del backend de WordPress de manera sencilla y segura.

¿Por Qué Querer Modificar el CSS del Backend de WordPress?

Aunque no es una práctica común, personalizar el CSS del backend puede ofrecer algunos beneficios:

• Mejorar la legibilidad: Ajustar los colores o la tipografía para reducir la fatiga visual.
• Personalizar la marca: Si trabajás con varios clientes, un backend con tu propia marca (aunque sutil) puede ser un toque profesional.
• Optimizar el flujo de trabajo: Mover elementos o resaltar ciertas secciones que utilizás con frecuencia.
• Accesibilidad: Realizar ajustes para mejorar el contraste o el tamaño de la fuente para usuarios con necesidades específicas.

Métodos para Modificar el CSS del Backend de WordPress

Existen principalmente dos formas seguras y recomendadas para aplicar CSS personalizado al backend de WordPress: utilizando un plugin específico o a través de un archivo CSS personalizado cargado desde tu tema (preferiblemente un tema hijo).

Método 1: Utilizando un Plugin de CSS Personalizado para el Backend

Esta es la forma más sencilla y recomendada para la mayoría de los usuarios, ya que no requiere tocar archivos del tema directamente.

1. Instalá y activá un plugin de CSS personalizado para el backend. Algunos plugins populares incluyen:
   • Admin CSS: Un plugin simple y directo que te permite agregar CSS personalizado al backend.
   • WP Adminify: Un plugin más completo que ofrece muchas opciones de personalización del backend, incluyendo la posibilidad de agregar CSS personalizado.
   • White Label CMS: Aunque su enfoque principal es el «white labeling» (personalización de la marca), también suele incluir la opción de agregar CSS personalizado al backend.
2. Accedé a la configuración del plugin. Generalmente encontrarás una nueva opción en el menú de WordPress (por ejemplo, «Admin CSS» o dentro de la configuración general de WP Adminify/White Label CMS).
3. Escribí tu CSS personalizado. Dentro del editor proporcionado por el plugin, podés escribir tus reglas CSS. Utilizá las herramientas de desarrollador de tu navegador (clic derecho en un elemento del backend, luego «Inspeccionar» o «Inspeccionar elemento») para identificar los selectores CSS que necesitás modificar.
4. Guardá tus cambios. El plugin se encargará de aplicar el CSS personalizado al backend de WordPress.

Ejemplo Básico de CSS Personalizado para el Backend:

Supongamos que querés cambiar el color de fondo de la barra lateral de administración a un tono gris claro:

#adminmenu {
    background-color: #f0f0f0 !important;
}

Importante: Utilizá la especificidad de los selectores CSS con cuidado y, en algunos casos, podrías necesitar usar `!important` para sobrescribir los estilos predeterminados de WordPress.

Método 2: Creando un Archivo CSS Personalizado en tu Tema Hijo

Esta opción es un poco más técnica, pero mantiene tus personalizaciones separadas del tema principal, lo cual es una buena práctica.

1. Creá un tema hijo de tu tema actual. Si aún no tenés uno, es fundamental hacerlo para evitar perder tus modificaciones al actualizar el tema principal. Podés encontrar guías sobre cómo crear un tema hijo en wordpress.
2. Creá una carpeta llamada `admin-style` (o similar) dentro del directorio de tu tema hijo.
3. Dentro de la carpeta `admin-style`, creá un archivo CSS llamado `admin.css` (o como prefieras).
4. Escribí tu CSS personalizado para el backend dentro de este archivo `admin.css`. Utilizá las herramientas de desarrollador del navegador para identificar los selectores CSS.
5. En el archivo `functions.php` de tu tema hijo, agregá el siguiente código para cargar tu CSS personalizado en el backend:

   function mi_css_personalizado_backend() {
       wp_enqueue_style( 'mi-admin-style', get_stylesheet_directory_uri() . '/admin-style/admin.css', array(), '1.0.0' );
   }
   add_action( 'admin_enqueue_scripts', 'mi_css_personalizado_backend' );

   • «mi-admin-style»: Es un nombre único para tu hoja de estilos.
   • «get_stylesheet_directory_uri() . ‘/admin-style/admin.css’ «: Es la ruta a tu archivo CSS personalizado en el tema hijo.
   • «admin_enqueue_scripts»: Es el hook de WordPress que se utiliza para cargar scripts y estilos en el backend.
6. Guardá los cambios en `functions.php` y subí los archivos de tu tema hijo al servidor.

Ahora, el CSS que hayas escrito en `admin.css` se aplicará al backend de WordPress.

Precauciones al Modificar el CSS del Backend:

• Usá las herramientas de desarrollador: Inspeccioná los elementos para identificar los selectores CSS correctos.
• Sé específico: Evitá reglas CSS demasiado generales que puedan tener efectos no deseados.
• Probá a fondo: Después de realizar cualquier cambio, probá el backend en diferentes secciones para asegurarte de que todo funcione correctamente.
• Considerá la mantenibilidad: Si realizás cambios muy complejos, documentalos para futuras referencias.
• Evitá modificar los archivos core de WordPress: Nunca edites directamente los archivos CSS del backend de WordPress, ya que tus cambios se perderán con las actualizaciones.