Comment créer une page de connexion personnalisée dans WordPress

Voulez-vous créer une page de connexion personnalisée pour votre site WordPress ? J'ai configuré des pages de connexion personnalisées pour plusieurs sites WordPress, et c'est l'un de ces changements qui semble petit mais fait une réelle différence. L'écran de connexion WordPress par défaut est fade, générique et renvoie même hors de votre site.

La bonne nouvelle ? Vous pouvez le remplacer par une page de connexion entièrement personnalisée et stylisée à l'aide d'un seul plugin. Dans ce guide, je vous expliquerai comment créer une page de connexion personnalisée avec WPForms. Cela inclut la création du formulaire, la personnalisation du design, la publication de la page et la redirection de l'URL de connexion par défaut.

Créez votre page de connexion personnalisée dès maintenant ! 🙂

Pourquoi créer une page de connexion personnalisée dans WordPress ?

Chaque site WordPress est livré avec le même écran de connexion par défaut. Il présente le logo WordPress, un fond blanc uni et rien qui indique aux visiteurs à quel site ils se connectent réellement. Voici pourquoi cela vaut la peine d'être modifié :

• Image de marque. Une page de connexion personnalisée met en avant votre logo, vos couleurs et vos messages. Chez WPForms, nous utilisons notre page de connexion personnalisée pour mettre en évidence les nouvelles fonctionnalités et les mises à jour pour nos utilisateurs.
• Sécurité. Lorsque vous créez une page de connexion personnalisée, vous pouvez rediriger l'URL par défaut wp-login.php. Cela réduit les attaques par force brute et le spam de connexion car les robots ne peuvent pas trouver votre véritable formulaire de connexion. Associez cela à de puissants plugins de sécurité WordPress pour une protection encore meilleure.
• Apparence professionnelle. Si votre site accepte les inscriptions de membres, les connexions de clients ou les comptes d'étudiants, une page de connexion personnalisée renforce la confiance. Les visiteurs savent qu'ils sont au bon endroit dès qu'ils voient votre logo.

Et voici le meilleur : vous n'avez pas besoin d'un plugin personnaliseur de connexion séparé, d'un constructeur de pages ET d'un plugin de formulaire pour y parvenir. WPForms gère le formulaire de connexion, le style visuel et la création de la page, le tout en un seul outil.

Comment créer une page de connexion personnalisée dans WordPress

Je vais vous montrer comment créer une page de connexion personnalisée complète à l'aide de WPForms et de son module complémentaire d'inscription d'utilisateurs. Cela couvre tout : la création du formulaire, l'ajout de votre image de marque, la personnalisation de l'apparence, la publication de la page et la redirection de l'URL de connexion WordPress par défaut afin que les robots ne puissent pas la trouver.

Étape 1 : Installer WPForms et configurer le module complémentaire d'inscription d'utilisateurs

Tout d'abord, vous aurez besoin de WPForms Pro installé sur votre site. Le module complémentaire d'inscription d'utilisateurs est ce qui vous donne les modèles de formulaires de connexion, d'inscription et de réinitialisation de mot de passe, et il est disponible dans le niveau Pro et supérieur.

Si vous n'avez pas encore WPForms, procurez-vous-le sur la page de tarification et installez-le sur votre site WordPress. Ensuite, allez dans WPForms » Modules complémentaires dans votre tableau de bord.

Trouvez le module complémentaire d'inscription d'utilisateurs et cliquez sur le bouton pour l'installer. C'est tout pour la configuration. Avec un plugin et un module complémentaire, vous avez maintenant tout ce dont vous avez besoin pour créer une page de connexion personnalisée, un formulaire d'inscription et un formulaire de réinitialisation de mot de passe.

Obtenez WPForms Pro maintenant ! :)

Étape 2 : Créer un formulaire de connexion personnalisé

Cliquez sur WPForms » Ajouter nouveau pour créer votre formulaire de connexion.

