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.
