Si trabajas con WordPress, sabes lo importante que es tener un entorno de trabajo cómodo y que se adapte a tus necesidades. Aunque WordPress ofrece una gran funcionalidad, el diseño del panel de administración puede ser un poco monótono. Afortunadamente, puedes personalizar completamente el aspecto de tu backend utilizando CSS.
El código que nos has proporcionado es un excelente punto de partida para lograrlo. Vamos a desglosarlo y a explicar cómo puedes implementarlo y qué aspectos de tu panel de administración puedes modificar.
¿Cómo funciona este código?
El código utiliza una función de WordPress llamada custom_admin_css() que se engancha al gancho admin_head. Este gancho permite inyectar código directamente en la sección <head> de las páginas del panel de administración de WordPress. Dentro de esta función, se utiliza una etiqueta <style> para contener todo el código CSS que aplicará los cambios de diseño.
function custom_admin_css() {
echo '<style type="text/css">
/* Aquí va todo tu CSS */
font-family: Archivo;
}
#wpadminbar .ab-item {
font-family: "Archivo black";
text-transform: uppercase;
}
.wp-menu-name {
font-family: "Archivo black", Verdana;
font-size: 11px;
text-transform: uppercase;
}
.acf_custom {
background: #CCC;
}
.acf_custom1 {
background: url(https://mollywhopper.org/cdn/bg/linen.png );
border-top:1px solid #CCC;
border-bottom: 1px solid #CCC;
}
#adminmenu, #adminmenuwrap, #adminmenuback {
background: #FFF;
}
.wp-menu-name{
color: #181818 !important;
}
#adminmenu div.wp-menu-image:before{
color: #000 !important;
}
#adminmenu li.menu-top:hover,
#adminmenu li.opensub>a.menu-top,
#adminmenu li>a.menu-top:focus {
background: #C6DDFB !important;
}
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu{
background: #C6DDFB !important;
border-left: 4px solid #72aee6;
border-bottom: 1px solid #CCC;
}
#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-submenu.opensub{
background-color: #f0f6fe !important;
}
#adminmenu .wp-menu-name:hover{
background: #C6DDFB !important;
}
#adminmenu .wp-menu-name:after,
#adminmenu .wp-menu-name:before{
background: #C6DDFB !important;
}
/*Top Admin Bar*/
#wpadminbar{
background:#FFF !important;
}
#wpadminbar .ab-item{
color: #181818 !important;
}
#wpadminbar>#wp-toolbar span.ab-label{
color: #181818 !important;
}
#wpadminbar>#wp-toolbar span.ab-icon:before{
color: #181818 !important;
}
.wp-admin #wpadminbar #wp-admin-bar-site-name>.ab-item:before {
color: #181818 !important;
}
#adminmenu div.wp-menu-image.svg{
filter: invert(0%) sepia(0%) saturate(3164%) hue-rotate(60deg) brightness(0%) contrast(81%);
}
#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.0) !important;
}
#wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
background-position: 0 0;
}
#screen-meta-links{
margin: 14px 20px 0 0 !important;
}
#screen-meta-links .show-settings{
border-radius:4px !important;
border: 1px!important;
}
#screen-options-wrap{
border: 0px solid #c3c4c7;
padding: 0px !important;
}
#screen-meta{
border: 0px solid #c3c4c7;
padding: 0px !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;
}
#wpadminbar .ab-top-menu>li.hover>.ab-item,
#wpadminbar.nojq.quicklinks .ab-top-menu>.ab-item:focus,
#wpadminbar:not(.nobile) .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{
background: #f0f6fe !important;
}
#wpadminbar li.menu-top:hover,
#adminmenu li.opensub>a.menu-top,
#adminmenu li>a.menu-top:focus {
background: #f0f6fe !important;
}
#wpadminbar #wp-admin-bar-user-actions.ab-submenu {
background: #f0f6fe !important;
}
#wpadminbar .quicklinks ul{
background: #fff !important;
}
#wpadminbar #wp-admin-bar-my-account{
background: #f0f6fe !important;
}
#wpadminbar .avatar{
border-radius: 4px !important;
border: 0px !important;
}
#wpadminbar .svg{
filter: invert(0%) sepia(0%) saturate(3164%) hue-rotate(60deg) brightness(0%) contrast(81%);
}
#adminmenuback {border-right: 1px solid #ccc; }
#wpcontent { border-left: 1px solid #ccc; }
#adminmenu li.wp-menu-separator {
height:10px;
border-bottom: 1px dashed #ccc;
font-size:11px
}
.admin-color-fresh #adminmenu li.wp-menu-separator {background: #bfc9d1;}
.admin-color-midnight #adminmenu li.wp-menu-separator {background: #4a5258;}
.admin-color-light #adminmenu li.wp-menu-separator {background: #ccc; }
.admin-color-blue #adminmenu li.wp-menu-separator {background: #3c85a0;}
.admin-color-coffee #adminmenu li.wp-menu-separator {background: #83766d;}
.admin-color-ectoplasm #adminmenu li.wp-menu-separator {background: #715d8d;}
.admin-color-ocean #adminmenu li.wp-menu-separator {background: #8ca8af;}
.admin-color-sunrise #adminmenu li.wp-menu-separator {background: #a43d39;}
/* General Borders Options */
#adminmenu li.wp-menu-open {border-width:0px;}
#adminmenu li.wp-menu-separator {margin:0; height:9px;}
#adminmenu #collapse-menu {margin-top:0;}
#adminmenu li.menu-top,
#adminmenu li.wp-menu-separator,
#adminmenu #collapse-menu {border-top-color:#ccc; border-top-style:solid; border-top-width:0;}
#adminmenu li.menu-top,
#wpadminbar,
#adminmenu li.wp-menu-separator {border-bottom-color:#CCC; border-bottom-style:dashed; border-bottom-width:0;}
#adminmenu {border-top-color:#ccc; border-top-style:solid; border-top-width:0;}
#adminmenu li.menu-top,
#adminmenu li.wp-menu-separator,
#adminmenu #collapse-menu {border-top-width:1px;}
/* Breaking up the left-side border on activated plugins */
.widefat {border-spacing:0px 1px;}
/* Restoring borders between rows in non-plugins tables */
.widefat th, .widefat td {border-bottom:1px solid rgb(225, 225, 225);}
.widefat th, .widefat td {box-shadow:none !important;}
.form-table td, .form-table th {border-bottom:solid 1px rgb(200,200,200);}
/* Creating a hover affect for rows */
#the-list tr:hover, #the-comment-list tr:hover {background-color:#ccc; }
#wpadminbar { border-bottom: 1px solid #ccc; }
.ab-item { border-right:1px solid #CCC; }
#wp-admin-bar-top-secondary { border-right:1px solid #CCC; border-left:1px solid #CCC; }
#wp-admin-bar-adtw-site-name {border-left:1px solid #CCC; border-right:1px solid #CCC; }
#wpadminbar * {
font-size: 13px;
color: #000;
}
.ab-icon { color: #000; }
#wpwrap {
background: #FFF url(https://i.imgur.com/yX6Ovw2.png) !important;
}
</style>';
}
add_action('admin_head', 'custom_admin_css');¿Qué elementos se modifican en el panel de administración?
El código CSS proporcionado abarca una gran cantidad de elementos para ofrecer una personalización profunda. Aquí te detallamos algunos de los cambios más significativos:
- Fuentes (
font-family): Se modifican las fuentes utilizadas en la barra de administración superior (#wpadminbar .ab-item), los nombres de los menús laterales (.wp-menu-name), y en general para todo el panel. - Colores de fondo (
background): Se cambian los fondos de la barra de administración, el menú lateral (#adminmenu,#adminmenuwrap,#adminmenuback), y los submenús. Esto permite un control total sobre la paleta de colores de tu backend. - Colores de texto (
color): Se ajustan los colores del texto en diferentes secciones, asegurando que sean legibles con los nuevos fondos. - Efectos al pasar el ratón (
:hover): Se definen colores de fondo específicos cuando el usuario pasa el ratón por encima de los elementos del menú, mejorando la interactividad. - Elementos activos (
.current): Se resaltan los elementos de menú actualmente seleccionados con un color y un borde lateral, haciendo más fácil la navegación. - Iconos: Se manipula el color de los iconos del menú (
#adminmenu div.wp-menu-image:before) y se aplica un filtro para que se adapten al nuevo esquema de colores. - Logotipo de WordPress: Se personaliza el logotipo de WordPress en la barra de administración superior, reemplazándolo por una imagen personalizada (
./assets/weswitchedlogo.png). - Bordes: Se añaden y modifican bordes en la barra de administración y el menú lateral, dando una apariencia más estructurada.
- Separadores del menú: Se personalizan los separadores entre los elementos del menú lateral, incluyendo variaciones de color según el esquema de color de administración de WordPress seleccionado.
- Tablas: Se ajustan los bordes y el efecto hover en las filas de las tablas (
.widefat,#the-list,#the-comment-list), lo que es útil para la gestión de contenido. - Fondo general del panel: Se establece una imagen de fondo para todo el área de contenido del panel (
#wpwrap).
¿Cómo implementar este código en tu WordPress?
Para aplicar estos cambios, tienes dos opciones principales:
- En el archivo
functions.phpde tu tema hijo: Esta es la opción más recomendada. Accede a los archivos de tu tema a través de FTP o el editor de temas de WordPress (Apariencia > Editor de temas). Abre el archivofunctions.phpde tu tema hijo y pega el código al final del archivo. Si no usas un tema hijo, es crucial que lo crees para evitar perder tus cambios al actualizar el tema padre. - Con un plugin de snippets de código: Plugins como «Code Snippets» te permiten añadir código personalizado sin modificar los archivos de tu tema. Simplemente instala y activa el plugin, crea un nuevo snippet y pega el código allí. Asegúrate de configurarlo para que se ejecute en el área de administración.
Consideraciones importantes
- Tema hijo: Siempre utiliza un tema hijo para cualquier personalización de código en WordPress. Esto asegura que tus cambios no se pierdan cuando tu tema principal reciba actualizaciones.
- Rutas de imágenes: Si utilizas imágenes personalizadas, como el logotipo de WordPress (
./assets/weswitchedlogo.pngyhttps://i.imgur.com/yX6Ovw2.png), asegúrate de que las rutas a esas imágenes sean correctas y estén accesibles. En el caso del código, la ruta al logo de WordPress es relativa, por lo que tendrás que asegurarte de que la imagenweswitchedlogo.pngesté en una carpetaassetsdentro de tu tema o donde la llames. - Prueba y error: La personalización CSS a menudo implica un poco de prueba y error. Utiliza las herramientas de desarrollador de tu navegador (clic derecho > «Inspeccionar») para identificar los selectores CSS de los elementos que deseas modificar y experimentar con diferentes propiedades.
- Impacto en el rendimiento: Si bien este código es ligero, añadir una cantidad excesiva de CSS personalizado puede tener un impacto mínimo en el tiempo de carga del panel de administración. Sin embargo, para la mayoría de los sitios, no será un problema significativo.
¿Listo para darle un toque único a tu panel de WordPress?
Este código te proporciona una base sólida para comenzar a transformar tu panel de administración de WordPress en un espacio de trabajo más agradable y adaptado a tus preferencias. ¡Experimenta con los colores, las fuentes y los fondos para crear un backend que realmente te guste!
Si quieres la versión ocurra te recomiendo este artículo:
Cómo Personalizar el Panel de Administración de WordPress con CSS
o quieres la otra versión blanca:
Cómo Personalizar el Panel de Administración de WordPress con Estilos Avanzados y Google Fonts
