Comment ajouter une page de connexion et des widgets en front-end dans WordPress

La page de connexion WordPress par défaut n'offre pas la meilleure expérience et peut même dérouter vos utilisateurs. C'est pourquoi nous recommandons d'ajouter une page de connexion front-end pour permettre aux utilisateurs de se connecter directement depuis la partie principale de votre site web.

Cela améliore l'accessibilité et la satisfaction générale des utilisateurs. De plus, c'est pratique, permettant aux utilisateurs d'accéder aux formulaires de connexion depuis diverses parties de votre site, telles que les barres latérales ou les pieds de page.

Nous avons créé plusieurs boutiques en ligne et sites web où nous proposons cette fonctionnalité pour une meilleure utilisabilité. Cela nous a appris ce qui fonctionne et ce qui ne fonctionne pas pour les pages de connexion front-end.

Dans cet article, nous vous montrerons comment ajouter facilement une page de connexion et des widgets front-end dans WordPress.

Pourquoi et quand avez-vous besoin d'une connexion front-end dans WordPress ?

Par défaut, la page de connexion WordPress affichera la marque WordPress et ne correspondra généralement pas au design de votre site web WordPress actuel.

Cela fonctionne pour les petits blogs WordPress et sites web.

Cependant, si vous avez un site d'adhésion, une boutique en ligne ou un autre site où les utilisateurs peuvent s'inscrire et se connecter, l'ajout d'une page et d'un widget de connexion front-end offre une meilleure expérience à vos utilisateurs.

Vous pouvez même personnaliser cette page avec votre image de marque ou ajouter un simple formulaire de connexion à la barre latérale de votre WordPress.

Cela étant dit, voyons comment ajouter facilement une page de connexion front-end et un widget de connexion dans WordPress. Pour ce tutoriel, nous vous montrerons les 3 méthodes les plus simples pour le faire, et vous pouvez utiliser les liens ci-dessous pour accéder à la méthode de votre choix :

• Méthode 1 : Ajouter une page de connexion front-end et des widgets dans WordPress avec WPForms
• Méthode 2 : Ajouter une page de connexion front-end dans WordPress avec SeedProd
• Méthode 3 : Ajouter une page de connexion front-end et des widgets dans WordPress avec Theme My Login
• Astuce d'expert : Ajouter un bouton de connexion dans le menu de votre site WordPress
• Bonus : Ajouter un CAPTCHA dans le formulaire de connexion WordPress
• Tutoriel vidéo
• Foire aux questions (FAQ)

Méthode 1 : Ajouter une page de connexion front-end et des widgets dans WordPress avec WPForms

WPForms est le meilleur plugin de formulaire de contact WordPress du marché, utilisé par plus de 6 millions de sites Web. Il vous permet de créer facilement une page de connexion front-end personnalisée et un widget de connexion sur votre site Web.

Chez WPBeginner, nous l'avons utilisé pour créer des formulaires de contact et des sondages annuels et avons eu une excellente expérience. Pour en savoir plus, consultez notre avis détaillé sur WPForms.

Tout d'abord, vous devrez installer et activer le plugin WPForms. Pour des instructions détaillées, veuillez consulter notre guide pour débutants sur comment installer un plugin WordPress.

Après l'activation, visitez la page WPForms » Paramètres depuis la barre latérale d'administration de WordPress pour saisir votre clé de licence.

Vous pouvez obtenir cette clé depuis votre compte sur le site Web de WPForms.

Une fois que vous avez fait cela, accédez à la page WPForms » Extensions depuis le tableau de bord WordPress pour trouver l'extension d'inscription d'utilisateur.

Ensuite, cliquez sur le bouton « Installer l'extension » pour la télécharger et l'activer sur votre site web.

Après l'activation de l'extension d'inscription d'utilisateur, accédez à l'écran WPForms » Ajouter dans la barre latérale d'administration pour lancer le constructeur de formulaires.

