Come creare correttamente una pagina di accesso personalizzata in WordPress (passo dopo passo)

Ti sei mai chiesto se potessi creare una pagina di accesso personalizzata in WordPress?

Creare una pagina di accesso personalizzata ti aiuta a mostrare un marchio coerente ai tuoi utenti, il che conferisce al tuo sito un aspetto più professionale.

In questo articolo, ti mostreremo come creare una pagina di accesso personalizzata in WordPress.

Creare una pagina di accesso personalizzata in WordPress – Indice dei contenuti

• Perché creare una pagina di accesso personalizzata?
• Scegliere il plugin giusto per creare una pagina di accesso personalizzata
• Metodo 1: Utilizzo di SeedProd per creare una pagina di accesso
• Metodo 2: Utilizzo di WPForms per creare una pagina di accesso
• Metodo 3: Utilizzo di Theme My Login per creare una pagina di accesso
• Metodo 4: Personalizzare la pagina di accesso WordPress esistente senza un plugin
• Metodo 5: Mostra il modulo di accesso ovunque senza un plugin

Perché creare una pagina di accesso personalizzata?

Se gestisci un sito web basato sulla community come un forum, un sito di appartenenza, un social network di nicchia o qualsiasi altro sito web che richiede agli utenti di registrarsi e accedere, allora dovrai creare una pagina di accesso personalizzata.

La pagina di accesso predefinita di WordPress appare generica e noiosa. Con una pagina di accesso personalizzata, puoi personalizzare tutti gli elementi della pagina attorno al modulo.

Se hai una pagina di accesso personalizzata, puoi nascondere la pagina di accesso predefinita se lo desideri. Può ridurre lo spam di accesso e mantenere il tuo sito WordPress sicuro.

Scegliere il plugin giusto per creare una pagina di accesso personalizzata

Nel repository ufficiale dei plugin di WordPress, puoi trovare dozzine di plugin diversi che ti aiutano a creare facilmente una pagina di accesso personalizzata. In questo articolo, esamineremo 3 plugin diversi: SeedProd, WPForms e Theme My Login.

Scegli SeedProd se hai bisogno di un costruttore di landing page facile da usare per creare pagine di accesso personalizzate, pagine di vendita, pagine di optin, pagine "coming soon", pagine in modalità manutenzione e altro ancora.

Ecco alcune caratteristiche eccezionali di SeedProd:

• Modelli di pagina di accesso progettati professionalmente per iniziare.
• Personalizza completamente la tua pagina di accesso con elementi come profili social, video, testimonianze, valutazioni a stelle e altro ancora.
• Aggiungi un modulo di accesso a qualsiasi landing page che crei con SeedProd.

Scegli WPForms se hai bisogno di un plugin per moduli WordPress completo che ti aiuti a creare facilmente qualsiasi tipo di modulo online, inclusi moduli di registrazione, moduli di pagamento, moduli di contatto, ecc.

Alcuni vantaggi di WPForms sono:

• Personalizza il tuo modulo di accesso come desideri senza alcuna restrizione.
• Pubblica il tuo modulo di accesso su qualsiasi post o pagina.
• Incorpora il tuo modulo di accesso nella barra laterale o anche nel piè di pagina con widget.

Scegli Theme My Login se vuoi creare una semplice pagina di accesso con facilità.

Di seguito sono riportate alcune caratteristiche di Theme My Login:

• Nessuna configurazione richiesta per la creazione di una pagina di accesso personalizzata.
• Nasconde automaticamente la pagina di accesso predefinita e reindirizza alla pagina di accesso appena creata.
• Aggiungi un link alla pagina di accesso nella tua barra laterale con un widget di accesso personalizzato.

Lo svantaggio è che, a differenza di SeedProd e WPForms, Theme My Login non ti permette di incorporare il tuo modulo di accesso ovunque sul tuo sito, e apparirà esclusivamente sulla tua pagina di accesso. Poiché non è un plugin di moduli completo come gli altri, la possibilità di personalizzare il tuo modulo di accesso è limitata.

Metodo 1: Utilizzo di SeedProd per Creare una Pagina di Accesso

Innanzitutto, vediamo come creare una pagina di accesso personalizzata con SeedProd, passo dopo passo.

Passaggio 1: Installa SeedProd sul Tuo Sito

