Personalizzare login WordPress

Condividi post

Come personalizzare la pagina login di WordPress.

Vi è mai capitato di voler personalizzare la pagina di login di WordPress? Volete cambiare il logo di WordPress con il vostro logo? Non sapete come si fa? Leggendo questa guida, imparerai come modificare la pagina login di WordPress.  Vedremo come sostituire il logo di default con quello del tuo sito, aggiungere uno sfondo a tua scelta, permettere agli utenti di effettuare l’accesso con i propri account social e altro ancora.

Perché personalizzare la pagina login di WordPress wp-login.php?

Personalizzare la pagina di login di WordPress può essere molto utile per chi gestisce un sito aziendale usato da più persone, chi lavora su un blog con collaboratori esterni, chi ha un sito con forum o area membri, o per chi realizza spazi web e vuole dare un tocco finale al progetto per un cliente. Oppure, può essere semplicemente un accorgimento per rendere ancora più personale il tuo blog.
come personalizzare pagina di login WordPress

Modificare la pagina login di WordPress con Custom Login plugin


Per personalizzare il form di login in WordPress ci sono vari metodi, sia manuale che via plugin… per semplificarti la vita, installa il plugin Custom Login. È molto semplice da utilizzare e permette di personalizzare la grafica di tutta la pagina di login di WordPress tramite semplici clic.
Una volta attivato, potrai accedere alla pagina di configurazione andando su Impostazioni > Custom Login. Un’alternativa a questo plugin può essere anche: Custom Login Page Customizer
Andiamo a configurare Custom Login sezione per sezione.

1. Attivazione pagina login personalizzata

Pur mantenendo il plugin sempre attivo, potrai comunque decidere se usare la pagina login personalizzata oppure quella standard WordPress. Per attivare quella personalizzata, semplicemente spunta la voce “ActivateToggle this plugin on & off.
come personalizzare pagina login WordPress
 

2. Sfondo (sezione HTML)

La seconda sezione della pagina di configurazione è chiamata HTML. Qui puoi scegliere un colore per lo sfondo della pagina ed impostarne il livello di opacità (HTML Background Color). In alternativa, puoi caricare un’immagine a tua scelta, determinarne la posizione, le dimensioni e se deve essere ripetuta sullo schermo.
Per ottenere un risultato professionale molto velocemente, ti consiglio di scegliere uno sfondo di grandi dimensioni e selezionare Flex nel campo HTML Background Size. In questo modo, l’immagine di sfondo si adatterà agli schermi di diverse misure.
Se temi che caricare immagini troppo pesanti possa rallentare il tuo sito, usa uno strumento per ridurne le dimensioni (a me piace Caesium). In alternativa, usa un’immagine più piccola e seleziona repeat nel campo HTML Background Repeat. Se scegli questa opzione, assicurati che lo sfondo che usi sia “seamless”, cioè, che una volta ripetuto sembri un’immagine unica senza interruzioni nel motivo grafico.

3. Logo

In questa sezione puoi caricare un logo a tuo piacimento.
Semplicemente, carica dal tuo PC il file del logo ed inserisci nei campi sottostanti la larghezza e l’altezza in pixel (questo garantisce che il logo appaia bene sulla pagina, senza sovrapporsi agli altri elementi).
Se preferisci, puoi anche disattivare del tutto il logo (rimuovendo quello default WordPress), spuntando la voce “Hide the WP logo”.
come personalizzare la pagina login di WordPress custom login logo
 

4. Login Form

Dopo aver configurato sfondo e logo, lavora sul form vero e proprio. Anche in questo caso, puoi scegliere un colore per lo sfondo (campo Login Form Background Color) o caricare un’immagine (Login Form Background URL) .
Vediamo le altre opzioni:

  • Login Form Radius: questo campo ti permette di rendere arrotondati gli angoli del form. Ti consiglio di usare un valore tra 5 e 50: più alto è il numero, più arrotondati saranno gli angoli;
  • Login Form Border Size: inserisci un numero a tua scelta per aumentare lo spessore del bordo del modulo. Più alto è il numero, più spesso sarà il bordo;
  • Login Form Border Color: qui puoi selezionare il colore del bordo;
  • Login Form Box Shadow e Login Form Box Shadow Color: questi campi servono a personalizzare l’ombra che appare intorno al form. Semplicemente, aumenta il numero di px per ottenere un risultato più pronunciato e seleziona il colore dell’ombra preferisci.

