Cuando entrego un proyecto web a un cliente, siempre me gusta preguntarle si también quiere que el área de administración refleje la identidad de su marca, con los colores corporativos y un diseño más cuidado. Si es así, suelo añadir este código que, con solo cambiar unos cuantos valores, deja el panel de WordPress totalmente personalizado y alineado con la imagen del proyecto.
El panel de administración de WordPress también es una parte importante de la experiencia de usuario, y un cliente se siente más cómodo y profesionalizado si la zona de gestión también refleja la imagen de su negocio.
Hoy te traigo un código estándar, listo para copiar y pegar, que te permitirá personalizar completamente el back-end de WordPress sin usar ningún plugin. Solo tendrás que modificar algunos colores y pequeños detalles para dejarlo totalmente a tu gusto.
¿Qué hace este código?
- Cambia el fondo, tipografía y colores principales del admin por un diseño más limpio y profesional.
- Elimina los elementos de branding de WordPress como el logo del admin bar o los mensajes de «Gracias por crear con WordPress».
- Personaliza la barra superior y el menú lateral para que se integren con tu propia identidad visual.
- Aplica estilos globales a botones, inputs, tablas, notices, checkboxes y radios, incluyendo los componentes de Gutenberg.
- Inserta tu propio logo en la parte superior del menú lateral (como si fuera un tema white-label).
Paleta de colores usada
Este código viene preparado con una combinación sencilla basada en:
- Blanco para el fondo general.
- Gris claro y medio para la barra superior y el menú lateral.
- Negro y gris oscuro para los textos e iconos.
Pero lo mejor es que puedes cambiar rápidamente la paleta para adaptarla al color corporativo de tu cliente o de tu proyecto. Solo tendrás que sustituir algunos valores en el CSS (por ejemplo, #13b0a0 o #111) por los colores de tu marca.
¿Qué puedes modificar fácilmente?
- Colores de fondo de la barra superior y del menú lateral.
- Color de los botones primarios y secundarios en todo el admin.
- El logo que aparece sobre el menú lateral.
- Puedes ajustar también bordes, radios y paddings a tu estilo.
Logo:
En este ejemplo ya he incluido una línea que carga un logo personalizado:
background: url("https://codigos.fransalas-proyectos.com/wp-content/uploads/2022/04/logo-dark.svg") no-repeat center center;
Solo tendrías que subir tu logo a la biblioteca de medios y reemplazar la URL.
¿Por qué hacerlo sin plugins?
Porque muchas veces un plugin que solo cambia colores o personaliza el admin añade archivos CSS y JS extra que cargan en cada pantalla de administración, lo que a la larga puede ralentizar ligeramente la experiencia.
Con este código, todo se carga en el propio <head> del admin de WordPress y es mucho más ligero.
El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS. También puedes crear tu propio plugin con unos simples pasos.
🔐 Este contenido es solo para suscriptores premium.
Estos códigos de la zona premium se mantienen regularmente. Si usas un código y no te funciona correctamente, puedes abrir un ticket de soporte explicando los detalles y lo vemos.
Deja tus dudas y sugerencias en los comentarios.