Creare una pagina di login personalizzata su WordPress

Una recente indagine di mercato ha evidenziato come WordPress sia il CMS più utilizzato al mondo, il 19.3% dei siti web di tutto il mondo utilizzano proprio questa piattaforma che equivale ad una quota di mercato del 57.6% dei siti che utilizzano CMS.

wp_logo

Di cosa si tratta?

Inizialmente nato come piattaforma di blogging, WordPress viene usato nei modi più vari, si va dal semplice portfolio alla testata giornalistica. Se nel caso del semplice blog solitamente chi accede al back end di WordPress è solo l’autore, in casi più complessi (ecommerce, magazine, helpdesk, ecc..) può essere necessario che vi accedano anche clienti, utenti o collaboratori. Proprio nel caso in cui ci siano altre persone che debbano accedere al back end, modificare la pagina di login dovrebbe essere una di quelle cose da prendere in considerazione.

Perché è utile?

Modificare la pagina di login al back end può essere utile per diversi motivi:

  • Indipendentemente dal servizio che offrite, personalizzare con il vostro logo la pagina di login non farà altro che rinforzare la vostra immagine!
  • Nonostante il breve tempo di stazionamento nella pagina di login, l’utente percepisce un’assenza di coesione tra questa e il sito, cosa che può generare un lieve spaesamento. Creare una pagina d’accesso che dia all’utente un’esperienza di navigazione coerente con quella che ha nel resto del sito è una buona strategia per evitare questo spaesamento.

Solitamente i temi che si acquistano o che sono disponibili gratuitamente non offrono la possibilità di personalizzare la grafica della pagina di login ma la procedura per farlo è semplice e non vi ruberà più di una decina di minuti.

wp1

Come possiamo cambiarla?

Il consiglio è di effettuare queste modifiche in un ambiente di sviluppo e caricarle online solo dopo aver effettuato un backup del vostro sito (o quantomeno dei file che andremo a modificare). Per prima cosa creiamo la cartella login all’interno della directory del vostro tema (vostrosi.to/wp-content/themes/vostrotema/).

Inseriamo un’immagine di sfondo

Se avete già avuto qualche esperienza nella modifica della pagina di login saprete che Wp non carica in automatico il css dal vostro tema, per questo dovremmo crearne uno noi. Con il vostro editor di testo preferito creiamo il file login-styles.css e carichiamolo nella cartella vostrosi.to/wp-content/themes/vostrotema/login/. Ora dobbiamo dire al tema che carichi questo nuovo css per la pagina di login, per farlo dobbiamo modificare il file functions.php del nostro tema inserendo:

/*********************************************************************************************  
Utilizza un foglio di stile custom per il login
 
*********************************************************************************************/
function custom_login_css() {
echo '								<link href="'.get_stylesheet_directory_uri().'/login/login-styles.css" rel="stylesheet" type="text/css" />';
}
 
add_action('login_head', 'custom_login_css');

Ora scegliamo un’immagine di sfondo e carichiamola nella directory vostrosi.to/wp-content/themes/vostrotema/login/. Cercate di scegliere un’immagine che sia sufficientemente grande per essere vista bene anche su schermi larghi.
Wp aggiunge di default la classe .login nell’elemento body della pagina di login, quindi a noi basterà modificare il css che avevamo creato nella cartella login/. Apriamo il file login-styles.css e inseriamo:

body.login {
background: #fbfbfb url('sfondo.jpg') no-repeat fixed center;
}

dove sfondo.jpg è ovviamente l’immagine che avete scelto.
Se salvate e provate a fare un refresh della pagina di login vedrete già il risultato.

wp_2

Sostituiamo il logo di WordPress

Scegliamo un logo e, dopo esserci segnati da qualche parte le sue dimensioni, carichiamolo nella cartella login/.
Apriamo ancora una volta il file login-styles.css e inseriamo:

.login h1 a {
background-image: url('../login/logo.png');
background-size: 300px 102px;
width: 300px;
height: 102px;
display: block;
margin-left: auto;
margin-right: auto;
}
#login {
padding: 30px 0 0;
}

Aggiustate le dimensioni del logo secondo le vostre necessità e poi salvate. Per vedere le nuove modifiche apportate vi basterà aggiornare la pagina di login.

wp3

Modifichiamo il link del logo

Dopo aver sostituito il logo di WordPress con il nostro vorremmo sicuramente cambiare anche il link che attualmente punta a wordpress.org. Per farlo apriamo il file functions.php e modifichiamolo aggiungendo:

/*********************************************************************************************  
Cambia il link del logo nella pagina di login
 
*********************************************************************************************/
add_filter( 'login_headerurl', 'custom_login_header_url' );
function custom_login_header_url($url) {
return 'http://freestyler.it/';
}

sostituendo http://freestyler.it/ con il vostro link, salvate il file e aggiornate la pagina di login.

Modifichiamo l’aspetto del form di login

Il css del form di login è modificabile a piacere, l’unico limite è la vostra fantasia!
Se volete renderlo trasparente come nel nostro caso aggiungete al file login-styles.css queste righe:

.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: #8c8a8a; }
input#rememberme {
height: 18px;
width: 18px;
display: inline;
vertical-align: middle;
margin: 10px 0;
}

wp4

Come abbiamo visto le modifiche da fare sono semplici e immediate. Anche se la pagina di login è un posto dove gli utenti si fermano solo il tempo per inserire le loro credenziali d’accesso, sicuramente apprezzeranno una pagina elegante e in linea con il vostro sito rispetto alla spoglia pagina bianca.