Cómo modificar los colores del Dashboard de WordPress

Uno de los puntos flacos de WordPress, en mi opinión, es que el Dashboard puede llegar a parecer monótono desde el punto de vista visual. Mientras que encuentras miles y miles de temas diferentes para decorar y estilizar tu blog, el Dashboard solo dispone de dos temas basados en dos colores diferentes: gris y azul.

Desde el punto de vista estético uno podría esperar una mayor gama de posibilidades aquí, pero también desde el punto de vista práctico. Si eres de los que mantienes un buen número de blogs seguramente te gustaría que cada Dashboard coincidiera en estética con el aspecto de cada uno de los sitios, entre otras cosas para no liarte y tener claro siempre en qué blog estás trabajando. Personalmente he tenido algún que otro despiste en este sentido.

La buena noticia es que tienes alternativas para modificar estos colores de forma más o menos sencillas hasta el punto de que puedas personalizar cada Dashboard de tus blogs según tus gustos personales. Veamos cómo:

Blue Admin – Dashboard al estilo Facebook

Blue Admin es un sencillo pero práctico plugin que está ideado para modificar los colores básicos disponibles en el escritorio de WordPress añadiendo una tercera posibilidad: un tema coloreado con tonos azules (muy azules) y que te recordarán bastante al estilo visual de Facebook. Esto no es coincidencia.

El resultado final es visualmente relajante y diría que incluso más limpio que el estilo clásico de WordPress, aunque en este punto habrá gustos para todos, obviamente.

Personaliza los colores del Escritorio de WordPress

Como toda página web que se precie, el Dashboard de WordPress también está basado en estilos CSS que pueden personalizarse. Esta técnica no es tan sencilla como en el caso del plugin anterior porque requiere algo de trabajo y que conozcas algo de CSS, pero tampoco es algo demasiado complejo.

Básicamente, tendrías que editar el archivo functions.php y añadir este código:

function cssDashboard() {
wp_enqueue_style( ‘admin_css’, get_template_directory_uri() . ‘css-admin-personalizado.css’ );
}
add_action(‘admin_print_styles’, ‘cssDashboard’ );

El ejemplo anterior lo único que hace es crear una función que le dice a WordPress que cargue un archivo CSS llamado ‘css-admin-personalizado.css’, este archivo contiene las directivas necesarias para decorar el Dashboard a tu gusto.

Obviamente, el nombre del archivo es inventado y es solo un ejemplo, lo puedes llamar como quieras realmente.

El contenido del archivo ya es otra cosa, básicamente puedes modificar estos elementos:

#wphead: La cabecera en el Dashboard.
#adminmenu ul : enlaces de la barra lateral
#adminmenu2 ul : segundo nivel de enlaces en la barra lateral.
.wrap : El contenedor de todos los elementos en el Dashboard
.wrap h2 : cabeceras individuales para subpaneles (Ajustes generales, Plugins instalados, etc.)
#zeitgeist : La barra lateral
#footer : El pie de página

Ahora es donde entran en juego tus conocimientos de CSS. Por ejemplo, si lo que quieres es que la cabecera tenga un color rojo intenso, podrías añadir esto al archivo CSS personalizado:

#wphead {background: #FF0000;}

De la misma forma, puedes incluir imágenes en el fondo del escritorio de WordPress o modificar los colores:

.wrap {background-image:url(‘imagen-de-ejemplo.jpg’);}

Conociendo algo de CSS y con algo de paciencia puedes ir modificando los elementos hasta que estén a tu gusto, incluyendo fuentes y tipos de letra, tamaños, líneas, bordes, etc.