À partir de là, commencez par taper un nom pour le formulaire que vous êtes sur le point de créer. Ensuite, choisissez simplement le modèle « Formulaire de connexion utilisateur » pour commencer à créer votre formulaire de connexion utilisateur.

Cela lancera le modèle dans le constructeur de formulaires, où vous remarquerez un aperçu du formulaire à droite et une colonne de champs disponibles à gauche.

Le modèle inclut déjà les champs nom d'utilisateur et mot de passe nécessaires. Cependant, si vous souhaitez personnaliser le formulaire, vous pouvez faire glisser et déposer des champs supplémentaires depuis la barre latérale.

Pour plus de détails, consultez notre guide sur la création d'une page de connexion personnalisée pour WordPress.

Une fois que vous êtes satisfait de vos paramètres, cliquez simplement sur le bouton « Enregistrer » pour sauvegarder vos modifications.

Ajouter un formulaire de connexion à une page/publication

Maintenant, pour ajouter votre formulaire de connexion à une page ou une publication, ouvrez la page/publication de votre choix dans l'éditeur de blocs WordPress depuis la zone d'administration.

Une fois que vous y êtes, cliquez sur le bouton « + » pour ouvrir le menu des blocs et ajouter le bloc WPForms.

Après cela, choisissez le formulaire de connexion que vous avez créé dans le menu déroulant du bloc lui-même.

Enfin, cliquez sur le bouton « Publier » ou « Mettre à jour » pour enregistrer vos paramètres.

Ajouter un formulaire de connexion à la barre latérale du site Web

Si vous souhaitez ajouter le formulaire de connexion à la barre latérale de votre site Web, visitez la page Apparence » Widgets depuis le tableau de bord WordPress.

Ici, cliquez sur le bouton « + » dans le coin supérieur gauche de l'écran pour ouvrir le menu des blocs.

À partir de là, vous devez trouver et ajouter le bloc WPForms à la barre latérale.

Une fois que vous avez fait cela, choisissez le formulaire de connexion dans le menu déroulant du bloc lui-même.

Enfin, cliquez sur le bouton « Mettre à jour » pour sauvegarder vos paramètres. Pour plus de détails, consultez notre guide sur la création d'un formulaire de connexion dans la barre latérale de votre WordPress.

Maintenant, vous pouvez visiter votre site WordPress pour voir le formulaire de connexion dans la barre latérale.

Ajouter un formulaire de connexion dans l'éditeur de site complet

Si vous utilisez un thème basé sur des blocs, vous ne pourrez pas ajouter votre connexion à la barre latérale du site Web en utilisant la méthode ci-dessus.

Pour ajouter un formulaire de connexion dans FSE, visitez la page Apparence » Éditeur depuis le tableau de bord WordPress.

Cela lancera le FSE, où vous devrez cliquer sur le bouton « + » pour ouvrir le menu des blocs.

À partir de là, localisez et ajoutez le bloc WPForms à l'endroit de votre choix sur votre site web.

Après cela, choisissez le formulaire de connexion que vous avez créé dans le menu déroulant du bloc lui-même.

Enfin, cliquez sur le bouton « Enregistrer » pour sauvegarder vos paramètres.

Astuce bonus : Pour personnaliser davantage votre formulaire de connexion, vous pouvez consulter notre tutoriel sur comment styliser vos formulaires WordPress.

Méthode 2 : Ajouter une page de connexion front-end dans WordPress avec SeedProd

SeedProd est le meilleur constructeur de pages WordPress par glisser-déposer du marché, utilisé par plus d'un million de sites web.

Il vous permet de créer une page de connexion entièrement personnalisée qui peut correspondre au design de votre site web actuel ou être quelque chose d'unique.

Il est très convivial pour les débutants et est livré avec une tonne de modèles de pages de connexion conçus par des professionnels que vous pouvez utiliser pour construire votre page de connexion.

Plusieurs de nos marques partenaires ont conçu leurs sites web entiers, y compris leurs pages de connexion, avec cet outil. Pour plus de détails, consultez notre avis complet sur SeedProd.

Tout d'abord, vous devrez installer et activer le plugin SeedProd. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Une fois activé, visitez l'écran SeedProd » Landing Pages depuis la barre latérale d'administration de WordPress et sélectionnez l'option « Page de connexion » en cliquant sur le bouton « Configurer une page de connexion ».

Cela vous dirigera vers l'écran « Modèles », où vous pourrez choisir un modèle et utiliser le constructeur par glisser-déposer pour personnaliser la page.

En utilisant un modèle vierge, vous pouvez même concevoir une page de connexion personnalisée de A à Z.

Après avoir sélectionné un modèle de votre choix, il vous sera demandé d'entrer un nom de page. SeedProd utilisera ensuite le nom de la page comme URL pour votre page de destination de formulaire de connexion.

Une fois que vous avez terminé, cliquez sur le bouton « Enregistrer et commencer à modifier la page » pour continuer.

Cela lancera le constructeur par glisser-déposer de SeedProd, où vous verrez un aperçu de la page de connexion à droite avec les champs disponibles à gauche.

À partir d'ici, vous pouvez ajouter n'importe quel bloc à la page en le faisant simplement glisser depuis le menu de gauche et en le plaçant où vous le souhaitez.

Pour plus de détails, consultez notre guide sur comment créer une page de connexion WordPress personnalisée.

Une fois que vous avez terminé la conception de votre page, n'oubliez pas de cliquer sur le bouton « Publier » dans le menu déroulant en haut pour enregistrer vos paramètres.

Après cela, retournez à votre tableau de bord WordPress et accédez à SeedProd » Pages de destination.

À partir d'ici, trouvez la section « Page de connexion » et cliquez sur le commutateur pour passer de « Inactif » à « Actif ». Votre page de connexion sera maintenant en ligne sur votre site Web.

Méthode 3 : Ajouter une page de connexion front-end et des widgets dans WordPress avec Theme My Login

Si vous souhaitez ajouter une page de connexion front-end très simple à votre site, vous pouvez utiliser le plugin gratuit Theme My Login.

Tout d'abord, vous devez installer et activer le plugin. Pour plus de détails, consultez notre guide pour débutants sur comment installer un plugin WordPress.

Après l'activation, le plugin créera automatiquement des pages pour la connexion, la déconnexion, l'oubli du mot de passe et l'enregistrement.

Vous pouvez accéder à la page Theme My Login » Général depuis le menu d'administration et afficher les paramètres du plugin.

Tout d'abord, vous pouvez définir le type de connexion. Le réglage « Par défaut » est le plus sécurisé car il demande un e-mail et un mot de passe pour se connecter.

Ensuite, vous pouvez choisir vos paramètres d'enregistrement. Nous avons conservé les paramètres par défaut ici car ils nécessitent un e-mail et un mot de passe pour se connecter.

Vous pouvez également cocher la case « Mots de passe » pour permettre aux utilisateurs de créer leurs propres mots de passe et la case « Connexion automatique », qui connecte automatiquement les utilisateurs après leur enregistrement.

Après cela, vous pouvez modifier vos URL de connexion et d'inscription dans les paramètres « Slugs ».

Ceux-ci créent automatiquement des redirections. Ainsi, l'URL de connexion standard « votresite.com/wp-admin » redirigera vers « votresite.com/login ».

Vous pouvez conserver ces URL telles quelles ou les modifier.

Une fois que vous avez terminé les modifications, assurez-vous de cliquer sur le bouton « Enregistrer les modifications ».

Vous ne pouvez pas ajouter beaucoup plus de fonctionnalités avancées à moins de passer à leurs extensions premium.

Néanmoins, c'est une bonne solution pour les utilisateurs disposant d'un budget limité qui souhaitent créer une page de connexion front-end simple.

Ajouter le formulaire de connexion à une page/publication

