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.

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 :

wp login word presse connexion

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 connexion tuto

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.

Enregistrer

Enregistrer

Enregistrer

[Total : 3    Moyenne : 5/5]

Commentaires 5

  1. dom 5 juillet 2017
    • Antoine Pitula 6 juillet 2017
  2. dom. 6 juillet 2017
  3. Grosjean Céline 9 août 2017
    • Antoine Pitula 9 août 2017

Laisser une réponse