Comment créer correctement une page de connexion personnalisée dans WordPress (étape par étape)

Vous vous êtes déjà demandé si vous pouviez créer une page de connexion personnalisée dans WordPress ?

La création d'une page de connexion personnalisée vous aide à afficher une marque cohérente à vos utilisateurs, ce qui donne à votre site une apparence plus professionnelle.

Dans cet article, nous vous montrerons comment créer une page de connexion personnalisée dans WordPress.

Créer une page de connexion WordPress personnalisée – Table des matières

• Pourquoi créer une page de connexion personnalisée ?
• Choisir le bon plugin pour créer une page de connexion personnalisée
• Méthode 1 : Utiliser SeedProd pour créer une page de connexion
• Méthode 2 : Utiliser WPForms pour créer une page de connexion
• Méthode 3 : Utiliser Theme My Login pour créer une page de connexion
• Méthode 4 : Personnaliser la page de connexion WordPress existante sans plugin
• Méthode 5 : Afficher le formulaire de connexion n'importe où sans plugin

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

Si vous gérez un site Web communautaire tel qu'un forum, un site d'adhésion, un réseau social de niche, ou tout autre site Web qui nécessite que les utilisateurs créent un compte et se connectent, alors vous devrez créer une page de connexion personnalisée.

La page de connexion WordPress par défaut a l'air générique et ennuyeuse. Avec une page de connexion personnalisée, vous pouvez personnaliser tous les éléments de la page autour du formulaire.

Si vous avez une page de connexion personnalisée, vous pouvez masquer la page de connexion par défaut si vous le souhaitez. Cela peut réduire le spam de connexion et garder votre site WordPress sécurisé.

Choisir le bon plugin pour créer une page de connexion personnalisée

Dans le répertoire officiel des plugins WordPress, vous pouvez trouver des dizaines de plugins différents qui vous aident à créer facilement une page de connexion personnalisée. Dans cet article, nous examinerons 3 plugins différents : SeedProd, WPForms et Theme My Login.

Choisissez SeedProd si vous avez besoin d'un constructeur de pages de destination facile à utiliser pour créer des pages de connexion personnalisées, des pages de vente, des pages d'inscription, des pages de bientôt disponibles, des pages en mode maintenance, et plus encore.

Voici quelques fonctionnalités remarquables de SeedProd :

• Modèles de page de connexion conçus par des professionnels pour vous aider à démarrer.
• Personnalisez entièrement votre page de connexion avec des éléments tels que les profils sociaux, la vidéo, les témoignages, les évaluations par étoiles, et plus encore.
• Ajoutez un formulaire de connexion à n'importe quelle page de destination que vous créez avec SeedProd.

Choisissez WPForms si vous avez besoin d'un plugin de formulaire WordPress complet qui vous aide à créer facilement toutes sortes de formulaires en ligne, y compris des formulaires d'inscription, des formulaires de paiement, des formulaires de contact, etc.

Quelques avantages de WPForms sont :

• Personnalisez votre formulaire de connexion comme vous le souhaitez, sans aucune restriction.
• Publiez votre formulaire de connexion sur n'importe quel article ou page.
• Intégrez votre formulaire de connexion dans la barre latérale ou même dans le pied de page avec des widgets.

Choisissez Theme My Login si vous souhaitez créer une page de connexion simple en toute simplicité.

Voici quelques fonctionnalités de Theme My Login :

• Aucune configuration requise pour créer une page de connexion personnalisée.
• Masque automatiquement la page de connexion par défaut et redirige vers la nouvelle page de connexion créée.
• Ajoutez un lien vers la page de connexion dans votre barre latérale avec un widget de connexion personnalisé.

Leconvénient est que, contrairement à SeedProd et WPForms, Theme My Login ne vous permet pas d'intégrer votre formulaire de connexion n'importe où sur votre site, et il apparaîtra exclusivement sur votre page de connexion. Comme ce n'est pas un plugin de formulaire complet comme les autres, la capacité de personnaliser votre formulaire de connexion est limitée.

Méthode 1 : Utiliser SeedProd pour créer une page de connexion

Tout d'abord, examinons comment créer une page de connexion personnalisée avec SeedProd, étape par étape.

Étape 1 : Installer SeedProd sur votre site

