Come creare un modulo di accesso personalizzato in WordPress
Di recente, mi sono imbattuto in una situazione in cui il mio cliente voleva che creassi un modulo di accesso personalizzato in WordPress. Lo sviluppatore HTML ha creato un modulo di accesso accattivante e me lo ha consegnato. In questo articolo, ti mostro come ho utilizzato il design esatto del modulo di accesso e ho creato un modulo di accesso personalizzato in WordPress.
Perché è necessario un modulo di accesso personalizzato in WordPress?
WordPress ha fornito un modulo integrato per l’accesso alla dashboard. Questo modulo è disponibile in back-end solo con il design predefinito. Non possiamo mostrare questo modulo predefinito sul lato front-end poiché questo design non corrisponde al front-end.
Utilizzo della funzione wp_login_form
WordPress fornisce un metodo wp_login_form() che può essere utilizzato per creare un modulo di accesso front-end. Abbiamo solo bisogno di passare i parametri alla funzione e visualizzerà il modulo HTML sul sito. Chiama questa funzione ovunque tu voglia inserire un modulo di accesso.
<?php
if (! is_user_logged_in()) {
$args = array(
'echo' => true,
'remember' => true,
'redirect' => (is_ssl()? 'https://': 'http://' ). $_SERVER['HTTP_HOST']. $_SERVER['REQUEST_URI'],
'form_id' => 'loginform',
'id_username' => 'user_login',
'id_password' => 'user_pass',
'id_remember' => 'rememberme',
'id_submit' => 'wp-submit',
'label_username' => __( 'Username' ),
'label_password' => __( 'Password' ),
'label_remember' => __( 'Remember Me' ),
'label_log_in' => __( 'Log In' ),
'value_username' => '',
'value_remember' => false
);
wp_login_form( $args );
}
?>Abbiamo utilizzato il metodo is_user_logged_in() per verificare se l’utente ha già effettuato l’accesso. Il nostro modulo di accesso verrà visualizzato solo per gli utenti non registrati. Come mostrato nell’array $args, ‘form_id’ => ‘loginform’ aggiungerà l’attributo id HTML ‘loginform’ a un modulo di accesso generato. Allo stesso modo, possiamo passare id a username, password come ‘id_username’ => ‘user_login’ e ‘id_password’ => ‘user_pass’ rispettivamente. Di seguito è riportato lo screenshot di un modulo generato.
Una volta generato il modulo di accesso, puoi modificare il CSS utilizzando l’id di un modulo, i campi del nome utente ecc. In questa fase, ho applicato i CSS a questo modulo come fornito dallo sviluppatore HTML. Non mostrerò un progetto di forma finale. Lo scopo di questo tutorial è solo quello di mostrare come si può ottenere lo stesso risultato.
Spero che tu capisca come creare un modulo di accesso personalizzato in WordPress. Per qualsiasi domanda o suggerimento, lascia un commento qui sotto.