Outil de personnalisation de la page de réinitialisation du mot de passe de WordPress

Imaginez un utilisateur essayant de réinitialiser son mot de passe sur votre site WordPress, uniquement pour être accueilli par un formulaire générique qui ne ressemble en rien à votre site magnifiquement conçu. Cela peut être déroutant pour les internautes, surtout si vous avez un site où les gens deviennent membres ou se connectent souvent.

Nous avons travaillé avec de nombreux sites au fil des ans. Nous avons constaté que le fait de donner à la page de réinitialisation du mot de passe un aspect similaire au reste du site aide les utilisateurs/utilisatrices et les rend plus à l’aise lorsqu’ils/elles ont besoin de modifier leur mot de passe.

Dans cet article, nous allons vous afficher comment modifier l’apparence de la page de réinitialisation du mot de passe WordPress, en créant une expérience cohérente et visuellement attrayante qui rassure les utilisateurs/utilisatrices.

Pourquoi personnaliser la page de réinitialisation du mot de passe dans WordPress ?

Votre site WordPress est livré avec un puissant système de gestion des utilisateurs qui permet aux personnes de créer un compte utilisateur, de se connecter et de réinitialiser leur mot de passe.

Ces pages affichent par défaut la marque et le logo de WordPress. Parfois, ce n’est pas un problème majeur, surtout si vous ou votre équipe êtes les seules personnes à vous connecter à la zone d’administration.

Toutefois, si vous gérez un magasin de commerce électronique ou un site d’adhésion, vos clients peuvent également avoir besoin de se connecter.

Vous pouvez améliorer l’expérience des utilisateurs en personnalisant ces pages pour qu’elles correspondent à la conception et à l’image de marque de votre site web. Si vous le souhaitez, vous pouvez également ajouter du contenu supplémentaire, comme votre logo ou une liste de messages récents.

Vous avez peut-être déjà suivi nos autres guides sur l’ajout d’un formulaire d’enregistrement d’utilisateur personnalisé et d’une page de connexion.

Voyons maintenant comment personnaliser la page de réinitialisation du mot de passe. Il vous suffit d’utiliser les liens rapides ci-dessous pour passer directement à la méthode que vous souhaitez utiliser :

Méthode 1 : Personnaliser la page de réinitialisation du mot de passe à l’aide de Formidable Forms (Facile)

La façon la plus simple de remplacer la page de réinitialisation du mot de passe de WordPress est d’utiliser Formidable Forms. Cette extension vous permet de remplacer la page de réinitialisation du mot passe par défaut à l’aide d’un code court.

Cette méthode ne vous permet pas de modifier le formulaire de réinitialisation de mot de passe, mais vous pouvez ajouter votre propre contenu autour de celui-ci. Par exemple, vous pouvez ajouter du texte, des images et d’autres contenus à l’aide de l’éditeur de texte standard de WordPress.

Tout d’abord, vous devez installer le plugin Formidable Forms. Pour en savoir plus, consultez notre guide étape par étape sur l’installation d’un plugin WordPress.

Lors de l’activation, vous devrez également installer Formidable Forms Lite. Cette extension gratuite fournit le cœur de la base pour les fonctionnalités plus avancées de l’extension premium.

Une fois que vous avez fait cela, allez à la page Formidable Forms  » Global Settings dans votre tableau de bord et sélectionnez ‘Click to enter a license key manually’.

Vous pouvez trouver la clé de licence dans votre compte sur le site de Formidable Forms. Après avoir saisi/saisie ces informations, cliquez sur le bouton « Enregistrer la licence ».

Ensuite, vous devez installer le module complémentaire User Registration en allant dans Formidable  » Add-Ons. Sur cet écran, trouvez le module complémentaire Enregistrement de l’utilisateur et cliquez sur son bouton « Installer ».

Vous êtes maintenant prêt à créer une page personnalisée de réinitialisation du mot de passe en allant dans Pages  » Add New.

Pour commencer, donnez un titre à la page, puis cliquez sur le bouton +. Dans la fenêtre surgissante, commencez à taper « Code court ».

