Personalizzare il Login WordPress

14 Ott 2020 - Wordpress
Personalizzare il Login WordPress

Bongiorno a tutti i lettori che ci seguono, oggi vogliamo parlare di un argomento che per chi lo fa di professione sembra una cosa scontata ma non lo è, ovvero come personalizzare Il login WordPress.

La personalizzazione del login di WordPress può essere fatta in vari modi e a vari livelli, ovviamente per chi ci conosce sa benissimo che potrà essere fatto in modo manuale, con codici, o in semi-automatico con l’utilizzo di plugin creati appositamente allo scopo 😉

Le personalizzazioni possono essere sia a livello grafico (come inserimento del proprio logo, dei propri colori e del proprio stile di layout grafico) o personalizzazioni di modifica della URL di accesso che, oltre a una personalizzazione pratica serve anche per aumentare la sicurezza del vostro sito WordPress in modo esponenziale.

Qual è la pagina di login di WordPress o URL di login

Iniziamo con il mostrarvi quali sono le pagine di Login di WordPress:

  • Wp Login: www.tuosito.it/wp-login
  • Admin Login WordPress: www.tuosito.it/wp-admin

Entrambe le soluzioni sono usufruibili da chiunque voglia accedere al sito web, anche se generalmente gli amministratori, sviluppatori o comunque utenti che possono modificare il sito web, utilizzano la versione /wp-admin/ che comunque fa riferimento al file login.php che rimanderà alla Dashboard di WordPress .

Personalizzare la pagina di login di WordPress

Adesso che sapete come si può accedere alla Dashboard di WordPress, passiamo alla vera e propria personalizzazione della pagina, ovvero il WordPress Login; questa può essere semplicemente grafica o di modifica della URL (wp-login o wp-admin) per motivi pratici interni (può essere utile per i membri dello staff avere un link più semplice da ricordare).

Personalizzare la grafica della pagina di log in WordPress

Per personalizzare graficamente la pagina di login di WordPress ci sono due modi, tramite del buon vecchio CSS o con l’utilizzo di plugin creati appositamente per lo scopo.

Personalizzare la grafica della pagina di login con CSS

Cambiare il colore dello sfondo

Utilizzeremo il nostro blu per mostrarvi l’esempio

body.login{
    background: #073c77;
}
Cambiare il colore di tutti i link
body.login a {
	    color: #fff !important;
}

È necessario inserire !important altrimenti non tutti i link verranno modificati

Cambiare il logo

Nell’esempio utilizzeremo il nostro logo per prova 😉

body.login h1 a {
	    background-image: url(https://360smartweb.it/wp-content/uploads/2019/07/Logo-vettoriale-360smartweb-Giugno-2019.svg?x51216/wp-content/uploads/Logo-Main.png) !important;
	    width: 100% !important;
	    background-size: 300px;
}

Ovviamente di personalizzazioni ce ne sono anche altre, come l’inserimento di una immagine di sfondo

Personalizzare la grafica della pagina di login con un plugin

Personalizzare la grafica della pagina di login con Custom Login

Adesso, invece, vediamo insieme come modificare l’intera pagina di Login con il plugin “custom login”.

  1. Sezione di abilitazione del plugin
    Iniziamo con abilitare il plugin, spuntando il flag su “toggle this plugin on & Off”
  2. Sezione HTML
    permette di cambiare il colore di sfondo e addirittura di inserire una immagine di sfondo andando a personalizzare anche la Position, la Size (consigliamo di impostare la size “flex” in modo che si adatti a tutti i dispostivi su cui può essere visualizzata) e il Repeat (in caso di immagini più piccole che non si adattano allo schermo)
  3. Sezione Logo
    In questa sezione potrete scegliere il vostro logo, impostando molti campi, come larghezza, altezza, la Size, il Repeat e la Position proprio come per l’immagine di sfondo del punto precedente.
  4. Sezione Login form
    In questa sezione è possibile andare a modificare il layout del form di accesso in tutte le sue parti
  5. Sezione MISC
    In questa sezione potrete finire la vostra personalizzazione aggiungendo, modificando e rimuovendo l’effetto ombra del form ed i link che si trovano sotto il form di accesso.

Adesso avrete la vostra pagina di login bella modificata secondo le vostre esigenze o gusti grafici.

Personalizzare la URL di login di WordPress o creare un link personalizzato di accesso

Personalizzare la URL di login di WordPress o creare un link personalizzato di accesso - WPS Hide Login

In ultima battuta, vediamo come andare a personalizzare la URL della pagina di accesso con un plugin leggero e di semplice configurazione.. WPS Hide Login.

Il plugin si compone di sole due voci:

  1. URL di accesso
  2. Redirection URL

URL di accesso

Basta inserire la vostra URL nuova che volete (ad esempio www.tuosito.it/accesso/) stando bene attenti ad inserire solo la parte finale; se si prende l’esempio appena fatto, nel form scriverete solo accesso senza / o l’indirizzo del vostro sito

Redirection url

In questo campo, invece, dovrete inserire una pagina di reindirizzamento per chi dovesse tentare l’accesso alla vecchia URL come wp-admin o wp-login.
Di default reidirizzerà alla pagina di errore 404 ma potete anche crearne una vostra custom.

Social login (accedere utilizzando i vostri account social)

Social login (accedere utilizzando i vostri account social)

Social login è un plugin distribuito gratuitamente che permette agli utenti del sito web, di effettuare la registrazione, prima, e il login, dopo, utilizzando uno dei vostri account social (attualmente sono presenti in lista più di 25 social da cui è possibile registrarsi)

Ovviamente ne fanno parte i big come Google, Facebook, Paypal, Linkedi, Twitter, Intagram e Yahoo.

Il plugin ha riscosso un bel successo, con più di 30.000 attivazioni e una media di 4 stelle su 5 come recensioni.

CONCLUSIONI

Come potete vedere questa guida per la modifica grafica della pagina di login, è molto semplice sia per chi optasse per la modifica grafica della pagina in CSS sia per chi volesse utilizzare il plugin e la modifica della URL è davvero molto molto semplice.

Per chi avesse dubbi sulla procedura o avesse delle domande specifiche, non esitate a scrivere nella sezione commenti.



Massimiliano Piacentini

Web des. | WP Dev. | SEO Spec.

Dopo vari anni passati come graphic designer e dopo molti corsi, ho seguito la mia massima passione: lo sviluppo di siti web in html, php e WordPress. Il design web è stata una semplice conseguenza di tutte le mie skills che mi permettono, seguendo le best practices, per dare una User Experience sui siti creati.