Come creare un area login e logout in WordPress

Come creare un area login e logout nel front-end di WordPress

Creare un area login al tuo sito WordPress è un’ottima soluzione se desideri che l’utente che si registra al tuo sito deve restare sul front-end del tuo blog.

Come già ben sai WordPress ci permette di effettuare il login solo via back-end digitando il percorso specifico www-nomesito.com/wp-login.php

Il metodo nativo implementato in WordPress funziona correttamente, e va bene se l’amministratore del sito vuole effettivamente accedere all’area back-end, ma se vogliamo che i nuovi utenti accedano al nostro sito da front-end come facciamo?

Bene ci occorre creare un’area login personalizzata, ora ti mostrerò come creare un area di accesso a WordPress per i tuoi nuovi utenti.

Creare un area login e logout

La prima operazione da effettuare e creare un template personalizzato i che utilizzeremo per creare l’area login.

Ci occorrerà creare un file che potrai chiamare come vuoi, io chiamerò il file “login.php”.

All’interno del file ti basta copiare il seguente codice che ti riporto:


<?php

/**

* Template Name: Login

*

* Come creare area login e logut

*/

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(); ?> 

 

 

 

Utilizzando il codice che ti ho riportato creeremo un’area login personalizzato, se vuoi puoi anche modificare il codice css a tuo piacimento.

Inserire area Login nella pagina WordPress

Ora non dovrai fare altro che aggiungere una nuova pagina al tuo sito WordPress e nella colonna destra esattamente negli attributi della pagina devi selezionare il modello.

In questo caso nel menu a tendina troverai il nuovo template login che abbiamo appena creato, ti basta selezionarlo.

Una volta creata la pagina puoi renderla visibile nel tuo blog, inserirla nel menù  o nella sidebar oppure nel footer.

Il risultato che vedrai sarà cosi:

Come creare un'area login in WordPress
Come creare un’area login in WordPress

Conclusione

Abbiamo visto come creare un area login nel nostro sito senza utilizzare un plugin ad hoc per implementare tale funzione. Se ti fa comodo potrai creare anche un area riservata per i tuoi utenti  per far vedere i contenuti privati del tuo sito.

Se ti interessa questa funzione ho già scritto una guida in merito.

Autore Bartolomeo

Consulente tecnico con la passione per il web e la tecnologia e tutto quello che le ronza intorno.
Nel tempo libero scrivo articoli per il mio blog su argomenti vari, in particolare su configurazione Windows, Linux e WordPress.

Condividi questo articolo!

2 Commenti

Susi Rispondi

Gentile Bartolomeo,
ti ringrazio infinitamente per questa tua preziosa indicazione, che ho utilizzato in combinazione con la guida alla creazione di una’rea riservata.

Facendo appello alla tua competenza e disponibilità, ti chiedo anche, se possibile, di indicarmi una soluzione per gestire il redirect dell’utente dopo il login, per fare in modo che atterri direttamente nell’area riservata.

Grazie in anticipo!

Bartolomeo Rispondi

Ciao,
ti riferisci che dopo aver fatto il login l’utente entri nella sua area dove vedrà solo i contenuti per per lui? Se fosse cosi, ho qualcosa che fa al tuo caso. Ti aggiorno tra qualche giorno in modo da pubblicarlo sul mio blog.
saluti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Ho letto la policy privacy e accetto il trattamento dei miei dati personali in conformità al D.Lgs. 196/2003