Come personalizzare la pagina Login di WordPress

Personalizzare il login di WordPress, ovvero la pagina di accesso al backend del proprio sito internet, permette di rendere l’esperienza di login unica rispetto al modello classico preimpostato da WordPress.

Inoltre, che tu stia lavorando per un progetto personale, o sviluppando un’idea per un tuo cliente, questa personalizzazione rende il tutto più professionale e meno monotono.
In questo modo, entrando nella pagina di login del proprio sito WordPress (solitamente tramite miosito.com/wp-admin/) potremo avere una grafica personalizzata nei colori, nello sfondo, nel logo, ecc…

In questa guida andremo a vedere come modificare la pagina di accesso di WordPress in due modi differenti.
Il primo sarà per chi cerca una soluzione veloce e senza l’uso di righe di codice, mentre la seconda vedrà l’utilizzo del child theme.

Personalizzare la pagina login di WordPress con un plugin

L’uso di un plugin per modificare la pagina login è sicuramente il metodo più semplice, e non richiede particolari competenze.
Il plugin che ti vogliamo consigliare è Custom Login Page Customizer – LoginPress, sviluppato da WPBrigade.

Il plugin è scaricabile gratuitamente sulla repository di WordPress, ma ha anche una sua versione premium che offre la possibilità di caricare dei template già configurati, di utilizzare i Google Fonts e di attivare il Google ReCaptcha.

Inoltre, attraverso l’acquisto di ulteriori addons in accoppiata al plugin, è possibile ampliare le funzioni del plugin stesso, ad esempio, la possibilità di modificare i link di login o l’utilizzo del Social Login.

Una volta installato e attivato il plugin, non dovremo fare altro che entrare nel pannello “LoginPress – Customizer“.
Tutte le modifiche che effettueremo saranno visibili in tempo reale, questo è molto comodo perché ci permette di capire sin da subito se una modifica ci piace oppure no.

Le opzioni di questo plugin si trovano all’interno del customizer di WordPress, ovvero quella sezione dove è possibile modificare a visuale diversi aspetti del sito. Con il menu a sinistra 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

È possibile modificare lo stile della pagina login di WordPress anche attraverso il Child Theme. Questa scelta può essere utile nel caso non volessimo appesantire il nostro sito utilizzando un plugin per personalizzare la pagina di login di WordPress.

Innanzitutto, se non sai cosa sia un Child Theme, ti invitiamo a leggere attentamente la nostra guida a riguardo. Sapere come creare e gestire un child theme è molto importante e ti permetterà di effettuare svariate modifiche al tuo sito WordPress senza avere il pensiero di perderle ad ogni aggiornamento del tema.

Attraverso il Child Theme, nel file functions.php, andiamo ad aggiungere un foglio di stile dedicato esclusivamente alla pagina login.
Andiamo ad incollare la funzione PHP riportata qui in basso 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 ciò, nella cartella principale del nostro child theme, creiamo un file chiamato “style-login.css” dove potremo inserire tutte le regole CSS che vogliamo per personalizzare la nostra pagina di login.

Modificare lo sfondo nella pagina login di WordPress

Facciamo un esempio: supponiamo di voler inserire un’immagine di sfondo personalizzata nella pagina di login.
Tutto ciò che dovremo fare sarà quello di aprire il file “style-login.css” creato precedentemente nel child theme, e incollare questo codice:

body.login{
     background-image: url('inserisci qui il link all'immagine');
     background-repeat: no-repeat;
}

Non resta che sostituire la scritta “Inserisci qui il link all’immagine” con l’indirizzo dell’immagine che vuoi applicare come sfondo.

Dato che dovrai coprire l’intera area area dello schermo dietro al modulo di login, ti consigliamo di utilizzare un’immagine con risoluzione 1920x1080px, avendo cura di ottimizzarla e comprimerla per evitare che pesi eccessivamente.

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) utilizzato nell’esempio, con il colore che preferisci, a seconda dei tuoi gusti personali.

Modificare il logo nella pagina di login di WordPress

Un altro esempio, sempre utilizzando il child theme creato precedentemente, è quello di sostituire il logo di WordPress con un logo personalizzato.

Per fare ciò avremo bisogno di un logo non troppo grande, se vogliamo utilizzare un’immagine quadrata possiamo optare per delle dimensioni di 80x80px.

Se invece vogliamo inserire un logo rettangolare (come nel caso dell’esempio più in basso), possiamo utilizzare delle dimensioni di 300x100px. L’importante è evitare di superare i 320px, che è la larghezza del modulo di login della pagina.

Apriamo il file “style-login.css” creato precedentemente nel child theme, e incolliamo questo codice CSS:

body.login div#login h1 a {
	background-image: url('indirizzo del logo');
	background-size: 300px 100px;
	width: 300px;
	height: 100px;
}

Ora non ci resta che sostituire la scritta “indirizzo del logo” con l’URL del logo che vogliamo mostrare, e impostare correttamente i valori di larghezza e altezza in base alle dimensioni del logo scelto.

I selettori della pagina di login di WordPress

Ecco un elenco dei vari selettori CSS della pagina di login di WordPress, in modo da capire facilmente quali utilizzare e cosa andremo a modificare.

A questo punto, non ti resta che scegliere il selettore CSS a cui vuoi effettuare una modifica, aprire il file “style-login.css” e dar sfogo alla tua fantasia 🙂

Se non sei pratico di CSS, non vuoi utilizzare un plugin e vuoi comunque modificare la pagina login di WordPress, ti consigliamo di contattare l’assistenza WordPress di WP Special, sapranno come darti una mano.

Conclusioni

Come hai potuto vedere, la modifica della pagina login di WordPress è molto semplice, e permette di raggiungere una personalizzazione molto avanzata.
In entrambe i casi, sia che tu preferisca usare un plugin, o effettuare il lavoro tramite un Child Theme, avrai un risultato professionale.

E tu cosa ne pensi della personalizzazione della pagina di login di WordPress? Lo hai già fatto o ci stai pensando? Hai utilizzato un plugin o lo hai fatto in altro modo? Rispondi nei commenti, siamo curiosi 🙂