Personalizzare login WordPress CSS permette di modificare colori, spaziature, pulsanti e logo della schermata di accesso senza installare plugin aggiuntivi. La soluzione più sicura consiste nell’usare un tema child, così gli aggiornamenti del tema principale non cancellano le personalizzazioni. Il CSS viene caricato tramite l’hook login_enqueue_scripts, mentre il logo HTML può essere aggiunto con il filtro login_message. Il codice seguente funziona con WordPress moderno e mantiene separati struttura, stile e immagine del marchio. Prima di modificare i file è consigliabile eseguire un backup e verificare l’accesso al sito tramite FTP o Gestione file dell’hosting. Il risultato è una pagina di login coerente con il design del sito, senza intervenire sui file del core di WordPress.

Dove inserire il codice senza usare plugin

Il posto consigliato è il file functions.php del tema child attivo. Un tema child evita che il codice venga perso quando il tema principale riceve un aggiornamento; modificare direttamente il tema principale è invece una soluzione temporanea e rischiosa.

Il file si trova normalmente in:

/wp-content/themes/nome-tema-child/functions.php

Se il tema child non contiene ancora functions.php, è possibile creare il file con un editor di testo semplice. Il file deve iniziare con <?php e non dovrebbe contenere il tag di chiusura ?>, perché eventuali spazi bianchi finali possono causare errori di intestazione.

Prima di incollare il codice, preparare un’immagine del logo, preferibilmente in formato PNG o WebP. Nel codice seguente il file deve essere salvato nella cartella:

/wp-content/themes/nome-tema-child/assets/images/logo-login.png

Il formato SVG è utilizzabile solo se il file proviene da una fonte affidabile, perché un SVG non verificato può contenere codice indesiderato.

Come aggiungere il logo HTML alla pagina di accesso

WordPress genera il collegamento principale della pagina di login attraverso un elemento h1. I filtri login_headerurl e login_headertext permettono di modificarne destinazione e testo, ma non di inserire liberamente un nuovo layout HTML. Per ottenere un logo HTML personalizzato è quindi possibile nascondere il logo predefinito e aggiungere un blocco con login_message.

Inserire nel file functions.php del tema child questo codice:

<?php

function bd_personalizza_login_logo_html( $message ) {
$logo_url = get_stylesheet_directory_uri() . '/assets/images/logo-login.png';

$brand = sprintf(
'<div class="bd-login-brand">
<a href="%1$s" aria-label="Vai alla home page">
<img src="%2$s" alt="Logo del sito">
</a>
</div>',
esc_url( home_url( '/' ) ),
esc_url( $logo_url )
);

return $brand . $message;
}
add_filter( 'login_message', 'bd_personalizza_login_logo_html' );

function bd_personalizza_login_link() {
return home_url( '/' );
}
add_filter( 'login_headerurl', 'bd_personalizza_login_link' );

function bd_personalizza_login_testo() {
return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'bd_personalizza_login_testo' );

Il filtro login_message inserisce il blocco HTML prima del modulo di accesso e conserva anche eventuali messaggi già prodotti da WordPress. Le funzioni esc_url() proteggono gli indirizzi usati nell’attributo href e nell’attributo src, mentre il testo alternativo rende il logo comprensibile agli strumenti di accessibilità.

Il percorso dell’immagine deve corrispondere esattamente al file presente nella cartella del tema child. Se il logo non appare, controllare prima il nome del file, le maiuscole e la posizione della cartella assets/images.

Come personalizzare login WordPress CSS con codice sicuro

Lo stile della pagina di accesso deve essere caricato con login_enqueue_scripts, che WordPress riserva agli asset della schermata di login. In questo modo il CSS non viene caricato inutilmente nelle altre pagine del sito.

Aggiungere subito dopo il codice precedente:

