🔐 Personaliza por Completo el Área de Administración de WordPress sin Plugins (Código Listo para Usar)

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.