Come personalizzare la pagina login wordpress senza plugin

Perchè personalizzare la pagina login wordpress?

Personalizzare la pagina di login del nostro sito, o soprattutto del sito che stiamo costruendo per il nostro cliente fa parte di quelle piccole cose che danno quel tocco di professionalità in più al nostro lavoro di web designer.

Ogni dettaglio personalizzato rende il sito che stiamo realizzando un prodotto “cucito su misura” per il nostro cliente, aumentando la nostra autorevolezza e credibilità ai suoi occhi.

In questo articolo ho voluto raccogliere alcuni consigli pratici e del codice pronto all’uso che potrai utilizzare per rendere la pagina di login del tuo sito wordpress personalizzata.

Ma prima: cos’è la pagina login wordpress?

La pagina di login, è la pagina di accesso al backend o amministrazione di un sito e quindi visibile solo a chi lo implementa e al nostro cliente nel momento in cui accede al sito per inserire news al suo blog o visualizzare le statistiche del sito.

Proprio perchè questa pagina è visibile solo al nostro cliente il fatto che non sia necessario personalizzarla ma il fatto di averlo fatto comunque dimostra la nostra attenzione e cura ai dettagli e stai sicur@ che non passerà inosservata agli occhi del tuo cliente.

Ma passiamo alla pratica e vediamo subito come si fa. Certo ci sono plugin per personalizzare la pagina di login, ma puoi tranquillamente farlo via codice, il sito risulterà più leggero.
Ti spiego sotto passo passo come fare.

Ecco un esempio del risultato che puoi ottenere

Passando da così, login wordpress di default

A così, login wordpress personalizzato

Personalizzare il login wordpress in 8 semplici passaggi:

Clicca sugli argomenti dell’elenco puntato per leggere le specifiche nel dettaglio

Creare il file custom-login.css nel child theme
Inserire il codice in function.php per richiamare il file con gli stili
Aggiungere colore di sfondo
Aggiungere un’immagine di sfondo
Sostituire il logo di default con il tuo
Cambiare il link sul nuovo logo
Cambiare colore ai link
Selettori css specifici per la pagina di login

Piccola, ma fondamentale premessa: è assolutamente fondamentale, prima di tutto assicurarsi di avere attivo il Child theme, o tema child, sul sito.

Lavorare sul tema child ci permette di aggiungere funzionalità al tema “genitore”, o parent theme, senza perdere le personalizzazioni fatte nel momento in cui andiamo ad aggiornare il tema, approfondirò l’argomento in un prossimo articolo dedicato.

Crea il file custom-login.css nel child theme

Prima di tutto, i files su cui dobbiamo lavorare sono: function.php e poi dobbiamo creare un file, che ho chiamato custom-login.css ma potete chiamare come volete (a patto di richiamarlo correttamente nel codice).

Quindi, creiamo il file custom-login.css che dovrà trovarsi nella stessa cartella del tema child, dove si trova il file function.php. Il file può essere creato e aggiunto via FTP.

Codice da inserire in function.php del child theme

Inserisci questo codice per richiamare lo stile personalizzato della pagina di login.

/* richiamare il file css con lo stile personalizzato per la pagina di login wordpress */

function wpspecial_child_style_login() {
wp_enqueue_style( ‘wp-special-style-login’, get_stylesheet_directory_uri() .’/custom-login.css’);
}
add_action( ‘login_enqueue_scripts’, ‘wpspecial_child_style_login’ );

Come cambiare colore al background della pagina login wordpress

Inserisci questo codice nel file custom-login.css per modificare il colore di sfondo della pagina di login, fai attenzione a scegliere un colore che metta in risalto il tuo logo e non renda illeggibili i testi sullo sfondo (es. Password dimenticata? ecc)

/* inserisci il colore che preferisci sostituendo #000000; con il codice del tuo colore */

body.login {
background-color: #000000;
}

Come inserire una immagine di background nella pagina login wordpress

Se invece preferisci inserire un’immagine di sfondo al posto di un colore puoi farlo in questo modo:

Carica la tua immagine nella cartella media, deve essere grande ma leggera. Tieni conto che su mobile ne visualizzerai solo una piccola parte, ti consiglio un formato di almeno 1920 x 1080 px.
Dalla cartella media clicca su “copia l’URL negli appunti” e sostituisci il percorso nel codice
Nel codice che trovi sotto ho impostato che l’immagine di fondo non venga ripetuta e occupi tutto lo spazio a disposizione, se utilizzi un’immagine da ripetere, come ad esempio un pattern modifica questi parametri.