Per iniziare, devi scaricare il plugin SeedProd. Quindi, carica e attiva il plugin sul tuo sito WordPress.

Per istruzioni dettagliate, segui questo tutorial su come installare un plugin WordPress.

Dopo aver attivato il plugin, vedrai una schermata di benvenuto dove dovrai inserire la tua chiave di licenza. Puoi trovare la tua chiave di licenza dal tuo account sul sito web di SeedProd.

Una volta verificata la tua chiave di licenza, scorri ulteriormente la pagina e fai clic sul pulsante Crea la Tua Prima Pagina.

Successivamente, verrai portato alla dashboard di SeedProd. Qui puoi vedere i diversi tipi di pagine di destinazione che puoi creare. Fai clic su Configura una Pagina di Accesso per iniziare.

Passaggio 2: Scegli un Modello di Pagina di Accesso

In questo passaggio, ti verrà chiesto di scegliere un modello di pagina di accesso. SeedProd offre una tonnellata di modelli progettati professionalmente tra cui puoi scegliere.

C'è anche un modello Vuoto che puoi usare se vuoi iniziare il tuo design da zero.

Per scegliere un modello di pagina di accesso, semplicemente passaci sopra il mouse e fai clic sull'icona del segno di spunta.

Successivamente, è ora di personalizzare il modello.

Passaggio 3: Personalizza la Tua Pagina di Accesso

La parte migliore di SeedProd è che puoi facilmente personalizzare la tua pagina di accesso utilizzando il costruttore visivo drag and drop. Innanzitutto, puoi personalizzare qualsiasi elemento esistente nel modello facendo clic su di esso.

Ad esempio, puoi fare clic sull'intestazione "Accedi" per modificare il testo, la dimensione, l'allineamento, la tipografia e altro.

Per aggiungere nuovi contenuti alla tua pagina di accesso, puoi utilizzare i blocchi di pagine di destinazione pronti all'uso di SeedProd.

Sul lato sinistro del costruttore visivo, ci sono blocchi di pagine di destinazione come immagine, video, pulsante, profili social, conto alla rovescia, barra di avanzamento e altro.

Semplicemente trascina il blocco che desideri e rilascialo sulla tua pagina di accesso. Ancora una volta, puoi fare clic sul blocco per personalizzare lo stile, le dimensioni, l'allineamento, ecc.

SeedProd offre anche sezioni predefinite come Funzionalità, FAQ, Piè di pagina e altre, che puoi aggiungere alla tua pagina di accesso.

Semplicemente fai clic su una sezione e SeedProd la aggiungerà automaticamente alla tua pagina.

Puoi anche accedere alle Impostazioni Globali di SeedProd nell'angolo in basso per modificare l'immagine di sfondo, il carattere e i colori della tua intera pagina di accesso, invece di modificare ogni elemento individualmente.

Ad esempio, se vuoi cambiare lo schema di colori della tua pagina di accesso, SeedProd offre oltre 20 palette di colori che puoi utilizzare per creare un look coeso.

Una volta che sei soddisfatto dell'aspetto della tua pagina di accesso, fai clic su Salva nell'angolo in alto a destra.

Passaggio 4: Configura le Impostazioni della Tua Pagina di Accesso

Se aggiungi un modulo di iscrizione via email alla tua pagina di accesso, puoi collegarlo al tuo servizio di email marketing nella scheda Connetti.

Fai semplicemente clic sul tuo provider di email marketing preferito e segui le istruzioni per connettere il tuo account. Ora, ogni volta che qualcuno fornisce il proprio indirizzo email tramite il modulo di iscrizione, verrà aggiunto automaticamente alla tua lista email.

Puoi anche andare alla scheda Impostazioni pagina per configurare altre impostazioni.

Le impostazioni in questa pagina includono:

• Generale – Modifica il nome e l'URL della tua pagina di accesso, visualizza un link di affiliazione SeedProd e altro ancora.
• SEO – Imposta il titolo SEO della tua pagina, la meta description, ecc. Se stai utilizzando un plugin SEO come All in One SEO, puoi usarlo come scorciatoia per le sue impostazioni.
• Analisi – Tieni traccia delle prestazioni della tua pagina di accesso utilizzando un plugin di analisi come MonsterInsights.
• Script – Utilizza script di tracciamento e retargeting come cookie o pixel di tracciamento di Facebook.

