Comment personnaliser votre page de connexion WordPress (5 méthodes rapides) 

Voulez-vous créer une page de connexion WordPress personnalisée ?

La personnalisation de la page de connexion WordPress est un excellent moyen d'améliorer la marque, la sécurité et l'expérience utilisateur de votre site web.

Si vous gérez un site d'adhésion ou une boutique en ligne, les utilisateurs auront besoin d'une page pour se connecter. La personnalisation de la zone de connexion WordPress par défaut vous aidera donc à refléter votre marque et à offrir une meilleure expérience utilisateur.

Cet article vous montrera comment personnaliser la page de connexion WordPress en quelques étapes faciles.

Table des matières

Avantages de la personnalisation de votre page de connexion WordPress ?

Selon votre hébergement, la page de connexion WordPress par défaut affiche le logo WordPress. Elle indique également des champs de formulaire pour que les utilisateurs saisissent leur nom d'utilisateur et leur mot de passe.

C'est acceptable si vous êtes un petit blogueur ou un site web de petite entreprise, car vous êtes probablement la seule personne ayant accès à wp-admin pour se connecter au backend.

Mais si votre site permet aux gens de s'inscrire et de se connecter à votre tableau de bord, vous pouvez remplacer la page de connexion WordPress par défaut et offrir une expérience meilleure, plus professionnelle et plus conviviale.

Les utilisateurs se sentent plus à l'aise avec un design et un logo de connexion personnalisés car ils reconnaissent votre marque. De plus, les envoyer vers un écran de connexion qui ne ressemble en rien à votre site web pourrait sembler suspect.

De plus, l'écran de connexion WordPress par défaut ne contient rien d'autre que les champs de saisie du formulaire de connexion. Cela signifie que vous ne pouvez pas facilement y apposer votre marque.

Exemples de conception de page de connexion WordPress personnalisée

Les propriétaires de sites web peuvent personnaliser la page de connexion WordPress de nombreuses manières. Vous pouvez ajouter différents styles et images, créer un lien vers votre page d'accueil, inclure des appels à l'action pour vendre d'autres produits, et même ajouter des icônes de profil de médias sociaux.

Voici quelques exemples de ce que vous pouvez faire :

Personnalisation de la page de connexion WordPress par MonsterInsights

MonsterInsights utilise une mise en page à 2 colonnes pour la conception de sa page de connexion. À gauche se trouve le formulaire de connexion, et à droite se trouve un appel à l'action pour son produit sœur.

Cet exemple de page de connexion comprend une image de fond attrayante pour créer une expérience de connexion unique.

Page de connexion WordPress personnalisée de TED

La page de connexion de TED est un autre exemple avec une conception à 2 colonnes. À gauche se trouve une image et un titre attrayants, et la colonne de droite offre plusieurs façons de se connecter.

Les utilisateurs peuvent également s'inscrire à un compte TED en saisissant leur adresse e-mail.

Page de connexion personnalisée de Church Motion Graphics

Cette page de connexion attire instantanément l'attention avec son arrière-plan coloré. L'image d'arrière-plan reflète l'activité de l'entreprise et donne aux utilisateurs une idée de ce à quoi s'attendre.

L'en-tête, le pied de page et les menus de navigation sont identiques sur tout le site. Cependant, le formulaire de connexion est minimaliste, contrastant l'image vive du site web avec un arrière-plan clair.

Voici quelques autres exemples de pages de connexion pour vous inspirer.

En gardant cela à l'esprit, explorons les différentes méthodes pour personnaliser votre page de connexion dans WordPress. Nous vous promettons que cela n'impliquera pas de CSS ou de HTML personnalisé complexe.

Nous vous guiderons dans la création d'une page de connexion personnalisée WordPress à l'aide des meilleurs plugins WordPress pour cette tâche, SeedProd et WPForms.

Comment personnaliser la page de connexion WordPress avec SeedProd

SeedProd est le meilleur constructeur de pages de destination et constructeur de thèmes WordPress avec des fonctionnalités de mode "coming soon" et de maintenance. Comme Elementor, il vous permet de créer tout type de page de destination ou de thème dans WordPress avec son constructeur convivial par glisser-déposer.

Avec des tonnes de thèmes WordPress réactifs et de modèles de pages de destination, vous pouvez créer des pages époustouflantes :

• Pages "Coming soon"
• Pages de maintenance
• Pages de vente
• Pages d’inscription aux webinaires
• Pages de capture de prospects
• Pages d'erreur 404
• Pages de remerciement WordPress
• Pages de connexion personnalisées

Avec le mode intégré "Page de connexion" et le bloc de formulaire de connexion, vous pouvez transformer complètement votre page de connexion WordPress. Les utilisateurs peuvent se connecter et se déconnecter rapidement, et cela fonctionne avec n'importe quel thème WordPress.

Mieux encore, SeedProd est rapide, léger et ne ralentira pas votre site Web. Contrairement à d'autres plugins de création de pages de destination, il se concentre sur la génération de prospects et de résultats pour votre entreprise.

Remarque : Il existe une version gratuite de SeedProd sur WordPress.org. Cependant, nous utiliserons SeedProd Pro pour les fonctionnalités de personnalisation avancées et les modes de page de connexion.

Suivez les étapes ci-dessous pour styliser la page de connexion WordPress par défaut avec le personnalisateur de page de connexion personnalisé de SeedProd.

Étape 1 : Installer et activer SeedProd

La première étape consiste à télécharger le plugin SeedProd et à l'installer sur votre site Web WordPress.

Si vous n'êtes pas familier avec cela, consultez ce guide étape par étape pour installer un plugin WordPress.

Après avoir installé et activé le plugin, vous verrez la page d'accueil SeedProd dans votre tableau de bord d'administration WordPress. C'est ici que vous pouvez entrer vos détails de licence et regarder la vidéo de démarrage rapide.

Après avoir entré votre clé de licence, cliquez sur le bouton Créer votre première page.

Étape 2 : Modifier votre page de connexion WordPress

Après avoir cliqué pour créer une nouvelle page dans SeedProd, vous verrez l'aperçu suivant :

Ce sont les différents modes de page que vous pouvez activer dans SeedProd. Pour ce tutoriel, nous avons besoin du mode Page de connexion.

Alors, cliquez sur Modifier la page sous l'en-tête Page de connexion.

Étape 3 : Choisir un modèle de page de connexion WordPress personnalisé

Vous verrez la bibliothèque de modèles de pages de destination de SeedProd sur l'écran suivant. Chaque modèle est polyvalent et vous pouvez les personnaliser dans le constructeur de pages visuel.

Il comprend des modèles de messages d'erreur 404, des modèles de pages de vente, des pages "coming soon", etc.

Cliquer sur le bouton Connexion affiche tous les modèles de page de connexion que vous pouvez utiliser. Survolez simplement le modèle que vous préférez et cliquez sur l'icône en forme de coche.

Pour ce guide, nous choisirons Page de connexion 8.

Après avoir choisi votre modèle de page de connexion WordPress, vous verrez une fenêtre contextuelle vous demandant d'entrer un nom et une URL de page personnalisée.

Cliquez sur le bouton Enregistrer et commencer à modifier la page pour la lancer dans l'éditeur glisser-déposer.

Étape 4 : Personnalisez votre page de connexion WordPress

L'éditeur de pages de destination par glisser-déposer de SeedProd comporte 2 sections distinctes. Vous verrez les blocs de page et les sections que vous pouvez utiliser sur la gauche. Et sur le côté droit se trouve un aperçu en direct de votre page de destination.

Pour ajouter du nouveau contenu à votre page de connexion, faites glisser un bloc de la gauche et déposez-le sur votre page. Par exemple, vous pouvez ajouter un logo de connexion à votre page en quelques clics.

Cliquer sur n'importe quel bloc de votre page vous permet de personnaliser le contenu. Par exemple, cliquer sur le formulaire de connexion affiche les paramètres du bloc de connexion de SeedProd dans le panneau de gauche.

Dans cette zone, vous pouvez personnaliser les étiquettes de votre formulaire de connexion, afficher et masquer les champs nom et mot de passe, et personnaliser le texte du bouton et la case à cocher.

Vous pouvez choisir parmi plusieurs styles de formulaire de connexion différents en cliquant sur l'onglet Modèles.

C'est un moyen facile de personnaliser votre formulaire sans aucune connaissance technique. Choisissez simplement votre style préféré, qui s'affiche instantanément sur votre formulaire.

Ajouter du contenu supplémentaire à votre page de connexion est tout aussi facile. Vous pouvez ajouter des boutons, des colonnes, des images et d'autres éléments axés sur la mise en page à n'importe quel bloc standard.

D'autre part, les Blocs avancés aident à générer des prospects pour votre entreprise.

En quelques clics, vous pouvez intégrer :

• Cadeaux
• Formulaires de contact
• Formulaires d'inscription
• Compte à rebours
• Barres de progression
• Boutons de profil social
• Boutons de partage sur les réseaux sociaux
• Produits WooCommerce
• Et plus encore.

C'est une façon fantastique de transformer votre page de connexion en une machine à générer des prospects. Par exemple, vous pouvez montrer aux utilisateurs un concours sur votre page de connexion pour augmenter vos abonnés sur les réseaux sociaux, accroître la notoriété de votre marque et même augmenter votre liste d'e-mails.

Outre les blocs individuels, SeedProd propose également des Sections de pages de destination. Ce sont des zones de page que vous n'avez pas besoin de construire manuellement, bloc par bloc. Vous pouvez voir les différentes sections en cliquant sur l'onglet Sections.

À partir de là, vous pouvez choisir une nouvelle :

• En-tête
• Zone d'accueil
• Appel à l'action
• Section FAQ
• Zone de fonctionnalités
• Pied de page

Et les ajouter automatiquement à votre page.

Vous voudrez changer l'arrière-plan, les polices et les couleurs de votre page de connexion. Il est fastidieux de faire cela individuellement pour chaque bloc de votre page.

Heureusement, SeedProd vous permet de contrôler ces paramètres globalement. Cliquez simplement sur l'icône d'engrenage dans le coin inférieur droit de votre écran pour voir votre panneau Paramètres globaux.

Sous l'onglet Polices, vous pouvez changer les polices et les graisses de vos en-têtes et de votre corps de texte. Choisissez simplement une nouvelle taille ou graisse de police dans les menus déroulants.

Vous pouvez parcourir la bibliothèque de combinaisons de polices de SeedProd en cliquant sur le bouton Thèmes de polices.

Cela vous montrera quelles polices vont le mieux ensemble afin que vous puissiez cliquer une fois et les ajouter à votre page.

Vous pouvez sélectionner différentes couleurs pour les liens globaux, les en-têtes, le texte, les boutons et les arrière-plans à l'aide de l'outil de sélection de couleurs.

Ou, vous pouvez cliquer sur le bouton Palettes de couleurs pour choisir parmi plus de 20 jeux de couleurs.

La section Arrière-plan offre un moyen simple de personnaliser l'arrière-plan de votre page de connexion. Vous pouvez définir une couleur d'arrière-plan unie ou un dégradé, ou télécharger une image d'arrière-plan pleine largeur.

Cliquez sur l'icône de corbeille dans le panneau des paramètres d'arrière-plan pour supprimer l'image existante.

Vous pouvez cliquer sur le bouton Utiliser votre propre image pour sélectionner une nouvelle image à partir de votre ordinateur ou de la médiathèque WordPress. À partir de là, vous pouvez ajuster la taille de l'arrière-plan, la répétition de l'arrière-plan et d'autres options.

Vous pouvez également ajouter une vidéo d'arrière-plan ou un diaporama d'arrière-plan en sélectionnant le commutateur pour chaque paramètre.

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

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

Une fois la conception de votre page de connexion terminée, il est temps de configurer quelques paramètres nécessaires.

Tout d'abord, connectez votre service de marketing par e-mail. Ceci est utile si vous avez un formulaire d'inscription sur votre page de connexion et que vous souhaitez collecter les adresses e-mail des utilisateurs.

Pour ce faire, cliquez sur l'onglet Connecter en haut de votre écran, choisissez votre service de messagerie préféré, et suivez les étapes pour lier votre compte.

SeedProd s'intègre avec les services de newsletter populaires, y compris :

• ActiveCampaign
• AWeber
• Campaign Monitor
• Constant Contact
• ConvertKit
• Drip
• GetResponse
• iContact
• Mad Mimi
• Sendy
• Mailchimp

Il n'y a pas lieu de s'inquiéter si vous n'avez pas de fournisseur de messagerie. Vous pouvez toujours collecter des adresses e-mail avec la fonction de gestion des abonnés de SeedProd.

Chaque fois que quelqu'un s'inscrit via votre page de destination, ses informations sont automatiquement stockées sur votre site Web WordPress. Vous pouvez voir vos abonnés en allant dans SeedProd » Abonnés depuis votre tableau de bord WordPress.

L'étape suivante consiste à cliquer sur l'onglet Paramètres de la page en haut de votre écran.

Sur cette page, vous pouvez modifier les paramètres suivants de votre page de destination :

• Détails généraux – Modifiez le nom et l'URL de votre page, et définissez-la comme brouillon ou publiée.
• SEO – Modifiez le titre SEO de votre page, la méta-description, etc., via un plugin SEO comme All in One SEO.
• Analytique – Visualisez les performances de votre page de connexion à l'aide d'un plugin d'analyse comme MonsterInsights.
• Scripts – Entrez 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 avant de passer à l'étape suivante.

