Vai al contenuto

Blog web design, grafica e dintorni

personalizzare la schermata di login in wordpress, immagine articolo blog web design

Come personalizzare la pagina login wordpress senza plugin

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.

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.

Passando da così, login wordpress di default
A così, login wordpress personalizzato

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

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



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.

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' );

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;}

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

  1. 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.
  2. Dalla cartella media clicca su “copia l’URL negli appunti” e sostituisci il percorso nel codice
  3. 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;}

Per farlo segui questi passaggi:

  1. Carica il tuo logo nella cartella media, meglio se in formato .png in modo che lo sfondo risulti trasparente sullo sfondo colorato.
  2. 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).
  3. Dalla cartella media clicca su “copia l’URL negli appunti” e sostituisci il percorso nel codice
  4. 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;}

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' );

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;}

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 CSSFUNZIONALITÀ SPECIFICHE
body.loginCambia il colore di sfondo della pagina, puoi anche inserire una sfumatura
body.login div#login h1 aSostituisce il logo di default con il tuo
body.login div#login p#nav aModifica il link “Password dimenticata?”
body.login div#login p#nav a:hoverModifica l’hover del link “Password dimenticata?”
body.login div#login p#backtoblog aModifica il link “Torna al sito”
body.login div#login p#backtoblog a:hoverModifica l’hover del link “Torna al sito”
body.login div#login a.privacy-policy-linkModifica il link “Privacy Policy”
body.login div#login form#loginformModifica il box, di default bianco, che contiene i campi del form
body.login div#login form#loginform p labelModifica le etichette dei campi del form
body.login div#login form#loginform inputModifica i campi del form
body.login div#login form#loginform input#user_loginModifica specificatamente il campo nome utente del form
body.login div#login form#loginform input#user_passModifica specificatamente il campo password del form

Ti è stato di aiuto?
Ora sai personalizzare la pagina login wordpress!