Come tutti sappiamo WordPress permette di fare il login solo via back end digitanto semplicemente /wp-admin dopo l’indirizzo del sito web, questo metodo è nativo e funziona perfettamente, può andare bene se l’utente deve poi accedere effettivamente al back office, ma cosa succede se vogliamo che l’utenti acceda da front end e rimanga a navagiare nel front end ?
Possiamo utilizzare due metodi per poter portare a front end il login di WordPress, vediamo subito come.
Metodo 1 : Come loggarsi a WordPress dal front end creando una pagina con template personalizzato
Per prima creiamo un nuovo template pagina, per fare ciò andiamo nella root del nostro template e creiamo un file che si chiama login_page.php , il nome lo potete tranquillamente cambiare.
Al suo interno inseriamo il seguente codice
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
<?php /** * Template Name: Login Page A2 * * Login Page Template. * * @author Alessio Angeloro * @since 1.0.0 */ get_header(); ?> <style> section.a2_loginForm label { width: 100%; } section.a2_loginForm input[type="text"],section.a2_loginForm input[type="password"] { border-radius: 3px; width: 100%; } section.a2_loginForm p.login-password::before { content: "\f023"; font-family: fontawesome; margin: 35px 0px 0px 334px; position: absolute; } section.a2_loginForm p.login-username::before { content: "\f007"; font-family: fontawesome; margin: 35px 0 0 336px; position: absolute; } section.a2_loginForm { margin: 0 auto; display: block; width: 400px; background: #ffffff; border-radius: 3px; padding: 22px; } </style> <!-- section --> <section class="a2_loginForm"> <?php global $user_login; // In case of a login error. if ( isset( $_GET['login'] ) && $_GET['login'] == 'failed' ) : ?> <div class="a2_error"> <p><?php _e( 'FAILED: Try again!', 'A2' ); ?></p> </div> <?php endif; // If user is already logged in. if ( is_user_logged_in() ) : ?> <div class="a2_logout"> <?php _e( 'Ciao, sei connesso come ', 'A2' ); echo '<strong>' . $user_login .'</strong>'; ?> </div> <a id="wp-submit" class="btn btn-danger btn-lg" href="<?php echo wp_logout_url( home_url() ); ?>" title="Logout"> <?php _e( 'Logout', 'A2' ); ?> </a> <?php // If user is not logged in. else: // Login form arguments. $args = array( 'echo' => true, 'redirect' => home_url( '/' ), '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' => true ); // Calling the login form. wp_login_form( $args ); endif; ?> </section> <!-- /section --> <?php get_footer(); ?> |
Ora creiamo una nuova pagina, per esempio Login, e selezioniamo il template appena creato.
Questo è il risultato visitando la pagina Login.
Metodo 2: Una funzione WordPress che permette il login da frontend utilizzando uno shortcode
Il secondo metodo è quello di creare una funzione con uno shortcode, questo metodo lo trovo molto utile perchè non è vincolato ad una pagina, infatti essendo uno shortcode lo possiamo utilizzare dove meglio crediamo.
Vediamo quindi il codice
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
//Front end login function fe_login( $atts ){ ?> <style> section.a2_loginForm label { width: 100%; } section.a2_loginForm input[type="text"],section.a2_loginForm input[type="password"] { border-radius: 3px; width: 100%; } section.a2_loginForm p.login-password::before { content: "\f023"; font-family: fontawesome; margin: 35px 0px 0px 334px; position: absolute; } section.a2_loginForm p.login-username::before { content: "\f007"; font-family: fontawesome; margin: 35px 0 0 336px; position: absolute; } section.a2_loginForm { margin: 0 auto; display: block; width: 400px; background: #ffffff; border-radius: 3px; padding: 22px; } </style> <!-- section --> <section class="a2_loginForm"> <?php global $user_login; // In case of a login error. if ( isset( $_GET['login'] ) && $_GET['login'] == 'failed' ) : ?> <div class="a2_error"> <p><?php _e( 'FAILED: Try again!', 'A2' ); ?></p> </div> <?php endif; // If user is already logged in. if ( is_user_logged_in() ) : ?> <div class="a2_logout"> <?php _e( 'Ciao, sei connesso come ', 'A2' ); echo '<strong>' . $user_login .'</strong>'; ?> </div> <a id="wp-submit" class="btn btn-danger btn-lg" href="<?php echo wp_logout_url( home_url() ); ?>" title="Logout"> <?php _e( 'Logout', 'A2' ); ?> </a> <?php // If user is not logged in. else: // Login form arguments. $args = array( 'echo' => true, 'redirect' => home_url( '/' ), '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' => true ); // Calling the login form. wp_login_form( $args ); endif; ?> </section> <!-- /section --> <?php } add_shortcode( 'login', 'fe_login' ); |
Come si può notare l codice in sè non cambia molto, l’ho semplicemente racchiuso in una funione; ora utilizzando lo shortcode [login], possiamo visualizzare il form ovunque vogliamo.
Per questo metodo possiamo inserire il codice nel file functions.php del nostra tema oppure sviluppare un plugin ad hoc per WordPress.
Programmatore WordPress Esperto WooCommerce
Sono l’autore di questo blog con tanti trucchi e guide su WordPress e WooCommerce.
