Come personalizzare la pagina di accesso di WordPress

Stai cercando un modo semplice per modificare la tua pagina di accesso? Ti abbiamo coperto. In questo articolo, ti mostreremo diversi modi per personalizzare la pagina di accesso di WordPress e renderla più elegante.

Cos'è la pagina di accesso di WordPress?

Come suggerisce il nome, la pagina di accesso di WordPress è la pagina in cui devi inserire il tuo nome utente e password per accedere e accedere alla dashboard di WordPress. A seconda del tipo di utente e delle autorizzazioni di cui disponi, avrai accesso a diverse parti della dashboard.

La maggior parte dei siti lascia la pagina di accesso predefinita perché è qualcosa che di solito i visitatori non vedono. Tuttavia, per assumere il controllo completo del tuo sito e renderlo più sicuro, dovresti personalizzare la pagina di accesso.

Perché dovresti cambiare la pagina di accesso?

La pagina di accesso predefinita di WordPress sembra abbastanza semplice ed essenziale. Inoltre, potrebbe essere la pagina di accesso di qualsiasi sito. Non c'è alcuna personalizzazione.

Tuttavia, se controlli la pagina di accesso di un marchio famoso come OptinMonster, vedrai che assomiglia a questo:

La pagina di accesso è completamente personalizzata e puoi dire subito che appartiene a OptinMonster.

Ci sono diversi motivi per cui dovresti personalizzare la tua pagina di accesso di WordPress. Ad esempio, se gestisci un negozio eCommerce o un sito Web di abbonamento, personalizzare la pagina di accesso è una buona idea. Gli acquirenti dovranno accedere ai propri account per completare una transazione o accedere ai vantaggi dell'abbonamento, quindi la visualizzazione della pagina di accesso predefinita potrebbe non sembrare professionale. Allo stesso modo, se hai un programma di affiliazione, è una buona opzione modificare la pagina di accesso e personalizzarla.

Inoltre, personalizzando la pagina di accesso, puoi rendere il tuo sito più sicuro contro gli hacker.

Esistono molti modi per personalizzare la pagina di accesso di WordPress. Puoi aggiungere il tuo logo, il nome del marchio, i colori del marchio e persino del testo per impressionare i tuoi utenti. La maggior parte dei siti non lo fa, quindi semplicemente facendo un po' di sforzo, ti distinguerai dalla maggior parte dei siti.

Ora vediamo i diversi metodi per modificare la pagina di accesso.

Come personalizzare la pagina di accesso di WordPress

Esistono tre modi principali per personalizzare la pagina di accesso:

1. Utilizzo dei plugin
2. Programmaticamente
3. Con i costruttori di pagine

Diamo un'occhiata a ciascun metodo di seguito in modo da poter scegliere quello più appropriato per te.

1) Modifica la pagina di accesso con i plugin

Esistono molti plugin per personalizzare la pagina di accesso di WordPress. Alcuni dei migliori sono:

• Tema My Login (personalizzazione limitata)
• Personalizzazione della pagina di accesso personalizzata (altamente personalizzabile)
• CSS Hero (plugin di personalizzazione dedicato)
• WPForms (plugin di moduli con funzionalità avanzate)
• SeedProd (soluzione completa per landing page)

Per questo tutorial, utilizzeremo Theme My Login e Custom Login Page Customizer. Vediamo il processo passo dopo passo.

1.1) Tema Il mio accesso

Theme My Login è un plugin gratuito utilizzato per creare pagine di accesso personalizzate in WordPress. Senza utilizzare snippet CSS aggiuntivi, puoi abbinare lo stile del sito alla pagina di accesso.

Innanzitutto, installa e attiva il plug-in. Nella dashboard di WordPress, vai su Plugin > Aggiungi nuovo , cerca il plug-in e installalo.

Una volta attivato, vedrai le impostazioni dei plugin sul lato sinistro.

La configurazione principale che vedrai sono:

• Generale
• Login
• Registrazione
• lumache

Sotto queste opzioni, vedrai alcune sottoconfigurazioni. Theme My Login non include molte opzioni di personalizzazione, ma sono sufficienti per coloro che vogliono apportare alcune modifiche di base.

Scorri verso il basso fino alla sezione slug e vedrai tutti i permalink disponibili che puoi utilizzare e modificare.

Una volta terminata la modifica, salva le modifiche e controlla la pagina di accesso nel front-end.

Il plug-in è anche ottimizzato per gli shortcode di WordPress, che ti consente di incorporare le pagine di accesso, registrazione, dashboard o password persa all'interno dei tuoi post/pagine.

Alcuni degli shortcode disponibili sono:

• [theme-my-login] – pagina di accesso
• [theme-my-login action=”registrati”] – pagina di registrazione
• [theme-my-login action=”password persa”] – pagina della password persa
• [theme-my-login action=”resetpass”] – pagina di reimpostazione della password

Aggiungi semplicemente lo shortcode che desideri nell'editor classico o nell'editor Gutenberg e pubblica (o aggiorna) la pagina.

Questo è tutto! Ecco come puoi modificare la pagina di accesso di WordPress con Theme My Login. Se i tuoi utenti devono accedere spesso, ti consigliamo di aggiungere la pagina di accesso al menu di WordPress.

1.2) Personalizzazione della pagina di accesso personalizzata

Se desideri funzionalità più avanzate ma desideri comunque un plug-in gratuito, Personalizza pagina di accesso personalizzata è per te. È un altro strumento dedicato che ti consente di modificare la pagina di accesso di WordPress senza utilizzare alcun codice.

Innanzitutto, devi installare e attivare il plug-in sul tuo sito Web andando su Plugin> Aggiungi nuovo .

Vedrai le impostazioni sul lato sinistro. Fai clic su Personalizza e verrai reindirizzato al personalizzatore di WordPress dove potrai gestire tutto.

In alternativa, puoi accedere al Customizer dalla sezione Aspetto selezionando l'opzione Login Customizer .

Sul lato sinistro vedrai tutte le opzioni disponibili, mentre sul lato destro puoi visualizzare in anteprima il modulo di accesso.

Le opzioni che puoi personalizzare nel modulo di accesso sono:

• Modelli
• Sfondo
• Logo
• Modulo
• Campi
• Pulsante
• Altro
• CSS e JavaScript personalizzati

Se non vuoi perdere tempo a progettare la tua pagina di accesso da zero, puoi utilizzare uno dei modelli.

In alternativa, puoi controllare le diverse opzioni e creare la tua pagina di accesso esattamente come la desideri. Per questo tutorial, cambieremo il logo, i colori e aggiungeremo un'immagine di sfondo. Quando sei soddisfatto del tuo design, salva gli aggiornamenti.

Inoltre, puoi aggiungere codice CSS o JavaScript personalizzato alla pagina di accesso che può essere un'opzione molto interessante per chi ha abilità di programmazione.

Quindi ora se controlli il front-end, vedrai la tua pagina di accesso personalizzata di WordPress.

Per ulteriori informazioni sui plugin per modificare la pagina di accesso, dai un'occhiata a questo post.

Come puoi vedere, modificare la pagina di accesso con i plugin è facile. Tuttavia, se sai come programmare, potresti voler personalizzarlo a livello di codice.

2) Personalizza la pagina di accesso di WordPress in modo programmatico

Se preferisci non installare strumenti di terze parti e codificare la tua soluzione, puoi modificare la pagina di accesso in modo programmatico. Puoi incollare il codice all'interno del file functions.php del tema o utilizzare un plug-in specifico del sito. Per questa demo, utilizzeremo il plug-in Code Snippets.

NOTA : se hai intenzione di modificare il file functions.php direttamente prima di iniziare, ti consigliamo di creare un backup completo del tuo sito e creare un tema figlio.

Innanzitutto, installa e attiva gli snippet di codice sul tuo sito web.

Ora vediamo un codice di esempio che puoi usare.

 funzione quadlayers_login_logo() { ?>
 <tipo di stile="testo/css">
 #login h1 a, .login h1 a {
 immagine di sfondo: url(https://www.example.com/image.png);
 altezza: 100px;
 larghezza: 300px;
 dimensione dello sfondo: 300px 100px;
 background-repeat: no-repeat;
 imbottitura-fondo: 10px;
 }
 </stile>
 <?php }
 add_action('login_enqueue_scripts', 'quadlayers_login_logo');

Se dai una rapida occhiata al codice, vedrai che stiamo aggiungendo un logo con determinate dimensioni. Vedrai anche che c'è un collegamento. Questo è l'URL del tuo logo, quindi assicurati di modificare l'URL di conseguenza per visualizzare il tuo logo.

Come trovare l'URL di un'immagine

Trovare l'URL di un'immagine è abbastanza semplice. Dopo aver caricato l'immagine sul tuo sito web, apri la Libreria multimediale e seleziona l'immagine. Sul lato destro, vedrai l'URL dell'immagine.

Copia l'URL del file e incollalo all'interno del codice. Ad esempio, il codice finale che utilizza l'immagine sopra sarà:

 funzione quadlayers_login_logo() { ?>
 <tipo di stile="testo/css">
 #login h1 a, .login h1 a {
 immagine di sfondo: url(http://demo-inc.local/wp-content/uploads/2021/07/logo-wpf.png);
 altezza: 100px;
 larghezza: 300px;
 dimensione dello sfondo: 300px 100px;
 background-repeat: no-repeat;
 imbottitura-fondo: 10px;
 }
 </stile>
 <?php }
 add_action('login_enqueue_scripts', 'quadlayers_login_logo');

Puoi anche personalizzare le dimensioni, ma per ora copia semplicemente il codice utilizzando l'URL della tua immagine. Ora devi creare un nuovo snippet usando il plugin Code Snippets. Vai su Snippet > Aggiungi nuovo , incolla il codice e attiva lo snippet.

Ora, controlla la pagina di accesso utilizzando una finestra di navigazione in incognito e vedrai il nuovo logo.

Se controlli il codice ancora una volta, vedrai che c'è un po' di CSS per dargli un certo stile. Se preferisci, puoi rimuovere il codice <style type=”text/css”></style> e aggiungere il codice CSS sottostante al foglio di stile del tuo tema o all'interno del Customizer.

 #login h1 a, .login h1 a {
 immagine di sfondo: url(http://demo-inc.local/wp-content/uploads/2021/07/logo-wpf.png);
 altezza: 100px;
 larghezza: 300px;
 dimensione dello sfondo: 300px 100px;
 background-repeat: no-repeat;
 imbottitura-fondo: 10px;
 }

Tieni presente che devi modificare il codice CSS in base alle tue esigenze. Le classi su cui devi lavorare sono:

 #login h1 a

e

 .login h1 a

Abbiamo modificato con successo il logo di WordPress, ma l'URL del logo punta ancora al dominio WordPress.org. Tuttavia, puoi facilmente cambiarlo aggiungendo un piccolo script PHP al file functions.php o usando i frammenti di codice.

Crea un nuovo snippet utilizzando il plug-in Code Snippets e incolla il codice seguente.

 funzione quadlayers_login_logo_url() {
 ritorno home_url();
 }
 add_filter('login_headerurl', 'quadlayers_login_logo_url');

 funzione quadlayers_login_logo_url_title() {
 restituire "Nome e informazioni del tuo sito";
 }
 add_filter('login_headertitle', 'quadlayers_login_logo_url_title'); 

Dopo aver attivato lo snippet PHP, l'URL del logo sarà il tuo nome di dominio.

Queste sono solo alcune personalizzazioni, ma c'è molto di più che puoi fare. Ti consigliamo di giocare con il codice e modificare la pagina di accesso esattamente come desideri.

3) Con i Page Builder

Un altro modo per personalizzare la pagina di accesso di WordPress è utilizzare un generatore di pagine dedicato. Ci sono molti page builder che puoi usare, ma per questo tutorial useremo SeedProd.

SeedProd è uno strumento freemium che ti consente di creare landing page di qualità. Se desideri utilizzare i suoi modelli, devi ottenere la versione premium che parte da 39,50 USD all'anno.

Una volta attivato il plug-in, è necessario verificare la chiave di licenza.

Questo ti darà accesso a tutti i modelli predefiniti. Dopo aver verificato la chiave, vai su SeedProd > Pagine e scegli l'opzione Pagina di accesso.

Vedrai tutti i modelli di accesso disponibili sullo schermo. Puoi scegliere uno di questi modelli predefiniti o crearne uno nuovo da zero.

Per questo tutorial, selezioneremo uno dei modelli. Dopo aver selezionato un modello, assegnagli un nome.

Successivamente, verrai reindirizzato al generatore di pagine.

Sul lato sinistro vedrai tutti gli elementi che puoi utilizzare per modificare la pagina di accesso e sul lato destro vedrai l'anteprima della pagina. Per aggiungere elementi e personalizzare la pagina di accesso, trascina semplicemente gli elementi dalla colonna di sinistra e rilasciali nella procedura guidata di anteprima.

Per impostazione predefinita, il modello di accesso che abbiamo scelto viene fornito con un'immagine di sfondo, un modulo di accesso e alcuni contenuti di testo. Puoi modificare uno qualsiasi di questi elementi facendo clic su di essi. Ad esempio, per modificare il modulo di accesso, selezionalo e nel pannello di sinistra vedrai le opzioni di configurazione.

Dopo aver modificato la pagina, pubblicala.

Ora controlla la pagina dal front-end e vedrai la nuova pagina di accesso personalizzata.

Assicurati di aggiungere l'URL della pagina al menu di WordPress o a un widget della barra laterale, in modo che gli utenti possano accedere utilizzando il nuovo URL.

La maggior parte dei plug-in per la creazione di pagine di WordPress è dotata di questa funzione, quindi dovresti essere in grado di farlo indipendentemente dallo strumento che stai utilizzando.

Come trovare l'URL della pagina di accesso di WordPress

Trovare l'URL di accesso di WordPress è facile. Se hai una semplice installazione di WordPress, puoi aggiungere /wp-admin/ alla fine del dominio e ti reindirizzerà alla dashboard di WordPress. In caso contrario, puoi aggiungere /wp-login.php alla fine del nome di dominio. Ad esempio, se il tuo nome di dominio è example.com , inserisci www.example.com/wp-admin/ o www.example.com/wp-login.php nel browser.

Nella maggior parte dei casi, questi due metodi funzioneranno. In alternativa, puoi anche provare ad aggiungere /admin/ o /login/ alla fine del nome di dominio.

Tieni presente che se l'amministratore del sito web ha configurato un percorso di accesso personalizzato, dovrai contattarlo e chiederglielo.

Ora che hai trovato l'URL della pagina di accesso, vediamo come modificare l'URL di accesso.

Come modificare l'URL di accesso di WordPress

WordPress è il CMS più popolare al mondo, quindi è la piattaforma preferita dagli hacker. La pagina di accesso è una delle pagine che riceve più attacchi, quindi per motivi di sicurezza è una buona idea modificare l'URL della pagina di accesso. Ciò ti aiuterà a impedire agli utenti non autorizzati di accedere alla pagina di accesso e di provare combinazioni casuali di nome utente e password.

In questa sezione, ti mostreremo come modificare l'URL di accesso predefinito di WordPress.

Per rendere questo processo il più semplice possibile, utilizzeremo il plug-in WPS Hide Login. È uno dei famosi strumenti di sicurezza ed è gratuito al 100%. Innanzitutto, installa e attiva il plugin sul tuo sito web.

Successivamente, vedrai le impostazioni dei plugin nella sezione Impostazioni .

Creazione di un nuovo URL della pagina di accesso

Puoi aprire le impostazioni del plug-in o andare alle Impostazioni generali e modificare gli URL di accesso da lì. Tuttavia, ti consigliamo di utilizzare l'impostazione del plug-in perché offre più opzioni di personalizzazione.

• URL di accesso: questo è il tuo nuovo URL di amministrazione di WordPress. Per impostazione predefinita, il plug-in aggiungerà l' accesso come collegamento permanente. In tal caso, il nuovo URL di accesso sarebbe www.example.com/login . Non è consigliabile mantenere l' accesso come percorso di amministrazione predefinito di WordPress. Invece, dovresti aggiungere un percorso univoco. Ad esempio, se aggiungi mainentry come percorso di accesso, l'URL della pagina di accesso sarà www.example.com/mainentry .
• URL di reindirizzamento: ecco un'altra opzione utile per reindirizzare utenti non autorizzati dalla pagina wp-admin . Come sai, WordPress viene fornito con il permalink wp-admin per la pagina di accesso. Se lo disabiliti, devi impostare il reindirizzamento, in modo che tutto il traffico non autorizzato venga inoltrato a quella pagina specifica. Ad esempio, puoi inoltrarli a una pagina di errore 404 o a un post/pagina del blog personalizzato.

Basta modificare le impostazioni del plug-in di conseguenza e salvare le impostazioni. Vedrai la conferma del nuovo URL di accesso.

Hai modificato correttamente l'URL di accesso predefinito di WordPress. Per testare la nuova configurazione, apri una finestra di navigazione in incognito e inserisci l'URL di accesso predefinito di WordPress ( www.tuodominio.com/wp-admin ). Se tutto funziona correttamente, verrai reindirizzato alla pagina 404 che abbiamo configurato come URL di reindirizzamento. Per accedere alla pagina di accesso, devi inserire il nuovo URL di accesso che hai appena creato.

Se stai cercando una guida più dettagliata per personalizzare l'URL della pagina di accesso, dai un'occhiata a questa guida completa.

Recupera l'URL di accesso

Cosa succede se modifichi l'URL di accesso ma poi lo dimentichi? La buona notizia è che ha una soluzione facile. Collega semplicemente un client FTP come FileZilla al tuo server, accedi alla cartella del plug-in WPS Hide Login ed eliminalo. Successivamente, l'URL di accesso sarà quello predefinito ( wp-admin ).

Come limitare i tentativi di accesso

Un'altra opzione interessante per migliorare la sicurezza del tuo sito è limitare i tentativi di accesso. Per impostazione predefinita, WordPress consente tentativi di accesso illimitati che offrono agli hacker una buona possibilità di accedere al tuo sito. Poiché non esiste un'opzione integrata per limitare i tentativi di accesso, dovremo utilizzare un plug-in di terze parti. In questa sezione, ti mostreremo come limitare i tentativi di accesso utilizzando Limita tentativi di accesso ricaricati.

Innanzitutto, installa e attiva il plugin sul tuo sito web.

Sul lato sinistro vedrai le opzioni di configurazione del plugin. Aprilo e verrai reindirizzato alla dashboard del plug-in dove vedrai che non abbiamo tentativi di accesso falliti. Per rendere il plugin più efficiente, apporteremo alcune modifiche alle impostazioni, quindi vai alla scheda Impostazioni .

Scorri verso il basso fino alla sezione delle impostazioni dell'app e vedrai qualcosa del genere:

Il plugin viene fornito con una configurazione di base. La configurazione attuale dice che dopo quattro combinazioni di nome utente e password errate di seguito, il plug-in bloccherà l'IP dell'utente per i prossimi 20 minuti. Se l'IP ottiene quattro blocchi continui, il tempo di blocco aumenterà a 24 ore.

È possibile modificare la configurazione in base alle proprie esigenze. Una volta che sei soddisfatto delle modifiche, salva le impostazioni.

Questo è tutto. Ora, quando qualcuno inserisce la combinazione di nome utente e password errata nella pagina di accesso, riceverai una notifica nella dashboard del plug-in.

E l'utente vedrà anche un messaggio di errore sul front-end con i tentativi rimanenti.

Questo è un ottimo modo per proteggere il tuo sito WordPress da hacker e attacchi di forza bruta.

Bonus: come modificare i messaggi di errore predefiniti

Abbiamo visto diverse opzioni per rendere il tuo sito più sicuro. Ma c'è di più che puoi fare. Facciamo un ulteriore passo avanti e cambiamo i messaggi di errore predefiniti in WordPress.

Per impostazione predefinita, WordPress dirà alle persone qual è l'errore effettivo nella pagina di accesso. Ad esempio, se qualcuno inserisce un nome utente che non esiste, WordPress visualizzerà un messaggio che dice che il nome utente non è registrato.

In questo modo, il potenziale hacker saprà che il nome utente non è valido e potrebbe provare a utilizzare un altro nome utente finché non ne trova uno esistente, quindi possono provare password diverse. Se il nome utente è valido ma la password non lo è, WordPress mostrerà il seguente messaggio nella schermata di accesso.

Questo può essere utile per qualcuno della tua organizzazione con buone intenzioni, ma fornisce informazioni preziose agli hacker. Quindi, per rendere il tuo sito più sicuro, puoi modificare i messaggi di errore predefiniti.

Modifica dei messaggi di errore di accesso

