Comment créer une page de connexion WordPress personnalisée (Guide ultime) 2024

La page de connexion par défaut de WordPress fonctionne bien, mais elle ne représente pas complètement votre marque. Pour créer une expérience plus engageante, il est important de mettre en valeur votre marque et votre entreprise sur cette page.

Un design personnalisé de la page de connexion est particulièrement impactant pour les sites d’adhésion ou les magasins en ligne, où les utilisateurs/utilisatrices interagissent fréquemment avec la page de connexion.

Chez WPBeginner, nous avons mis en place une page de connexion personnalisée pour notre site de formation vidéo WordPress gratuit. Cela nous a aidés à mettre notre marque plus en évidence tout en améliorant l’expérience des utilisateurs/utilisatrices.

Dans ce guide, nous allons vous afficher comment créer une page de connexion WordPress personnalisée. Nous explorerons plusieurs méthodes afin que vous puissiez choisir celle qui correspond le mieux aux besoins de votre entreprise.

Voici ce que vous apprendrez dans ce guide :

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

Votre site WordPress est doté d’un puissant système de gestion des utilisateurs/utilisatrices. Il permet aux utilisateurs/utilisatrices de créer des comptes dans les boutiques e-commerce, les sites d’adhésion et les blogs.

Par défaut, la page de connexion affiche la marque et le logo de WordPress. Cela convient si vous êtes la seule personne à disposer d’un accès administrateur ou si vous avez très peu d’utilisateurs/utilisatrices.

Cependant, si votre site permet aux utilisateurs/utilisatrices de s’inscrire et de se connecter, une page de connexion personnalisée offre une meilleure expérience aux utilisateurs/utilisatrices.

Certains utilisateurs/utilisatrices peuvent être méfiants si votre écran de connexion WordPress ne ressemble en rien à votre site. Ils se sentiront plus à l’aise si vous utilisez le logo et le design de votre entreprise.

Dernier point, l’écran de connexion par défaut ne contient rien d’autre que le formulaire de connexion. En créant une page de connexion personnalisée, vous pouvez utiliser cet espace pour promouvoir d’autres pages ou des offres spéciales.

C’est pourquoi nous utilisons une page de connexion personnalisée pour tous nos sites où les utilisateurs/utilisatrices doivent interagir avec un formulaire de connexion.

Par exemple, voici la page de connexion personnalisée que nous utilisons pour le site de vidéos de formation WPBeginner Videos.

Ceci étant dit, voyons quelques autres exemples de conceptions de pages de connexion WordPress personnalisées.

Exemples de pages de connexion WordPress

Les propriétaires de sites web peuvent personnaliser la page de connexion de WordPress en utilisant différents styles et techniques.

Certains créent une page de connexion personnalisée qui reprend le thème et les couleurs de leur site. D’autres modifient la page de connexion par défaut en y ajoutant un arrière-plan, des couleurs et un logo personnalisés.

Voici quelques exemples de ce qui est possible.

WPForms

WPForms est la meilleure extension de formulaire de contact WordPress sur le marché. Leur extension comprend également un module complémentaire pour créer de magnifiques formulaires de connexion et d’Inscription WordPress, que nous vous afficherons ultérieurement dans cet article.

Leur page de connexion personnalisée utilise une mise en page en deux colonnes. La colonne de gauche contient le formulaire de connexion, et la colonne de droite est utilisée pour mettre en évidence les promotions et autres appels à l’action.

La page de connexion affichée ci-dessus informe les utilisateurs/utilisatrices des nouvelles fonctionnalités. Elle utilise une marque personnalisée, une illustration d’arrière-plan et les couleurs de la marque pour créer une expérience de connexion unique.

Jacquelynne Steves

Jacquelynne Steeves est un site d’art et d’artisanat où l’auteur/autrice publie du contenu sur la décoration des maisons, la fabrication de quilts, les compositions, la broderie, et plus encore.

Leur page de connexion utilise une image d’arrière-plan personnalisée qui correspond au thème de leur site, et le formulaire de connexion se trouve sur la droite.

Graphiques animés de l’église

La page de connexion de cette entreprise de conception de graphismes animés présente un arrière-plan coloré à l’image de son activité.

Il utilise le même en-tête de site, le même pied de page et les mêmes menus de navigation sur l’écran de connexion. Le formulaire de connexion lui-même est assez simple, avec un arrière-plan clair.

Avis de la direction de MITSloan

L’Avis sur la gestion des prêts aux entreprises utilise une fenêtre surgissante pour afficher un formulaire de connexion et d’inscription.

L’avantage d’une fenêtre surgissante est que les utilisateurs/utilisatrices peuvent se connecter sans quitter la page. Cela leur enregistre le chargement d’une nouvelle page et offre une expérience plus rapide aux utilisateurs/utilisatrices.

Êtes-vous prêt à apprendre comment créer une page de connexion personnalisée dans WordPress ?

Créer une page de connexion WordPress en utilisant le thème My Login (Gratuit)

Theme My Login est une extension gratuite qui modifie votre page de connexion en fonction de votre thème WordPress. Il n’est pas très personnalisable, mais il remplacera la page de connexion par défaut marquée WordPress et lui donnera un aspect plus professionnel.

La première chose à faire est d’installer et d’activer l’extension Theme My Login. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Dès qu’il est activé, Theme My Login crée automatiquement des URL pour vos actions personnalisées de connexion, déconnexion, inscription, mot de passe oublié et réinitialisation du mot de passe.

Vous pouvez personnaliser ces URLs de connexion WordPress en visitant la page  » Theme My Login  » General. Défilez vers le bas jusqu’à la section ‘Slugs’ pour modifier les URLs utilisées par l’extension pour les actions de connexion.

Theme My Login vous permet également d’utiliser des codes courts pour créer des pages de connexion et d’inscription personnalisées. Vous pouvez simplement créer une page pour chaque action, puis ajouter le slug de la page ici afin que le plugin puisse trouver et rediriger les utilisateurs/utilisatrices correctement.

Commençons par la page de connexion.

Dirigez-vous vers Page  » Ajouter nouveau pour créer une nouvelle page WordPress. Ensuite, vous devez donner un titre à votre page, puis saisir le code court suivant [theme-my-login] dans la page.

Vous pouvez maintenant publier votre page et la prévisualiser pour voir votre page de connexion personnalisée en action.

Voici ce que cela donne sur notre site WordPress de test.

Répétez le processus pour créer d’autres pages en utilisant le code court suivant :

[theme-my-login action="register"] Pour le formulaire d’Inscription

[theme-my-login action="lostpassword"]Pour la page du mot de passe perdu

[theme-my-login action="resetpass"] Pour la page de réinitialisation du mot de passe

Créer une page de connexion WordPress personnalisée à l’aide de WPForms

WPForms est la meilleure extension de constructeur de formulaires WordPress sur le marché. Il vous permet de créer facilement des formulaires de connexion et d’Inscription personnalisés pour votre site.

WPForms est une extension WordPress premium, et vous aurez besoin au moins de leur offre pro pour accéder au module complémentaire d’Inscription des utilisateurs. Les utilisateurs/utilisatrices de WPBeginner peuvent bénéficier d’une remise de 50% en utilisant notre code promo WPForms: SAVE50

La première chose à faire est d’installer et d’activer l’extension WPForms. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Lors de l’activation, vous devez vous rendre sur la page WPForms  » Réglages pour saisir votre clé de licence. Vous pouvez trouver cette information dans votre compte sur le site de WPForms.

Après avoir saisi/saisi la clé de licence, vous pourrez installer des modules complémentaires.

Rendez-vous sur la page WPForms  » Addons et localisez l’Addon Inscription des utilisateurs/utilisatrices.

Cliquez ensuite sur le bouton « Installer le module » pour télécharger et activer le module. Vous êtes maintenant prêt à créer vos formulaires de connexion personnalisés.

Titre de la page WPForms  » Ajouter une nouvelle. Il vous sera demandé de  » Sélectionné un Modèle  » pour votre formulaire. Recherchez le modèle  » User Login Form  » et cliquez sur le bouton  » Use Modèle  » pour continuer.

WPForms chargera le formulaire de connexion de l’utilisateur avec les champs obligatoires.

Vous pouvez cliquer sur les champs pour ajouter votre propre description ou texte autour d’eux.

Vous pouvez également modifier d’autres réglages.

Par exemple, le titre du bouton par défaut est « Envoyer ». Vous pouvez cliquer sur le bouton et modifier le texte en « Connexion ».

Vous pouvez également décider de ce qui se passe une fois qu’un utilisateur est bien connecté.

Vous devez vous rendre dans l’onglet Réglages  » Confirmation et sélectionner une action. Vous pouvez rediriger l’utilisateur vers n’importe quelle autre URL, le rediriger vers la page d’accueil ou simplement lui afficher un message indiquant qu’il est désormais connecté.

Une fois que vous êtes satisfait des réglages du formulaire, cliquez sur le bouton « Enregistrer » dans le coin supérieur droit de l’écran et fermez le constructeur de formulaires.