function bd_personalizza_login_css() {
wp_enqueue_style( 'login' );

$css = '
body.login {
background: #f2f4f7;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}

body.login #login {
width: 100%;
max-width: 380px;
padding: 24px;
}

body.login h1 {
display: none;
}

.bd-login-brand {
margin: 0 auto 24px;
text-align: center;
}

.bd-login-brand img {
display: inline-block;
width: auto;
max-width: 220px;
height: auto;
}

body.login form {
border: 0;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(20, 35, 55, 0.12);
padding: 28px;
}

body.login label {
color: #263238;
font-weight: 600;
}

body.login input[type="text"],
body.login input[type="password"] {
border: 1px solid #b8c2cc;
border-radius: 6px;
min-height: 42px;
padding: 0 10px;
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus {
border-color: #2271b1;
box-shadow: 0 0 0 1px #2271b1;
outline: 2px solid transparent;
}

body.login .button-primary {
background: #2271b1;
border-color: #2271b1;
border-radius: 6px;
box-shadow: none;
text-shadow: none;
}

body.login .button-primary:hover,
body.login .button-primary:focus {
background: #135e96;
border-color: #135e96;
}

body.login #backtoblog a,
body.login #nav a {
color: #135e96;
}

@media (max-width: 480px) {
body.login #login {
padding: 16px;
}

body.login form {
padding: 22px;
}
}
';

wp_add_inline_style( 'login', $css );
}
add_action( 'login_enqueue_scripts', 'bd_personalizza_login_css' );

Il codice modifica lo sfondo, la larghezza del modulo, i campi di testo, il pulsante di accesso e i collegamenti inferiori. La regola display: none nasconde il titolo grafico predefinito di WordPress, mentre il blocco .bd-login-brand mostra il logo HTML inserito dal filtro.

I colori #2271b1 e #135e96 sono esempi compatibili con il contrasto tipico dei pulsanti, ma devono essere verificati rispetto al logo e alla palette del sito. Non è corretto impostare testo chiaro su sfondi chiari soltanto per seguire il design: il contrasto deve rimanere leggibile anche da utenti con difficoltà visive.

Come verificare e mantenere la personalizzazione

Dopo il salvataggio, aprire la pagina:

https://www.example.com/wp-login.php

Sostituire www.example.com con il dominio reale del sito. Se il browser mostra ancora il vecchio stile, eseguire un ricaricamento forzato oppure svuotare la cache del browser e quella di eventuali sistemi di caching WordPress o CDN.

La verifica deve includere almeno questi aspetti:

Il logo deve essere visibile e collegato alla home page.
Il testo alternativo deve descrivere correttamente il logo.
Il modulo deve rimanere leggibile su smartphone.
Il pulsante deve mostrare uno stato riconoscibile al passaggio del mouse e alla navigazione da tastiera.
Gli errori di accesso e il recupero della password devono continuare a funzionare.
Il codice PHP non deve generare schermate bianche o errori critici.

Se compare un errore critico subito dopo il salvataggio, ripristinare il file functions.php tramite FTP o Gestione file dell’hosting. Un errore PHP può dipendere da una parentesi mancante, da virgolette modificate o dall’inserimento del codice dentro un’altra funzione.

Per evitare conflitti, non inserire lo stesso CSS anche in Aspetto > Personalizza > CSS aggiuntivo. Usare una sola posizione rende più semplice controllare quale regola prevale e riduce il rischio di stili duplicati.

La personalizzazione resta attiva finché il tema child è attivo. Se si cambia tema, il file functions.php del tema precedente non viene più eseguito e occorre trasferire il codice nel nuovo tema child.

Personalizzare login WordPress CSS senza plugin è sicuro quando il codice viene inserito nel tema child, gli URL vengono sanificati e il logo viene controllato prima della pubblicazione.

Potrebbe interessarti anche:

Mi stanno Rubando il WiFi! Come vedere se qualcuno sta usando la mia rete Wifi senza il mio permesso

FAQ

È possibile, ma non è consigliato perché un aggiornamento del tema può sovrascrivere il file. Il tema child conserva il codice durante gli aggiornamenti.

Controllare che il file si trovi in assets/images/logo-login.png dentro il tema child e che il nome sia identico a quello indicato nel codice. Svuotare anche la cache del browser.

Sì. È sufficiente usare la funzione collegata a login_enqueue_scripts e rimuovere il filtro login_message, lasciando nel CSS soltanto le regole grafiche necessarie.

Il CSS viene applicato alla schermata di accesso del sito in cui è attivo il tema child. In una rete Multisite, il risultato può dipendere dal tema assegnato ai singoli siti.

Sì, ma solo se il file SVG è stato creato o verificato da una fonte affidabile. Per ridurre i rischi, PNG e WebP sono formati più semplici da gestire.

Altri articoli di questa serie: