Come creare una pagina di accesso di WordPress personalizzata (Guida definitiva)

Vuoi creare una pagina di accesso a WordPress personalizzata per il tuo sito web?


Se gestisci un sito di abbonamento WordPress o un negozio online, molti dei tuoi utenti vedranno spesso la pagina di accesso. La personalizzazione della pagina di accesso predefinita di WordPress ti consente di offrire un’esperienza utente migliore.

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

Come creare facilmente una pagina di accesso a WordPress personalizzata per il tuo sito

Ecco cosa imparerai da questa guida.

    Perché creare una pagina di accesso di WordPress personalizzata?

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

    Per impostazione predefinita, la pagina di accesso 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.

    Schermata di accesso predefinita di WordPress

    Tuttavia, se il tuo sito Web consente agli utenti di registrarsi e accedere, una pagina di accesso 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 accesso predefinita non contiene altro che il modulo di accesso. Creando una pagina di accesso personalizzata è possibile utilizzarla per promuovere altre pagine o promozioni speciali.

    Detto questo, diamo un’occhiata ad alcuni esempi di design personalizzati della pagina di accesso di WordPress.

    Esempi di progettazione della pagina di accesso di WordPress

    I proprietari di siti Web possono personalizzare la pagina di accesso di WordPress utilizzando stili e tecniche diversi.

    Alcuni creano una pagina di accesso personalizzata che utilizza il tema e i colori del proprio sito Web. Altri, modificano la pagina di accesso predefinita aggiungendo uno sfondo personalizzato, i colori e il proprio logo.

    1. WPForms

    WPForms

    WPForms è il miglior plug-in per moduli di contatto WordPress sul mercato. Per coincidenza, il loro plugin include anche un componente aggiuntivo per creare bellissimi moduli di accesso e registrazione di WordPress, che ti mostreremo più avanti in questo articolo.

    La loro pagina di accesso personalizzata utilizza un layout a due colonne. La colonna di sinistra contiene il modulo di accesso e la colonna di destra viene utilizzata per evidenziare promozioni e altri inviti all’azione. Nell’esempio sopra, stanno usando la pagina di accesso per condividere il loro rapporto annuale. Utilizza il marchio personalizzato, l’illustrazione di sfondo e i colori del marchio per creare un’esperienza di accesso unica.

    2. Rock My Wedding

    Rock My Wedding

    Il sito Web di Rock My Wedding utilizza un popup modale per visualizzare il modulo di accesso e registrazione. Il vantaggio di utilizzare un popup è che gli utenti possono accedere senza uscire dalla pagina. Li salva da un nuovo caricamento della pagina e offre un’esperienza utente più veloce.

    3. Jacquelynne Steves

    Jacquelynne Steves

    Jacquelynne Steeves è un sito di arti e mestieri in cui l’autore pubblica contenuti sulla decorazione della casa, la realizzazione di trapunte, motivi, ricami e altro ancora. La loro pagina di accesso utilizza un’immagine di sfondo personalizzata che corrisponde al tema del loro sito Web con il modulo di accesso sulla destra.

    4. Grafica animata della Chiesa

    Church Motion Graphics

    La pagina di accesso di questa società di motion graphics utilizza uno sfondo colorato che riflette ciò di cui tratta la propria attività. Utilizza la stessa intestazione del sito, piè di pagina e menu di navigazione nella schermata di accesso. Il modulo di login stesso è abbastanza semplice con uno sfondo scuro.

    5. Revisione della gestione di MITSLoan

    Revisione della gestione di MITSLoan

    Il sito Web MITSLoan Management Review utilizza la schermata di accesso di WordPress predefinita. Utilizza CSS personalizzati con il proprio logo per nascondere il marchio WordPress.

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

    Esistono diversi plugin di WordPress che puoi utilizzare per creare una pagina di accesso personalizzata front-end in WordPress. Ti mostreremo due diversi plug-in e potrai scegliere quello più adatto a te.

    Creazione di una pagina di accesso di WordPress usando Tema Il mio accesso

    La prima cosa che devi fare è installare e attivare il plugin Theme My Login. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

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

    Puoi personalizzare questi URL di accesso di WordPress visitando Tema Il mio login »Generale pagina. Scorri verso il basso fino alla sezione “Lumache” per modificare questi URL utilizzati dal plug-in per le azioni di accesso.

    Tema Pagine di accesso personali

    Il tema Il mio accesso 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 la lumaca di pagina qui, in modo che il plugin possa trovare e reindirizzare correttamente gli utenti.

    Cominciamo con la pagina di accesso.

    Vai a 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.

    Aggiunta di shortcode

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

    Pagina di accesso personalizzata di WordPress

    Ripetere 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 accesso di WordPress personalizzata tramite WPForms

    WPForms è il miglior plug-in per la creazione di moduli WordPress sul mercato. Ti consente di creare facilmente moduli 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 professionale. Gli utenti di WPBeginner possono ottenere uno sconto del 50% utilizzando il nostro codice coupon WPForms: save50

    La prima cosa che devi fare è installare e attivare il plugin WPForms. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

    Dopo l’attivazione, è necessario visitare WPForms »Impostazioni pagina per inserire la chiave di licenza. Puoi trovare queste informazioni sotto il tuo account sul sito Web di WPForms.

    Licenza WPForms

    Dopo aver inserito la chiave di licenza, sarà possibile installare i componenti aggiuntivi. Vai avanti e visita WPForms »Componenti aggiuntivi pagina e individuare il componente aggiuntivo di registrazione utente.

    Installa il componente aggiuntivo per la registrazione dell'utente

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

    Vai a WPForms »Aggiungi nuovo e scorri verso il basso fino al modello “Modulo di accesso utente”. È necessario fare clic sul pulsante “Crea un modulo di accesso utente” per continuare.

    Crea modulo di accesso

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

    Generatore di moduli WPForms

    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.

    Impostazioni del modulo

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

    Reindirizzare gli utenti che hanno effettuato l'accesso

    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 modulo, fai clic sul pulsante Salva nell’angolo in alto a destra dello schermo e chiudi il generatore di moduli.

    Aggiunta del modulo di accesso personalizzato a una pagina WordPress

    WPForms semplifica l’aggiunta del modulo di accesso 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 blocco WPForms alla tua area di contenuto.

    Aggiunta del blocco WPForms a un post

    Successivamente, seleziona il modulo di accesso che hai creato in precedenza e il blocco WPForms lo caricherà automaticamente nell’area contenuto.

    Anteprima del modulo di accesso

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

    Personalizzazione del design della pagina del modulo di accesso di WordPress

    Per impostazione predefinita, la pagina del modulo di accesso 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 plug-in di page builder, è 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, abbiamo usato il popolare plug-in 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.

    Creazione di una pagina di accesso personalizzata utilizzando il plug-in del generatore di pagine

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

    Nota: Dato che hai già effettuato l’accesso, sia il plug-in Theme My Login sia i plug-in WPForms potrebbero non mostrare un’anteprima dal vivo del modulo di login. Il plugin WPForms ha un’opzione in cui puoi disattivarlo nelle impostazioni del modulo.

    Se i plug-in del builder di WordPress non fanno per te, puoi usare CSS personalizzati per modellare il modulo e la stessa pagina di accesso. In alternativa, puoi anche utilizzare il plug-in CSS Hero per aggiungere facilmente stili CSS personalizzati.

    Modifica il logo e l’URL di accesso a WordPress

    Non è sempre necessario creare una pagina di accesso 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 accesso con il tuo logo, puoi farlo facilmente utilizzando un plug-in WordPress o aggiungendo un codice personalizzato. Ti mostreremo entrambi i metodi che è possibile utilizzare quello che più si adatta a te.

    Cambia il logo e l’URL di accesso a WordPress usando un plugin

    La prima cosa che devi fare è installare e attivare Colorlib Login Customizer. collegare. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

    All’attivazione, il plug-in aggiunge una nuova voce di menu denominata “Login Customizer” alla barra laterale di amministrazione di WordPress. Cliccandolo si avvierà il personalizzatore di accesso.

    Personalizzatore di accesso

    Il personalizzatore di accesso caricherà la schermata di accesso di WordPress predefinita con le opzioni di personalizzazione a sinistra e l’anteprima in tempo reale a destra.

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

    Carica il logo personalizzato nella pagina di accesso

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

    Fondamentalmente, è possibile creare una pagina di accesso 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.

    Pagina di accesso a WordPress personalizzata con logo personalizzato

    Cambia il logo e l’URL di accesso a WordPress senza plug-in (codice)

    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 a Media »Aggiungi nuovo pagina 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, devi aggiungere il seguente codice al file Functions.php del tuo tema o a un plug-in specifico del sito.

    funzione wpb_login_logo () { ?>

    #login h1 a, .login h1 a {
    immagine di sfondo: url (http: //path/to/your/custom-logo.png);
    altezza: 100px;
    larghezza: 300px;
    dimensione dello sfondo: 300 px 100 px;
    background-repeat: nessuna ripetizione;
    imbottitura inferiore: 10px;
    }

    <?php}
    add_action (‘login_enqueue_scripts’, ‘wpb_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.

    Pagina di login di WordPress con logo personalizzato

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

    Cambiamo questo.

    Aggiungi semplicemente il seguente codice al file Functions.php del tuo tema o a un plug-in specifico per il sito. Puoi aggiungere questo codice proprio sotto il codice che hai aggiunto in precedenza.

    funzione wpb_login_logo_url () {
    return home_url ();
    }
    add_filter (‘login_headerurl’, ‘wpb_login_logo_url’);

    funzione wpb_login_logo_url_title () {
    restituire “Nome e informazioni del sito”;
    }
    add_filter (‘login_headertitle’, ‘wpb_login_logo_url_title’);

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

    È tutto. Speriamo che questo articolo ti abbia aiutato a imparare diversi modi per creare una pagina di accesso di WordPress per il tuo sito web. Potresti anche consultare la nostra guida alla sicurezza di WordPress per suggerimenti su come migliorare la tua sicurezza di accesso a WordPress.

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map