Si eres desarrollador o diseñador web que trabaja con WordPress, probablemente ya sabes lo importante que es ofrecer una experiencia visual agradable incluso en el área de administración. Aunque WordPress viene con una interfaz predeterminada, puedes personalizar el panel de administración de WordPress fácilmente mediante código PHP y CSS.
En este artículo te mostramos cómo hacerlo paso a paso, incluyendo la carga de fuentes personalizadas, cambios de colores, estilos mejorados y efectos visuales para mejorar la usabilidad del backend.
✅ ¿Por qué personalizar el dashboard de WordPress?
- Mejora la experiencia del usuario para editores y clientes.
- Refuerza la identidad visual de tu marca o proyecto.
- Hace más intuitiva la navegación en el panel de control.
- Puedes adaptar los estilos a las preferencias del cliente final.
🔧 Código explicado: Cómo implementarlo
El siguiente snippet de PHP se puede agregar al archivo functions.php de tu tema hijo o mediante un plugin de código personalizado (Code Snippets):
<?php
/**
* Personaliza el panel de administración de WordPress con estilos avanzados.
* - Fuente Archivo de Google Fonts.
* - Colores y bordes personalizados.
* - Efectos hover y estructura visual mejorada.
*/
function custom_admin_dashboard_styles() {
// Cargar la fuente Archivo de Google Fonts
wp_enqueue_style(
'archivo-google-font',
'https://fonts.googleapis.com/css2?family=Archivo&display=swap',
array(),
null
);
// CSS personalizado
$css = '
/* Fondo general y fuente */
#wpwrap { background-color: #ffffff !important; }
body, #adminmenu, #adminmenuback, #adminmenuwrap {
font-family: "Archivo", Verdana, sans-serif !important;
background: #eee url(https://harrop.pro/wp-content/uploads/2024/08/groovepaper.png) !important;
}
/* Menú lateral */
.wp-menu-name { color: #181818 !important; }
#adminmenu div.wp-menu-image:before { color: #666 !important; }
#adminmenu li.menu-top:hover,
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
background: #f5f5f5 !important;
}
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu {
background: #C6DDFB !important;
border-left: 4px solid #72aee6;
}
#adminmenu .wp-submenu { background-color: #f0f6fe !important; }
#adminmenu .wp-submenu > li > a { color: #181818 !important; }
#adminmenu .wp-submenu > li > a > .current { color: red !important; }
#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head,
#adminmenu .wp-menu-arrow,
#adminmenu .wp-menu-arrow div,
#adminmenu li.current a.menu-top,
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu {
background: #C6DDFB !important;
}
/* Barra superior (admin bar) */
#wpadminbar {
background: #ffffff !important;
border-bottom: 1px solid #ccc !important;
}
#wpadminbar .ab-item,
#wpadminbar > #wp-toolbar span.ab-label,
#wpadminbar > #wp-toolbar span.ab-icon:before,
.wp-admin #wpadminbar #wp-admin-bar-site-name > .ab-item:before {
color: #181818 !important;
}
#wpadminbar .ab-top-menu > li.hover > .ab-item,
#wpadminbar.nojq.quicklinks .ab-top-menu > .ab-item:focus,
#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item,
#wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus {
background: #C6DDFB !important;
}
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary,
#wpadminbar .quicklinks .menupop ul.ab-sub-secondary .ab-submenu,
#wpadminbar #wp-admin-bar-user-actions.ab-submenu,
#wpadminbar .quicklinks ul {
background: #f0f6fe !important;
}
#wpadminbar #wp-admin-bar-my-account { background: #ffffff !important; }
#wpadminbar .avatar {
border-radius: 4px !important;
border: 0px !important;
}
/* Iconos SVG (oscuros) */
#adminmenu div.wp-menu-image.svg,
#wpadminbar .svg {
filter: invert(0%) sepia(0%) saturate(3164%) hue-rotate(60deg) brightness(0%) contrast(81%) !important;
}
/* Personalización del logo en la barra superior */
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
background-image: url(./assets/weswitchedlogo.png) !important;
background-position: 0 0;
color: rgba(0, 0, 0, 0) !important;
}
/* Ajustes de pantalla (meta boxes) */
#screen-meta-links { margin: 14px 20px 0 0 !important; }
#screen-meta-links .show-settings {
border-radius: 4px !important;
border: 1px !important;
}
#screen-options-wrap,
#screen-meta {
border: 0px solid #c3c4c7 !important;
padding: 0px !important;
}
/* Bordes generales (compatibilidad con el snippet anterior) */
#adminmenuback { border-right: 1px solid #666 !important; }
#wpcontent { border-left: 1px solid #666 !important; border-top: 1px solid #666 !important; }
#adminmenu li.wp-menu-separator {
height: 10px !important;
border-bottom: 1px dashed #666 !important;
font-size: 11px !important;
margin: 0 !important;
}
.admin-color-fresh #adminmenu li.wp-menu-separator { background: #666 !important; }
.admin-color-midnight #adminmenu li.wp-menu-separator { background: #4a5258 !important; }
.admin-color-light #adminmenu li.wp-menu-separator { background: #c2c2c2 !important; }
.admin-color-blue #adminmenu li.wp-menu-separator { background: #3c85a0 !important; }
.admin-color-coffee #adminmenu li.wp-menu-separator { background: #83766d !important; }
.admin-color-ectoplasm #adminmenu li.wp-menu-separator { background: #715d8d !important; }
.admin-color-ocean #adminmenu li.wp-menu-separator { background: #8ca8af !important; }
.admin-color-sunrise #adminmenu li.wp-menu-separator { background: #a43d39 !important; }
/* Tablas */
.widefat { border-spacing: 0px 1px !important; }
.widefat th,
.widefat td {
border-bottom: 1px solid rgb(225, 225, 225) !important;
box-shadow: none !important;
}
.form-table td,
.form-table th { border-bottom: solid 1px rgb(200, 200, 200) !important; }
#the-list tr:hover,
#the-comment-list tr:hover { background-color: #666 !important; }
';
// Inyectar CSS en el admin
wp_add_inline_style( 'wp-admin', $css );
}
add_action( 'admin_enqueue_scripts', 'custom_admin_dashboard_styles' );Este código realiza varias acciones clave:
1. Carga de fuente desde Google Fonts
Se utiliza la fuente Archivo para modernizar la tipografía del panel de administración.
2. Fondo y estilo general
Se define un fondo con textura suave y se cambia el color del contenedor principal para darle un look limpio.
3. Menú lateral personalizado
- Se ajustan colores de texto y fondos al pasar el mouse o seleccionar menús.
- Se resaltan submenús activos con colores claros y bordes destacados.
- Se mejora la legibilidad de los elementos del menú.
4. Barra superior (Admin Bar)
- Se personaliza el color de los iconos y enlaces.
- Se añade un estilo visual a los submenús para mantener coherencia visual.
- Se reemplaza el logo de WordPress por uno personalizado.
5. Iconos SVG y compatibilidad
Se ajusta el color de los iconos SVG del menú lateral para que coincidan con el nuevo esquema de colores.
6. Estilo de tablas y meta boxes
- Se mejoran los bordes y sombras de las tablas estándar (
widefat). - Se ajusta la interacción al pasar el mouse sobre filas.
Si quieres la versión ocura te recoemiendo este artículo.
Cómo Personalizar el Panel de Administración de WordPress con CSS
