Cómo Personalizar el Panel de Administración de WordPress con CSS

¿Quieres darle un toque profesional al panel de administración de WordPress para tus clientes o equipo? Con este código CSS personalizado, podrás añadir bordes, separadores visuales y efectos hover que mejorarán la legibilidad y experiencia de usuario. ¡Sin plugins y en solo unos pasos!

¿Por qué personalizar el admin de WordPress?

• Mejora la organización visual: Separa secciones con bordes y colores.
• Branding profesional: Adapta el escritorio a la identidad de tu agencia o cliente.
• Enfoca la atención: Destaca áreas clave con efectos interactivos.

Paso 1: Implementar el código

1. Usando Code Snippets (recomendado):
   • Ve a Snippets > Añadir nuevo.
   • Título: «Estilos CSS personalizados para el admin de WordPress».
   • Código: Pega el siguiente código:

<?php
/**
 * Añade estilos CSS personalizados al panel de administración.
 */
function custom_admin_styles() {
    $css = '
        /* Bordes del menú y área principal */
        #adminmenuback { border-right: 1px solid #666; }
        #wpcontent { border-left: 1px solid #666; border-top: 1px solid #666; }
        
        /* Separadores del menú */
        #adminmenu li.wp-menu-separator {
            height: 10px;
            border-bottom: 1px dashed #666;
            font-size: 11px;
            margin: 0;
        }
        
        /* Colores de separadores según esquema de color */
        .admin-color-fresh #adminmenu li.wp-menu-separator { background: #666; }
        .admin-color-midnight #adminmenu li.wp-menu-separator { background: #4a5258; }
        .admin-color-light #adminmenu li.wp-menu-separator { background: #c2c2c2; }
        .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; }
        
        /* Bordes generales */
        #adminmenu li.wp-menu-open { border-width: 0px; }
        #adminmenu #collapse-menu { margin-top: 0; }
        #adminmenu li.menu-top, 
        #adminmenu li.wp-menu-separator, 
        #adminmenu #collapse-menu { 
            border-top: 1px solid #666; 
        }
        #adminmenu li.menu-top, 
        #wpadminbar, 
        #adminmenu li.wp-menu-separator { 
            border-bottom: 1px solid #666; 
        }
        #adminmenu { border-top: 1px solid #666; }
        #wpadminbar { border-bottom: 1px solid #666; }
        
        /* Estilos para tablas */
        .widefat { border-spacing: 0px 1px; }
        .widefat th, 
        .widefat td { 
            border-bottom: 1px solid rgb(225, 225, 225); 
            box-shadow: none !important; 
        }
        .form-table td, 
        .form-table th { border-bottom: solid 1px rgb(200, 200, 200); }
        
        /* Efecto hover en filas */
        #the-list tr:hover, 
        #the-comment-list tr:hover { 
            background-color: rgba(102, 102, 102, 0.1); 
        }
    ';
    
    // Inyecta el CSS solo en el admin
    wp_add_inline_style( 'wp-admin', $css );
}
add_action( 'admin_enqueue_scripts', 'custom_admin_styles' );

2. Configuración:
   • Ámbito: Solo en el backend.
   • Guardar y activar el snippet.

Paso 2: Personalización avanzada

1. Cambiar colores:
   Modifica los valores HEX (ej: #666 → #3a3a3a para un gris más oscuro).
2. Añadir transparencias:
   Usa rgba() en efectos hover para suavizarlos:

#the-list tr:hover { 
    background-color: rgba(0, 100, 200, 0.05); 
}

3. Adaptar a esquemas de color:
   Extiende las clases .admin-color-* con tus propios estilos.

¿Qué hace este código?

• Bordes estructurados: Define límites claros entre secciones.
• Separadores visuales: Mejora la organización del menú lateral.
• Compatibilidad: Respeta los esquemas de color de WordPress.
• Tablas legibles: Añade divisiones sutiles entre filas y columnas.