Il suffit de cliquer sur le bon module pour l’ajouter à la page.

Vous pouvez maintenant ajouter le code court suivant : [frm-reset-password].

À ce stade, vous pouvez ajouter tout autre contenu que vous souhaitez afficher sur la page de réinitialisation du mot de passe.

Lorsque vous êtes satisfait de la présentation de la page, cliquez sur le bouton « Publier » pour la mettre en direct.

Enfin, vous devez indiquer à WordPress d’utiliser cette page plutôt que la page de réinitialisation de mot de passe par défaut. Pour ce faire, rendez-vous sur Formidable  » Global Settings et cliquez sur l’onglet ‘Registration’ dans le menu.

A partir de là, ouvrez le menu déroulant « Page de réinitialisation du mot de passe » et choisissez la page que vous venez de créer.

N’oubliez pas de cliquer sur le bouton « Mise à jour » en haut de l’écran pour stocker vos réglages.

Vous pouvez maintenant visiter votre site WordPress pour voir la page personnalisée de réinitialisation du mot de passe en action.

Méthode 2 : Personnaliser toutes les pages d’adhésion à l’aide de « Thème Ma Connexion » (gratuit)

Pour offrir une expérience utilisateur cohérente, c’est une bonne idée d’utiliser le même style sur toutes vos pages d’adhésion. Theme My Login est un plugin gratuit qui vous permet de remplacer les pages intégrées du tableau de bord WordPress, de connexion, de déconnexion, d’inscription, de mot de passe oublié et de réinitialisation du mot de passe.

Ce n’est pas la solution la plus personnalisable, mais toutes ses pages utiliseront votre thème WordPress.

La première chose à faire est d’installer et d’activer le plugin Theme My Login. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’un plugin WordPress.

Dès qu’il est activé, Theme My Login crée automatiquement des URL pour vos écrans personnalisés de connexion, déconnexion, inscription, mot de passe perdu et réinitialisation du mot de passe. Vous pouvez voir ces URL en allant sur la page Theme My Login  » General.

Pour remplacer l’une de ces pages, il suffit de créer une nouvelle page avec l’URL exacte.

Pour créer une page de réinitialisation de mot de passe personnalisée WordPress, allez dans Page  » Add New. Ici, cliquez sur l’icône  » +  » et commencez à taper  » Code court « .

Lorsque le bon bloc apparaît, cliquez dessus pour l’ajouter à la page.

À l’intérieur du bloc, ajoutez le code court suivant :

[theme-my-login action="lostpassword"]

Vous pouvez maintenant ajouter tout contenu supplémentaire que vous souhaitez afficher sur la page de réinitialisation du mot de passe, tel que votre logo. Lorsque vous êtes satisfait de la façon dont la page est configurée, cliquez sur « Enregistrer le brouillon ».

Ensuite, allez dans Pages  » All Pages et trouvez la page de réinitialisation du mot de passe que vous venez de créer.

Il vous suffit de survoler la page avec votre souris et de cliquer sur le bouton « Modification rapide » lorsqu’il apparaît.

Dans le champ « Slug », tapez « lostpassword ».

Ensuite, ouvrez le menu déroulant « État » et sélectionnez « Sélectionné ».

Une fois cela fait, cliquez sur « Mettre à jour ». Maintenant, si vous visitez votre blog WordPress, vous verrez la page de mot de passe perdue en direct.

Pour remplacer les autres pages d’adhésion WordPress intégrées, il suffit de suivre les étapes décrites ci-dessus, mais veillez à utiliser le bon slug d’URL et le bon code court.

Par exemple, si vous souhaitez créer une page personnalisée de réinitialisation du mot de passe, vous devez utiliser le code court [theme-my-login action="resetpass"]. Vous devrez également modifier le slug de l’URL en resetpassword.

Méthode 3 : Créer une page de réinitialisation de mot de passe à l’aide de WPForms (entièrement personnalisable)

Si vous souhaitez remplacer la page de réinitialisation de mot de passe par défaut par un formulaire entièrement personnalisé, nous vous recommandons d’utiliser WPForms.

Cette extension dispose d’un modèle de  » Formulaire de réinitialisation du mot de passe de l’utilisateur  » que vous pouvez personnaliser avec votre propre texte, vos images et votre marque. Vous pouvez même ajouter et retirer des champs pour collecter exactement les informations que vous souhaitez auprès des membres.

La première chose à faire est d’installer et d’activer l’extension WPForms. Pour plus de détails, consultez notre guide étape par étape sur l ‘installation d’une extension WordPress.

Une fois activé, allez dans WPForms  » Réglages et saisissez votre clé de licence. Vous trouverez cette information dans votre compte sur le site de WPForms.

Après avoir saisi la clé de licence, vous devez installer le module Inscription des utilisateurs, qui vous permet de personnaliser les formulaires d’inscription des utilisateurs, de réinitialisation des mots de passe et de connexion pour votre site.

Dans le Tableau de bord, allez dans WPForms  » Addons et trouvez le module Inscription des utilisateurs/utilisatrices.

Il suffit de cliquer sur « Installer le module » pour le télécharger, puis de cliquer sur « Activer » pour le mettre en service.

Vous êtes maintenant prêt à créer votre propre formulaire personnalisé de réinitialisation de mot de passe en allant sur la page WPForms  » Add New. Ici, saisissez un titre pour le nouveau formulaire.

Une fois cela fait, défilez jusqu’au modèle « Formulaire de réinitialisation du mot de passe de l’utilisateur » et cliquez sur le bouton « Utiliser le modèle ».

WPForms va maintenant charger le modèle de formulaire de réinitialisation du mot de passe de l’utilisateur.

Pour personnaliser un champ avec votre propre texte, libellé ou description, il suffit de cliquer pour le sélectionner, puis d’utiliser les Réglages du menu de gauche.

Par exemple, le modèle comporte un bouton « Envoyer ». Pour afficher un libellé de bouton différent, il suffit de cliquer pour sélectionner le champ, puis de saisir un nouveau message dans le champ « Texte du bouton d’envoi ».

Vous pouvez également modifier ce qui se passe lorsqu’un utilisateur envoie sa demande de réinitialisation de mot de passe en allant dans Réglages  » Confirmations.

Ouvrez le menu déroulant « Type de confirmation » et choisissez de rediriger l’utilisateur vers une page ou une URL différente ou d’afficher simplement un message lui demandant de vérifier sa boîte de réception pour recevoir un e-mail de réinitialisation de son mot de passe.

Vous pouvez également personnaliser le message en le tapant dans le petit éditeur/éditrices de texte. Par exemple, vous pouvez rappeler aux utilisateurs/utilisatrices de vérifier leur dossier indésirable.

Lorsque vous êtes satisfait de la façon dont le formulaire est défini, cliquez sur le bouton « Enregistrer » dans le coin supérieur droit de l’écran.

Pour remplacer la page de réinitialisation de mot de passe par défaut de WordPress, créez une page avec le slug  » un seul mot de passe « . Ajoutez ensuite le formulaire à cette page.

Le plus simple est de cliquer sur le bouton « Embed » dans l’éditeur de WPForms et de sélectionner « Create New Page ».

Saisissez maintenant un titre pour la nouvelle page. Vous modifierez le slug dans une étape ultérieurement, vous pouvez donc utiliser ce que vous voulez.

Cliquez ensuite sur « Let’s Go ».

Vous accédez ainsi à l’éditeur de pages de WordPress, où le formulaire a déjà été ajouté à la nouvelle page. Vous pouvez maintenant apporter des modifications à cette page, comme l’ajout de texte, d’un logo personnalisé ou de catégories et d’identifiants.

Lorsque vous êtes satisfait de l’aspect de la page, cliquez sur le bouton « Enregistrer le brouillon ».

Ensuite, allez dans Pages  » All Pages et trouvez la page de réinitialisation du mot de passe que vous venez de créer.

Cliquez sur le bouton « Modifier rapidement ».

