Vuoi modificare la grafica del login di WordPress ma non sai come fare?
Non vuoi installare l’ennesimo plugin per non appesantire il tuo sito?
Continua a leggere e ti mostrerò come fare con poche righe di codice.
I CODICI PHP E CSS
Prima di tutto devi sapere che tutte le pagine web sono formate da diversi tipi di codici (php, html…), ognuno con una precisa funzione.
Quelli che utilizzeremo noi per modificare il login di WordPress sono il PHP e il CSS.
Vediamoli nel dettaglio.
PHP
Acronimo ricorsivo di Hypertext Preprocessor, è un linguaggio di scripting interpretato, originariamente concepito per la programmazione di pagine web dinamiche. Attualmente è principalmente utilizzato per sviluppare applicazioni web lato server.
CSS
Acronimo di Cascading Style Sheets, è un linguaggio usato per definire la formattazione di siti web, come i colori, i font e la posizione degli elementi che compongono una pagina web.
E ora veniamo al lato pratico e vediamo come personalizzare il login di WordPress che, diciamocelo, è abbastanza anonimo e brutto da vedere.
USA UN TEMA CHILD
Attenzione! Ricordati sempre di lavorare sul tema child, altrimenti ad ogni aggiornamento del tema perderai tutte le modifiche apportate. Questa è una delle regole base di WordPress.
Se non sai cos’è un tema child o non sai come crearne uno, fai una semplice ricerca su Google. In futuro scriverò un articolo sul mio blog anche su questo argomento.
DOVE SCRIVERE IL CODICE
Dalla bacheca di WordPress vai in
ASPETTO >> EDITOR DEL TEMA
Seleziona dalla colonna a destra il file function.php
Ora che sei dentro il file function.php, puoi copiare e incollare il codice qui sotto.
/**
* @snippet Login DMM WEB DESIGN | WordPress
* @version 1.1
* @author Matteo De Maria
* @compatible WordPress 6.0
*/
add_action( 'login_enqueue_scripts', 'dmmwebdesign_login_logo' );
function dmmwebdesign_login_logo() {
?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(/wp-content/uploads/2022/02/dmm-web-design-logo-header.png); /**devi inserire il percorso dell'immagine del tuo logo*/
height: 40px;
width: 400px;
background-size: contain;
background-repeat: no-repeat;
background-color: transparent;
}
/**cambia il colore di sfondo della pagina*/
body {
background: #ffffff !important;
color: #28282d !important;
}
/**cambia il colore di sfondo del form*/
.login form {
background: #28354f !important;
color: #ffffff !important;
box-shadow: 0 0px 10px #000 !important;
border: none !important;
}
/**cambia i colori del pulsante*/
.wp-core-ui .button-primary {
background: #c6b496 !important;
border-color: #c6b496 !important;
color: #ffffff !important;
}
/**nasconde il selettore della lingua*/
.language-switcher {
display: none;
}
/**modifica la larghezza del form*/
#login {
width: 400px !important;
padding: 10% 0 0 !important;
}
</style>
<?php
}
add_filter( 'login_headerurl', 'dmmwebdesign_login_logo_link' );
function dmmwebdesign_login_logo_link( $url ) {
return home_url( '/' );
}In questo caso nel codice PHP ho già inserito anche del codice CSS per modificare i colori dello sfondo e del pulsante e nascondere il selettore delle lingue.
Ora puoi modificare i colori (qui puoi trovare i codici dei tuoi colori preferiti) a tuo piacimento.
Se hai fatto tutto correttamente, dovresti aver raggiunto un risultato simile al mio.
