Come personalizzare la registrazione e login di WordPress

Nella guida di oggi vedremo come personalizzare la registrazione e login di WordPress in pochi semplici passi.

Personalizzare il login e la registrazione standard di WordPress può essere comodo per “aprire” il sito a registrazioni, area commenti e molto altro.

Ovviamente potete in alternativa creare una matrice di pagina e gestire il form in ajax direttamente da quella pagina, ma in questo articolo tratteremo invece come personalizzare quello di default (wp-login.php) per renderlo adatto alle nostre esigenze.

Per iniziare create una cartella chiamata “inc” (o a vostro piacere) all’interno della cartella del vostro tema.

A questo punto al suo interno create un file chiamato custom-login.php

Aprite ora il file functions.php del vostro tema e inserite il seguente codice:

require get_template_directory(). '/inc/custom-login.php';

A questo punto avrete semplicemente “diviso” la logica del vostro custom login dal resto del function andando a “pacchettizzare” le funzioni di login.

Questo vi permetterà non solo di poter ri-usare facilmente tutto il codice su un altro tema ma anche in caso di modifiche o se vorrete levare le personalizzazioni, vi basterà commentare una singola linea di codice invece di girovagare per il vostro functions.

Personalizzare css e messaggi di errore

Bene, a questo punto andiamo a comporre il nostro custom-login.php

file: custom-login.php

La prima funzione/hook utile che andremo ad aggiungere è quella per caricare i nostri stili personalizzati dentro la schermata del wp-login.php. Di default infatti il vostro style.css non avrà effetto dentro quella pagina.

function my_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/style.css" />';
}
add_action('login_head', 'my_custom_login');

In questo esempio ho semplicemente caricato tutto lo style.css per comodità se volete potete anche creare uno style a parte (es. login.css).

Un altro hook utile è quello per personalizzare il messaggio di errore durante il login. E’ sempre meglio non dare troppe informazioni su cosa l’utente ha sbagliato (es. Username errata), perchè potremmo dare adito a possibili tentativi di brute force.

function login_error_override()
{
    return 'Credenziali errate. Riprova.';
}
add_filter('login_errors', 'login_error_override');

Personalizzazione Logo e Site Title

Con le funzioni di seguito potrete personalizzare l’url del logo nella pagina di login e il titolo del sito in pagina.

function my_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
return 'Site Title';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

Per personalizzare il logo e lo sfondo del login e della registrazione di WordPress invece:

body.login {
  background-image: url(URL_AL_TUO_SFONDO.png) !important;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}
.login h1 a {
    background-image: url(URL_AL_TUO_LOGO.png);
    background-size: 175px;
    background-position: center top;
    background-repeat: no-repeat;
    color: #444;
    height: 60px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3em;
    margin: 0 auto 25px;
    padding: 0;
    text-decoration: none;
    width: 187px;
    text-indent: -9999px;
    outline: 0;
    overflow: hidden;
    display: block;
}

Aggiungere link privacy policy dentro il login e la registrazione di WordPress

add_action( 'login_head', function() {
    add_filter( 'the_privacy_policy_link', function( $link, $url ) {
        // do stuff
        return "Accedendo al sito accetti la nostra ".$link;
    }, 10, 2 );
} );

Grazie a questa funzione potrete aggiungere il link alla vostra pagina di privacy policy in modo da rendere la vostra registrazione e login conforme con lo standard GDPR.

Personalizzare redirect dopo il login di WordPress

Uno degli hook che potrebbe esservi maggiormente utile è quello per personalizzare il redirect dopo il login di WordPress. Scopriamo come.

function admin_login_redirect( $redirect_to, $request, $user )
{
	global $user;
        $customRedirect = "TUO_URL_DI_REDIRECT";
	if( isset( $user->roles ) && is_array( $user->roles ) ) {
		if( in_array( "administrator", $user->roles ) ) {
			return $redirect_to;
		} else {
			if ( user_can( $user, "subscriber" ) ) :
			//Solo per chi è sottoscrittore
			return $customRedirect;
			else:
			return $redirect_to;
			endif;
		}
	}else{
	return $redirect_to;
	}
}
add_filter("login_redirect", "admin_login_redirect", 10, 3);

Nel codice che vedete qui sopra vogliamo fare in modo che chiunque abbia il ruolo di sottoscrittore vada all’url che siamo andati a specificare dentro $customRedirect. Per tutti gli altri lasciamo il redirect di default ($redirect_to). Ovviamente potete personalizzare il codice come meglio preferite, ad esempio un uso potrebbe essere quello di salvare in cookie la pagina in cui l’utente ha cliccato “accedi” e, se settato, fare il redirect a quell’url del cookie dentro questa funzione. In questo modo una volta loggato il vostro utente tornerà all’interno dell’articolo che stava leggendo.

Classi e stile css utile

Di seguito troverete una lista di css utili al fine di personalizzare il vostro login/registrazione.

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

Social Login WordPress

Uno dei plugin che ho trovato maggiormente utili e ben strutturati è sicuramente quello per il social login.

Nextend Social Login

Potrete facilmente configurare i vostri social preferiti per il login, e automaticamente appariranno i pulsanti per l’accesso rapido dentro il login e registrazione di WordPress.

Il plugin permette di configurare vari provider, personalizzare i pulsanti di accesso e molto altro.

Ovviamente per poterlo usare dovrete scaricare le chiavi di accesso ai vari provider social nei rispettivi pannelli di gestione app.

Conclusioni

Spero che questo articolo sia stato utile, fatemi sapere cosa ne pensate nei commenti ed eventualmente condividete con noi altri hook o personalizzazioni utili.

Update Settembre 2019

Come personalizzare i messaggi di errore della registrazione e login di WordPress

File: functions.php

//CAMBIO ERRORI DI DEFAULT DI WORDPRESS
function my_custom_error_messages() {
	global $errors;
	$err_codes = $errors->get_error_codes();
	
	// Invalid username.
	if ( in_array( 'invalid_username', $err_codes ) ) {
	$error = '<strong>ERROR</strong>: Username non valido.';
	}
        
        //Email gia registrata
	if ( in_array( 'email_exists', $err_codes ) ) {
	$error = '<strong>ERROR</strong>: Email già registrata.';
	}

	// Password
	if ( in_array( 'incorrect_password', $err_codes ) ) {
	$error = '<strong>ERROR</strong>: La password non è corretta.';
	}

	return $error;
}//my_custom_error_messages
add_filter( 'login_errors', 'my_custom_error_messages');
//END - CAMBIO ERRORI DI DEFAULT DI WORDPRESS

Come aggiungere campi personalizzati alla registrazione di WordPress

Nell’esempio qui sotto andremo ad aggiungere i seguenti campi: Nome, Cognome, e Sesso alla registrazione di WordPress.

File: Functions.php

//AGGIUNGO NOME, COGNOME, SESSO
//OBBLIGATORI

//1. Elementi del form
add_action( 'register_form', 'myplugin_register_form' );
function myplugin_register_form() {

$nome = ( ! empty( $_POST['nome'] ) ) ? sanitize_text_field( $_POST['nome'] ) : '';
$cognome = ( ! empty( $_POST['cognome'] ) ) ? sanitize_text_field( $_POST['cognome'] ) : '';
$sesso = ( ! empty( $_POST['sesso'] ) ) ? sanitize_text_field( $_POST['sesso'] ) : '';
?>
		
<p>
<label for="nome"><?php _e( 'First Name', 'tema' ) ?><br />
<input type="text" name="nome" id="nome" class="input" value="<?php echo esc_attr(  $nome  ); ?>" size="25" /></label>
</p>

<p>
<label for="cognome"><?php _e( 'First Name', 'tema' ) ?><br />
<input type="text" name="cognome" id="cognome" class="input" value="<?php echo esc_attr(  $cognome  ); ?>" size="25" /></label>
</p>

<p>
<label for="sesso"><?php _e( 'Sesso', 'tema' ) ?>
<select name="sesso" id="sesso" class="input" >
<option value="<?php echo esc_attr( $sesso  ); ?>"><?php echo esc_attr(  $sesso  ); ?></option>
<option value="Donna">Donna</option>
<option value="Uomo">Uomo</option>
</select>
</label>
</p>
	
<?php
}//myplugin_register_form

//2. Validazione, in questo caso richiesta.
add_filter( 'registration_errors', 'myplugin_registration_errors', 10, 3 );
function myplugin_registration_errors( $errors, $sanitized_user_login, $user_email ) {
        
if ( empty( $_POST['nome'] ) || ! empty( $_POST['nome'] ) && trim( $_POST['nome'] ) == '' ) {
$errors->add( 'nome_error', sprintf('<strong>%s</strong>: %s',__( 'ERROR', 'tema' ),__( 'You must include a nome.', 'delta' ) ) );
}
		
if ( empty( $_POST['cognome'] ) || ! empty( $_POST['cognome'] ) && trim( $_POST['cognome'] ) == '' ) {
$errors->add( 'cognome_error', sprintf('<strong>%s</strong>: %s',__( 'ERROR', 'tema' ),__( 'You must include a cognome.', 'delta' ) ) );
}

if ( empty( $_POST['sesso'] ) || ! empty( $_POST['sesso'] ) && trim( $_POST['sesso'] ) == '' ) {
$errors->add( 'sesso_error', sprintf('<strong>%s</strong>: %s',__( 'ERROR', 'tema' ),__( 'You must include a sesso.', 'delta' ) ) );
}
return $errors;
}//myplugin_registration_errors

//3. Salvataggio
add_action( 'user_register', 'myplugin_user_register' );
function myplugin_user_register( $user_id ) {

if ( ! empty( $_POST['nome'] ) ) {
update_user_meta( $user_id, 'nome', sanitize_text_field( $_POST['nome'] ) );
}

if ( ! empty( $_POST['cognome'] ) ) {
update_user_meta( $user_id, 'cognome', sanitize_text_field( $_POST['cognome'] ) );
}

if ( ! empty( $_POST['sesso'] ) ) {
update_user_meta( $user_id, 'sesso', sanitize_text_field( $_POST['sesso'] ) );
}

}//myplugin_user_register

Codice per recuperare e visualizzare i nuovi campi dentro la vista utente all’interno di WordPress.

File: functions.php

add_action( 'show_user_profile', 'extra_user_profile_fields' );
add_action( 'edit_user_profile', 'extra_user_profile_fields' );

function extra_user_profile_fields( $user ) { ?>
   <h3><?php _e("Informazioni aggiuntive", "blank"); ?></h3>
   <table class="form-table">
   <tr>
	<th><label for="nome"><?php _e("nome"); ?></label></th>
	<td>
	 <input type="text" name="nome" id="nome" value="<?php echo esc_attr( get_the_author_meta( 'nome', $user->ID ) ); ?>" class="regular-text" /><br />
	   </td>
   </tr>
   <tr>

    <th><label for="cognome"><?php _e("cognome"); ?></label></th>
    <td>
	  <input type="text" name="cognome" id="cognome" value="<?php echo esc_attr( get_the_author_meta( 'cognome', $user->ID ) ); ?>" class="regular-text" /><br />
	</td>
   </tr>
   <tr> 

  <th><label for="sesso"><?php _e("sesso"); ?></label></th>
	   <td>
	<input type="text" name="sesso" id="sesso" value="<?php echo esc_attr( get_the_author_meta( 'sesso', $user->ID ) ); ?>" class="regular-text" /><br />
	   </td>
   </tr>
   </table>
   <?php 
   } //extra_user_profile_fields

Image Credits: WordPress disponibile su Shutterstock