Come personalizzare la pagina di accesso di WordPress
Pubblicato: 2022-01-02Perché hai bisogno di una pagina di accesso personalizzata per WordPress?
- I tuoi utenti si registreranno e accederanno utilizzando la schermata di accesso predefinita di WordPress, poiché WordPress non fornisce alcuna opzione integrata per aggiungere il proprio logo o modificare l'aspetto generale in modo che corrisponda a qualsiasi tema o marchio personalizzato che hai sul tuo sito.
- Questo può funzionare bene per i piccoli siti web. Tuttavia, se stai gestendo un sito web aziendale o una community online molto impegnata, potresti voler mostrare il tuo marchio invece di WordPress.
Ecco i due modi in cui puoi passare:
Puoi contattare gli esperti della famosa società di sviluppo WordPress dagli Stati Uniti per qualsiasi domanda.
Continuiamo a leggere le soluzioni di seguito!
1. Usa il layout WordPress esistente.
- In realtà è abbastanza facile personalizzare quello esistente.
- Se si tratta solo di cambiare il logo o di dargli un layout completamente diverso, il punto di partenza è l'azione login_enqueue_scripts.
- Qui è dove puoi prendere la decisione di produrre un normale, semplice pezzo di CSS o di fornire un collegamento a un file completo di CSS. Puoi anche mettere in coda qualsiasi JavaScript di tua scelta, che desideri utilizzare.
- In function.php
add_action('login_head', 'my_custom_login'); function my_custom_login() { echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/your_login_styles.css" />';}
- your_login_styles.css è il nome del file css che viene creato per personalizzare la pagina di accesso.
- Bisogna fare attenzione qui, assicurarsi di utilizzare selettori estremamente specifici, al fine di assicurarsi di sovrascrivere lo stile di base.
- Per impostazione predefinita, il logo collega chiunque all'indirizzo: wordpress.org. Questo può essere cambiato nell'URL del tuo sito usando il codice seguente nel tuo file functions.php:
add_filter( 'login_headerurl', 'my_login_logo_url' ); function my_login_logo_url() { return get_bloginfo('url'); } add_filter( 'login_headertitle', 'my_login_logo_url_title' ); function my_login_logo_url_title() { ritorna 'Nome e informazioni del tuo sito';}
Il modo più conveniente per modificare il messaggio di errore è tramite il codice seguente nel tuo functions.php :
add_filter('login_errors', 'login_error_override'); funzione login_error_override() { return 'Dati di accesso errati.'; }
Correlati: WordPress vs Adobe Business Catalyst: quale CMS è il migliore per lo sviluppo?
2. Crea un nuovo layout.
- Per cominciare, è necessario creare un modello di pagina personalizzato per la pagina di accesso.
- Per fare ciò, puoi scegliere di creare un nuovo modello di pagina e dargli un nome. ad es.: page-login.php.
- Successivamente, crea una nuova pagina da WP Admin. Imposta il permalink per accedere. Pertanto, WordPress prenderà per impostazione predefinita il modello page-login.php per questa pagina.
- Conserva il tag wp_login_form nel modello di pagina page-login.php per visualizzare il modulo di accesso
Elsner.com
Un'agenzia globale di soluzioni informatiche che fornisce servizi digitali innovativi e creativi alle aziende che desiderano crescere online. Concentrandoci sui risultati, utilizziamo le nostre competenze tecniche e le conoscenze del settore per aiutarti a raggiungere i tuoi obiettivi digitali. Che si tratti di ridurre la frequenza di rimbalzo con il web design interattivo o di portare nuovi flussi di traffico e reddito al tuo sito web. <a href="www.elsner.com/contact-us">Parla con noi</a> del tuo progetto per iniziare...
</p> </div> <div class="form-login"> <?php $argomenti = array( 'redirect' => home_url(), 'id_username' => 'utente', 'id_password' => 'pass', ); ?> <?php wp_login_form( $args ); ?> </div>
- È possibile creare un CSS secondo le vostre esigenze personali. La pagina di accesso è già in funzione.
- Possiamo tentare di accedere, se ha successo, verremo reindirizzati all'indirizzo specificato nel parametro di reindirizzamento sopra. Tuttavia, c'è qualcosa da affrontare.
add_action('init','redirect_login_page'); funzione 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); Uscita; } }
– La pagina di accesso potrebbe funzionare come previsto dopo aver effettuato l'accesso. Nel caso in cui si verifichi un errore, ad esempio quando si invia una combinazione di ID e password non valida o si inviano spazi vuoti, verremo reindirizzati a wp-login.php. Per risolvere questo problema, puoi aggiungere la seguente funzione nel tuo functions.php:

add_action( 'wp_login_failed', 'login_failed' ); funzione login_failed() { $login_page = home_url( '/login/' ); wp_redirect( $login_page . '?login=fallito' ); Uscita; }
add_filter( 'autentica', 'verifica_password_nome_utente', 1, 3); funzione verifica_nomeutente_password( $utente, $nomeutente, $password) { $login_page = home_url( '/login/' ); if( $nome utente == "" || $password == "" ) { wp_redirect( $login_page . "?login=vuoto" ); Uscita; } }
– Il problema finale è che verremo reindirizzati anche a wp-login.php quando saremo disconnessi dal sito. Pertanto, è necessario specificare anche l'URL di reindirizzamento al momento del logout.
add_action('wp_logout','logout_page'); funzione logout_page() { $login_page = home_url( '/login/' ); wp_redirect( $login_page . "?login=false" ); Uscita; }
- Ci sono una serie di cose che potrebbero essere fatte per migliorare la pagina di accesso come l'aggiunta del link per la password persa, il link di registrazione e persino un messaggio di errore personalizzato. Tuttavia, in questo frangente, ora funziona abbastanza bene da consentire agli utenti di accedere e disconnettersi. Potrebbe essere un ottimo inizio per creare una pagina di accesso più avanzata.
Quindi sì! Questo è tutto.
Con poche semplici modifiche, puoi personalizzare abbastanza comodamente la tua pagina di accesso in modo che corrisponda all'aspetto e all'atmosfera del tuo sito.
Molti designer di temi si astengono dallo stile della pagina di accesso in quanto lo ritengono non necessario, specialmente quando non è presente nella configurazione del tema di WordPress.
Tuttavia, quando si crea un sito cliente, trascurando lo stile e, soprattutto, il marchio, la pagina di accesso può rivelarsi un'opportunità persa che potrebbe compromettere l'esperienza dell'utente quando è presente un tema personalizzato.
L'altra opportunità di marcare il tuo sito, che lascia anche un'impressione duratura nella mente del tuo utente.