Pour commencer, vous devez télécharger le plugin SeedProd. Ensuite, téléchargez et activez le plugin sur votre site WordPress.

Pour des instructions détaillées, suivez ce tutoriel sur comment installer un plugin WordPress.

Après avoir activé le plugin, vous verrez un écran de bienvenue où vous devrez entrer votre clé de licence. Vous pouvez trouver votre clé de licence sur votre compte sur le site Web de SeedProd.

Once your license key is verified, scroll down the page further and click on the Create Your First Page button.

Ensuite, vous serez dirigé vers le tableau de bord SeedProd. Ici, vous pouvez voir les différents types de pages de destination que vous pouvez créer. Cliquez sur Configurer une page de connexion pour commencer.

Étape 2 : Choisir un modèle de page de connexion

Dans cette étape, vous serez invité à choisir un modèle de page de connexion. SeedProd propose une tonne de modèles conçus par des professionnels parmi lesquels vous pouvez choisir.

Il existe également un modèle vierge que vous pouvez utiliser si vous souhaitez commencer votre conception à partir de zéro.

Pour choisir un modèle de page de connexion, survolez-le simplement et cliquez sur l'icône de coche.

Ensuite, il est temps de personnaliser le modèle.

Étape 3 : Personnaliser votre page de connexion

La meilleure partie de SeedProd est que vous pouvez facilement personnaliser votre page de connexion à l'aide du constructeur visuel par glisser-déposer. Tout d'abord, vous pouvez personnaliser n'importe quel élément existant sur le modèle en cliquant dessus.

Par exemple, vous pouvez cliquer sur le titre « Se connecter » pour modifier le texte, la taille, l'alignement, la typographie, etc.

Pour ajouter du nouveau contenu à votre page de connexion, vous pouvez utiliser les blocs de page de destination prêts à l'emploi de SeedProd.

Sur le côté gauche du constructeur visuel, il y a des blocs de page de destination tels que image, vidéo, bouton, profils sociaux, compte à rebours, barre de progression, et plus encore.

Faites simplement glisser le bloc que vous souhaitez et déposez-le sur votre page de connexion. Encore une fois, vous pouvez cliquer sur le bloc pour personnaliser le style, la taille, l'alignement, etc.

SeedProd propose également des sections pré-construites comme Caractéristiques, FAQ, Pied de page, et d'autres, que vous pouvez ajouter à votre page de connexion.

Cliquez simplement sur une section et SeedProd l'ajoutera automatiquement à votre page.

Vous pouvez également accéder aux Paramètres globaux de SeedProd dans le coin inférieur pour modifier l'image d'arrière-plan, la police et les couleurs de l'ensemble de votre page de connexion, au lieu de modifier chaque élément individuellement.

Par exemple, si vous souhaitez modifier le schéma de couleurs de votre page de connexion, SeedProd propose plus de 20 palettes de couleurs que vous pouvez utiliser pour créer un look cohérent.

Une fois que vous êtes satisfait de l'apparence de votre page de connexion, cliquez sur Enregistrer dans le coin supérieur droit.

Étape 4 : Configurer les paramètres de votre page de connexion

Si vous ajoutez un formulaire d'inscription par e-mail à votre page de connexion, vous pouvez le connecter à votre service de marketing par e-mail dans l'onglet Connexion.

Cliquez simplement sur votre fournisseur de marketing par e-mail préféré et suivez les instructions pour connecter votre compte. Désormais, chaque fois que quelqu'un fournira son adresse e-mail via le formulaire d'inscription, il sera automatiquement ajouté à votre liste d'e-mails.

Vous pouvez également accéder à l'onglet Paramètres de la page pour configurer d'autres paramètres.

Les paramètres de cette page incluent :

• Général – Modifiez le nom et l'URL de votre page de connexion, affichez un lien d'affiliation SeedProd, et plus encore.
• SEO – Définissez le titre SEO de votre page, la méta-description, etc. Si vous utilisez un plugin SEO comme All in One SEO, vous pouvez l'utiliser comme raccourci vers ses paramètres.
• Analytique – Suivez les performances de votre page de connexion à l'aide d'un plugin d'analyse comme MonsterInsights.
• Scripts – Utilisez des scripts de suivi et de reciblage tels que des cookies ou des pixels de suivi Facebook.

N'oubliez pas de cliquer sur le bouton Enregistrer pour sauvegarder vos paramètres.