Maintenant, pour ajouter le formulaire de connexion créé par Theme My Login, ouvrez une page/publication dans l'éditeur de blocs WordPress.

À partir de là, cliquez sur le bouton « + » pour ouvrir le menu des blocs et ajoutez le bloc Shortcode à la page.

Après cela, ajoutez le shortcode suivant dans le bloc :

[theme-my-login]

Enfin, cliquez sur le bouton « Mettre à jour » ou « Publier » pour enregistrer vos paramètres.

Visitez maintenant votre site Web pour afficher le formulaire de connexion.

Ajouter le formulaire de connexion à une zone de widget

Vous pouvez également ajouter un formulaire de connexion à vos zones de widgets WordPress en utilisant le bloc Theme My Login.

Accédez simplement à la page Apparence » Widgets et ouvrez le menu des blocs en cliquant sur le bouton « + ».

À partir de là, vous devez trouver et ajouter le bloc Theme My Login à la zone de widget de votre choix.

Après cela, choisissez le formulaire que vous souhaitez ajouter dans le menu déroulant du bloc lui-même.

Enfin, cliquez sur le bouton « Mettre à jour » pour enregistrer vos paramètres. Visitez maintenant votre site WordPress pour afficher le formulaire de connexion dans la zone de widget.

Astuce d'expert : Ajouter un bouton de connexion dans le menu de votre site WordPress

Maintenant que vous avez créé une page de connexion front-end, nous vous recommandons de la rendre facilement accessible en ajoutant un bouton de connexion à votre menu de navigation.

Ceci garantit que les utilisateurs peuvent trouver et accéder à leurs comptes sans rechercher la page de connexion.

Pour ajouter un bouton de connexion à votre menu de site, visitez simplement la page Apparence » Menus depuis le tableau de bord WordPress.

Ici, développez l'onglet « Liens personnalisés » de la colonne de gauche et ajoutez l'URL de votre page de connexion frontale. Vous pouvez également ajouter le texte du lien pour le bouton de connexion.

Cliquez sur le bouton « Ajouter au menu ».

Après cela, cliquez sur le bouton « Enregistrer le menu ».

Visitez maintenant votre site WordPress pour voir le bouton de connexion en action. Lorsque les utilisateurs cliqueront dessus, ils seront automatiquement dirigés vers votre page de formulaire de connexion frontale.

Cependant, la méthode ci-dessus ne fonctionnera pas si vous utilisez un thème de blocs.

Dans ce cas, rendez-vous sur la page Apparence » Éditeur depuis la barre latérale d'administration de WordPress.

Cela lancera l'éditeur complet du site. Dans le panneau de conception principal à gauche, sélectionnez « Navigation » pour commencer à modifier le menu principal de votre site.

Cela ouvrira votre menu de navigation dans l'éditeur complet du site. Ici, cliquez sur le bouton « + » à côté. Cela ouvrira une invite où vous devrez taper le nom de votre page de connexion frontale.

Une fois qu'il apparaît dans les résultats, cliquez dessus pour ajouter le lien au menu de navigation.

Ensuite, basculez vers l'onglet « Bloc » dans le panneau de gauche.

Vous pouvez maintenant modifier le texte d'ancrage du bouton de connexion selon vos préférences.

Une fois que vous avez terminé, cliquez simplement sur le bouton « Enregistrer » pour sauvegarder vos paramètres.

Visitez maintenant votre site Web pour voir le bouton de connexion en action.

Bonus : Ajouter un CAPTCHA dans le formulaire de connexion WordPress

Une fois que vous avez ajouté un formulaire de connexion personnalisé, il est conseillé d'y ajouter un CAPTCHA car cette page est souvent une cible pour les pirates et les spammeurs.

L'ajout d'un CAPTCHA peut bloquer les robots de spam et sécuriser votre site web. Vous pouvez facilement le faire avec WPForms.

Après l'activation du plugin, visitez simplement la page WPForms » Paramètres depuis le tableau de bord WordPress et basculez vers l'onglet ‘CAPTCHA’.

