come personalizzare la pagina login di wordpress

Vuoi sapere come personalizzare la pagina login di WordPress?

Se gestisci un sito in WordPress con possibilità di iscrizione per gli utenti come ad esempio un e-commerce , molti dei tuoi utenti vedranno spesso la pagina di login. La personalizzazione della pagina di login predefinita di WordPress ti consente di offrire un’esperienza utente migliore.

In questa guida, ti mostreremo diversi modi per creare una pagina di login di WordPress personalizzata. Puoi anche usare questo tutorial per creare anche una pagina di accesso WooCommerce personalizzata.

Perché creare una pagina di login di WordPress personalizzata?

WordPress è dotato di un potente sistema di gestione utenti . Ciò consente agli utenti di creare account su negozi di e-commerce o su un blog.

Per impostazione predefinita, la pagina di login mostra il marchio e il logo WordPress. Questo va bene se stai gestendo un piccolo blog o sei l’unica persona con accesso di amministratore.

Tuttavia, se il tuo sito Web consente agli utenti di registrarsi e accedere, una pagina di login personalizzata offre un’esperienza utente migliore.

L’uso del proprio logo e design fa sentire gli utenti come a casa. Considerando che reindirizzarli alla schermata di accesso di WordPress predefinita che non assomiglia al tuo sito Web può sembrare sospetto per i tuoi utenti.

Infine, la schermata di login predefinita non contiene altro che il form di login. Creando una pagina di login personalizzata è possibile utilizzarla per promuovere altre pagine o promozioni speciali.

Creazione di una pagina di login personalizzata front-end in WordPress

Esistono diversi plugin di WordPress che puoi utilizzare per creare una pagina di login personalizzata front-end in WordPress. In questa guida ti verranno mostrati due diversi plug-in e potrai scegliere quello più adatto a te.

Come personalizzare la pagina di login di WordPress usando Theme My Login

La prima cosa che devi fare è installare e attivare il plugin Theme My Login .

Al momento dell’attivazione, Theme My Login crea automaticamente URL per l’accesso, la disconnessione, la registrazione, la password dimenticata e le azioni di reimpostazione della password personalizzate.

Puoi personalizzare questi URL di accesso a WordPress visitando Theme My Login > General . Scorri verso il basso fino alla sezione “Slugs” per modificare questi URL utilizzati dal plug-in per le azioni di accesso.

personalizzare-login-wordpress-slug

Theme My Login consente anche di utilizzare codici brevi per creare pagine di accesso e registrazione personalizzate. Puoi semplicemente creare una pagina per ogni azione e quindi aggiungere lo shortcode di pagina qui, in modo che il plugin possa trovare e reindirizzare correttamente gli utenti.

Cominciamo con la pagina di accesso.

Vai su pagina > Aggiungi nuovo per creare una nuova pagina WordPress. Devi assegnare un titolo alla tua pagina e quindi inserire il seguente shortcode “[theme-my-login]” nell’area contenuto.

Ora puoi pubblicare la tua pagina e visualizzarne l’anteprima per vedere la tua pagina di accesso personalizzata in azione.

pagina-login-wordpress-personalizzata

Ripeti il processo per creare altre pagine utilizzando i seguenti codici brevi:

[theme-my-login action = “register”] per il modulo di registrazione.

[theme-my-login action = “lostpassword”] per la pagina della password persa.

[theme-my-login action = “resetpass”] utilizzalo nella pagina di reimpostazione della password.

Creazione di una pagina di login WordPress personalizzata tramite WPForms

WPForms è uno dei migliori plug-in per la creazione di form WordPress sul mercato. Ti consente di creare facilmente form di accesso e registrazione personalizzati per il tuo sito web.

WPForms è un plug-in WordPress premium e per accedere al componente aggiuntivo di registrazione utente sarà necessario almeno il suo piano PRO.

La prima cosa che devi fare è installare e attivare il plugin WPForms .

Al momento dell’attivazione, è necessario visitare la pagina WPForms > Settings per inserire la chiave di licenza. Puoi trovare queste informazioni nel tuo account sul sito Web di WPForms una volta che ti sei registrato.

Dopo aver inserito la chiave di licenza, sarà possibile installare i componenti aggiuntivi. Vai avanti e visita la pagina WPForms > Addons e individua il componente aggiuntivo Registrazione utente.

Quindi, fai clic sul pulsante Installa componente aggiuntivo (Install Addon) per scaricare e attivare il componente aggiuntivo. Ora sei pronto per creare i tuoi moduli di accesso personalizzati.

Vai su WPForms »Aggiungi nuova pagina e scorri verso il basso fino al modello” User Login Form”. È necessario fare clic sul pulsante “Create a User Login Form” per continuare.

creare-login-form-wordpress-con-wp-form

WPForms caricherà il form di accesso utente con i campi obbligatori. Puoi fare clic sui campi per aggiungere la tua descrizione o il testo che li circonda.

Puoi anche modificare altre impostazioni. Ad esempio, aggiunge automaticamente “Invia” come titolo del pulsante. È possibile fare clic su di esso e quindi modificarlo in “Accesso” o “Login”.

creare-login-custom-wordpress

Puoi anche decidere cosa succede quando un utente ha effettuato correttamente l’accesso. Vai su Impostazioni » scheda Conferma e seleziona un’azione.

login-personalizzato-wordpress-con-redirect

Puoi reindirizzare l’utente a qualsiasi altro URL, reindirizzarlo alla home page o semplicemente mostrare loro un messaggio in cui sono ora connessi.

Una volta che sei soddisfatto delle impostazioni del form, fai clic sul pulsante Salva nell’angolo in alto a destra dello schermo e chiudi il generatore di form.

