Come personalizzare la pagina login di WordPress

personalizzare la pagina login di WordPress

Leggendo questa guida, imparerai come personalizzare la pagina login di WordPress.  Vedremo come sostituire il logo 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?

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

Personalizzare la pagina login con Custom 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. Una volta attivato, potrai accedere alla pagina di configurazione andando su Impostazioni > Custom Login.

Purtroppo, questo plugin non è ancora disponibile in italiano. Nei prossimi paragrafi troverai tutte le istruzioni per configurarlo, 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.

Attivazione Custom Login

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. Su questa pagina trovi una lista di siti dove scaricare gratuitamente sfondi ad alta definizione.

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.

Custom Login Sezione HTML per personalizzare la pagina login

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

Custom Login Sezione 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.

Custom Login Sezione Login Form

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 Sezione Misc per personalizzare la pagina login di WordPress

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:

Custom Login Sezioni Riassunto

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, selezionato un tono di blu per testi e bordo (per cui ho aumentato lo spessore a 3px) e reso gli angoli più arrotondati inserendo 40 nel campo Border Radius.

Login Classico WordPress

Pagina Login di WordPress (versione classica)

Pagina login personalizzata con Custom Login

Pagina login di WordPress (versione personalizzata con Custom Login)

Custom Login è disponibile anche in versione PRO (da $55 a $295). Inoltre, può essere integrato con varie estensioni per ottenere maggiori risorse e possibilità di personalizzazione.

Ora che hai imparato come personalizzare la pagina login di WordPress a livello grafico, vediamo alcuni strumenti per integrare funzionalità aggiuntive.

Social Login con Super Socializer

Login con Super SocializerUsando il plugin Super Socializer di The Champ, potrai attivare l’accesso al tuo sito attraverso i propri profili social.

Dopo che hai installato ed attivato il plugin, apparirà nella barra di navigazione della tua Bacheca WordPress la voce Super Socializer.

Per attivare gli accessi social sulla pagina login, vai su “Social Login”. Quindi, spunta i nomi dei social network che vuoi abilitare.

E’ importante notare che per usare questo plugin dovrai creare e configurare una app sui social che vuoi collegare.

Fatto questo, all’interno del classico modulo di accesso appariranno anche i collegamenti social che hai configurato, come vedi nell’immagine qui sotto.

Nota: Super Socializer ha tante altre funzionalità. Puoi usare questo plugin per aggiungere icone social per la condivisione dei contenuti, abilitare i commenti Facebook sotto ai post, condividere automaticamente i post sulla bacheca Facebook dell’utente e raccogliere dati analitici.

Ridirezioni automatiche con Peter’s Login Redirect

Un altro strumento molto utile per personalizzare la pagina login di WordPress è Peter’s Login Redirect di Peter Keung.

Questo plugin funziona in modo piuttosto semplice: una volta installato ed attivato, vai su Impostazioni > Login/logout redirects e accedi alla pagina di configurazione.

Qui puoi inserire gli URL delle pagine sulle quali saranno ridiretti gli utenti quando fanno il login e il logout.

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 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 Redirection Plugin

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.

Vuoi personalizzare in autonomia l’aspetto del tuo sito web? Leggi la nostra guida per principianti dedicata al CSS, il linguaggio del foglio di stile.

Conclusione

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

Ora passo a te la parola: avevi mai pensato di lavorare su questa pagina? Se l’hai già fatto, quali strumenti hai usato? Oppure hai lavorato direttamente sui codici?

Alla prossima guida!

Chiara Buzzi

Chiara Buzzi

Chiara è una blogger a tempo pieno. Esperta di content marketing, aiuta imprenditori e liberi professionisti a sfruttare la rete per promuovere online la loro attività. Quando non sta lavorando sul web, Chiara ama leggere riviste e cucinare, ed ha una strana ossessione per tutto ciò che riguarda il mondo del beauty.

[PROMO LIMITATA] 50% SU HOSTING SITEGROUND + ASSISTENZA SOS WP GRATIS

SiteGround - Miglior hosting per Wordpress
27 commenti
  1. dice:

    Ciao plugin molto utile e semplice. L’unico inconveniente è che sparisce il link lost password “password domenticata?” Come posso risolvere? Grazie

    Rispondi
  2. dice:

    Ciao Laura,

    quindi se ho capito bene i passaggi per personalizzare logo/pagina login manualmente sono tre:
    – inserire nuova funzione in functions.php
    – inserire un NUOVO foglio CSS nel tema
    – aggiornare il già esistente file style.css

    Ho capito bene ? è così? Grazie.

    Rispondi
  3. dice:

    Qualcuno sa dirmi perché Peter’s Login Redirect, ogni volta che cerco di impostare una redirect mi dice:
    ****ERROR: Unknown error adding user-specific redirect for user Mario****

    Rispondi
    • dice:

      Cioa Cristina, il plugin è aggiornato? Si tratta di un errore del database. Prova eventualmente a disinstallarlo, e installarlo di nuovo.

      Rispondi
  4. dice:

    Ciao Chiara, Ho seguito la tua guida, sono riuscita a personalizzare la mia pagina di Login, l’unico problema è che l’immagine di sfondo si deforma ogni volta che ingrandisco o rimpicciolisco la pagina, dunque la finestrella di username e password tende a sovrapporsi a delle scritte. C’è un modo per fissare lo sfondo??In modo che ingrandendo o rimpicciolendo la pagina esso non si deformi.

    Rispondi
  5. dice:

    Ciao, ma se io volessi lasciare solo i bottoni per l’accesso tramite social come posso fare?

    Perché la schermata di WP appare sempre, anche quando magari un utente ha bisogno di loggarsi per lasciare una domanda.

    Sarebbe bello poter dividere le due cose, quindi x me che sono admin usare la schemrata WP e per gli utenti/visitatori solo i social.

    Grazie

    Rispondi
    • dice:

      Ciao Gerardo,
      Direi che potresti lasciare ai tuoi visitatori la possibilità di effettuare una domanda anche senza effettuare il login, magari attraverso una sezione commenti.
      Un saluto!

      Rispondi
  6. dice:

    Ciao Chiara, complimenti per l’articolo.

    Volevo chiederti una cosa.

    Io vorrei far apparire la pagina wp- admin appena accedo al sito. Esempio: digito http://www.nomesito.com e invece di visualizzare la home devo visualizzare la pagina login di wordpress.

    Come posso fare? Esiste un plug-in o posso anche farlo tramite codice? C’è una guida?

    Grazie mille

    Rispondi
  7. dice:

    Ciao Chiara,
    grazie per le spiegazioni che dai. Come si fa a “creare e configurare una app sui social che vuoi collegare” con super socializer?
    grazie,
    Laura

    Rispondi
    • dice:

      Ciao Laura,
      Grazie per il commento!
      Ti faccio l’esempio di Facebook: dovrai andare sul sito developers https://developers.facebook.com/ , registrarti e generare una chiave api per creare l’integrazione (è abbastanza semplice, trovi tutto un percorso guidato).
      Fammi sapere se hai problemi o altre domande,
      Buona giornata
      Chiara

      Rispondi
  8. dice:

    Ciao Chiara
    Complimenti per l’articolo interessante e ben scritto.
    Volevo chiederti devo creare un portale totalmente privato , quindi prima di entrare in home page dovrebbe esserci una pagina login, ho installato diversi plug in da te spiegati, pero riesco a far apparire il login solo dopo “l’atterraggio” in home page non prima … avresti qualche dritta a riguardo?

    Rispondi
    • dice:

      Ciao Alessandro!

      Grazie per il commento. Credo che lo strumento di cui tu abbia bisogno sia il plugin Password Protected, che richiede di inserire una password per visualizzare anche la home del sito (se lo desideri, puoi comunque rendere libero l’accesso ad Amministratori ed Utenti Autenticati). Questo è la pagina del plugin https://wordpress.org/plugins/password-protected/ .

      Non risulta ancora aggiornato all’ultima versione di WordPress, però l’ho appena testato sul mio sito di prova che usa WP 4.2 e non ha dato alcun problema.

      Fammi sapere se è la soluzione che cercavi!

      A presto,
      Chiara

      Rispondi
      • dice:

        Ciao Chiara preziosa!
        Benchè dopo aver provato diversi plug in poi ne ho scelto un altro ma mi hai indirizzato sullla retta via :-) grazie
        ti chiedo se conosci un plug in per tracciare i dati degli utenti, lato user di worpress esempio tizio è entrato due volte caio tre etc…
        ti ringrazio ancora
        ps aspettiamo il tuo nuovo sito
        Ale

        Rispondi
  9. dice:

    Ciao, articolo interessante ma non capisco come cambiare la lingua alle voci Welcome to…, back to…, lost your password?

    Rispondi
    • dice:

      Ciao Luca,
      Grazie per la domanda. La lingua è la stessa della lingua dell’installazione WordPress. Affinché la schermata di login sia in italiano, devi installare WP in italiano (se usi l’ultima versione, puoi cambiare la lingua andando in Impostazioni > Generali a fondo pagina – per sicurezza, prima di tutto fai anche un backup).
      Se hai altre domande fammi sapere!
      Chiara

      Rispondi
      • dice:

        Ti ringrazio per la risposta.
        Purtroppo è quello che immaginavo. Il Wp è in italiano ma la pagina login e/o le altre mi restituiscono questi messaggi in inglese e anche con il codice non ho trovato dove modificarli.

        Rispondi
        • dice:

          Ciao Luca,
          Probabilmente dipende dal pacchetto di installazione di WordPress. Se hai installato WP tramite una app inclusa nel servizio di hosting, potresti provare a contattare il supporto per richiedere maggiori informazioni.
          Fammi sapere se riesci a risolvere!
          Chiara

          Rispondi
    • dice:

      Ciao Maurizio, grazie per aver letto la guida e per la tua domanda!

      Ogni nuovo plugin che installi contribuisce a rallentare leggermente il sito; in generale è sempre meglio non usarne più di 15.

      Proprio per questo, Custom Login è stato creato in modo da non appesantire troppo i siti su cui è installato. La versione 2.0 è più veloce della precedente e usa molte meno risorse.

      Ho testato i plugin inclusi nella guida con P3 (uno strumento per monitorare l’utilizzo di risorse da parte dei plugin https://wordpress.org/plugins/p3-profiler/): sul nostro sito di prova Custom Login e Peter’s Login Redirect usano una piccola porzione di risorse; Super Socializer è invece più pesante.

      Se sul tuo sito usi pochi plugin, non avrai problemi. Se invece sei già sopra i 10, ti consiglio di dare priorità a quelli che servono ad implementare le funzionalità chiave del sito.

      Se invece sai codificare, l’opzione migliore è creare un file .css per la tua pagina login.

      Fammi sapere se hai altre domande!

      Buona giornata,
      Chiara

      Rispondi

Lascia un Commento

Vuoi partecipare alla discussione?
Fornisci il tuo contributo!

Lascia un commento

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