Questa è la mia versione, in italiano, dell’articolo originale di Sarah Gooding apparso su wmpu.org.
In tutti questi anni abbiamo fatto passi da gigante nella customizzazione del frontend, piegando definitivamente le funzionalità di wordpress ad una visualizzazione libera da ogni obbligo.
La pagina di login wordpress invece versione dopo versione è rimasta sempre la stessa e credo sia ora che anch’essa faccia di diritto parte delle pagine da personalizzare.
Con questo tutorial potremo dare alle nostre installazioni di wordpress una pagina di login wordpress completamente customizzata. Via!
Passo zero: creare cartelle e directory per il nostro nuovo tema
Primo passo: aggiungere un Background custom
Secondo passo: sostituire il logo WordPress con il nostro
Terzo passo: stili custom per il form
Quarto passo: caratteri dei font con Google Fonts
Quinto passo: aggiungere un po’ di jQuery
Sesto passo: cambiare il link del logo con il link che vogliamo noi
Passo zero: creare cartelle e directory per il nostro nuovo tema
Per iniziare questo viaggio dobbiamo creare una /login/ directory nella cartella principale del tema che state utilizzando.
Tutte queste modifiche verranno così aggiunte al vostro tema: si potrebbe facilmente aggiungere un plugin, però credo abbia più senso inserire le modifiche in modo che siano abbinate naturalmente al tema attivo.
Primo passo: Aggiungere un Background custom
Se avete mai provato ad aggiungere stili nel css del vostro nella speranza di personalizzare la pagina di login vi sarete accorti che le modifiche non vengono caricate.
Il modo giusto è aprire un file nuovo e chiamarlo login-styles.css, caricandolo poi nella vostra nuova directory (/login/).
Poi diciamo a WP di caricarlo, con una funzioncina nel file functions.php del tema, così:
function custom_login_css() {
echo '';
}
add_action('login_head', 'custom_login_css');
La cosa più importante da ricordare è che dovremmo scegliere un’immagine larga abbastanza per essere decente nei monitor di alta risoluzione.
Ora carichiamo l’immagine nella /login/ directory.
WordPress aggiunge per default una .login class al body della pagina di login, quindi possiamo usare questa definizione per assegnare lo stile:
body.login {
background: #fbfbfb url('your-bg.jpg') no-repeat fixed center;
}
In questo modo stiamo sovrascrivendo gli stili in /wp-admin/css/login.css, quindi io con firebug darei un’occhiata a come scrivere il tutto per sistemare la cosa esattamente come avete in mente.
Secondo passo: Sostituire il logo WordPress con il nostro
Il logo WordPress è incluso nella pagina di login come sfondo dell’elemento .login h1 a.
Carichiamo il logo custom sempre dentro / login / e appuntiamoci altezza e larghezza; poi nel nostro foglio di stile aggiungiamo:
.login h1 a {
background-image: url('../login/logo.png');
background-size: 300px 260px;
width: 300px;
height: 260px;
}
Aggiungiamo l’immagine alla /login/, sistemiamo background-size, width e height con le dimensioni del nostro logo.
Ci potrebbe essere bisogno di aggiustare il padding, ma dipende dalla nostra grafica e dalla sua resa.
#login {
padding: 30px 0 0;
}
Terzo passo: stili custom per il form
Potrete ovviamente utilizzare gli stili che volete, ma se avete voglia di provare quelli qui indicati troverete qualcosa di interessante.
Giusto per vedere come viene, aggiungiamo tutta questa roba agli stili per il form: potete poi fare ulteriori modifiche, quelle che desiderate.
.login form {
margin-left: auto;
margin-right: auto;
padding: 30px;
border: 1px solid rgba(0,0,0,.2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
overflow: hidden;
}
.login form input {
width: 240px;
height: 48px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
display: block;
}
.login form input:focus,
.login form textarea:focus {
background-color: rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
overflow: hidden;
}
.login label {
color: #fff;
line-height: 26px;
}
.login form .input,
.login input[type="text"] { color: #8c8a8 }
input#rememberme {
height: 18px;
width: 18px;
display: inline;
vertical-align: middle;
margin: 10px 0;
}
input.button-primary {
width: 138px;
height: 44px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
float:right;
border: 1px solid #3d5a5a;
background: #416b68;
background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));
background: -webkit-linear-gradient(top, #6da5a3, #416b68);
background: -moz-linear-gradient(top, #6da5a3, #416b68);
background: -ms-linear-gradient(top, #6da5a3, #416b68);
background: -o-linear-gradient(top, #6da5a3, #416b68);
background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);
padding: 10.5px 21px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
text-shadow: #333333 0 1px 0;
color: #e1e1e1;
}
input.button-primary:hover {
border: 1px solid #3d5a5a;
text-shadow: #333333 0 1px 0;
background: #416b68;
background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));
background: -webkit-linear-gradient(top, #77b2b0, #416b68);
background: -moz-linear-gradient(top, #77b2b0, #416b68);
background: -ms-linear-gradient(top, #77b2b0, #416b68);
background: -o-linear-gradient(top, #77b2b0, #416b68);
background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
color: #fff;
}
input.button-primary:active {
margin-top:1px;
text-shadow: #333333 0 -1px 0;
border: 1px solid #3d5a5a;
background: #6da5a3;
background: -webkit-gradient(linear, left top, left bottom, from(#416b68), to(#416b68));
background: -webkit-linear-gradient(top, #416b68, #609391);
background: -moz-linear-gradient(top, #416b68, #6da5a3);
background: -ms-linear-gradient(top, #416b68, #6da5a3);
background: -o-linear-gradient(top, #416b68, #6da5a3);
background-image: -ms-linear-gradient(top, #416b68 0%, #6da5a3 100%);
color: #fff;
-webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
}
Quarto step: caratteri dei font con Google Fonts
Nel caso voleste utilizzare i vostri custom fonts del frontend anche nella pagina di login, ecco come fare.
In questo esempio abbiamo modificato i links nel bottom del form e il messaggio di logout.
Li dobbiamo aggiungere nello stesso modo in cui abbiamo chiamato il file css prima, e quindi nel file functions.php bisogna aggiungere:
function custom_fonts() {
echo '';
}
add_action('login_head', 'custom_fonts');
Ovviamente sostituite il link nell’esempio con quello del vostro font.
.login #nav a,
.login #backtoblog a {
font-family: 'Open Sans Condensed', sans-serif;
color: #00667!important;
font-size: 17px;
}
div.updated,
.login .message {
background-color: lightYellow;
border-color: #E6DB55;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 16px;
font-weight: 700;
}
Quinto passo: aggiungere un po’ di jQuery
Fondamentalmente in questo esempio vogliamo solo caricare la pagina con il form e i links nascosti, e farli entrare lentamente con un fading.
Ecco qui:
add_action( 'login_head', 'untame_fadein',30);
function untame_fadein() {
echo '';
}
Sesto passo: cambiare il link del logo con il link che vogliamo noi
Una delle ultime cose da fare è far puntare il nostro logo al nostro sito web, al posto che al generico wordpress.org.
Possiamo farlo usando un filtro, nel solito file functions.php. Ecco come:
add_filter( 'login_headerurl', 'custom_login_header_url' );
function custom_login_header_url($url) {
return 'http://www.proactiva.it/'; //qui mettete il vostro url
}
Quindi ci siamo: abbiamo fatto qualcosina di diverso e che è difficile da vedere normalmente in un progetto finito, anche se non ci è costato molto.
Ad esempio è una buona idea se al sito del nostro cliente accedono molti autori, oppure se è esigente e attento ai dettagli e noi vogliamo offrirgli un’esperienza completa.
Questa è anche la pagina che un collaboratore vede quando fa logout: varrebbe la pena di rafforzare il vostro brand, perchè non provare questo tutorial anche sul vostro sito?