Come personalizzare la pagina login di WordPress: ecco la guida
Come personalizzare la pagina login di WordPress
Negli articoli precedenti ti abbiamo già parlato di WordPress e delle sue funzionalità. Adesso, in questo articolo, vogliamo spiegarti come personalizzare la pagina login della piattaforma software più conosciuta e usata.
Nello specifico si tratta di una pagina di accesso al backend del proprio sito web, il quale permette di rendere l’esperienza di login unica rispetto al modello classico preimpostato da WordPress.
Ci teniamo a ricordarti che con una lettura dettagliata e un po’ di pratica, sarai bravo ad entrare nel mondo di WordPress. Se continui a leggere, noterai che entrando nella pagina di login del proprio sito WordPress – solitamente tramite miosito.com/wp-admin/ – potrai avere una grafica personalizzata nei colori, nello sfondo, nel logo, e tutto ciò che desideri.
Bene, se sei in cerca di un tema per WordPress affidabile e, al contempo, semplice ti consigliamo Divi!
WordPress con un plugin
Per modificare la pagina login con plugin è sicuramente un metodo facile che non richiede preparazioni. Il plugin che ti consigliamo è Custom Login Page Customizer – LoginPress, sviluppato da WPBrigade.
Esso è scaricabile gratuitamente sulla repository di WordPress, ma ha anche una sua versione premium che offre la possibilità di caricare dei temi già configurati, di utilizzare i Google Fonts e di attivare il Google ReCaptcha.
Ottimo vero?
Oltre a queste possibilità, attraverso l’acquisto di ulteriori addons in accoppiata al plugin, è possibile ampliare le funzioni del plugin stesso, come: modificare i link di login o l’utilizzo del Social Login.
Una volta installato e attivato il plugin, non dovrai fare altro che entrare nel pannello “LoginPress – Customizer“. Tutte le modifiche che effettuerai saranno visibili in tempo reale, questo ti permette di capire se la tua modifica può piacere agli utenti.
Le opzioni di questo plugin si trovano all’interno del customizer di WordPress, cioè quella sezione dove è possibile modificare i diversi aspetti del sito internet. Inoltre, sarà possibile applicare uno sfondo al Background, cambiare il logo e tutti gli stili della pagina login di WordPress.
Personalizzare la pagina login di WordPress con il Child Theme
Se vuoi modificare lo stile della pagina login di WordPress attraverso il Child Theme, sappi che questa alternativa può essere utile nel caso non volessi caricare troppo il tuo sito.
Child Theme ti permette di effettuare tantissime modifiche al tuo sito WordPress, senza il rischio di poterle perdere ad ogni aggiornamento del template.
Attraverso il Child Theme, nel file functions.php, dovrai aggiungere un foglio di stile dedicato esclusivamente alla pagina login; successivamente dovrai incollare la funzione PHP (la trovi qui sotto) per dichiarare un foglio CSS nella pagina di login di WordPress:
function wpspecial_child_style_login() {
wp_enqueue_style( ‘wp-special-style-login’, get_stylesheet_directory_uri() .’/style-login.css’);
}
add_action( ‘login_enqueue_scripts’, ‘wpspecial_child_style_login’ );
Fatto questo passaggio, procedi creando un file chiamato “style-login.css” dove potrai inserire tutte le regole CSS per personalizzare la tua pagina di login.
Ecco un esempio: se hai deciso di inserire un’immagine di sfondo personalizzata nella pagina di login, dovrai aprire il file “style-login.css” (creato precedentemente nel child theme) ed, infine, incollare questo codice:
body.login{
background-image: url(‘inserisci qui il link all’immagine’);
background-repeat: no-repeat;
}
Non ti resta che sostituire la scritta “Inserisci qui il link all’immagine” con l’indirizzo dell’immagine che vuoi applicare come sfondo.
NOTA IMPORTANTE: ti consigliamo di utilizzare un’immagine con risoluzione 1920x1080px, avendo cura di ottimizzarla e comprimerla per evitare che il peso sia eccessivo.
Se invece vuoi solo cambiare il colore di sfondo senza aggiungere un’immagine, puoi utilizzare questo codice CSS:
body.login {
background: #ffffff;
}
Puoi sostituire il colore bianco (#ffffff) con il colore che preferisci.
Modificare il logo nella pagina di login di WordPress
Utilizzando il child theme, potrai cambiare il logo di WordPress con un logo personalizzato.
Per fare ciò dovrai procurarti un logo non troppo grande o un’immagine quadrata dalle dimensioni di 80x80px.
Nel caso tu voglia inserire un logo rettangolare puoi utilizzare un’immagine dalle dimensioni di 300x100px. (L’importante è evitare di superare i 320px).
Successivamente apri il file “style-login.css” creato precedentemente nel child theme, e incolla il seguente codice CSS:
body.login div#login h1 a {
background-image: url(‘indirizzo del logo’);
background-size: 300px 100px;
width: 300px;
height: 100px;
}
Dopo questa operazione dovrai sostituire la scritta “indirizzo del logo” con l’URL del logo scelto e impostare correttamente i valori di larghezza e altezza in base alle dimensioni di esso.
Adesso, per tutte le modifiche che vorrei fare, ti mostriamo un elenco dei vari selettori CSS
Come personalizzare la pagina login di WordPress
– Lo sfondo della pagina: body.login
– Il logo di WordPress: body.login div#login h1 a
– Il box bianco che contiene il form di login: body.login div#login form#loginform
– Le etichette dei campi nome utente e password: body.login div#login form#loginform p label
– I campi nome utente e password: body.login div#login form#loginform input
– Solo il campo nome utente: body.login div#login form#loginform input#user_login
– Solo il campo password: body.login div#login form#loginform input#user_pass
– Il campo ricordami: body.login div#login form#loginform p.forgetmenot
– Il pulsante di login: body.login div#login form#loginform p.submit input#wp-submit
– Il link hai dimenticato la password: body.login div#login p#nav a
– per tornare al sito: body.login div#login p#backtoblog
– Il link alla privacy policy : body.login div#login a.privacy-policy-link
A questo punto, non ti resta che scegliere il selettore CSS a cui vuoi effettuare una modifica, aprire il file “style-login.css” e mettere in pratica le tue idee!