/* inserisci la tua immagine di sfondo sostituendo il percorso */

body.login {
background-image: url(“https://www.tuosito.it/wp-content/uploads/anno/mese/sfondo-login.jpg“);
background-repeat: no-repeat;
background-size: cover;
}

Come sostituire il logo wordpress con il tuo logo

Per farlo segui questi passaggi:

Carica il tuo logo nella cartella media, meglio se in formato .png in modo che lo sfondo risulti trasparente sullo sfondo colorato.
Attenzione alle dimensioni, considera che un immagine larga 250 px è già molto grande, il logo di default di wordpress è 80 x 80 px (nell’esempio la mia immagine si chiama logo.png ed è grande 250 x 60 px, sostituisci con i valori della tua immagine e il suo nome).
Dalla cartella media clicca su “copia l’URL negli appunti” e sostituisci il percorso nel codice
Inserisci le dimensioni dell’immagine in background-size e width e height.

/* inserisci il percorso della tua immagine e le sue dimensioni */
body.login div#login h1 a {
background-image: url(“https://www.tuosito.it/wp-content/uploads/anno/mese/logo.png“);
background-size: 250px 60px;
width: 250px;
height: 60px;
background-repeat: no-repeat;
}

Come cambiare il link sul logo nel login wordpress

Ora che abbiamo caricato il nostro logo dobbiamo sostituire l’url del link associato, per fare in modo che cliccandoci sopra si apra la home del nostro sito.

Per farlo dobbiamo aggiungere altro codice nel file function.php, mi raccomando sempre del child theme, aggiungiamo questo codice subito sotto a quello inserito in precedenza.

/* questo codice modifica url e title del logo, sostituisci Titolo con testo che preferisci */

function custom_login_logo_url() {
return home_url();
}
add_filter( ‘login_headerurl’, ‘custom_login_logo_url’ );
function custom_login_url_title() {
return ‘Titolo’;
}
add_filter( ‘login_headertitle’, ‘custom_login_url_title’ );

Come cambiare colore ai link nella pagina login wordpress

Se cambiando il colore di sfondo o inserendo un’immagine i testi sotto i campi per la login non si leggono più puoi sostituire il colore dei link e il colore al passaggio del mouse.

Questo codice ti permette di cambiare colore a “Password dimenticata?” “Torna al sito” e “Policy Privacy“

/* inserisci il colore che preferisci sostituendo #000000; con il codice del tuo colore */
body.login div#login p#nav a, body.login div#login p#backtoblog a, body.login div#login a.privacy-policy-link {
color:#000000;
}

/* poi sostituisci #000000; con il codice del tuo colore per cambiare il colore al passaggio del mouse */
body.login div#login p#nav a:hover, body.login div#login p#backtoblog a:hover, body.login div#login a.privacy-policy-link:hover {
color:#000000;
}

Selettori css specifici per la pagina login wordpress

Quelle che ti ho mostrato sono le modifiche più rilevanti e di maggior impatto grafico per la personalizzazione della pagina di login. Ci sono molti altri selettori css che puoi aggiungere e modificare per una personalizzazione più approfondita.

Sotto troverai una tabella rissuntiva.

SELETTORI CSS	FUNZIONALITÀ SPECIFICHE
body.login	Cambia il colore di sfondo della pagina, puoi anche inserire una sfumatura
body.login div#login h1 a	Sostituisce il logo di default con il tuo
body.login div#login p#nav a	Modifica il link “Password dimenticata?”
body.login div#login p#nav a:hover	Modifica l’hover del link “Password dimenticata?”
body.login div#login p#backtoblog a	Modifica il link “Torna al sito”
body.login div#login p#backtoblog a:hover	Modifica l’hover del link “Torna al sito”
body.login div#login a.privacy-policy-link	Modifica il link “Privacy Policy”
body.login div#login form#loginform	Modifica il box, di default bianco, che contiene i campi del form
body.login div#login form#loginform p label	Modifica le etichette dei campi del form
body.login div#login form#loginform input	Modifica i campi del form
body.login div#login form#loginform input#user_login	Modifica specificatamente il campo nome utente del form
body.login div#login form#loginform input#user_pass	Modifica specificatamente il campo password del form