Après cela, sélectionnez l'option ‘reCAPTCHA’ comme type de CAPTCHA.

Une fois que vous avez fait cela, vous devez visiter le site web Google reCAPTCHA pour créer une clé de site et une clé secrète. Ces clés aideront à intégrer reCAPTCHA sur votre site WordPress.

Après avoir ajouté ces clés, modifiez simplement le formulaire WordPress que vous avez créé précédemment et basculez vers l'onglet ‘Paramètres’.

Ensuite, sélectionnez l'option ‘Protection contre le spam et sécurité’ et activez le commutateur ‘Activer Google v3 reCAPTCHA’. Ensuite, cliquez sur le bouton ‘Enregistrer’ pour sauvegarder vos paramètres.

Vous avez maintenant ajouté avec succès un CAPTCHA à votre formulaire de connexion WordPress, le rendant beaucoup plus sécurisé contre les robots de spam et les attaques automatisées.

Pour des instructions plus détaillées, vous pouvez consulter notre tutoriel sur comment ajouter un CAPTCHA aux formulaires de connexion et d'inscription WordPress.

Tutoriel vidéo

Si vous ne préférez pas les instructions écrites, regardez simplement notre tutoriel vidéo :

S'abonner à WPBeginner

Foire aux questions (FAQ)

Voici quelques questions fréquemment posées par nos lecteurs concernant l'ajout de pages de connexion front-end et de widgets dans WordPress :

Une page de connexion front-end est-elle nécessaire pour chaque site WordPress ?

Non, pas du tout. Un simple blog ou un site web d'entreprise où seuls l'administrateur ou les éditeurs se connectent peuvent utiliser la page de connexion WordPress par défaut sans problème.

Les pages de connexion front-end sont les plus précieuses pour les sites où les utilisateurs se connectent régulièrement, tels que les sites d'adhésion, les boutiques en ligne ou les forums.

Comment puis-je rediriger les utilisateurs vers une page spécifique après leur connexion ?

La plupart des plugins de page de connexion, y compris WPForms et SeedProd, ont des paramètres intégrés pour gérer les redirections post-connexion.

Vous pouvez généralement trouver une option dans les paramètres du formulaire ou de la page pour entrer l'URL spécifique vers laquelle vous souhaitez rediriger les utilisateurs, comme leur tableau de bord de compte ou une page réservée aux membres.

Pour commencer, vous pouvez consulter notre tutoriel sur comment rediriger les utilisateurs après une connexion réussie dans WordPress

Puis-je ajouter des boutons de connexion aux réseaux sociaux à mon formulaire de front-end ?

Oui, vous le pouvez. De nombreux plugins d'inscription et de connexion d'utilisateurs proposent des extensions ou des intégrations pour les connexions sociales.

Par exemple, WPForms s'intègre à des services qui vous permettent d'ajouter des boutons « Se connecter avec Google » ou « Se connecter avec Facebook », rendant le processus encore plus facile pour vos utilisateurs.

Si cela vous intéresse, nous avons un tutoriel sur comment ajouter la connexion sociale à WordPress qui peut vous aider.

Une page de connexion personnalisée affectera-t-elle la vitesse de mon site web ?

Lorsqu'elle est construite avec un plugin de qualité comme SeedProd ou WPForms, une page de connexion personnalisée devrait avoir un impact minimal sur la vitesse de votre site.

Ces outils sont optimisés pour la performance. La clé est d'utiliser un plugin bien codé et d'éviter d'ajouter des images excessivement grandes ou des scripts lourds à la conception de votre page de connexion.

Nous espérons que cet article vous a aidé à ajouter une page de connexion et des widgets de front-end dans WordPress. Vous voudrez peut-être aussi consulter notre sélection d'experts des meilleurs plugins de page de connexion WordPress et notre guide sur comment ajouter une URL de connexion personnalisée dans WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.