Étape 6 : Vérifiez que votre page de connexion est adaptée aux mobiles

Toute page Web que vous publiez doit être adaptée aux mobiles. Si ce n'est pas le cas, il est plus difficile pour les utilisateurs mobiles de naviguer et d'utiliser votre site Web.

En plus de nos modèles de pages de destination adaptées aux mobiles, SeedProd dispose d'une option pratique d'aperçu mobile. Cela vous permettra de vous assurer que votre page de connexion est superbe sur tous les appareils.

Pour afficher l'aperçu mobile de votre page de connexion WordPress, cliquez sur l'icône d'aperçu mobile en bas de votre écran.

Cela montre votre page de connexion telle que les utilisateurs mobiles la verraient. Avec la vue de bureau, vous pouvez la modifier comme vous le souhaitez, et SeedProd enregistrera les modifications sur les deux vues.

Étape 7 : Publiez votre page de connexion WordPress personnalisée

Maintenant que vous avez créé votre page de connexion WordPress personnalisée et l'avez vérifiée sur les appareils mobiles, il est temps de la mettre en ligne. Cliquez sur la flèche vers le bas à côté du bouton vert Enregistrer et sélectionnez Publier pour ce faire.

Ensuite, une fenêtre contextuelle vous indiquera que votre page est en ligne.

Allez-y et cliquez sur le bouton Voir la page en ligne pour voir à quoi elle ressemble.

La dernière chose à faire est d'activer le mode page de connexion dans votre zone d'administration WordPress.

Cliquez sur l'icône « X » pour quitter le constructeur de page et voir votre tableau de bord de page de destination SeedProd.

Ensuite, sous la rubrique Page de connexion, faites passer le commutateur de inactif à Actif.

Félicitations ! Désormais, toute personne visitant votre page de connexion WordPress verra votre design personnalisé.

Personnaliser la page de connexion WordPress avec WPForms

La deuxième méthode pour personnaliser l'écran de connexion WordPress que nous allons aborder aujourd'hui implique l'utilisation du populaire plugin WPForms.

WPForms est le meilleur constructeur de formulaires par glisser-déposer pour WordPress. Et ce que vous ne savez peut-être pas, c'est que vous pouvez utiliser son pratique module complémentaire de formulaire d'inscription d'utilisateur pour créer une page de connexion pour votre site Web.

Avec plus de 3 millions de propriétaires de sites Web utilisant WPForms pour créer des formulaires et des sondages plus intelligents, vous pouvez être assuré que vous êtes entre de bonnes mains.

Donc, si vous n'avez pas besoin d'un plugin de formulaire dédié à la création de pages de connexion, suivez ce tutoriel étape par étape pour créer un formulaire de connexion WordPress personnalisé à l'aide de WPForms. Le guide vous expliquera également comment ajouter un lien de mot de passe oublié à votre formulaire et afficher votre formulaire de connexion à l'aide d'un shortcode.

Comment personnaliser la page de connexion WordPress manuellement

Si vous préférez apporter des modifications ou ajouter un style personnalisé à votre page de connexion existante au lieu de créer une nouvelle page de connexion ou d'utiliser un plugin de connexion WordPress, vous le pouvez. Cette méthode implique l'ajout de code au fichier functions.php de votre thème ou dans un plugin spécifique au site.

C'est plus difficile que d'utiliser un constructeur de page ou un personnalisateur WordPress, donc cela peut ne pas convenir à vos besoins.

Si vous débutez, vous pouvez vous référer à ce guide sur comment ajouter des extraits de code dans WordPress. Cela vous évitera de casser accidentellement votre site Web.

Ajoutez maintenant le code suivant au fichier functions.php de votre thème :

//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 changer le CSS et l'URL de l'image en utilisant le code ci-dessus. Cela ajoutera un style personnalisé à votre page de connexion WordPress.

Affichez votre formulaire de connexion WordPress n'importe où sans plugin

Vous pouvez ajouter ce code au fichier modèle de votre thème si vous souhaitez afficher votre formulaire de connexion WordPress sur n'importe quelle page sans plugin de connexion WordPress, widget de connexion de barre latérale ou zone de pied de page.

<?php
          wp_login_form();
?>

Ce code 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);
?>

Personnaliser le logo et l'URL de connexion WordPress

Vous n'avez pas toujours besoin de créer une page de connexion personnalisée pour votre site Web WordPress. Parfois, vous pouvez simplement changer le logo et le lien du logo sur la page de connexion par défaut.

Si vous souhaitez changer le logo sur l'écran de connexion pour le vôtre, vous pouvez facilement utiliser un plugin pour WordPress.

Pour ce faire, installez et activez d’abord le plugin Colorlib Login Customizer. Après l’avoir activé, accédez à Apparence » Personnaliser depuis votre administration WordPress et cliquez sur le nouvel élément « Colorlib Login Customizer ».

Le personnaliseur chargera votre écran de connexion WordPress par défaut avec les paramètres de personnalisation à gauche et un aperçu en direct à droite.

Pour remplacer le logo WordPress par défaut par le vôtre, cliquez sur l’onglet Options du logo.

Vous pouvez maintenant masquer le logo WordPress, télécharger votre logo personnalisé et modifier son URL et son texte.

De plus, vous pouvez modifier la taille du texte ainsi que la largeur et la hauteur de votre logo.

Si vous le souhaitez, vous pouvez même personnaliser complètement la page de connexion WordPress par défaut avec des colonnes, des images d’arrière-plan, des couleurs personnalisées, et plus encore. Assurez-vous de publier les modifications lorsque vous êtes satisfait de votre nouveau logo de page de connexion.

Personnaliser le message d'erreur de la page de connexion WordPress

Si un utilisateur saisit un nom d’utilisateur ou un mot de passe incorrect dans WordPress, il verra des notifications d’erreur par défaut. Ces messages, tels que « Nom d’utilisateur invalide » ou « L’adresse e-mail n’est pas correcte », expliquent clairement quel est le problème.

LoginPress est un outil que vous pouvez utiliser pour modifier ces messages d’erreur de connexion. Par exemple, vous pourriez vouloir ajouter plus de détails aux messages par défaut pour montrer comment les corriger.

Cependant, bien que cela puisse aider les utilisateurs légitimes à accéder à leurs comptes, cela peut involontairement aider les pirates. Ils essaient souvent d’infiltrer des sites Web en utilisant des combinaisons de noms d’utilisateur et de mots de passe populaires. Les notifications d’erreur par défaut peuvent aider les pirates à savoir quand ils ont entré le bon nom d’utilisateur ou mot de passe.

À titre de mesure de protection, vous pourriez souhaiter une notification d’erreur plus généralisée. Pour modifier celles-ci, choisissez Messages d’erreur dans le menu Personnalisateur WordPress :

À partir de là, vous pouvez apporter toutes les modifications souhaitées au message d’erreur de connexion. Ils sont compatibles avec le formatage HTML, vous permettant d’inclure des fonctionnalités stylistiques telles que la mise en gras ou en italique de texte important.

Tester votre page de connexion personnalisée

Les tests sont une étape essentielle dans le processus de personnalisation de votre page de connexion WordPress. Voici un bref guide sur la façon d’effectuer le test :

• Chargement de la page : Vérifiez si la page se charge correctement, sans aucun problème ou élément cassé.
• Logo et design : Assurez-vous que le nouveau logo et le nouveau design apparaissent comme prévu.
• Test de fonctionnalité : Essayez de vous connecter avec votre nom d’utilisateur et votre mot de passe. Assurez-vous que le processus est fluide et réussi.
• Messages d’erreur : Entrez des identifiants de connexion incorrects et vérifiez si les messages d’erreur s’affichent correctement.
• Fonctionnalité « Mot de passe oublié » : Testez la fonctionnalité « Mot de passe oublié » pour vous assurer qu’elle envoie correctement un e-mail avec le lien de réinitialisation du mot de passe.
• URL personnalisée : Si vous avez défini une URL personnalisée pour la page de connexion, vérifiez qu’elle redirige correctement vers la nouvelle page de connexion.
• Réactivité : Vérifiez l’apparence et la convivialité de la page sur différents appareils (mobile, tablette et ordinateur de bureau) pour vous assurer qu’elle est réactive et conviviale.

Personnaliser la page de connexion WordPress FAQ

C'est tout !

Vous savez maintenant comment créer une page de connexion personnalisée pour WordPress. Vous pouvez maintenir l'aspect professionnel de votre site WordPress et offrir une excellente expérience utilisateur à vos clients.

Essayez SeedProd dès aujourd'hui pour personnaliser facilement votre page de connexion WordPress. Avec SeedProd, vous pouvez modifier les couleurs, les polices, le logo, et plus encore, le tout sans écrire une seule ligne de code.

Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.