Ajout d’un formulaire de connexion personnalisé à une page WordPress

WPForms rend super facile l’ajout de votre formulaire de connexion personnalisé sur n’importe quelle publication ou page WordPress.

Il suffit de modifier la page où vous souhaitez ajouter le formulaire de connexion ou d’en créer une nouvelle. Ensuite, dans l’écran de modification de la page, ajoutez le bloc WPForms à votre zone de contenu.

Ensuite, sélectionnez le formulaire de connexion que vous avez créé plus tôt, et le bloc WPForms le chargera automatiquement à l’intérieur de la zone de contenu.

Vous pouvez maintenant continuer à modifier la page du formulaire de connexion. N’hésitez pas à ajouter du texte ou des blocs promotionnels. Une fois que vous avez terminé, n’oubliez pas d’enregistrer et de publier vos modifications.

Vous pouvez maintenant visiter votre site pour voir votre page de connexion en action.

Créer une page de connexion personnalisée pour WordPress en utilisant SeedProd (Recommandé)

Par défaut, votre page de formulaire de connexion WordPress personnalisé utilisera le modèle de page et les styles de votre thème. Elle aura les menus de navigation, l’en-tête, le pied de page et les widgets de la colonne latérale de votre thème.

Si vous souhaitez prendre en charge l’intégralité de la page et concevoir quelque chose à partir de zéro, vous pouvez utiliser une extension de constructeur de page WordPress.

SeedProd est le meilleur constructeur de page d’atterrissage pour WordPress. Il est convivial pour les débutants et offre un constructeur drag-and-drop pour vous aider à créer n’importe quel type de page d’atterrissage, y compris une page de connexion, une page coming soon, une page de mode de maintenance, et plus encore.

Pour cet article, nous utiliserons la version SeedProd Pro car elle inclut un modèle de page de connexion et des blocs de page avancés pour la personnalisation.

Il existe également une version gratuite de SeedProd, mais elle n’inclut pas la faculté de créer une page de connexion pour votre site WordPress.

Tout d’abord, vous devrez installer l’extension SeedProd sur votre site. Pour plus de détails, vous pouvez suivre notre guide sur l’installation d’une extension WordPress.

Une fois l’extension activée, vous serez redirigé vers SeedProd dans votre zone d’administration WordPress.

Ici, vous devrez saisir votre clé de licence, que vous pouvez facilement obtenir à partir du compte SeedProd. Si vous avez saisi/saisie la clé, cliquez sur le bouton ‘Verify key’.

Après cela, vous êtes prêt à créer votre page de connexion dans SeedProd.

Pour commencer, rendez-vous sur le site SeedProd  » Landing Pages «  et sélectionnez l’option  » Page de connexion  » en cliquant sur le bouton  » Configurer une page de connexion « .

Dans l’écran suivant, vous pouvez sélectionner un Modèle pour votre page de connexion. Vous pouvez également créer une page à partir de zéro en utilisant le Modèle vierge.

Cependant, nous suggérons d’utiliser un Modèle car il est plus facile et plus rapide de personnaliser la page de connexion.

Lorsque vous sélectionnez un Modèle, une fenêtre surgissante apparaîtra pour saisir un Nom de page pour votre page de connexion. SeedProd utilisera le nom de la page comme URL pour votre page d’atterrissage.

Une fois ces modifications saisies, cliquez sur le bouton « Enregistrer et commencer à modifier la page ».

Maintenant, vous pouvez modifier votre page de connexion en utilisant le constructeur de SeedProd dans l’onglet Design. Le constructeur vous permet d’ajouter facilement n’importe quel module de page à la page en le faisant simplement glisser depuis le menu de gauche et en le plaçant n’importe où sur la page.

Par exemple, vous pouvez ajouter du texte, une vidéo ou un nouveau bouton à votre page de connexion. Il y a plus d’options de personnalisation dans la section des blocs avancés, où vous pouvez ajouter un compte à rebours, des icônes de partage social, et plus encore.

SeedProd vous permet même de retirer des blocs de page existants dans le Modèle. Il vous suffit de cliquer sur l’icône de la corbeille pour supprimer le bloc de page.

Ensuite, si vous cliquez sur n’importe quelle section de la page de connexion, vous verrez d’autres options de personnalisation.

Par exemple, vous pouvez modifier le texte et la couleur des champs, choisir une police différente, modifier la couleur du bouton, etc.

Lorsque vous êtes satisfait de la conception de la page de connexion, cliquez sur l’onglet « Connexion » en haut de la page.

Vous pouvez désormais connecter différents services de marketing e-mail tels que Constant Contact, Drip, et plus encore.

Ensuite, vous devez vous rendre dans l’onglet Réglages de la page. Dans les Réglages généraux, SeedProd vous permet de modifier le titre de la page et de modifier l’état de la page de brouillon à publier.

Vous pouvez également sélectionner l’option d’utiliser un lien SeedProd et ajouter votre lien d’affilié SeedProd pour gagner plus d’argent en ligne.

Si vous souhaitez optimiser votre page de connexion pour les moteurs de recherche, rendez-vous dans les Réglages SEO. Vous y trouverez un bouton qui vous permettra d’installer l’extension All In One SEO.

All in One SEO for WordPress (AIOSEO) est la meilleure extension SEO WordPress qui vous permet d’optimiser votre site WordPress pour les moteurs de recherche et les plateformes de réseaux sociaux.

Vous pouvez apprendre la meilleure façon de l’utiliser dans notre guide sur la façon de config urer correctement All In One SEO pour WordPress.

Ensuite, vous pouvez également ajouter différents extraits de code à votre page de connexion dans l’onglet Paramètres des scripts.

Par exemple, vous pouvez ajouter ici le code de Google Analytics, le pixel Facebook ou tout autre code de suivi.

Maintenant que vous avez modifié les Réglages de la page, cliquez sur le bouton « Enregistrer » en haut de la page.

Ensuite, vous devrez faire en sorte que votre page de connexion soit activée. Pour cela, vous pouvez quitter le constructeur de page d’atterrissage puis aller dans SeedProd  » Landing Pages.

Une fois sur place, vous devez cliquer sur le bouton pour modifier l’état de la page de « Inactive » à « Active ».

Vous pouvez maintenant vous rendre à l’URL de votre page de connexion et la voir à l’œuvre.

Voici une capture d’écran de la connexion sur notre site de démonstration.

Alternative : Vous pouvez également utiliser Thrive Architect pour concevoir une page de connexion attrayante. C’est une autre excellente extension de constructeur de page par glisser-déposer que nous recommandons pour créer des pages personnalisées.

Il comprend plus de 300+ modèles conçus par des professionnels qui vous permettent de réaliser une page de connexion qui pourrait ressembler à celle ci-dessous.

Si les extensions de constructeurs de pages WordPress ne vous conviennent pas, vous pouvez utiliser des CSS personnalisés pour styliser le formulaire et la page de connexion elle-même.

Modifier le logo et l’URL de connexion de WordPress

Il n’est pas toujours nécessaire de créer une page de connexion WordPress personnalisée pour votre site web. De nombreux sites remplacent le logo WordPress et l’URL du logo tout en continuant à utiliser la page de connexion par défaut.

Si vous souhaitez remplacer le logo WordPress sur l’écran de connexion par votre propre logo, alors vous pouvez facilement utiliser une extension WordPress ou ajouter un code personnalisé. Nous allons vous afficher les deux méthodes, et vous pouvez utiliser celle qui vous convient le mieux.

Méthode 1 : Modifier le logo et l’URL de connexion de WordPress à l’aide d’une extension

La première chose à faire est d’installer et d’activer l’extension Colorlib Login Outil de personnalisation. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Dès qu’elle est activée, l’extension ajoute un nouvel élément de menu au personnalisateur de thème WordPress. Il suffit de naviguer dans Apparence  » Personnaliser et de cliquer sur le nouvel article  » Colorlib Login Outil de personnalisation  » pour lancer le personnalisateur de connexion.

Note : cette option n’est pas disponible si vous utilisez un thème sur blocs, nous vous recommandons donc d’utiliser la méthode du code si c’est le cas.

L’Outil de personnalisation de la connexion chargera votre écran de connexion WordPress par défaut avec des options de personnalisation sur la gauche et une Prévisualisation en direct sur la droite.

Pour remplacer le logo WordPress par le vôtre, cliquez sur l’onglet « Options du logo » à droite.

À partir de là, vous pouvez masquer le logo WordPress, téléverser votre propre logo personnalisé et modifier l’URL et le texte du logo.

Vous pouvez également personnaliser la taille et la couleur du texte ainsi que la largeur et la hauteur du logo personnalisé.

Le plugin vous permet également de personnaliser complètement la page de connexion par défaut de WordPress. Vous pouvez ajouter des colonnes, des images d’arrière-plan, modifier les couleurs du formulaire de connexion, et plus encore.

Modifié, vous pouvez créer une page de connexion WordPress personnalisée sans modifier l’URL de connexion par défaut de WordPress.