Dans le champ « Slug », tapez « lostpassword ».

Ensuite, ouvrez le menu déroulant « État » et sélectionnez « Sélectionné ».

Maintenant, vous devez rediriger les clients/clientes vers la page personnalisée de réinitialisation du mot de passe plutôt que vers la page WordPress intégrée. La manière la plus simple de le faire est d’utiliser l’extension gratuite WPCode.

WPCode est le meilleur plugin d’extraits de code utilisé par plus de 2 millions de sites WordPress. Il facilite l’ajout de code personnalisé dans WordPress sans avoir à éditer le fichier functions.php.

Avec WPCode, même les débutants peuvent modifier le code de leur site sans risquer les erreurs et les fautes de frappe qui peuvent être à l’origine de nombreuses erreurs courantes de WordPress.

La première chose à faire est d’installer et d’activer le plugin gratuit WPCode. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’un plugin WordPress.

Une fois activé, rendez-vous dans la rubrique Extraits de code  » Ajouter un extrait.

Vous y trouverez des extraits prêts à l’emploi qui vous permettent de téléverser des types de fichiers supplémentaires dans WordPress, de désactiver les pages de pièces jointes, de désactiver complètement les commentaires, et bien plus encore.

Il vous suffit de survoler la rubrique « Ajouter un module personnalisé » et de cliquer sur « Utiliser l’extrait » lorsqu’elle s’affiche.

Pour commencer, saisissez un titre pour l’extrait de code personnalisé. Il peut s’agir de n’importe quoi qui vous aide à identifier l’extrait dans le Tableau de bord WordPress.

Ensuite, ouvrez le menu déroulant « Type de code » et sélectionnez « Extrait PHP ».

Dans l’éditeur/éditrices de code, ajoutez l’extrait de code suivant :

add_filter( 'lostpassword_url', 'my_lostpassword_url' );
function my_lostpassword_url() {
return site_url('/lostpassword/');
}

Ensuite, défilez jusqu’à la section « Insertion ». WPCode peut ajouter du code à différents Emplacements, par exemple après chaque publication, dans l’interface publique uniquement ou dans l’interface d’administration uniquement.

Pour utiliser le code PHP personnalisé sur l’ensemble de votre site Web, de votre blog ou de votre boutique WooCommerce, cliquez sur « Insertion automatique » si ce n’est pas déjà le cas. Ensuite, ouvrez le menu déroulant « Emplacement » et choisissez « Exécuter partout ».

Ensuite, vous êtes prêt à faire défiler l’écran jusqu’en haut et à cliquer sur le commutateur « Inactif » pour le transformer en « Actif ».

Enfin, cliquez sur « Enregistrer l’extrait » pour mettre en direct l’extrait PHP.

Maintenant, essayez de visiter l’écran de connexion intégré de WordPress.

Si vous cliquez sur le lien « Vous avez perdu votre mot de passe ? », vous serez redirigé vers la page personnalisée de réinitialisation du mot de passe que vous venez de créer.

Selon la façon dont votre site est configuré, vous devrez peut-être mettre à jour les liens de réinitialisation du mot de passe sur d’autres pages.

Si vous avez créé une page de connexion personnalisée pour WordPress à l’ aide d’une extension telle que WPForms, nous vous recommandons également d’ajouter le lien de réinitialisation du nouveau mot de passe à ce formulaire.

Guides d’experts sur la personnalisation des pages WordPress

Nous espérons que ce tutoriel vous a aidé à apprendre comment personnaliser la page de réinitialisation du mot de passe de WordPress. Vous pouvez également consulter des tutoriels sur l’amélioration de la sécurité de la connexion WordPress :

• Comment créer une page de connexion WordPress personnalisée (Guide ultime)
• Comment et pourquoi limiter les tentatives de connexion sur WordPress ?
• Comment ajouter des questions de sécurité à l’écran de connexion de WordPress
• Comment ajouter une URL de connexion personnalisée dans WordPress (étape par étape)
• Conseils vitaux pour protéger votre zone d’administration WordPress

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.