Customizzare il Login WordPress senza Plugin

Personalizzare la pagina di login tramite il file functions.php è la strada più pulita per evitare l'uso di plugin superflui.

Tuttavia, c'è un aspetto critico da chiarire subito: non inserire mai questo codice nel functions.php del tema genitore. Al primo aggiornamento del tema perderesti tutto. Devi utilizzare il functions.php di un Child Theme, oppure creare un piccolo plugin personalizzato (spesso chiamato mu-plugin o utility plugin).

Ecco come procedere e, soprattutto, le logiche di base di WordPress che lo fanno funzionare.

Modificare l'aspetto estetico (Logo, Sfondo, Colori)

WordPress non carica i normali fogli di stile del frontend sulla pagina di login. Per iniettare del CSS personalizzato in quella specifica pagina, usiamo un Action Hook chiamato login_enqueue_scripts. Questo gancio dice a WordPress: "quando prepari la pagina di login, esegui anche questa funzione".

function custom_login_styles() { ?>
    <style type="text/css">
        /* Modifica il logo */
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/assets/images/custom-logo.png);
            height: 80px;
            width: 320px;
            background-size: contain;
            background-repeat: no-repeat;
            padding-bottom: 20px;
        }
        /* Modifica il colore di sfondo della pagina */
        body.login {
            background-color: #1a1a1a;
        }
        /* Modifica il pulsante di login */
        #wp-submit {
            background-color: #0073aa;
            border-color: #006799;
            box-shadow: none;
            text-shadow: none;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'custom_login_styles' );
 

Nota: Assicurati che il percorso dell'immagine nel CSS punti effettivamente a una directory valida all'interno del tuo tema.

Cambiare l'URL di destinazione del Logo

Di default, cliccando sul logo nella pagina di login, l'utente viene reindirizzato a wordpress.org. Per cambiare questo comportamento e far puntare il logo alla homepage del tuo sito, usiamo un Filter Hook. A differenza delle azioni (che eseguono un'operazione), i filtri intercettano un dato prima che venga stampato a schermo e lo modificano.

Il filtro in questione è login_headerurl.

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

Cambiare il testo alternativo del Logo (Title)

In modo simile al punto precedente, di default il testo mostrato al passaggio del mouse sul logo è "Powered by WordPress". Usiamo il filtro login_headertext per restituire il nome del tuo sito.

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

La richiesta "personalizzare la pagina di login" è molto ampia. Il codice qui sopra copre il 90% delle necessità standard (branding e CSS), ma il login può essere alterato in modi molto più strutturali.