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

La page de connexion par défaut de WordPress (/wp-admin) est fonctionnelle, mais elle entre souvent en conflit avec le design de votre site. Elle affiche la marque WordPress et peut dérouter les utilisateurs réguliers.

Ajouter une page de connexion en front-end permet de garder les utilisateurs dans le design principal de votre site, améliorant ainsi l’accessibilité et l’expérience utilisateur. Vous pouvez également placer des formulaires de connexion dans des zones pratiques comme les barres latérales ou les pieds de page.

Voici trois méthodes fiables pour ajouter une page de connexion personnalisée et des widgets, allant des constructeurs adaptés aux débutants aux solutions gratuites simples.

Méthode 1 : WPForms (Idéal pour intégrer des formulaires n’importe où)

WPForms est une extension premium qui vous permet de créer un formulaire de connexion et de l’intégrer n’importe où sur votre site, y compris dans les pages, les barres latérales ou les widgets de pied de page.

  1. Installer WPForms et l’extension User Registration
    • Installez et activez l’extension WPForms.
    • Allez dans WPForms » Addons et installez l’extension User Registration.
  2. Créer le formulaire de connexion
    • Allez dans WPForms » Ajouter.
    • Nommez votre formulaire et sélectionnez le modèle User Login Form.
    • Personnalisez les champs à l’aide du constructeur glisser-déposer, puis cliquez sur Enregistrer.
  3. Ajouter le formulaire à une page ou un article
    • Modifiez la page ou l’article où vous souhaitez que le formulaire apparaisse.
    • Cliquez sur le bouton +, ajoutez le bloc WPForms, et sélectionnez votre formulaire de connexion dans la liste déroulante.
    • Cliquez sur Mettre à jour ou Publier.
  4. Ajouter le formulaire à une barre latérale (Thèmes classiques)
    • Allez dans Apparence » Widgets.
    • Ajoutez le bloc WPForms à votre barre latérale.
    • Sélectionnez votre formulaire de connexion dans la liste déroulante et cliquez sur Mettre à jour.
  5. Ajouter le formulaire à un thème à blocs (édition complète du site)
    • Allez dans Apparence » Éditeur.
    • Cliquez sur le bouton + pour ouvrir le menu des blocs.
    • Ajoutez le bloc WPForms à l’emplacement souhaité et sélectionnez votre formulaire.
    • Cliquez sur Enregistrer.

Méthode 2 : SeedProd (Idéal pour des pages autonomes personnalisées)

SeedProd est un constructeur de pages premium en glisser-déposer qui vous permet de créer une page de connexion entièrement personnalisée, correspondant parfaitement à votre marque.

  1. Installer et activer SeedProd
    • Installez et activez l’extension SeedProd.
  2. Configurer une page de connexion
    • Allez dans SeedProd » Pages de destination.
    • Cliquez sur le bouton Configurer une page de connexion.
    • Choisissez un modèle dans la bibliothèque ou commencez avec une toile vierge.
    • Entrez un Nom de page (cela deviendra l’URL, par ex., vmonsite.com/connexion).
    • Cliquez sur Enregistrer et commencer à éditer la page.
  3. Personnaliser le design
    • Utilisez le constructeur glisser-déposer pour personnaliser la mise en page, les couleurs et le contenu.
    • Une fois terminé, cliquez sur la flèche déroulante à côté de Enregistrer et sélectionnez Publier.
  4. Activer la page
    • Retournez dans SeedProd » Pages de destination.
    • Trouvez votre nouvelle page de connexion et cliquez sur l’interrupteur pour la passer de Inactif à Actif. Votre page de connexion personnalisée est maintenant en ligne.

Méthode 3 : Theme My Login (L’option gratuite et simple)

