Come creare una pagina di accesso WordPress personalizzata

Ah, sì, la pagina di accesso di WordPress – una delle pagine più riconoscibili in WordPress – non è vero?

Ma allo stesso tempo, avere questa pagina sul tuo sito WordPress nella sua forma predefinita non è sempre la migliore delle idee.

Come mai? - tu chiedi.

Ecco la risposta:

Perché dovresti aver bisogno di una pagina di accesso WordPress personalizzata?

La questione è triplice:

1. Traffico . Più traffico ottieni, più traffico "cattivo" ottieni come risultato diretto. Per cattivo traffico intendo script e bot dannosi, spammer e tutti i tipi di utenti che arrivano al tuo sito con cattive intenzioni. La personalizzazione della pagina di accesso di WordPress può rendere il tuo sito più sicuro.
2. Sito multiutente . Se il tuo sito è gestito da più persone, che si tratti di amministratori o autori/blogger, si verificheranno più occorrenze di accesso. Fornire un modulo di accesso personalizzato renderà il processo più piacevole nel complesso.
3. Marchio . La pagina di accesso predefinita va bene, ma c'è il grande logo di WordPress proprio nel mezzo. Cambiare questo e rendere la pagina di accesso più simile alla tua può essere un bel tocco di branding. Ciò è particolarmente valido se stai creando un sito Web per un cliente. Fornire al tuo cliente un'esperienza coerente è sicuramente qualcosa che apprezzeranno.

Se qualcuno dei precedenti ti sembra interessante, dovresti considerare di cambiare la tua pagina di accesso con una personalizzata. Ecco come:

Come creare una pagina di accesso WordPress personalizzata

Ci sono due modi principali per farlo:

• il modo manuale ,
• il modo plug -in.

Entrambi i modi hanno i loro pro e contro. Il modo manuale ti dà un maggiore controllo sull'aspetto della pagina finale. Il metodo del plug -in è più facile da seguire, soprattutto se non hai alcuna capacità di programmazione, ma devi accontentarti di ciò che il plug-in ti consente di fare.

Copriamo entrambi.

Creazione manuale di una pagina di accesso personalizzata

Sebbene ciò richieda di modificare alcuni dei file sorgente del tuo tema, non è niente di così difficile. Userò Twenty Fifteen come mio esempio qui.

Il divertimento inizia creando una copia del file page.php e del file content-page.php .

Rinomina queste nuove copie rispettivamente in page-login.php e content-login.php .

Apri page-login.php e modifica solo una riga. Da questa:

 get_template_part( 'content', 'page' );

A questo:

 get_template_part( 'content', 'login' );

Ora modifichiamo content-login.php e aggiungiamo una riga subito sotto <?php the_content(); ?> <?php the_content(); ?> . Così:

 <?php the_content(); ?> <?php wp_login_form( array('redirect' => home_url()) ); ?> <?php wp_link_pages( array( ...

Nota. In questa fase, puoi eseguire una serie di altre personalizzazioni se lo desideri (come regolare il design/layout, rimuovere la barra laterale), ma è tutto opzionale. Cambiare solo queste due righe farà il lavoro se stai cercando un approccio estremamente minimale con la tua nuova pagina di accesso di WordPress.

Ora creiamo una nuova pagina nel wp-admin e chiamiamola semplicemente "login". Assicurati che anche il permalink sia "login":

In questo modo ti assicurerai che WordPress utilizzi automaticamente il tuo file modello page-login.php .

Se visiti la tua nuova pagina in questo momento, dovrebbe assomigliare un po' a questa:

A questo punto, l'unica cosa che resta da fare è impostare i reindirizzamenti per eliminare in definitiva la pagina di accesso predefinita di WordPress. Fallo inserendo queste righe alla fine del tuo file functions.php :

 /* Main redirection of the default login page */ function redirect_login_page() { $login_page = home_url('/login/'); $page_viewed = basename($_SERVER['REQUEST_URI']); if($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') { wp_redirect($login_page); exit; } } add_action('init','redirect_login_page'); /* Where to go if a login failed */ function custom_login_failed() { $login_page = home_url('/login/'); wp_redirect($login_page . '?login=failed'); exit; } add_action('wp_login_failed', 'custom_login_failed'); /* Where to go if any of the fields were empty */ function verify_user_pass($user, $username, $password) { $login_page = home_url('/login/'); if($username == "" || $password == "") { wp_redirect($login_page . "?login=empty"); exit; } } add_filter('authenticate', 'verify_user_pass', 1, 3); /* What to do on logout */ function logout_redirect() { $login_page = home_url('/login/'); wp_redirect($login_page . "?login=false"); exit; } add_action('wp_logout','logout_redirect');

(Snippet di codice costruiti sulla base di: [1][2].)

Al momento, l'unica pagina di accesso accessibile è quella nuova creata da te. La cosa grandiosa qui è che puoi modificarlo liberamente tramite l'editor di pagina predefinito di WordPress (proprio come faresti con qualsiasi altra pagina).

Creazione di una pagina di accesso WordPress personalizzata con un plug-in

Questo metodo funziona in modo leggermente diverso perché invece di creare una pagina di accesso completamente nuova, stiamo effettivamente modificando quella predefinita.

Innanzitutto, il plug-in che utilizzeremo è: Custom Login Page Customizer.

Dopo averlo installato e attivato, vai su Aspetto > Login Customizer , dove puoi avviare il pannello di personalizzazione.

Le opzioni di questo plugin sono piuttosto carine e ti permettono di regolare cose come:

• Imposta un logo da visualizzare al posto del logo predefinito di WordPress.
• Imposta uno sfondo per l'intera pagina di accesso.
• Imposta uno sfondo per il modulo stesso.
• Regola lo stile del modulo e ogni piccolo dettaglio su di esso (caratteri, dimensioni, colori, campi).
• Installa un componente aggiuntivo di sicurezza per ottenere un campo captcha aggiuntivo nel modulo (ottimo per prevenire accessi/bot di spam).

Ad esempio, solo un paio di minuti di lavoro con il plugin e ho ottenuto questo risultato:

Un'altra opzione plug-in

Un altro plug-in personalizzato per la pagina di accesso che vale la pena dare un'occhiata è: Login Designer. Questo plugin mira a rendere super facile la personalizzazione della pagina di accesso di WordPress pur offrendo flessibilità nel design.

Un modo per ottenere facilità d'uso è rendere familiare il processo di personalizzazione. Tutte le opzioni e gli strumenti sono integrati direttamente nel Personalizzatore di WordPress. Quindi, se sei abituato a utilizzare il Customizer per modificare le opzioni del tema, ti sentirai come a casa.

Guarda questo video per una panoramica di come funziona il plugin.

Manuale o tramite un plugin ?

Qual è il tuo metodo preferito? Preferisci codificare le cose manualmente o avere tutto gestito da un plug-in? Sentiti libero di condividere.