Aggiunta del form di login personalizzato a una pagina WordPress

WPForms semplifica l’aggiunta del form di login personalizzato su qualsiasi post o pagina di WordPress.

Modifica semplicemente la pagina in cui desideri aggiungere il modulo di accesso o crearne uno nuovo. Nella schermata di modifica della pagina, aggiungi il block WPForms (tra i vari widget-block che hai a disposizione con Gutenberg si sarà aggiunto quello di WP Forms) alla tua area di contenuto.

Successivamente, seleziona il form di login che hai creato in precedenza e il block WPForms lo caricherà automaticamente nell’area contenuto.

Ora puoi continuare a modificare la pagina del modulo di accesso o salvare e pubblicare le modifiche.

Personalizzazione del design della pagina di login di WordPress

Per impostazione predefinita, la pagina login di WordPress personalizzata utilizzerà il modello e gli stili della pagina del tema. Avrà i menu di navigazione del tema, l’intestazione, il piè di pagina e i widget della barra laterale.

Se vuoi occupare completamente l’intera pagina e progettare qualcosa da zero, puoi utilizzare un plug-in per la creazione di pagine di WordPress .

Con un page builder di pagine, è possibile creare un layout di pagina personalizzato e quindi aggiungere il widget del modulo di accesso fornito da Theme My Login o WPForms.

Nella schermata qui sotto, è stato usato il popolare plug-in per la creazione di pagine Beaver Builder . Abbiamo usato un’immagine di sfondo su un layout a schermo intero e quindi aggiunto due colonne. In una colonna abbiamo aggiunto del testo e un pulsante. Nell’altra colonna, abbiamo aggiunto il widget WPForms.

Il vantaggio di Beaver Builder è che è una soluzione drag and drop al 100%.

custom-login-page-con-beaver-builder

Se i plug-in page builder di WordPress non fanno per te, come altra opzione puoi usare CSS personalizzati per modellare il form e la stessa pagina di accesso.

Non è sempre necessario creare una pagina di login WordPress completamente personalizzata per il tuo sito Web. In effetti, molti siti Web sostituiscono semplicemente il logo e l’URL del logo WordPress mentre utilizzano ancora la pagina di accesso predefinita.

Se desideri sostituire il logo WordPress nella schermata di login con il tuo logo, puoi farlo facilmente utilizzando un plug-in WordPress o aggiungendo un codice personalizzato. Vediamo entrambi i metodi.

La prima cosa che devi fare è installare e attivare il plugin Colorlib Login Customizer

Al momento dell’attivazione, il plug-in aggiunge una nuova voce di menu denominata “Login Customizer” alla barra laterale di amministrazione di WordPress. Cliccandolo si potrà personalizzare la pagina di login e il logo di WordPress.

personalizzare-logo-wordpress.

Per sostituire il logo WordPress con il tuo, fai clic sulla scheda “Logo options” sulla destra. Da qui puoi nascondere il logo WordPress, caricare il tuo logo personalizzato, modificare l’URL e il testo del logo.

Il plug-in consente inoltre di personalizzare completamente la pagina di login predefinita di WordPress. Puoi aggiungere colonne, immagini di sfondo, cambiare i colori dei moduli di accesso e altro.

Fondamentalmente, è possibile creare una pagina di login di WordPress personalizzata senza modificare l’URL di accesso di WordPress predefinito.

Al termine, fai semplicemente clic sul pulsante Pubblica per salvare le modifiche. Ora puoi visitare la pagina di accesso di WordPress per vedere il tuo modulo di accesso personalizzato in azione.

Questo metodo consente di sostituire manualmente il logo WordPress nella schermata di accesso con il proprio logo personalizzato .

Innanzitutto, devi caricare il tuo logo personalizzato nella libreria multimediale. Vai su Media »Aggiungi nuova e carica il tuo logo personalizzato.

Dopo aver caricato l’immagine, fai clic sul link “Modifica” accanto ad essa. Questo aprirà la pagina di modifica dei media in cui è necessario copiare l’URL del file e incollarlo in un file di testo vuoto sul computer.

Successivamente, è necessario aggiungere il seguente codice sul file functions.php del vostro tema o su un plug-in site-specific .

function bfast_login_logo() { ?>
    


<?php } add_action( ‘login_enqueue_scripts’, ‘bfast_login_logo’ );

Non dimenticare di sostituire l’URL dell’immagine di sfondo con l’URL del file copiato in precedenza. Puoi anche regolare altre proprietà CSS in modo che corrispondano all’immagine del tuo logo personalizzato.

Ora puoi visitare la pagina di accesso di WordPress per vedere il tuo logo personalizzato in azione.

Questo codice aggiunto finora sostituisce solo il logo WordPress. Non cambia il collegamento del logo che punta al sito Web WordPress.org.

Per modificare il link aggiungi semplicemente il seguente codice proprio sotto il codice che hai aggiunto in precedenza.

function bfast_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'bfast_login_logo_url' );
 
function bfast_login_logo_url_title() {
    return 'Il nome del tuo sito';
}
add_filter( 'login_headertitle', 'bfast_login_logo_url_title' );

Non dimenticare di sostituire “Il nome del tuo sito” con il nome effettivo del sito. Il logo personalizzato nella schermata di accesso ora punta alla home page del tuo sito.

Conclusione

Come hai visto, ci sono molti modi per personalizzare la pagina di login di WordPress, customizzare la pagina di accesso permette una maggiore originalità e caratterizzazione della nostra identità di brand. Puoi scegliere varie vie per modificare la pagina di login di WordPress o crearne di nuove usa quella che ritieni più opportuna per le tue esigenze.

Related Posts