5. Misc

Infine, nella sezione Misc puoi personalizzare gli altri elementi della pagina login.  Nel dettaglio: il colore dei testi all’interno del form (Login Form Label Colour) e colore ed ombra dei link che appaiono sotto al modulo (Below Form Anchor).
custom login misc
 
Se sai codificare e vuoi personalizzare la pagina login di WordPress con ulteriori effetti, puoi inserire i tuoi codici nella sezione Custom HTML/CSS and jQuery.
L’immagine sottostante riassume a quale elemento della schermata login corrisponde ciascuna sezione della pagina di configurazione del plugin:
 
Una valida alternativa a Custom Login per caratteristiche e funzionalità è: Custom Login Creator – Login Page Styler

Metodo manuale per modificare la pagina di login WordPress (wp-login.php) tramite file function.php

Una delle caratteristiche belle di WordPress è che attraverso un unico file si possono aggiungere e modificare funzionalità anche complesse senza necessità di installare componenti esterni.
Il file in questione è sempre il solito “functions.php”. Al riguardo, è assolutamente raccomandabile non modificare il file “functions.php” del tema originale ma creare un child theme e creare un file functions all’interno della sua directory. In questo modo saremo al riparo da aggiornamenti sia al “core” di WP che del template utilizzato.
A questo punto siamo gà a metà dell’opera. Ti bastano queste poche righe di codice da aggiungere al file function.php del tema WordPress in uso per procedere con la personalizzazione del login di WordPress:

function my_login_logo() { ?>
<style type=”text/css”>
/* stile personalizzato */
body
{
background-color: #F5F5F5;
background-image: url(‘immagini/tuofileimmagine.jpg’);
}
body.login div#login h1 a {
background-image: url(/immagini/foto.ico);
background-size: 350px 60px;
padding-bottom: 0px;
width:100%;
}
body.login div#login{width:350px!important;height:60px!important}
</style>
<?php }
add_action( ‘login_enqueue_scripts’, ‘my_login_logo’ );//carichiamo lo stile nella parte head
//modifichiamo l’url a cui deve puntare l’immagine che abbiamo sostituito con la funzione precedente
function my_login_logo_url() {
return “www.tuodominio.it”; //link che punta alla homepage del nostro sito invece che a worpress.org come di default
}
add_filter( ‘login_headerurl’, ‘my_login_logo_url’ );
//definiamo il title del logo ovvero ciò che compare al mouseover
function my_login_logo_url_title() {
return ‘Creare un Blog e Siti Web WordPress: la guida completa online per conoscere WordPress’;
}
add_filter( ‘login_headertitle’, ‘my_login_logo_url_title’ );

Tutto qua, si tratta di una personalizzazione molto semplice che potete utilizzare per modificare a piacimento la vostra  pagina di login all’area amministrazione di WordPress

Conclusione

In questa guida di oggi abbiamo visto come personalizzare la pagina login di WordPress con grafiche a tua scelta ed alcune funzionalità aggiuntive. Lavorare su questa pagina è abbastanza veloce, sia usando i plugin, sia modificando direttamente i codici. Se preferisci avere invece una pagina di login direttamente sul front end del tuo sito e in una pagina specifica destinata all’autenticazione degli utenti o membri allora ti consiglio questo plugin: Theme My Login
E tu avevi mai pensato di personalizzare la pagina di login del tuo sito WordPress? Se l’hai già fatto, quali strumenti hai usato? Oppure hai lavorato direttamente sui codici?
Lascia un commento su questo argomento nell’apposito box in fondo oppure condividi questo articolo se ti è piaciuto o ti èstato di aiuto!

Creato da Antonio Rizzo

Consulente WordPress e creatore di Creare Blog e Siti Web WordPress per fornire supporto ad aziende, professionisti e commercianti che desiderano portare sul web la propria attività e ottenere nuovi clienti con il minimo investimento.

>