Donnez un nom à votre formulaire (quelque chose comme « Formulaire de connexion personnalisé »), puis sélectionnez le modèle Formulaire de connexion d'utilisateur. Ce modèle est conçu spécifiquement pour la fonctionnalité de connexion, et vous ne le verrez pas sans le module complémentaire d'inscription d'utilisateurs activé.

Le modèle se charge avec trois champs déjà en place : Nom d'utilisateur, Mot de passe et Se souvenir de moi.

La case à cocher Se souvenir de moi permet aux visiteurs de rester connectés entre les visites. C'est un petit détail, mais il évite aux utilisateurs qui reviennent de taper leurs identifiants à chaque fois. Pour plus de détails techniques, consultez la documentation du formulaire de connexion.

Vous pouvez utiliser ce modèle tel quel, ou le personnaliser davantage. Je recommanderais au minimum d'ajouter votre image de marque, ce que nous allons faire ensuite.

Étape 3 : Ajouter l'image de marque et personnaliser le design

Vous pouvez ajouter votre logo, changer les couleurs, ajuster les polices et styliser les boutons sans installer de plugin séparé pour la personnalisation de la page de connexion. Tout se fait directement dans WPForms et l'éditeur de blocs WordPress.

Ajouter votre logo ou image de marque

Commencez par faire glisser le champ Contenu en haut de votre formulaire, juste en dessous du titre.

Cliquez sur le champ Contenu pour ouvrir son panneau Options du champ sur la gauche.

Vous verrez un éditeur de texte où vous pouvez ajouter ce que vous voulez. Pour insérer votre logo, cliquez sur le bouton Ajouter un média et téléchargez votre image de marque.

Téléchargez votre logo via la médiathèque WordPress, comme vous le feriez pour toute autre image sur votre site.

Une fois que votre image de marque vous convient, cliquez sur Enregistrer. Besoin d'inspiration supplémentaire pour le design ? Consultez ces exemples de pages de connexion pour des idées.

Styliser votre formulaire de connexion dans l'éditeur de blocs

Voici quelque chose que la plupart des autres guides sur les pages de connexion ne mentionnent pas : vous n'avez pas besoin d'un plugin de style dédié pour votre formulaire de connexion. WPForms dispose d'un style de formulaire intégré directement dans l'éditeur de blocs WordPress.