Non dimenticare di fare clic sul pulsante Salva per salvare le tue impostazioni.

Passaggio 5: Pubblica la tua pagina di accesso

Ora è il momento di pubblicare la tua pagina di accesso personalizzata sul tuo sito. Per farlo, fai clic sulla freccia a discesa accanto al pulsante verde Salva e premi il pulsante Pubblica.

Vedrai quindi un messaggio di successo che ti informa che la pagina di accesso è ora attiva.

Fai clic su Vedi pagina live per visualizzare la tua nuova pagina di accesso personalizzata.

L'ultimo passaggio consiste nell'abilitare la modalità pagina di accesso nella tua area di amministrazione di WordPress. Questo potrebbe sembrare difficile, ma SeedProd lo rende super facile.

Semplicemente esci dal costruttore visivo di landing page e torna alla dashboard principale di SeedProd. Nella sezione Pagina di accesso, sposta il pulsante da Inattivo a Attivo.

Fatto! Ora la tua pagina di accesso di WordPress ha un design personalizzato. Se desideri disabilitare la pagina di accesso, devi semplicemente tornare allo stesso pulsante di attivazione e disattivarla.

Metodo 2: Utilizzo di WPForms per creare una pagina di accesso

Diamo un'occhiata a come creare una pagina di accesso con WPForms.

Passaggio 1: Installa WPForms sul tuo sito

La prima cosa da fare è installare e attivare il plugin WPForms. Assicurati di verificare la tua chiave di licenza navigando su WPForms » Impostazioni. Puoi ottenere la chiave di licenza dal tuo account sul sito web di WPForms.

Per poter creare una pagina di accesso personalizzata con WPForms, dovrai installare l'addon User Registration andando su WPForms » Addons. Fai clic su Installa addon accanto a User Registration Addon e quindi fai clic su Attiva.

Una volta attivato l'addon, puoi procedere e creare un modulo di accesso utente con WPForms.

Passaggio 2: Crea un modulo di accesso personalizzato

Con il potente costruttore drag and drop di WPForms, puoi creare un modulo di accesso in pochi minuti, non ore, senza scrivere una sola riga di codice.

Per creare un modulo di accesso, visita WPForms » Aggiungi Nuovo. Nella pagina di configurazione del modulo, dovrai scegliere il modello Modulo di accesso utente per creare un modulo di accesso.

Ora vedrai il costruttore di moduli dove puoi aggiungere, personalizzare e rimuovere i campi del modulo di accesso. Per impostazione predefinita, il modello del modulo di accesso aggiunge i seguenti campi: Nome utente e Password.

Puoi personalizzare qualsiasi campo facendo clic su di esso nel page builder. Quindi, puoi apportare le personalizzazioni desiderate nel pannello di sinistra.

Passaggio 3: Configurazione del modulo

Per configurare le impostazioni generali, puoi andare su Impostazioni » Generali. In questa pagina, puoi personalizzare il nome del modulo, la descrizione, il testo del pulsante di invio, ecc.

Non devi fare nulla nella scheda Notifiche per il tuo modulo di accesso personalizzato. Per impostazione predefinita, le notifiche sono disattivate, quindi non riceverai un'e-mail ogni volta che qualcuno accede al tuo sito.

Quando un utente accede tramite il tuo modulo di accesso personalizzato, atterrerà sulla homepage del tuo sito web. Puoi modificare l'URL di reindirizzamento, se lo desideri, nel campo URL di reindirizzamento alla conferma.

Passaggio 4: Pubblica il tuo modulo WordPress

Uno dei principali vantaggi dell'utilizzo di WPForms per creare un modulo di accesso è che ti consente di incorporare il tuo modulo ovunque sul tuo sito, inclusi post, pagine, widget della barra laterale o aree del piè di pagina con widget.

Diamo un'occhiata a come pubblicare il tuo modulo nei post o nelle pagine.

Crea un nuovo post o pagina in WordPress e quindi fai clic sull'icona + nell'editor di blocchi di Gutenberg. Puoi cercare il blocco WPForms e fare clic su di esso.

Successivamente, seleziona il tuo modulo di accesso nel blocco WPForms e verrà caricato automaticamente nel tuo post / pagina.

Dopo aver aggiunto il modulo, puoi pubblicare il tuo post / pagina.

