Home>Guide>Personalizzare la pagina di login di WordPress

Personalizzare la pagina di login di WordPress


Personalizzare la pagina di login di WordPress


La pagina di login di WordPress è uno di quegli aspetti che solitamente tutti i produttori di temi più o meno complessi tralasciano, lasciando inalterato il layout grafico offerto di default. Ma avere una pagina di login personalizzata, offre quel plus al tuo sito, un valore aggiunto che si può raggiungere in poco tempo e con un piccolo sforzo.
Ma oltre all’aspetto grafico, analizziamo anche il fattore sicurezza che puoi aumentare con semplici e banali accorgimenti.

  • Leggi l'articolo, ti bastano solo 6 minuti, 48 secondi
    Sei di fretta? Scarica il PDF e consultalo quando vuoi!

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.


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( '&', '&amp;', 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.



Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo



Code4Life ti è stato utile? Sostienici con una donazione!

Dona con PayPal

Hai trovato interessante l’articolo? Allora ti consiglio di leggere:

Realizzare uno scroll top animato con jQuery

Realizzare uno scrolltop con jQuery


Ecco un semplicissimo script che ti permetterà di creare un pulsante ScrollTop per tornare ad inizio pagina con un effetto animato.

Come personalizzare l'excerpt di WordPress

Come personalizzare l’excerpt di WordPress


Vediamo in questo articolo come personalizzare l’excerpt (riassunto), ovvero il testo che viene solitamente richiamato nel tema, ad esempio, nelle pagine di archivio e nei loop per introdurre gli articoli.

Oppure cerca tra gli articoli correlati


Qualche dubbio? Ecco le opinioni degli altri utenti

Ciao ragazzi e complimenti per l’articolo veramente ben descritto e molto interessante.
Io avrei una domanda da farvi riguardo le notifiche di errore che appaiono inerendo le credenziali errate.
Nel mio blog ho creato una nuova pagina di login stilizzandola a mio piacimento. Quello che non riesco proprio a fare è appunto far apparire le notifiche di errore quando un utente sbaglia le credenziali.

In risposta a Emanuele

Ciao Emanuele, la prima cosa che consiglierei è di visualizzare il codice sorgente con il tuo browser e verificare la presenza del <div id=”login_error”> che contiene i messaggi di errore. Potrebbe essere solo un problema di CSS. In caso contrario, inviami l’URL del tuo blog ci do uno sguardo

Ciao ragazzi, il messaggio di risposta è interrotto quando parlate di “verificare la presenza del [… interrotto…] che contiene i messaggi d’errore.”
Vi sarei grato se poteste d’are un’occhiata voi. La URL per accedere al mio blog è www.easygain.it/login/

Grazie di cuore!

In risposta a Emanuele

Ciao Emanuele, dopo aver analizzato il tuo sito (a proposito, complimenti!) mi sembra di aver capito che stai utilizzando il plugin Profile Builder. Nella cartella del plugin, al percorso wp-content/plugins/profile-builder/front-end/login.php, dalla riga 225 viene effettuato il controllo per la visualizzazione degli errori, ti consiglierei di partire da lì. Senza poter accedere ai files, non riesco ad approfondire, ma spero di esserti stato d’aiuto e che tu possa risolvere il problema.

Ragazzi indipendentemente dalla mia capacità di risolvere il problema voglio ringraziarvi perché siete stati veramente molto disponibili e in poco tempo avete isolato il problema.

Sono veramente contento di avervi trovato, sia per la qualità dei vostri articoli, sia per la vostra disponibilità.

Un forte abbraccio e grazie di cuore!

In risposta a Emanuele

Ciao Emanuele, figurati è stato un piacere! Grazie per i complimenti, sono il miglior compenso per il tempo dedicato…
Continua a seguirci!

E tu cosa ne pensi? Condividi la tua opinione e discutiamone insieme
La tua email non sarà resa pubblico o utilizzata per inviarti spam, te lo prometto

Iscrivimi alla newsletter per ricevere news ed aggiornamenti
Utilizziamo piattaforme di terze parti per l’invio di newsletter. (Privacy Policy)
Tienimi aggiornato su questo articolo
Ricevi una email di notifica quando qualcuno scriverà un commento a questo articolo. (Privacy Policy)
Ricorda i miei dati per la prossima volta che scriverò un commento
Il tuo nome e la tua email verranno salvati in un cookie in questo browser. (Privacy Policy)