Lorsque vous intégrez votre formulaire sur une page (nous le ferons à l'étape 5), vous verrez les options de style dans la barre latérale du bloc WPForms. À partir de là, vous pouvez personnaliser :

• Les styles des champs comme les couleurs d'arrière-plan, les couleurs des bordures et le rayon des bordures
• Les styles des étiquettes, y compris les polices, les tailles et les couleurs
• Les styles des boutons tels que la couleur d'arrière-plan, la couleur du texte, le rayon des bordures et la largeur
• Le style général du formulaire pour l'espacement, l'alignement et les arrière-plans des conteneurs

C'est un énorme gain de temps. Au lieu de jongler avec un plugin de personnalisation de connexion pour les couleurs et un plugin de formulaire pour la fonctionnalité de connexion réelle, vous faites tout dans WPForms.

Pour une présentation complète de toutes les options de style, consultez le guide sur la façon de styliser vos formulaires dans l'éditeur de blocs. Pendant que vous y êtes, personnalisons également le texte du bouton de soumission.

Accédez à Paramètres » Général dans le constructeur de formulaires et changez le Texte du bouton de soumission par quelque chose comme « Se connecter ».

Étape 4 : Configurer vos paramètres de connexion

Toujours dans le constructeur de formulaires, cliquez sur Paramètres dans le panneau de gauche. Cliquez ensuite sur Confirmations pour décider de ce qui se passe après une connexion réussie.

Pour la plupart des sites, vous voudrez rediriger les utilisateurs quelque part après leur connexion. Vous pouvez les envoyer vers votre page d’accueil, leur tableau de bord de compte ou toute autre page. Définissez le Type de confirmation sur Accéder à l’URL (Redirection) et entrez votre URL cible.

Il y a un autre réglage qui mérite d’être vérifié. Faites défiler vers le bas et cliquez sur Inscription des utilisateurs pour développer ces options.

Activez l’option pour masquer le formulaire aux utilisateurs connectés. De cette façon, les personnes qui sont déjà connectées ne verront pas le formulaire de connexion. Vous pouvez personnaliser le message qu’ils voient à la place.

Cliquez sur Enregistrer lorsque vous avez terminé avec les paramètres.

Étape 5 : Publier votre page de connexion personnalisée

Votre formulaire de connexion est créé, personnalisé et configuré. Mettons-le maintenant sur une page. Cliquez sur le bouton Intégrer en haut du constructeur de formulaire.

Une fenêtre contextuelle vous demandera où vous souhaitez intégrer le formulaire. Cliquez sur Créer une nouvelle page.

Donnez un nom à votre page (quelque chose comme « Connexion ») et cliquez sur C’est parti.

WordPress ouvre l’éditeur de blocs avec votre formulaire de connexion déjà intégré. C’est aussi là que vous verrez les options de style de bloc de l’étape 3, afin que vous puissiez affiner les couleurs et les polices ici avant de publier.

Lorsque tout vous convient, cliquez sur Publier. Votre page de connexion personnalisée est en ligne et prête à accepter les utilisateurs enregistrés en quelques minutes !

Étape 6 : Ajouter la page de connexion à votre menu de navigation

Votre page de connexion existe, mais les visiteurs ont besoin d’un moyen de la trouver. L’endroit le plus naturel est le menu de navigation de votre site. Allez dans Apparence » Menus dans votre tableau de bord WordPress.

Si vous avez déjà un menu configuré, trouvez votre page de connexion dans le panneau Pages à gauche et cliquez sur Ajouter au menu.

Faites glisser la page de connexion où vous le souhaitez dans l’ordre du menu. La plupart des sites la placent tout à droite de la barre de navigation. Choisissez l’emplacement d’affichage de votre menu (généralement Menu principal pour l’en-tête) et cliquez sur Enregistrer le menu.

Si votre site n’a pas encore de menu, vous devrez en créer un d’abord. Entrez un nom pour votre menu dans la section Structure du menu.

Cliquez sur Créer le menu pour le configurer. Ajoutez ensuite votre page de connexion en utilisant les mêmes étapes que celles que je viens de décrire. Visitez votre page d’accueil après avoir enregistré pour vous assurer que le lien de connexion s’affiche là où vous vous attendez à le trouver.

Étape 7 : Rediriger l'URL de connexion WordPress par défaut

Cette étape est facultative, mais je la recommande vivement. Par défaut, n’importe qui peut toujours visiter votresite.com/wp-login.php et voir l’écran de connexion générique de WordPress.

Rediriger cette URL vers votre page de connexion personnalisée maintient la cohérence de l’expérience et rend votre site plus difficile à cibler pour les robots.

Nous utiliserons WPCode pour cela. C’est un plugin gratuit qui vous permet d’ajouter des extraits de code à WordPress sans modifier les fichiers de thème.

Installez et activez WPCode, puis allez dans Extraits de code » + Ajouter un extrait. Choisissez Ajouter votre code personnalisé (Nouvel extrait).

Nommez votre extrait quelque chose comme « Redirection de la page de connexion » et collez le code de redirection. Assurez-vous de mettre à jour l’URL dans le code pour qu’elle corresponde à l’URL de votre page de connexion personnalisée. Cliquez sur Enregistrer l’extrait.

Vous verrez une confirmation une fois qu’il sera enregistré avec succès.

Enfin, basculez l’extrait sur Actif en haut de la page.

Désormais, toute personne qui essaie de visiter wp-login.php est automatiquement redirigée vers votre page de connexion personnalisée et stylisée à la place.

Bonus : Créer un formulaire de réinitialisation de mot de passe personnalisé

Si votre site autorise les inscriptions d’utilisateurs, vous voudrez également un formulaire de réinitialisation de mot de passe personnalisé. Sans cela, les utilisateurs qui oublient leur mot de passe sont dirigés vers l’écran de réinitialisation par défaut de WordPress, ce qui casse l’expérience stylisée que vous venez de créer.

Le module complémentaire User Registration inclut un modèle de Formulaire de réinitialisation de mot de passe utilisateur. Allez dans WPForms » Ajouter et sélectionnez-le.

Vous pouvez personnaliser ce formulaire de la même manière que vous avez personnalisé le formulaire de connexion : ajoutez votre image de marque avec le champ Contenu, stylisez-le dans l’éditeur de blocs et publiez-le sur sa propre page. Pour un guide détaillé, consultez notre article sur la personnalisation du formulaire de réinitialisation de mot de passe dans WordPress.

FAQ sur les pages de connexion WordPress personnalisées

Si vous souhaitez créer une page de connexion personnalisée pour WordPress, personnaliser l’écran de connexion WordPress existant ou ajouter un formulaire de connexion à n’importe quelle page de votre site, ces réponses couvrent les questions les plus courantes.

Puis-je personnaliser la page de connexion WordPress sans coder ?

Oui. WPForms vous permet de créer et de styliser un formulaire de connexion personnalisé entièrement via son constructeur glisser-déposer et l’éditeur de blocs WordPress. Vous pouvez modifier les couleurs, les polices, les styles de boutons et ajouter votre propre image de marque sans écrire une seule ligne de CSS ou de PHP.

Quel est le meilleur plugin pour une page de connexion WordPress personnalisée ?

Je recommanderais WPForms Pro avec le module complémentaire User Registration. Bien que certains guides suggèrent d’utiliser des plugins distincts pour le formulaire, la mise en forme et la mise en page, WPForms gère les trois.

Vous obtenez des formulaires de connexion, des formulaires d’inscription, des formulaires de réinitialisation de mot de passe et des outils de mise en forme visuelle dans un seul package. Pour un aperçu plus large des options disponibles, consultez notre liste des meilleurs plugins de page de connexion WordPress.

Comment ajouter un formulaire de connexion à n’importe quelle page dans WordPress ?

WPForms rend cela simple. Vous pouvez intégrer votre formulaire de connexion en utilisant le bloc WPForms dans l’éditeur de blocs, un shortcode ou un widget.

Cela signifie que vous pouvez placer un formulaire de connexion sur n’importe quelle page, dans votre barre latérale ou dans votre pied de page. Pour le guide complet, consultez notre article sur la façon d’ afficher les formulaires de connexion et d’inscription sur n’importe quelle page.

Est-il sûr de rediriger l’URL de connexion WordPress par défaut ?

Oui, et c’est même une pratique de sécurité intelligente. Rediriger wp-login.php vers votre page de connexion personnalisée signifie que les robots et les scripts automatisés ciblant l’URL par défaut n’atteindront pas votre formulaire de connexion réel.

Assurez-vous simplement que le code de redirection ne s’applique qu’aux requêtes GET afin que la soumission POST du formulaire de connexion fonctionne toujours correctement.

Ensuite, créez une expérience d’inscription complète

Vous disposez maintenant d'une page de connexion personnalisée entièrement personnalisée pour votre site WordPress. Associé à un formulaire de réinitialisation de mot de passe, vos utilisateurs bénéficient d'une expérience professionnelle et soignée du début à la fin.

Pour compléter le tout, découvrez comment créer un formulaire d'inscription d'utilisateur avec WPForms. Et si la sécurité est une priorité, apprenez à empêcher les réinitialisations de mot de passe non autorisées dans WordPress pour renforcer la sécurité.

Créez votre page de connexion personnalisée maintenant

Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de création de formulaires WordPress le plus simple.  WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.

Si cet article vous a aidé, suivez-nous sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.