Étape 5 : Publier votre page de connexion

Il est maintenant temps de publier votre page de connexion personnalisée sur votre site. Pour ce faire, cliquez sur la flèche déroulante à côté du bouton vert Enregistrer et appuyez sur le bouton Publier.

Vous verrez alors un message de succès vous informant que la page de connexion est maintenant en ligne.

Cliquez sur Voir la page en direct pour afficher votre nouvelle page de connexion personnalisée.

La dernière étape consiste à activer le mode page de connexion dans votre espace d'administration WordPress. Cela peut sembler difficile, mais SeedProd rend cela très facile.

Quittez simplement le constructeur visuel de page de destination et retournez au tableau de bord principal de SeedProd. Sous la section Page de connexion, basculez le bouton de Inactif à Actif.

C'est fait ! Votre page de connexion WordPress a maintenant un design personnalisé. Si vous souhaitez désactiver la page de connexion, il vous suffit de revenir au même bouton bascule et de le désactiver.

Méthode 2 : Utiliser WPForms pour créer une page de connexion

Examinons comment créer une page de connexion avec WPForms.

Étape 1 : Installer WPForms sur votre site

La première chose à faire est d'installer et d'activer le plugin WPForms. Assurez-vous de vérifier votre clé de licence en accédant à WPForms » Paramètres. Vous pouvez obtenir la clé de licence depuis votre compte sur le site Web de WPForms.

Pour pouvoir créer une page de connexion personnalisée avec WPForms, vous devrez installer le module complémentaire d'inscription d'utilisateur en allant dans WPForms » Modules complémentaires. Cliquez sur Installer le module complémentaire à côté de Module complémentaire d'inscription d'utilisateur, puis cliquez sur Activer.

Une fois le module complémentaire activé, vous pouvez créer un formulaire de connexion utilisateur avec WPForms.

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

Avec le puissant constructeur par glisser-déposer de WPForms, vous pouvez créer un formulaire de connexion en quelques minutes, pas en quelques heures, sans écrire une seule ligne de code.

Pour créer un formulaire de connexion, visitez WPForms » Ajouter nouveau. Sur la page de configuration du formulaire, vous devrez choisir le modèle Formulaire de connexion utilisateur pour créer un formulaire de connexion.

Vous verrez maintenant le constructeur de formulaire où vous pouvez ajouter, personnaliser et supprimer des champs de formulaire de connexion. Par défaut, le modèle de formulaire de connexion ajoute les champs de formulaire suivants : Nom d'utilisateur et Mot de passe.

Vous pouvez personnaliser n'importe quel champ en cliquant dessus dans le constructeur de page. Ensuite, vous pouvez apporter les personnalisations souhaitées dans le panneau de gauche.

Étape 3 : Configuration du formulaire

Pour configurer les paramètres généraux, vous pouvez aller dans Paramètres » Général. Sur cette page, vous pouvez personnaliser le nom du formulaire, la description, le texte du bouton de soumission, etc.

Vous n’avez rien à faire dans l'onglet Notifications pour votre formulaire de connexion personnalisé. Par défaut, les notifications sont désactivées, vous ne recevrez donc pas d'e-mail chaque fois que quelqu'un se connectera à votre site.

Lorsqu'un utilisateur se connecte via votre formulaire de connexion personnalisé, il atterrira sur la page d'accueil de votre site Web. Vous pouvez modifier l'URL de redirection si vous le souhaitez, dans le champ URL de redirection de confirmation.

Étape 4 : Publier votre formulaire WordPress

L'un des principaux avantages de l'utilisation de WPForms pour créer un formulaire de connexion est qu'il vous permet d'intégrer votre formulaire n'importe où sur votre site, y compris dans les articles, les pages, les widgets de la barre latérale ou les zones de pied de page avec widgets.

Examinons comment publier votre formulaire dans les articles ou les pages.

Créez un nouvel article ou une nouvelle page dans WordPress, puis cliquez sur l'icône + dans l'éditeur de blocs Gutenberg. Vous pouvez rechercher le bloc WPForms et cliquer dessus.

Ensuite, sélectionnez votre formulaire de connexion dans le bloc WPForms et il se chargera automatiquement dans votre article / page.

Après avoir ajouté le formulaire, vous pouvez publier votre article / page.

Vous pouvez également ajouter le formulaire de connexion à votre widget de barre latérale comme suit. Accédez à Apparence » Widgets et ajoutez le widget WPForms à votre barre latérale.

Sélectionnez votre formulaire de connexion personnalisé dans les paramètres du widget et cliquez sur le bouton Enregistrer pour enregistrer les modifications.

Méthode 3 : Utiliser Theme My Login pour créer une page de connexion

Le plugin Theme My Login rend super facile la publication d'un formulaire de connexion personnalisé sur votre site WordPress. Pour créer une page de connexion simple, il vous suffit d'installer et d'activer le plugin Theme My Login.

Le plugin fonctionne dès la sortie de la boîte sans aucune configuration supplémentaire.

Cependant, si vous avez besoin de personnaliser les paramètres du plugin, vous pouvez cliquer sur le menu Theme My Login dans votre tableau de bord WordPress.

Vous pouvez ensuite modifier les types de connexion et d'inscription. Vous pouvez également ajuster les slugs d'URL pour les pages de connexion, de déconnexion, d'inscription, de mot de passe oublié et de réinitialisation de mot de passe.

Méthode 4 : Personnaliser la page de connexion WordPress existante sans plugin

Si vous préférez apporter des modifications ou ajouter un style personnalisé à votre page de connexion existante plutôt que d'en créer une nouvelle, voici comment procéder.

Ajoutez simplement ce code au fichier functions.php de votre thème ou dans un plugin spécifique au site :

//Custom login page
function clp_login_head() {
		
	echo '<style>'; //Begin custom styles
	echo '.login #nav a, .login #backtoblog a { color: # !important; }'; //Login page link color
	echo '.login h1 a { background:url("' . get_bloginfo('stylesheet_directory') . '/images/IMAGE GOES HERE"); width: px; height: px; }'; //Login page logo
	echo '.login .button-primary { background:#; border-color:#; }'; //Login page button color
	echo '</style>'; //End custom styles
		
}
add_action('login_head', 'clp_login_head');

Vous pouvez modifier le CSS et l'URL de l'image dans le code ci-dessus pour ajouter votre style personnalisé à la page de connexion WordPress.

Méthode 5 : Afficher le formulaire de connexion WordPress n'importe où sans plugin

Si vous souhaitez afficher le formulaire de connexion WordPress sur n'importe quelle page, barre latérale ou pied de page, vous pouvez ajouter ce code au fichier modèle de votre thème :

<?php
          wp_login_form();
?>

Le code ci-dessus n'affichera que la page de connexion WordPress générale à l'endroit où vous ajoutez le code. Si vous souhaitez ajouter une page de formulaire WordPress personnalisée avec des champs et des options supplémentaires, vous pouvez utiliser ce code :

<?php $args = array(
        'echo' => true,
        'redirect' => 'http://wpsnipp.com',
        'form_id' => 'loginform',
        'label_username' => __( 'Username' ),
        'label_password' => __( 'Password' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in' => __( 'Log In' ),
        'id_username' => 'user_login',
        'id_password' => 'user_pass',
        'id_remember' => 'rememberme',
        'id_submit' => 'wp-submit',
        'remember' => true,
        'value_username' => NULL,
        'value_remember' => false );
wp_login_form($args);
?>

Quelques extraits de code supplémentaires qui vous seront utiles :

• Modifier votre URL de connexion via le fichier .htaccess
• Modifier votre URL de connexion via functions.php
• Supprimer l'effet de secousse de connexion WordPress lors d'une erreur

C'est tout ! Si vous prévoyez d'ajouter plus souvent des extraits de code à votre site, consultez le plugin WPCode. C'est la meilleure solution pour ajouter facilement des extraits de code personnalisés.

Nous espérons que ce guide vous a aidé à créer une page de connexion personnalisée dans WordPress. Si vous avez aimé cet article, vous pourriez également vouloir apprendre à créer une page protégée par mot de passe dans WordPress. Cet article vous aidera à restreindre votre contenu avec un mot de passe pour gagner de l'argent ou collecter des adresses e-mail d'utilisateurs.

Vous pourriez également vouloir limiter les tentatives de connexion sur votre page de connexion pour empêcher les pirates de mener des attaques par force brute sur votre site.

Lisez notre guide complet de sécurité pour WordPress pour en savoir plus à ce sujet.