Puoi anche aggiungere il modulo di accesso al widget della tua barra laterale come segue. Vai su Aspetto » Widget e aggiungi il widget WPForms alla tua barra laterale.

Seleziona il tuo modulo di accesso personalizzato nelle impostazioni del widget e fai clic sul pulsante Salva per salvare le modifiche.

Metodo 3: Utilizzo di Theme My Login per creare una pagina di accesso

Il plugin Theme My Login rende semplicissimo pubblicare un modulo di accesso personalizzato sul tuo sito WordPress. Per creare una semplice pagina di accesso, tutto ciò che devi fare è installare e attivare il plugin Theme My Login.

Il plugin funziona subito senza ulteriori configurazioni.

Tuttavia, se hai bisogno di personalizzare le impostazioni del plugin, puoi fare clic sul menu Theme My Login nella tua dashboard di WordPress.

Puoi quindi modificare i tipi di accesso e registrazione. Puoi anche regolare gli slug dell'URL per le pagine di accesso, disconnessione, registrazione, password dimenticata e reimpostazione password.

Metodo 4: Personalizza la pagina di accesso WordPress esistente senza un plugin

Se preferisci apportare modifiche o aggiungere stili personalizzati alla tua pagina di accesso esistente anziché crearne una completamente nuova, ecco come farlo.

Aggiungi semplicemente questo codice al file functions.php del tuo tema o in un plugin specifico per il sito:

//Custom login page
function clp_login_head() {
		
	echo '<style>'; //Begin custom styles
	echo '.login #nav a, .login #backtoblog a { color: # !important; }'; //Login page link color
	echo '.login h1 a { background:url("' . get_bloginfo('stylesheet_directory') . '/images/IMAGE GOES HERE"); width: px; height: px; }'; //Login page logo
	echo '.login .button-primary { background:#; border-color:#; }'; //Login page button color
	echo '</style>'; //End custom styles
		
}
add_action('login_head', 'clp_login_head');

Puoi modificare il CSS e l'URL dell'immagine nel codice sopra per aggiungere il tuo stile personalizzato per la pagina di accesso di WordPress.

Metodo 5: Visualizza il modulo di accesso di WordPress ovunque senza un plugin

Se desideri visualizzare il modulo di accesso di WordPress in qualsiasi pagina, barra laterale o area piè di pagina, puoi aggiungere questo codice al file del modello del tuo tema:

<?php
          wp_login_form();
?>

Il codice sopra visualizzerà solo la pagina di accesso generale di WordPress nella posizione in cui aggiungi il codice. Nel caso in cui desideri aggiungere una pagina con modulo personalizzato di WordPress con campi e opzioni aggiuntivi, puoi utilizzare questo codice:

<?php $args = array(
        'echo' => true,
        'redirect' => 'http://wpsnipp.com',
        'form_id' => 'loginform',
        'label_username' => __( 'Username' ),
        'label_password' => __( 'Password' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in' => __( 'Log In' ),
        'id_username' => 'user_login',
        'id_password' => 'user_pass',
        'id_remember' => 'rememberme',
        'id_submit' => 'wp-submit',
        'remember' => true,
        'value_username' => NULL,
        'value_remember' => false );
wp_login_form($args);
?>

Alcuni altri snippet di codice che troverai utili:

• Modifica l'URL di accesso tramite il file .htaccess
• Modifica l'URL di accesso tramite functions.php
• Rimuovi l'effetto di scuotimento dell'accesso di WordPress quando si verifica un errore

Questo è tutto! Se prevedi di aggiungere frequentemente snippet di codice al tuo sito, dai un'occhiata al plugin WPCode. È la soluzione migliore per aggiungere facilmente snippet di codice personalizzati.

Speriamo che questa guida ti abbia aiutato a creare una pagina di accesso personalizzata in WordPress. Se ti è piaciuto questo articolo, potresti anche voler imparare come creare una pagina protetta da password in WordPress. Questo post ti aiuterà a limitare i tuoi contenuti con una password per guadagnare denaro o raccogliere indirizzi email degli utenti.

Potresti anche voler limitare i tentativi di accesso sulla tua pagina di accesso per impedire agli hacker di eseguire attacchi di forza bruta sul tuo sito.

Leggi la nostra guida completa alla sicurezza per WordPress per maggiori informazioni a riguardo.