Per modificare i messaggi di errore di accesso non sono necessari plugin. Con poche righe di codice PHP, puoi disabilitare i suggerimenti di accesso/i messaggi di errore predefiniti.

NOTA : poiché modificheremo il file functions.php , assicurati di eseguire un backup completo del tuo sito e di installare un tema figlio prima di iniziare.

Per prima cosa, vai all'editor del tema e apri il file functions.php del tuo tema figlio. Quindi, copia il codice seguente.

 funzione no_wordpress_errors(){
 restituisce 'Qualcosa non va!';
 }
 add_filter('login_errors', 'no_wordpress_errors');

Come puoi vedere, il codice visualizzerà un messaggio che dice " Qualcosa non va! ” quando la combinazione di nome utente e password non è corretta.

Incollalo all'interno del file functions.php e aggiornalo.

Ora apri una finestra di navigazione in incognito e prova ad accedere alla pagina di amministrazione di WordPress con un nome utente e una password casuali.

Questo ti aiuterà a rendere il tuo sito più sicuro poiché gli hacker non sapranno se c'è un problema con il nome utente o la password.

Aggiungi CAPTCHA alla pagina di accesso

Un altro modo per personalizzare la tua pagina di accesso è aggiungere CAPTCHA. Questa è un'ottima soluzione per coloro che vogliono migliorare la propria sicurezza di accesso e tenere lontani i bot.

Puoi aggiungere CAPTCHA a livello di codice o con un plug-in dedicato. Per questa demo, utilizzeremo un plug-in, ma per ulteriori informazioni al riguardo, consulta la nostra guida completa su come aggiungere CAPTCHA al login di WooCommerce.

In questa sezione utilizzeremo reCaptcha di BestWebSoft, un eccellente plugin CAPTCHA gratuito.

Innanzitutto, installa e attiva il plug-in dalla tua dashboard di WordPress. Quindi, vai alla console di amministrazione di Google reCAPTCHA e completa la registrazione compilando le informazioni richieste. Dovrai selezionare il tipo di CAPTCHA che desideri utilizzare. Nel nostro caso, utilizzeremo reCAPTCHA v2, che è il più comune.

Quindi copia la chiave del sito e la chiave segreta e incollale nelle impostazioni di reCAPTCHA nella dashboard del tuo WP. Assicurati di aver selezionato la stessa versione CAPTCHA che hai scelto in precedenza.

Successivamente, seleziona le pagine in cui desideri visualizzare il CAPTCHA, salva le impostazioni e il gioco è fatto! Il tuo sito sarà più sicuro ora.

Per una spiegazione più dettagliata, consulta la guida completa da questo link.

Conclusione

Tutto sommato, la modifica della pagina di accesso è un must per i siti di appartenenza, i negozi di eCommerce e i siti Web con una sezione di affiliazione Inoltre, considerando quanti attacchi ricevono le pagine di accesso, dovresti personalizzarla per migliorare la sicurezza del tuo sito.

In questa guida, abbiamo visto diversi modi per personalizzare la pagina di accesso di WordPress. Se vuoi qualcosa di semplice e veloce, il metodo del plugin è la strada da percorrere. La personalizzazione della pagina di accesso personalizzata è dotata di molte funzionalità ed è facile da usare.

D'altra parte, se hai competenze di programmazione, puoi modificare la pagina di accesso in modo programmatico e codificare la tua soluzione.

Infine, con un page builder/landing page builder, puoi personalizzare la pagina di accesso senza scrivere alcun codice. Uno dei principali vantaggi dei plug-in per la creazione di pagine è che puoi vedere i cambiamenti in tempo reale e che vengono forniti con diversi modelli predefiniti.

Per ulteriori modi per personalizzare il tuo sito, dai un'occhiata ai seguenti tutorial:

• L'accesso a WordPress non funziona? Come sistemarlo
• Come personalizzare il modulo di registrazione di WordPress
• Impara a modificare la pagina di ringraziamento di WooCommerce
• Come personalizzare la pagina del prodotto WooCommerce
• Come modificare la pagina del mio account in WooCommerce

Conosci un altro modo per personalizzare la pagina di accesso di WordPress? Quale metodo utilizzerai? Fateci sapere nei commenti qui sotto.