Webmarcello
  • About Me
  • Services
    • Web Development
    • SEO
    • Responsive Website
    • Hosting and Domain Support
  • Portfolio
  • Blog
  • Contact Me
Select Page

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

by admin | Dec 19, 2019 | 2 comments

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:

PHP
1
2
3
4
5
6
7
8
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:

CSS
1
2
3
4
5
6
7
        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:

CSS
1
2
3
4
5
6
7
8
9
        .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:

CSS
1
2
3
        .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:

login_page_wordpress

2 Comments

  1. rardgam on December 22, 2019 at 3:46 pm

    i am from Italy hello. Can you help me translate? /rardor

    Reply
    • admin on December 23, 2019 at 11:52 pm

      Si certo. Mandami pure un messaggio privato o email

      Reply

Submit a Comment Cancel reply

Your email address will not be published. Required fields are marked *

Last Articles

  • WP Clickable Background – WordPress Plugin
  • Cos’e’ uno Shortcode e come crearlo e gestirlo in WordPress
  • Che cos’e’ “Failed to load resource: net::ERR_BLOCKED_BY_CLIENT” e come risolverlo.

Find Out More

  • Web Development
  • SEO
  • Responsive Website
  • Hosting and Domain Support

Whatsapp Me

I will reply as soon as possible ...

Powered by Marcello Perri using Wordpress, open source software.