WordPress: come personalizzare il login del proprio sito

Il noto CMS WordPress, sul quale ormai è basato oltre il 40% dei siti, presenta una maschera di login generica per l’accesso al proprio backend. Quando si possiede un portale gestito da più persone, però, potrebbe essere utile provare a personalizzarlo per renderlo ancora più professionale. Ovviamente, la personalizzazione della pagina per il login è anche un modo per sbizzarrirsi con la fantasia e dare un tocco più creativo.

Grazie al plugin Custom Login è possibile impostare una nuova pagina di login in pochi semplici passi. Per scaricarlo, dopo aver effettuato l’accesso al backend, è necessario seguire il percorso Plugin -> Aggiungi Nuovo e scrivere Custom Login nella barra di ricerca. Il plugin del quale parliamo in questa breve guida è quello dell’immagine in basso.

Dopo aver fatto clic su Installa adesso e, successivamente, su Attiva, verremo riportati nella pagina Plugin installati dove faremo clic sul link Settings posto sotto al nome Custom Login.

Per prima cosa, attiviamo il plugin spuntando la casella apposita presente all’inizio della pagina General Settings. Nella stessa pagina sono presenti altre tre importanti opzioni, ovvero quella che disabilita il tremolio generato dall’immissione di credenziali errate, la rimozione del CSS e la rimozione dell’opzione di reset password sotto i campi di login.

Spostiamoci adesso nella sezione dedicata al Design della maschera di login. Come prima cosa dovremo impostare lo sfondo.

Per questa, come per tutte le altre componenti della pagina di login dovremo definire il colore di sfondo e l’eventuale opacità. Poi possiamo selezionare un’immagine da inserire e infine impostare la posizione, l’eventuale ripetizione e la dimensione.

Passando poi al logo vediamo come la prima opzione consenta anche di nascondere quello di WordPress per sostituirlo col proprio. Basterà spuntare l’apposita casella.

Successivamente potremo inserire un’immagine e deciderne anche le dimensioni. La didascalia suggerisce una larghezza massima di 320 px. Le altre opzioni sono come quelle viste in precedenza per lo sfondo.

Scendiamo ancora per passare alle impostazioni del form per il login, che presenta un maggior numero di opzioni.

Per prima cosa, scegliamo se forzare o meno l’ampiezza massima spuntando eventualmente la casella. Scendendo poi possiamo definire la grandezza in pixel del form, il colore di sfondo, l’immagine ed i vari posizionamenti.

L’ultima parte delle impostazioni del form riguarda la cornice, per la quale possiamo definire lo smussamento degli angoli, il colore e l’ombreggiatura.

Le sezioni Miscellaneous e Below Form Anchor consentono di cambiare il colore delle etichette e, infine i vari collegamenti per tornare alla home del sito definendo colori, ombre e effetti al passaggio del mouse (hover).

In fondo alla sezione Design Settings ci sono anche tre campi utili per la personalizzazione di HTML, CSS e jQuery. Al termine di tutte queste operazioni basterà fare clic su Save Design Settings e la nuova maschera di login sarà pronta.

Un banalissimo esempio di una modifica effettuata sulla maschera di login può essere quello nell’immagine qui in basso.