Une fois que vous avez terminé, il vous suffit de cliquer sur le bouton  » Publier  » pour enregistrer vos modifications. Vous pouvez maintenant visiter la page de connexion de WordPress pour voir votre formulaire de connexion personnalisé en action.

Méthode 2 : Modifier le logo et l’URL de connexion de WordPress à l’aide d’un code

Cette méthode vous permet de remplacer manuellement le logo WordPress sur l’écran de connexion par votre propre logo personnalisé sans avoir recours à une extension. Elle convient également aux thèmes en bloc.

Tout d’abord, vous devez téléverser votre logo personnalisé dans la médiathèque. Outil de personnalisation  » Outil de télé versement des médias  » et téléverser votre logo personnalisé.

Une fois l’image téléversée, cliquez sur le lien « Modifier » situé à côté. Cela ouvrira la page Modifier le média, où vous devrez copier l’URL du fichier et la coller à un endroit pratique, par exemple dans un fichier texte vierge sur votre ordinateur.

Ensuite, vous devez ajouter l’extrait de code suivant au fichier functions.php de votre thème ou utiliser l’extension WPCode pour ajouter facilement du code personnalisé sans casser votre site (recommandé) :

function wpb_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(http://path/to/your/custom-logo.png);
        height:100px;
        width:300px;
        background-size: 300px 100px;
        background-repeat: no-repeat;
        padding-bottom: 10px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wpb_login_logo' );

N’oubliez pas de remplacer l’URL de l’image d'arrière-plan à la ligne 4 par l’URL du fichier que vous avez copié précédemment. Vous pouvez également ajuster d’autres propriétés CSS pour qu’elles correspondent à l’image de votre logo personnalisé.

Vous pouvez maintenant visiter la page de connexion de WordPress pour voir votre logo personnalisé.

Cependant, ce code remplace uniquement le logo WordPress. Il ne modifie pas le lien du logo, qui pointe vers le site WordPress.org.

Modifions cela.

Ajoutez simplement le code suivant au fichier functions.php de votre thème ou au WPCode. Vous pouvez le coller juste en dessous du code que vous avez ajouté précédemment :

function wpb_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'wpb_login_logo_url' );
 
function wpb_login_logo_url_title() {
    return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'wpb_login_logo_url_title' );

N’oubliez pas de remplacer « Nom de votre site et informations » par le nom de votre site. Le logo personnalisé de votre écran de connexion pointera désormais vers la page d’accueil de votre site.

Désactiver le sélecteur de langue de la page de connexion de WordPress

La version 5.9 de WordPress a introduit une nouvelle option de connexion déroulante qui permet aux utilisateurs/utilisatrices de sélectionner une nouvelle langue lorsqu’ils/elles se connectent à un site.

S’il y a plus d’une langue active sur le site, cette option apparaîtra.

Cela fonctionne bien pour les sites multilingues et les équipes avec différents utilisateurs/utilisatrices qui pourraient vouloir accéder au Tableau de bord WordPress dans une autre langue.

Mais si vous souhaitez que votre page de connexion reste simple et que vos utilisateurs/utilisatrices n’aient pas besoin de changer de langue fréquemment, retirer le sélecteur de langue peut aider à la désencombrer. Vous pouvez le faire à l’aide d’une extension ou d’un code.

Méthode 1 : Désactiver le sélecteur de langue à l’aide d’une extension

Tout ce que vous avez à faire est d’installer et d’activer l’extension Disable Login Language Switcher. Une fois activé, l’option de changement de langue sera automatiquement retirée. Il n’y a aucun réglage supplémentaire à définir.

Désormais, lorsque vous accéderez à votre écran de connexion, vous verrez l’écran de connexion standard sans l’option de changement de langue.

Méthode 2 : Désactiver le sélecteur de langue à l’aide d’un code

Une autre façon de désactiver le sélecteur de langue est d’ajouter du code à WordPress.

Il suffit d’ajouter l’extrait de code suivant à votre fichier functions.PHP ou dans les extraits de code WPCode. Pour plus de détails, consultez notre module sur l’ajout d’extraits de code personnalisés dans WordPress:

add_filter( 'login_display_language_dropdown', '__return_false' );

Pour plus de détails, consultez notre guide sur la désactivation du sélecteur de langue sur l’écran de connexion de WordPress.

C’est tout. Nous espérons que cet article vous a aidé à apprendre différentes façons de créer une page de connexion WordPress pour votre site. Vous pouvez également consulter notre tutoriel sur l’ajout d’une connexion Google en un clic dans WordPress ou notre guide sur le choix du jeu de couleurs parfait pour votre site.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.