Personalizzare la pagina di login di WordPress

La pagina di login

Per raggiungere la pagina di login del tuo WordPress, è necessario aggiungere wp-admin oppure wp-login.php alla url del tuo sito. Da qui ti sarà possibile accedere al backend del tuo sito, resettare la password per il tuo account (qualora l’avessi dimenticata) o registrare un nuovo utente, purché sia abilitata l’opzione:

CHIUNQUE PUÒ REGISTRARSI

in:

Impostazioni > Generali

Modificare la grafica

Per dare al tuo sito un tocco in più, puoi modificare a piacimento la grafica della pagina di login. È sufficiente registrare un nuovo foglio di stile da richiamare quando viene renderizzata la pagina di login, aggiungendo al file functions.php del tuo tema, che trovi nello spazio FTP del tuo sito, il codice:

// Richiama il nuovo foglio di stile per la pagina di login
add_action( 'login_enqueue_scripts', function() {
    wp_enqueue_style( 'custom-login', get_template_directory_uri() . '/css/login.css' );
} );

e creare il file login.css nel tuo tema, inserendo e personalizzando il seguente css:

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

Modificare il logo

Se invece tu volessi solo cambiare il logo posto sopra il form di login, puoi usare il seguente codice, da aggiungere al file functions.php del tuo tema:

// Modifica il logo nella pagina di login
add_action( 'login_enqueue_scripts', function() {
	?>
    
    <style type="text/css">
        #login h1 a,
        .login h1 a {
            background-image: url( <?php echo get_stylesheet_directory_uri(); ?>/images/login-logo.png );
            padding-bottom: 30px;
        }
    </style>
	<?php
} );

Volendo, potresti utilizzare il logo inserito nel backend del sito, che puoi modificare in:

Aspetto > Personalizza > Denominazione del sito > Logo

inserendo nel file functions.php del tuo tema il codice:

// Modifica il logo nella pagina di login
add_action( 'login_enqueue_scripts', function() {
	?>
    
    <style type="text/css">
        #login h1 a,
        .login h1 a {
            background-image: url( <?php echo wp_get_attachment_image_src( get_theme_mod( 'custom_logo' ), 'full' )[0]; ?> );
            padding-bottom: 30px;
        }
    </style>
	<?php
} );

Modificare il link del logo

Il logo sopra il form di login, ha un link che indirizza al sito di WordPress (https://it.wordpress.org/). Puoi modificare l’url di destinazione, indirizzando magari gli utenti alla pagina iniziale del tuo sito, inserendo nel file functions.php del tuo tema:

// Modifica il link del logo nella pagina di login
add_filter( 'login_headerurl', function() {
    return get_home_url();
} );

Modificare il title del logo

Così come per il link, abbiamo anche la possibilità di modificare il title del link stesso, che di default è “Powered by WordPress”, inserendo nel file functions.php del tuo tema:

// Modifica il title del logo nella pagina di login
add_filter( 'login_headertitle', function() {
    return get_bloginfo( 'name' );
} );

In questo modo, il title del logo è adesso il titolo del tuo sito.

[AGGIORNAMENTO 18-05-2019]

Con la nuova versione 5.2 di WordPress l’hook login_headertitle viene sostituito dalla nuova versione login_headertext, quindi controlla la tua versione di WordPress prima di decidere quale dei due hook utilizzare.

Personalizzare i messaggi di errore

Hai mai notato cosa succede quando inserisci credenziali d’accesso errate? WordPress ti restituisce un messaggio di errore che ti indica con maggiore precisione cosa hai sbagliato:

“ERRORE: nome utente non valido. Password dimenticata?”

nel caso tu abbia inserito una username inesistente.

“ERRORE: La password inserita per il nome utente demo non è corretta. Password dimenticata?”
nel caso la password inserita non sia corretta.

Ad una prima riflessione, questo può sembrare utile per avere un’indicazione di cosa stai sbagliando, ma pensandoci meglio, lo stesso aiuto viene fornito ad eventuali malintenzionati che vogliano accedere al tuo backend.

Facciamo un esempio pratico: molto (troppo) spesso, viene scelto ADMIN come username per l’account principale, oppure semplicemente il nome del sito stesso. Ipotizziamo che inserendolo con una password casuale ricevessimo il secondo errore specificato sopra: questo indicherebbe che abbiamo indovinato la username, avendo dunque già ottenuto il 50% delle credenziali d’accesso.

Sarebbe preferibile, quindi, modificare i messaggi di errore con qualcosa di più generico, così da non fornire indizi preziosi riguardo al login, aumentando il livello di sicurezza:

// Elimina gli aiuti in caso di errore nella pagina di login
add_filter( 'login_errors', function() {
	return 'Credenziali di accesso errate';
} );

Inserendo nel file functions.php del tuo tema, in caso di errore d’accesso riceverai il messaggio “Credenziali di accesso errate”.

Forzare il login con email

Un altro metodo per rafforzare la sicurezza della tua pagina di login, consiste nell’obbligare gli utenti registrati al tuo WordPress ad utilizzare l’email al posto della username. Otterrai il risultato inserendo nel file functions.php del tuo tema:

// Obbliga il login tramite email
remove_filter( 'authenticate', 'wp_authenticate_username_password', 20, 3 );
add_filter( 'authenticate', function( $user, $username, $password ){
    if ( ! empty( $username ) ) {
        $username = str_replace( '&', '&', stripslashes( $username ) );
        $user = get_user_by( 'email', $username );
        if ( isset( $user, $user->user_login, $user->user_status ) && 0 == ( int )$user->user_status ) {
            $username = $user->user_login;
        } else { $username = ''; }
    }
    return wp_authenticate_username_password( null, $username, $password );
}, 20, 3 );

Utilizzare l’email anziché il nome utente, irrobustisce le credenziali d’accesso, aumentando la difficoltà di chi proverebbe a violare il tuo sito attraverso un attacco brute force.