Come personalizzare la grafica di Login in WordPress

Molti utenti WordPress dopo aver abbellito il blog con un tema che non sia quello di default hanno l’esigenza di personalizzare anche la grafica di Login inserendo un logo che possa contraddistinguere il proprio brand. Oggi ti spiego come farlo senza modificare il core di WordPress ma aggiungendo semplicemente delle funzioni al tema in uso.

Il tuo Login personalizzato

Prima di tutto crea una sottocartella /login nella cartella del tema che stai usando in modo da non mischiare i vari file con quelli del tema stesso. Bene, ora si comincia con la parte che riguarda il codice.

• Apri il solito functions.php e inserisci la seguente  funzione (mi raccomando sempre di controllare percorsi e nomi dei files):

[php]
// Richiamo al Css personalizzato
function custom_login() {
echo ‘‘;
}
add_action(‘login_head’, ‘custom_login’);
[/php]

• Crea nella cartella /login un file chiamato login.css e inserisci il codice che vedi qui di seguito:

[css]
* { margin: 0; padding: 0; }
body{ border-top:0px; }
html {background:#fff url(logo.jpg) 50% 0 no-repeat;
color:#333;font:normal 15px/20px Arial,Tahoma,Helvetica,Sans-Serif;margin:0;padding:0; }
#login form .submit input { border: 0px !important; color: #333 !important; }
#login form .submit input:hover { border: 0px !important; color: #666 !important; }
.login #nav a { color: #333 !important; }
.login #nav a:hover { color: #666 !important; }
form{margin-left: 8px;padding: 16px 16px 40px 16px;font-weight:normal;background:transparent;border:0px solid #fff;}
form .forgetmenot{font-weight:normal;float:left;margin-bottom:0;}
#login form .submit input{font:14px “Lucida Grande”,Verdana,Arial, “Bitstream Vera Sans”,sans-serif;
padding: 3px 10px;border:none;text-decoration:none;margin-top:-3px;}
#login form p{margin-bottom:0;}
label{color: #333;font-size:13px;}
form .forgetmenot label{font-size: 11px;line-height:19px;}
form .submit {clear:both;text-align:center;width:99%;border:1px solid:fafafa;background:none;}
form p { margin-bottom: 24px; }
h1 a {background: url(pixel.gif) no-repeat top center;width:412px;height:182px;
text-indent:-9999px;overflow: hidden;padding-bottom:35px;display: block;}
#backtoblog a{position:absolute;top:7px;left:15px;text-decoration: none;}
#login{width:412px;margin:3.5em auto;}
#login_error,.message{margin:0 0 16px 8px;padding:12px;}
#nav{margin:0 0 0 8px; padding:16px;}
#user_pass, #user_login, #user_email{font-size:24px;width:97%;padding:3px;margin-top:2px;margin-right: 6px;
margin-bottom: 16px;border:0;background:trasnparent;}
[/css]

• Crea 2 immagini; una per il logo logo.jpg e una di 1×1 pixel trasparente che chiamerai pixel.png. Inserisci queste immagini nella solita cartella /login.

Naturalmente potrai in seguito personalizzare il tuo foglio di style login.css apportando le modifiche che ritieni più opportune. Ti ricordo che l’immagine pixel.png in questo caso serve per non visualizzare il logo di default di WordPress.

Goditi la tua pagina di Login personalizzata!