Come editare la pagina di login di wordpress con CSS e PHP

Come personalizzare e migliorare la grafica della pagina di login di wordpress cambiando il logo e lo sfondo con CSS e PHP.

Ho di recente avuto la necessita’ di cambiare lo stile della pagina di login di WordPress, questo puo’ tornare molto utile se volete dare un tocco piu’ professionale al vostro sito, soprattutto se il sito e la dash-board di WordPress ha molti accessi da parte di autori e scrittori.

Il file che gestisce l’accesso a WordPress si chiama wp-login.php e si trova nella cartella principale dove avete installato il vostro sito, se volete e se avete la possibilita’ di editare e capire il codice PHP in questa pagina siete liberi di farlo, ma il vostro codice sara’ perso una volta che aggiornerete wordpress. Quindi la cosa migliore da fare e’ creare una funzione PHP che importi nuovo codice CSS nella pagina di login.

Per fare cio’ useremo l’hook ‘login_enqueue_scripts‘ che aggiunge uno script alla pagina di login dinamicamente. Allora dobbiamo create una funzione PHP e connettere il nome della funzione con l’hook menzionato qua sopra. Per fare questo dobbiamo editare il file ‘functions.php‘, andate su ‘Aspetto‘, poi su ‘Editor‘ e cercate il file ‘functions.php‘ sulla colonna di destra. Cliccateci sopra.

Come al solito io non mi sentiro’ responsabile dei disastri che voi farete in questo file.

Ora aggiungete il seguante codice PHP alla fine del file:

function my_login_page_custom_css() { ?>
    <style type="text/css">
       /* CSS codice qua  */
    </style>
<?php }

//questo carica la funzione sopra nella login page
add_action( 'login_enqueue_scripts', 'my_login_page_custom_css' );

Bastera’ aggiungere del codice CSS tra i tag <style></style> nella funzione qua sopra e il codice sara’ importato nella pagina di login. Ovviamente dovreste fare attenzione che il codice non si sovrapponga e aggiungere ‘!important’ alla fine dei comandi CSS quando necessario. Ora cliccate sul pulsante ‘Update Page‘ alla fine della pagina.

Ora vediamo come modificare specifiche parti del login.

Diciamo che vogliamo modificare lo sfondo della pagine e aggiungere un’immagine, allora possiamo aggiungere il codice CSS seguente che cambia lo sfondo della classe body.login:

        body.login {
            background-image: url(http://webmarcello.co.uk/wp-content/uploads/2016/08/light-blue-background-2-e1565360767646.jpg);
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }

Ovviamente dovete sostituire l’url tra le parentesi con l’url di un immagine a vostra scelta o un colore.

Ora vogliamo cambiare il logo di WordPress con il logo di questo sito, quindi dobbiamo cambiare la classe .login h1 a e aggiungere il codice seguente:

        .login h1 a{
            background-image: url(http://webmarcello.co.uk/wp-content/uploads/2016/08/logo2-1-e1559241171735.png) !important;
            width: 100% !important;
            -webkit-background-size: 100% !important;
            -moz-background-size: 100% !important;
            -o-background-size: 100% !important;
            background-size: 100% !important;
            height: 60px !important;
        }

Ora voglio aggiungere un ombra intorno al form centrale della pagina, quindi mi basta aggiungere il seguente codice:

        .login form{
            box-shadow: 0 20px 30px rgba(0,0,0,0.4) !important;
        }

e cosi’ via, insomma dovete solo giocare con il CSS cercando di avere il risultato che piu’ vi piace.

Ecco il risultato finale: