Web designer e fotografo freelance a Forlì e in tutta Italia

BLOG DI WEB DESIGN

MODIFICA IL LOGIN DI WORDPRESS SENZA PLUGIN

ARGOMENTI DELL'ARTICOLO

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.

login wordpress

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 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.

login wordpress personalizzato

Ti piace l'articolo? Condividilo!

Siti web Forlì

MATTEO DE MARIA

WEB DESIGNER FREELANCE

Ciao! Mi chiamo Matteo e sono un web designer e fotografo freelance di Forlì. Progetto e realizzo siti web  e e-commerce professionali su misura, ottimizzati per dispositivi mobili e motori di ricerca, facili da utilizzare e gestire. Tutti i siti da me realizzati sono aggiornabili in modo autonomo dal cliente utilizzando un’interfaccia veloce, semplice ed intuitiva.

I MIEI SERVIZI

ULTIMI ARTICOLI