Personalizzare il Pannello Admin di WordPress

L’ultima versione di WordPress 2.7 ha introdotto un’interfaccia di amministrazione veramente bella e semplice, peccato per l’header che sia nella versione Grigia che Blu, rimane troppo scura e crea un forte contrasto molto fastidioso.

Allo stesso tempo, risolvere questo problema significa anche avere l’opportunità di personalizzare l’ area di Admin in WordPress, e avere dunque un Pannello di amministrazione più professionale e confortevole.

Personalizzare l’admin di WordPress può tornare molto utile a quei webmaster a cui viene chiesto di realizzare un sito per un azienda con un Pannello di amministrazione molto potente, per cui con questa modifica si consegna un prodotto personalizzato e adattato al cliente.

Riassumendo tutto il procedimento, possiamo dire che basta sostituire il Logo già presente di WordPress con un nostro logo, e cambiare i colori dell’header nel Css di admin.

Ecco come fare:

1) Realizzare un’immagine a sfondo bianco contente il tuo logo con dimensioni consigliate 300×100.

2) Caricare l’immagine sulla cartella wp-includes/images/ o nella cartella che si preferisce, basta ricordarsi poi dove sta.

3) Andare sulla cartella wp-admin ed aprire il file admin-header.php, se si utilizza FileZilla basta cliccare col tasto destro su visualizza/modifica.

4) Cercare il tag img contente id=”header-logo”, se si utilizza Blocco Note basta digitare F3.

5)  Su src=”../wp-includes/images/blank.gif” sostituire blank.gif col nome del file caricato precedentmente.

6) Cancellare gli attributi width=”" e height=”", o assegnarli il valore giusto.

7) Importante: non concellare l’id.

8 ) Chiudere e salvare il file.

9) Aprire dalla cartella wp-admin/css/ il file colors-classic.css.

10) Cercare nel testo tutte le parole per wphead e modificare i seguenti parametri segnati in rosso:

a:hover,
#wphead #viewsite a:hover,
#adminmenu a:hover,
#adminmenu ul.wp-submenu a:hover,
#the-comment-list .comment a:hover,
#rightnow a:hover,
.subsubsub a:hover,
.subsubsub a.current:hover,
#login form .submit input:hover,
div.dashboard-widget-submit input:hover,
#media-upload a.del-link:hover,
.ui-tabs-nav a:hover {
color: #000;
}
#wphead {
background-color: #fff; height:110px;
}
#wphead h1 a {
color: #333;
}

11) Modificare anche questi elementi segnati in rosso:

#user_info {
color: #333;
}
#user_info a:link, #user_info a:visited, #footer a:link, #footer a:visited {
color: #333;
text-decoration: none;
}
#user_info a:hover, #footer a:hover {
color: #000;
text-decoration: underline !important;
}

E’ importante fare le modifiche con attenzione, poichè se si sbaglia si rischia di fare danni sopratutto per quanto riguarda il file admin-header.php.
La tecnica funziona perfettamente come dimostra lo screenshot all’inizio del post.