Si vous avez besoin d’une page de connexion front-end de base sans nécessiter un contrôle approfondi du design, cette extension gratuite est un choix fiable.

  1. Installer et activer l’extension
    • Allez dans Extensions » Ajouter et recherchez « Theme My Login« .
    • Installez et activez l’extension gratuite.
  2. Configurer les réglages de base
    • Allez dans Theme My Login » Général.
    • Ajustez les paramètres comme le type de connexion (nom d’utilisateur/e-mail ou e-mail uniquement) et les options d’inscription.
    • L’extension crée automatiquement de nouvelles URLs (par ex., vmonsite.com/connexion). Vous pouvez les modifier dans la section Slugs.
    • Cliquez sur Enregistrer les modifications.
  3. Ajouter le formulaire à une page ou un article
    • Modifiez la page ou l’article où vous souhaitez le formulaire.
    • Ajoutez un bloc Shortcode et collez le shortcode : [theme-my-login].
    • Cliquez sur Mettre à jour ou Publier.
  4. Ajouter le formulaire à une barre latérale
    • Allez dans Apparence » Widgets.
    • Ajoutez le bloc Theme My Login à votre barre latérale.
    • Sélectionnez le type de formulaire dans la liste déroulante et cliquez sur Mettre à jour.

Astuce d’expert : Ajouter un bouton de connexion à votre menu de navigation

Facilitez l’accès à votre nouvelle page de connexion en ajoutant un lien dans le menu principal de votre site.

Pour les thèmes classiques :

  • Allez dans Apparence » Menus.
  • Dans la colonne de gauche, développez Liens personnalisés.
  • Dans le champ URL, entrez l’adresse de votre nouvelle page de connexion (par ex., vmonsite.com/connexion).
  • Dans le champ Texte du lien, entrez « Connexion ».
  • Cliquez sur Ajouter au menu, puis sur Enregistrer le menu.

Pour les thèmes à blocs (édition complète du site) :

  • Allez dans Apparence » Éditeur.
  • Dans le panneau de gauche, sélectionnez Navigation.
  • Cliquez sur le bouton + à côté des éléments de votre menu.
  • Commencez à taper le nom de votre page de connexion et sélectionnez-la lorsqu’elle apparaît.
  • Dans l’onglet Bloc à gauche, vous pouvez changer le texte du lien en « Connexion ».
  • Cliquez sur Enregistrer.

Bonus : Ajouter un CAPTCHA pour la sécurité

Les pages de connexion sont des cibles courantes pour les attaques par force brute et les robots de spam. L’ajout d’un CAPTCHA aide à bloquer les menaces automatisées.

Si vous utilisez WPForms (Méthode 1) :

  • Allez dans WPForms » Réglages » CAPTCHA.
  • Sélectionnez votre type de CAPTCHA (ex., reCAPTCHA) et suivez les instructions pour entrer votre Clé du site et Clé secrète depuis Google.
  • Modifiez votre formulaire de connexion. Allez dans Réglages » Protection contre le spam et sécurité.
  • Activez l’option CAPTCHA et cliquez sur Enregistrer.

Foire aux questions

Une page de connexion en front-end est-elle nécessaire ?

Pas pour tous les sites. Elle est surtout utile pour les sites d’adhésion, les forums en ligne ou les boutiques eCommerce où les utilisateurs réguliers doivent se connecter fréquemment. Pour les blogs d’entreprise simples, la page par défaut est généralement suffisante.

Puis-je rediriger les utilisateurs après leur connexion ?

Oui. La plupart des extensions de connexion, y compris WPForms et SeedProd, incluent des paramètres de redirection intégrés où vous pouvez spécifier l’URL que les utilisateurs doivent voir après une connexion réussie.

Une page de connexion personnalisée va-t-elle ralentir mon site ?

Lorsqu’elle est construite avec des extensions optimisées comme celles recommandées ci-dessus, l’impact sur la vitesse du site est minime. Évitez d’utiliser des images lourdes ou des scripts inutiles sur la page pour garantir sa rapidité.

Ce billet vous a été utile?
Offrez-nous un café!
Tags: