Come Personalizzare la Pagina Login WordPress

Aggiornato il da | 21 commenti | Disclaimer I nostri contenuti sono supportati dai lettori. Questo significa che se clicchi su uno dei link ai servizi che raccomandiamo e poi effettui un acquisto, è possibile che ci venga accreditata una commissione. È così che finanziamo questo sito web, lo manteniamo attivo e ti forniamo continuamente le informazioni più affidabili.

Login WordPress come personalizzare la pagina accesso di WordPress

Personalizzare la pagina login di WordPress può essere molto utile per chi gestisce un sito aziendale usato da più persone, per chi lavora su un blog con collaboratori esterni, per chi ha un sito con forum o area membri.

In questa guida ti mostrerò tre tipi di personalizzazione del login WordPress attraverso l’uso di pratici plugin.

Indice dei contenuti
Visualizza altro

Una pagina di accesso WordPress personalizzata, che riprende lo stile del sito web, darà un’impressione di maggior professionalità e sicurezza, per gli utenti che vi accedono.

Le personalizzazioni della pagina di accesso WordPress possono riguardare diversi aspetti:

  1. la grafica;
  2. l’URL di accesso;
  3. la pagina a cui si viene portati dopo aver effettuato il login.

Per quanto riguarda la grafica, si tratta di una questione di brand e di stile, una personalizzazione puramente estetica e che possa valorizzare il tuo marchio.

Modificare l’URL di accesso, invece, riguarda la sicurezza. Tutti i siti WordPress hanno la pagina /wp-login.php per poter accedere alla bacheca, e l’area di amministrazione si trova all’interno di /wp-admin.

Gli hacker e i bot cercano proprio le pagine /wp-login.php e /wp-admin e, una volta trovate, tentano di effettuare l’accesso al tuo sito.

Se invece modifichi l’URL in miosito.it/pippo, non riusciranno a trovare la pagina di login.

Infine, è possibile personalizzare la pagina che si aprirà dopo aver effettuato l’accesso. Si tratta di una funzionalità utile per evitare che l’utente compia diversi giri prima di arrivare alla sezione sulla quale solitamente lavora.

In particolare, è indicata se hai un’area membri o un forum, così gli utenti arriveranno direttamente sul loro profilo o dove preferisci.

Come personalizzare la pagina login con Custom Login

Personalizzare la pagina login con Custom Login

Il primo metodo di personalizzazione del login WordPress che vedremo è quello che riguarda la grafica della pagina di login. Custom Login è uno strumento gratuito molto interessante che ti permetterà di creare una pagina di accesso personalizzata in pochi minuti.

Per prima cosa, installa il plugin: dalla tua Bacheca, vai su Plugin > Aggiungi Nuovo e cerca Custom Login di Austin Passy.

Purtroppo, questo plugin non è ancora disponibile in italiano. Nei prossimi paragrafi troverai tutte le istruzioni per configurarlo, sezione per sezione.

Attivazione pagina login personalizzata

Entra nella sezione Impostazioni > Custom Login.

Prima di personalizzare la tua pagina di login, entra nella sezione General. Puoi attivare e disattivare la pagina custom con la casella Activate – Allow Custom Login to hook into WordPress.

Attivazione di Custom Login

Nella sezione Login functions puoi iniziare a impostare alcuni dettagli:

  • disattivare lo “shake”, ossia la “scossa” che si verifica sulla pagina quando la password inserita non è corretta;
  • rimuovere il CSS, cioè tutto il CSS originale di questa pagina verrà cancellato. Ti ritroverai una pagina totalmente senza CSS e dovrai creare un nuovo stile manualmente;
  • elimina il link di reset password, ma la funzionalità rimane comunque disponibile.
Opzioni di Custom Login

Sfondo (sezione HTML)

Spostati ora sulla scheda Design Settings per definire l’aspetto della tua pagina di login.

Nella sezione HTML 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 Cover nel campo Background Size.

In questo modo, l’immagine di sfondo coprirà tutta l’area disponibile.

Dai un’occhiata al nostro articolo: Sfondi per siti web: 5 siti dove trovarli, trovi una lista di siti dove scaricare gratuitamente sfondi ad alta definizione.

Fai attenzione però al peso di questa immagine. Anche se si tratta di una pagina di login WordPress, ciò non significa che l’utente che la visiterà sia disposto ad attendere un’infinità per poterla utilizzare.

Ottimizza la tua immagine di sfondo con uno strumento di compressione.

Personalizzare la pagina di login - sfondo

Se scegli un’immagine di piccole dimensioni e imposti l’opzione Repeat, assicurati che lo sfondo che usi sia “seamless” e cioè che una volta ripetuto sembri un’immagine unica senza interruzioni nel motivo grafico.

Logo

In questa sezione puoi caricare il tuo logo. Semplicemente, carica il file del logo usando il pulsante Browse.

Ti si aprirà la libreria media, così potrai scegliere l’immagine fra quelle già presenti su WordPress oppure caricarne una nuova dal tuo PC.

Se preferisci, puoi anche disattivare del tutto il logo (rimuovendo quello default WordPress), spuntando la voce “Hide the WP logo”.

Logo personalizzato pagina login

Login WordPress 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 Background Color) o caricare un’immagine (campo Background URL) .

Vediamo le altre opzioni:

  • Force max-width e Width: il campo Width ti permette di impostare una larghezza massima.
    • Se attivi Force max-width, la larghezza del form, incluso il logo, assumeranno queste dimensioni.
  • Border 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.
  • Border Size: inserisci un numero a tua scelta per aumentare lo spessore del bordo del modulo.
    • Il valore inserito è inteso in pixel, quindi 2 significa 2 pixel di spessore;
  • Border Color: qui puoi selezionare il colore del bordo;
  • Box Shadow e 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 che preferisci.
Personalizza form di login WordPress

Per quanto riguarda il campo del box-shadow, ti spiego meglio come impostare questi parametri. Vedrai che ci sono 3 valori espressi in pixel:

  1. Il primo indica lo spessore dell’ombra che compare sulla destra dell’elemento;
  2. il secondo indica l’ombra che compare al di sotto dell’elemento;
  3. il terzo indica lo spessore della sfumatura. Se imposti quest’ultimo valore a 0px, l’ombra sarà perfettamente rettangolare, senza sfumature.

Miscellaneous e Below form anchor

Nella sezione Miscellaneous puoi personalizzare il colore delle etichette, ossia del testo che indica la funzione dei vari campi del form.

Altre opzioni Custom Login

All’interno di Below form anchor, invece, puoi personalizzare il link per tornare alla home del tuo sito (colore del testo, ombreggiatura, colore al passaggio del mouse).

Login WordPress Page: Custom CSS, HTML e JQuery

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:

Sezioni del form di login

Per concludere questa prima parte della guida, voglio farti vedere un esempio di pagina login che ho creato usando Custom Login.

Come vedi, il risultato è molto diverso dalla pagina standard WordPress! Io ho usato sfondo e logo personalizzati, reso gli angoli più arrotondati e personalizzato i colori.

Pagina di login personalizzata

Custom Login offre anche varie estensioni a pagamento, i prezzi partono da 10$ per un’estensione fino ad arrivare a 350$ per un pacchetto di funzionalità aggiuntive.

Tra di esse, troverai anche pacchetti di template già pronti per la tua WordPress login page.

Puoi ricevere maggiori informazioni visitando la pagina ufficiale del plugin Custom Login.

Ridirezioni automatiche con Peter’s Login Redirect

Ora la tua pagina di login WordPress è completamente personalizzata. Ma cosa fare se volessi personalizzare anche la pagina successiva?

Con il plugin Peter’s Login Redirect puoi infatti scegliere gli URL che si apriranno dopo aver effettuato il login e il logout.

Una volta installato ed attivato, vai su Impostazioni > Login/logout redirects e accedi alla pagina di configurazione.

Questa funzionalità è particolarmente interessante se gestisci un sito membership o un forum BuddyPress.

In entrambi i casi, potrai infatti sfruttare le funzionalità native WordPress per la registrazione, l’autenticazione e la gestione degli utenti: sarai però in grado di mandare, a chi effettua l’accesso, su una pagina a tuo piacimento, piuttosto che direttamente all’interno della Bacheca WordPress.

Un’altra applicazione molto utile di questa funzionalità riguarda i blog gestiti da più persone.

Se sei l’amministratore di un blog, potrai ridirigere tutti i tuoi collaboratori su una pagina dove pubblichi annunci e notizie importanti.

Sulla pagina di configurazione del plugin, le due sezioni secondo me più utili (oltre che più facili da configurare) sono quelle chiamate Specific Users e Specific Roles.

Nella prima, potrai indicare le pagine di ridirezione dopo login e logout per singoli utenti (nel menu a tendina troverai la lista di tutti gli utenti registrati).

Nella seconda, potrai invece configurare le ridirezioni per intere categorie di utenti: per esempio editori, amministratori, eccetera.

Peter's Login Redirect

Personalizzare la pagina login di WordPress manualmente

Se hai conoscenza di PHP, CSS ed HTML, e non vuoi appesantire il tuo sito con plugin, puoi personalizzare la pagina login di WordPress manualmente in modo piuttosto semplice.

Sul sito ufficiale WordPress è disponibile una pagina dedicata proprio alla schermata login.

Qui trovi il codice PHP da aggiungere al file function.php per caricare un file CSS personalizzato chiamato style-login.css.

Semplicemente, crea il file CSS in cui definisci gli stili della tua pagina login; quindi, salvalo all’interno della cartella del tema attivo sul tuo sito.

Una personalizzazione della pagina di login di WordPress, che può aumentare la sicurezza del tuo sito è quella di cambiare l’indirizzo della pagina dove effettui l’accesso.

Prima di proseguire assicurati di fare il backup del tuo sito.

WP Hide Login è un plugin gratuito e molto popolare (più di 800.000 installazioni) che rende questa operazione semplice come un paio di click del mouse. Segui le istruzioni di seguito, poi se lo desideri, puoi anche leggere la mia guida su come usare WP Hide Login qui.

Dopo aver installato e attivato il plugin, naviga su Impostazioni, poi clicca su Generali. Scorrendo verso il basso della schermata potrai vedere le opzioni per WP Hide Login.

Puoi mettere quello che preferisci nella casella di testo sulla destra della voce “Login url”; il testo da te scelto sarà il tuo nuovo URL per il login.

Ti consigliamo di salvare il link tra i siti preferiti sul tuo computer in modo da tenere a portata di mano l’indirizzo di accesso.

Premendo il pulsante “Save Changes” il tuo indirizzo di accesso a WordPress diventerà per esempio: https://www.tuo sito.com/testodatescelto invece del solito www.tuosito.com/wp-login.php.

Ci tengo a precisare che questo plugin non effettua modifiche direttamente sul file wp-login.php.

Inoltre, è compatibile con diversi plugin che necessitano di questa pagina, come BuddyPress e bbPress, Jetpack, WPS Limit Login.

Se usi un plugin di cache, ti suggerisco di aggiungere l’URL personalizzato da te scelto nella lista delle risorse da escludere dalla cache. Se usi WP Rocket, questa operazione viene eseguita in automatico.

Ma cosa succede se dimentichi l’URL di accesso?

In questo caso, dovresti lavorare sul database o dal file manager.

  1. Nel database, cerca la tabella Options e cerca il valore whl_page, ti indicherà l’URL utilizzato per il login;
  2. Nel file manager, vai all’interno di wp-content/plugins ed elimina la cartella di WPS Hide Login, entra nella tua bacheca da /wp-login.php, poi reinstalla il plugin.

Login WordPress personalizzato, è possibile?

Sì, è semplice e veloce se si utilizza Custom Login, un plugin che permette di creare una pagina di accesso personalizzata in pochi minuti.

Utilizzando uno dei plugin gratuiti più popolari che esistano, WP Hide Login.

La pagina login di WP può essere personalizzata manualmente?

Conoscendo PHP, CSS ed HTML, sì, altrimenti è anche possibile scaricare i codici PHP dal sito ufficiale di WordPress.

È possibile personalizzare anche la pagina successiva a quella di login?

Certo, basta usare il plugin Peter’s Login Redirect, con il quale è possibile scegliere gli URL che si apriranno dopo aver effettuato il login e il logout.

Conclusione

In questa guida 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. Nonostante ciò, ti permetterà di dare al tuo sito un aspetto molto professionale.

Prima di lasciarti però volevo portare alla tua attenzione anche un’altra guida, che potrebbe tornarti utile nel caso avessi un blog o un eCommerce con molti collaboratori che ti aiutano nel mantenimento del tuo sito, cioè “Come disattivare l’admin bar di WordPress in base al ruolo utente“. Dagli un’occhiata potrebbe tornarti molto utile.

Avevi mai pensato di personalizzare questa pagina?

Se l’hai già fatto, quali strumenti hai usato?

Oppure hai lavorato direttamente sui codici?

Facci sapere nei commenti come hai voluto personalizzare la tua pagina di login!

Guide correlate che ti potrebbero interessare:

Domande? Lascia un commento!

  1. Immagine avatar per Alessio
    Alessio

    Buongiorno! come faccio invece a personalizzare il piccolo logo che appare sulla finestra del Browser e togliere quello wp? grazie mille

    1. Immagine avatar per SOS WP Team
      SOS WP Team

      Ciao Alessio, forse ti stai riferendo alla favicon. Leggi questa guida e facci sapere se è ciò che stai cercando!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati*