WP login : Créez votre propre page de connexion WordPress !

WordPress login, créez votre propre page de connexion facilement

Si vous créez des sites grâce à WordPress, vous passez de très nombreuses fois par les pages de connexion fournie par le CMS. Vous savez donc à quel point, cette page peut-être non accueillante pour les utilisateurs. Le commun des mortels n’a, en général, aucune connaissance des adresses de connexion, à savoir/wp-login et/wp-admin. Il est donc intéressant de leur offrir une page de connexion avec une URL plus simple.

  1. Création d’un modèle de page connexion
  2. Utilisation du modèle de connexion dans WordPress
  3. Méthode 1 : connexion en PHP
  4. Méthode 2 : connexion en formulaire HTML
  5. Ajouter des messages d’erreurs lors du login
  6. Indiquer les champs de connexion vides
  7. Indication des champs de connexion erronés

Créer un modèle de page pour votre espace de connexion WordPress

La première étape de la création de notre page de connexion consiste à créer un modèle de page. Il faut savoir qu’il n’est pas possible d’inclure autre que du HTML dans le back-office de WordPress, et vu que nous allons utiliser un peu de PHP il va falloir faire passer par cette méthode qui n’a rien de compliqué.

À l’aide de votre accès FTP (navigateur ou logiciel), accédez à votre thème enfant et créez-y un fichier appelé connexion.php. Dans ce fichier, mettez le code suivant :

<?php
/*
Template Name: connexion
*/
get_header(); ?>


<?php get_footer(); ?>

Vous possédez désormais un modèle de page vierge sur lequel nous pouvons créer notre espace de connexion.

Utiliser votre modèle de page dans le tableau de bord WordPress

Pour publier une page utilisant votre modèle, il vous suffit d’ajouter une page depuis le back-office de WordPress. Sur la partie droite, en général en dessous du bouton de publication, vous devriez trouver le menu déroulant vous permettant de choisir les templates :

connexion wordpress a customiser

Désormais, à chaque fois que vous choisissez le modèle « connexion » sur votre site, la page affichera le code qui est ajouté dans le fichier connexion.php.

Première méthode, connexion avec du code PHP

C’est certainement la méthode la plus simple. Il existe dans WordPress de nombreuses fonctions php déjà créées qui permettent d’aller chercher des informations ou de l’affichage.

En dessous de get-header (), inscrivez le code suivant :

<?php wp_login_form(); ?>

Ce dernier va automatiquement aller chercher le formulaire de connexion créé pour WordPress, ce qui vous donnera le résultat suivant (avec des variations selon votre thème) :

login wordpress

Comme vous le constatez, il n’y a pas de lien de récupération de mot de passe, une option bien pratique. Pour l’ajouter, rendez-vous dans le fichier function.php (toujours de votre thème enfant) et ajoutez-y ceci :

function lost_password_link( $formbottom ) {
	$formbottom .= '<a href="' . wp_lostpassword_url() . '">Mot de passe perdu</a>';
	return $formbottom;
}
add_filter( 'login_form_bottom', 'lost_password_link' );

Seconde méthode : créer votre formulaire de connexion en HTML

Cette méthode est un peu plus longue, mais permet de plus grandes possibilités en terme de customisation. Ici, aucun code PHP, nous pouvons donc, dans l’absolu, entrer tout ce code dans la partie « Texte » de l’outil de publication WordPress, travailler sur un IDE tel que Sublime Text ou NotePad reste cependant plus confortable.

Encore une fois, il s’agit d’inclure le code en dessous de la fonction get_header() :

<form method="post" action="http://www.VOTRE_SITE.com/wp-login.php" id="loginform" name="loginform">
  <p>
    <label for="user_login">Identifiant</label>
    <input type="text" tabindex="10" size="20" value="" id="user_login" name="log">
  </p>
  <p>
    <label for="user_pass">Mot de passe</label>
    <input type="password" tabindex="20" size="20" value="" id="user_pass" name="pwd">
  </p>
  <p><label><input type="checkbox" tabindex="90" value="forever" id="rememberme" name="rememberme">Rester connecter</label>
  | <a href="http://www.VOTRE_SITE.com/wp-login.php?action=lostpassword">Mot de passe oublié</a></p>
  <p>
    <input type="submit" tabindex="100" value="Se connecter" id="wp-submit" name="wp-submit">
    <input type="hidden" value="http://www.VOTRE_SITE.com/" name="redirect_to">
  </p>
</form>

Pensez simplement à remplacer le « VOTRE_SITE » par votre nom de domaine. Ce code étant assez clair, il vous sera facile de modifier son apparence en passant par un peu de css.

Il ne vous reste donc plus qu’à customiser tout ça pour offrir à vos utilisateurs une page de connexion aussi belle que facile à trouver.

Ajouter des messages d’erreur dans son formulaire de contact en HTML

Ajouter plus de renseignement à votre formulaire de contact peut vous permettre d’améliorer l’expérience client tout en boostant la customisation de votre connexion. Ici nous allons ajouter des messages d’erreur pour indiquer si un champs est vide ou mal rempli.

Indiquer si un champs du formulaire de contact est vide

Pour ajouter cette information, nous allons travailler sur les fichiers :

  • function.php
  • le modèle de page de votre connexion

Dans le fichier function.php, nous allons ajouter la fonction suivante :

<?php
// message d'erreur si connexion vide
add_action( 'wp_authenticate', '_catch_empty_user', 1, 2 );

function _catch_empty_user( $username, $pwd ) {
  if (empty($pwd)&&empty($username)) {
    wp_safe_redirect(home_url().'/connexion/?login=empty');
    exit();
  }  if ( empty( $username )) {
    wp_safe_redirect(home_url() . '/connexion/?user=empty' );
    exit();
  }
  if (empty($pwd)) {
    wp_safe_redirect(home_url().'/connexion/?pwd=empty');
    exit();
  }
}
?>

Cette fonction va vérifier les champs d’identifiant et de mot de passe (ici stockés dans les variable $username et $pwd). Si l’un des élément est manquant, le formulaire, au lieu de renvoyer vers la page wp-login de base, redirigera vers la page « domaine.fr/connexion/?element=empty » selon l’élément manquant. Soit la même url que votre page de connexion gérée par le modèle de page avec une indication spécifique dans l’url. Attention à bien modifier la fonction si votre page de connexion possède une url différente

Dans votre modèle de page de connexion, ajoutons ceci :

<?php
		$url = 'http://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
		if (strpos($url, 'connexion/?user=empty')!==false) {
			echo "<div class='login_failed'>Champs d'identifiant vide</div>";
		}
		if (strpos($url, 'connexion/?pwd=empty')!==false) {
			echo "<div class='login_failed'>Champs de mote de passe vide</div>";
		}
		if (strpos($url, 'connexion/?login=empty')!==false) {
			echo "<div class='login_failed'>Champs d'identifiant et de mote de passe vide</div>";
		}	
	?>

Cette fonction ajoutera une div dans laquelle une message variera en fonction de l’élément manquant. La fonction vérifie en effet l’url de la page et ajoute le message correspondant à cette dernière dans la fonction. Il ne vous reste plus qu’à personnaliser cet affichage en allant faire un tour dans le css pour la class ‘login-failed’.

Ajouter un message d’erreur en cas de mauvaise saisie dans le formulaire de connexion

Attaquons-nous maintenant aux erreurs dans les champs du formulaire, qu’il s’agisse d’une mauvaise saisie dans l’identifiant ou dans le mot de passe. Vous allez voir que cela ressemble beaucoup à ce que nous avons fait plus haut pour les champs vides.

Dans function.php ajoutons ceci :

<?php
// messaeg d'erreur si erreur de connexion
add_action( 'wp_login_failed', 'pippin_login_fail' );  // hook failed login
function pippin_login_fail( $username ) {
     $referrer = $_SERVER['HTTP_REFERER'];  // where did the post submission come from?
     // if there's a valid referrer, and it's not the default log-in screen
     if ( !empty($referrer) && !strstr($referrer,'wp-login') && !strstr($referrer,'wp-admin') ) {
          wp_redirect(home_url() . '/connexion/?login=failed' );  // let's append some information (login=failed) to the URL for the theme to use
          exit;
     }
}

Cette fonction va vérifier si l’identifiant et le mot de passe existent dans la base du site et qu’ils correspondent bien l’un à l’autre. Si l’un des deux champs comporte une erreur, la fonction redirige vers l’url de connexion suivie de ?login=failed.

Dans le modèle de page de connexion : ajoutons cette fonction :

<?php
		$url = 'http://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
		if (strpos($url,'connexion/?login=failed') !== false) {
		    echo "<div class='login_failed'>Mot de passe ou nom d'utilisateur incorrect</div>";
		}
?>

Si vous avez déjà ajouté la fonction de vérification des champs vides, il n’est pas utile de remettre « $url = ‘http://’ . $_SERVER[‘SERVER_NAME’] . $_SERVER[‘REQUEST_URI’]; ».

Comme plus haut, nous vérifions le contenu de l’url et indiquons un message d’erreur si une faute s’est glissée dans les champs de connexion. Vous noterez ici que nous ne différencions pas les erreurs. Si le mot de passe est erroné, la même url et donc le même message d’erreur sera mis que pour l’identifiant. Indiquer quel champs comporte une erreur pourrait donner trop d’information à de possibles pirates.

[Total : 3    Moyenne : 5/5]

A propos de l'auteur(e)

Centre de préférences de confidentialité

Google Analytics

Google Analytics est un outil Google d'analyse d'audience Internet permettant aux propriétaires de sites Web et d'applications de mieux comprendre le comportement de leurs utilisateurs. Cet outil peut utiliser des cookies pour collecter des informations et générer des rapports sur les statistiques d'utilisation d'un site Web sans que les utilisateurs individuels soient identifiés personnellement par Google. Le cookie "__ga" est celui qui est le plus utilisé par Google Analytics.
En plus d’établir des rapports statistiques d’utilisation des sites web, Google Analytics peut également être utilisé, conjointement avec certains des cookies publicitaires décrits précédemment, pour proposer des publicités plus pertinentes sur les services Google (comme Google Search), sur l’ensemble d’Internet et pour mesurer votre interaction avec les publicités que nous affichons.

Google Analytics
_ga, _gid, _gat