Personalizzare completamente la pagina login

Personalizzare completamente la pagina login vuol dire lavorare su una pagina completamente disadorna da tutte le possibilità di personalizzazione “al volo”, cosa che è presente nelle altre possibilità dell’area di amministrazione di WordPress.

L’articolo che questa volta ti propongo appartiene a quella categoria di articoli che io definisco “che dovrebbero esserci di default” su wordpress e ancora non ci sono; come un tempo lo erano i tag: bisognava supplire alla loro assenza con dei plugin. Sono certo che un giorno anche i tag p attorno alle immagini verranno eliminati di default

Per esempio non puoi inserire il tuo logo nella pagina di login, oppure cambiarne lo sfondo.

Questo tutorial ti mostrerà esattamente quello che fa al caso tuo: modificare a tuo piacimento la pagina di login tale che potrai personalizzarla come più desideri.

Personalizzare completamente la pagina login: indice del contenuti

Questo tutorial contiene molte modifiche ai temi dei file per personalizzare completamente la pagina login:

1. Aggiungere un background personalizzato
2. Sostituire il logo di WordPress con un logo personalizzato
3. Personalizzare il look della form del login
4. Modificare l’URL del logo del login
5. Rimuovere il link della password smarrita
6. Rimuovere il link “Torna indietro”
7. Nascondere il messaggio di errore
8. Rimuovere il movimento di shack quando avviene un errore
9. Cambiare il redirect URL
10. Impostare il “Ricordami” cheacckato di default

Premessa

1. Nella cartella del tuo tema creane una e chiamala login
2. In questa cartella inserisci un file chiamato custom-login-styles.css
3. Adesso devi dire a WordPress di caricare il file custom-login-styles.css, apri il functions.php e scrivi la funzione

   function my_custom_login() {
   echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/custom-login-styles.css" />';
   }
   add_action('login_head', 'my_custom_login');

1. Aggiungere un background personalizzato

Scegli il file immagine da inserire come background, sufficientemente grande e chiamalo home-bg.jpg, e nel file custom-login-styles.css file, aggiungi la regola:

body.login {
  background-image: url('home-bg.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

2. Sostituire il logo di WordPress con un logo personalizzato

Come al punto precedente, sempre nel file custom-login-style.css aggiungi la regola, avendo scelto l’immagine del logo con il nome del file login-logo.png:

.login h1 a {
  background-image: url('login-logo.png');
}

3. Personalizzare il look della form del login

Qui puoi sbizzarrirti e scegliere quale colori ti piacciono di più, avendo cura di rispettare il selettore presente nelle regole qui sotto:

.login label {
  font-size: 12px;
  color: #555555;
}

.login input[type="text"]{
  background-color: #ffffff;
  border-color:#dddddd;
  -webkit-border-radius: 4px;
}

.login input[type="password"]{
  background-color: #ffffff;
  border-color:#dddddd;
  -webkit-border-radius: 4px;
}
.login .button-primary {
  width: 120px;
  float:right;
  background-color:#17a8e3 !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#17a8e3));
  background: -webkit-linear-gradient(top, #17a8e3, #17a8e3);
  background: -moz-linear-gradient(top, #17a8e3, #17a8e3);
  background: -ms-linear-gradient(top, #17a8e3, #17a8e3);
  background: -o-linear-gradient(top, #17a8e3, #17a8e3);
  background-image: -ms-linear-gradient(top, #17a8e3 0%, #17a8e3 100%);
  color: #ffffff;
  -webkit-border-radius: 4px;
  border: 1px solid #0d9ed9;
}

.login .button-primary:hover {
  background-color:#17a8e3 !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#0d9ed9 ));
  background: -webkit-linear-gradient(top, #17a8e3, #0d9ed9 );
  background: -moz-linear-gradient(top, #17a8e3, #0d9ed9 );
  background: -ms-linear-gradient(top, #17a8e3, #0d9ed9 );
  background: -o-linear-gradient(top, #17a8e3, #0d9ed9 );
  background-image: -ms-linear-gradient(top, #0b436e 0%, #0d9ed9 100%);
  color: #fff;
  -webkit-border-radius: 4px;
  border: 1px solid #0d9ed9;
}

.login .button-primary:active {
  background-color:#17a8e3 !important;
  background: -webkit-gradient(linear, left top, left bottom, from(#0d9ed9), to(#17a8e3));
  background: -webkit-linear-gradient(top, #0d9ed9, #17a8e3);
  background: -moz-linear-gradient(top, #0d9ed9, #17a8e3);
  background: -ms-linear-gradient(top, #0d9ed9, #17a8e3);
  background: -o-linear-gradient(top, #0d9ed9, #17a8e3);
  background-image: -ms-linear-gradient(top, #0d9ed9 0%, #17a8e3 100%);
  color: #fff;
  -webkit-border-radius: 4px;
  border: 1px solid #0d9ed9;
}

4. Modificare l’URL del logo del login

Di default, il link del logo puntano a wordpress.org, ora lo cambierai puntandolo direttamente alla home del tuo sito, aggiungendo al functions.php la funzione:

function my_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

Sostituisci “Your Site Name and Info” con una descrizione più appropriata, è semplicemente l’attributo title.

5. Rimuovere il link della password smarrita

Non sempre quando metti mano a personalizzare completamente la pagina login le cose sono semplici: questa è un arma a doppio taglio: se lo elimini diverrà non più possibile recuperare una password smarrita, ma se è presente è lo strumento idonei per gli hacker per entrare nel tuo sito, comunque la regola da inserire nel file custom-login-styles.css è:

p#nav {
  display: none;
}

6. Rimuovere il link “Torna indietro”

“Torna indietro” altro non fa che rimandarti alla pagina iniziale del tuos sito perdendo tutti i dati che avevi già inserito… non ne capisco l’utilità, eliminalo:

p#nav {
  display: none;
}

7. Nascondere il messaggio di errore

Arma doppio taglio anche questa, perché se è vero che ti dice che tipo di errore hai commesso (se sbagli a digitare il nome ti dirà che hai scritto male il nome, ed idem per la password), questo è sicuramente un sistema per aiutare gli hacker ad entrare fraudolentemente sul tuo sito, una soluzione può essere un messaggio di errore generico del tipo:

function login_error_override()
{
    return 'Dettagli del login incorretti';
}
add_filter('login_errors', 'login_error_override');

8. Rimuovere il movimento di shack quando avviene un errore

Questo è proprio a gusto tuo, se desideri togliere lo scheck ecco la funzione; non fa nient’altro che “agitare” la form in caso di errore…:

function my_login_head() {
remove_action('login_head', 'wp_shake_js', 12);
}
add_action('login_head', 'my_login_head');

9. Cambiare il redirect URL

Quando il login è andato a buon fine vieni rimandato direttamente alla dashboard se preferisci invece essere reindirizzato alla home ecco la funzione che fa per te:

function admin_login_redirect( $redirect_to, $request, $user )
{
global $user;
if( isset( $user->roles ) && is_array( $user->roles ) ) {
if( in_array( "administrator", $user->roles ) ) {
return $redirect_to;
} else {
return home_url();
}
}
else
{
return $redirect_to;
}
}
add_filter("login_redirect", "admin_login_redirect", 10, 3);

10. Impostare il “Ricordami” cheacckato di default

…e se ti scordasi di checckare il dato che se già stato loggato? In un articolo dal titolo “Personalizzare completamente la pagina login” non poteva mancare, meglio metterlo default fin dall’inizio:

function login_checked_remember_me() {
add_filter( 'login_footer', 'rememberme_checked' );
}
add_action( 'init', 'login_checked_remember_me' );

function rememberme_checked() {
echo "<script>document.getElementById('rememberme').checked = true;</script>";
}

Fonte
– How to Completely Customize the WordPress Login Page