Comment personnaliser la page de connexion WordPress (sans code) 

Vous gérez un site d'adhésion ou un site client, et les gens se connectent via un écran qui ne ressemble en rien à votre marque. La page de connexion standard de WordPress, avec son petit logo WordPress, donne l'impression d'un détour hors de votre site.

Je personnalise la page de connexion WordPress sur mes propres sites, et je vais vous montrer cinq façons de le faire, d'un plugin sans code à quelques lignes de CSS. Choisissez celle qui correspond au niveau de contrôle que vous souhaitez.

Avantages de la personnalisation de votre page de connexion WordPress ?

La page de connexion par défaut de WordPress affiche le logo WordPress et deux champs de formulaire, et rien d'autre. C'est bien si vous êtes la seule personne à vous connecter au back-end.

Mais une fois que les visiteurs s'inscrivent et se connectent, un écran standard qui ne ressemble en rien à votre site peut sembler suspect. Une page de connexion personnalisée avec votre marque indique aux utilisateurs qu'ils sont au bon endroit.

Exemples de conception de page de connexion WordPress personnalisée

Alors, à quoi ressemble concrètement une page de connexion personnalisée ? Vous pouvez ajouter vos propres images, créer un lien vers votre page d'accueil, ajouter un appel à l'action, ou inclure des icônes sociales.

Voici quelques exemples concrets pour montrer ce qui est possible.

Personnalisation de la page de connexion WordPress par MonsterInsights

MonsterInsights utilise une mise en page à deux colonnes. Le formulaire de connexion se trouve à gauche, et un appel à l'action pour son produit sœur se trouve à droite.

L'image d'arrière-plan donne à la page une sensation distincte et personnalisée que l'écran par défaut ne peut pas égaler.

Page de connexion WordPress personnalisée de TED

TED utilise une autre conception à deux colonnes. Une image et un titre se trouvent à gauche, avec plusieurs options de connexion à droite.

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

Page de connexion personnalisée de Church Motion Graphics

Cette page de connexion attire l'attention avec un arrière-plan coloré qui reflète l'activité de l'entreprise. L'en-tête, le pied de page et la navigation restent cohérents avec le reste du site.

Le formulaire de connexion lui-même reste minimal, avec un arrière-plan clair qui contraste avec l'imagerie vive. Vous pouvez parcourir d'autres exemples de pages de connexion pour vous inspirer.

Quelle méthode devriez-vous utiliser ?

Cinq méthodes, c'est beaucoup, alors voici comment en choisir une adaptée à votre situation avant de commencer. Le bon choix dépend de ce que vous voulez changer et si vous êtes à l'aise avec le code.

• Refonte complète, sans code : Utilisez SeedProd pour reconstruire toute la page de connexion avec un constructeur par glisser-déposer.
• Juste le logo : Utilisez un plugin gratuit de personnalisation de la connexion comme Colorlib pour remplacer le logo et le lien.
• Vous êtes développeur : Ajoutez du CSS à functions.php pour un contrôle total et sans plugins.
• Un formulaire de connexion, pas une page : Utilisez WPForms pour créer un formulaire de connexion personnalisé que vous pouvez intégrer n'importe où.
• Connexion sociale : Laissez les gens se connecter avec Google ou Facebook en utilisant un plugin de connexion sociale dédié.

Comment personnaliser la page de connexion WordPress avec SeedProd

SeedProd est un constructeur de sites web WordPress par glisser-déposer avec un mode Page de connexion intégré. Il vous permet de redessiner l'écran de connexion visuellement, sans code, et il fonctionne avec n'importe quel thème WordPress.

J'utilise le mode Page de connexion de SeedProd sur mon propre site, et ce que j'apprécie le plus, c'est la rapidité. Retravailler l'écran de connexion avec du CSS à la main me prend un après-midi d'essais et d'erreurs, tandis que le flux sans code me permet d'obtenir une page terminée en quelques minutes.

C'est aussi un constructeur de pages de destination WordPress, donc le même éditeur gère les pages "bientôt disponibles", les pages de vente et les pages de connexion personnalisées à partir d'un seul endroit.

Remarque : Il existe une version gratuite de SeedProd sur WordPress.org, mais elle ne couvre que le mode "bientôt disponible" et la maintenance. Le personnalisateur de page de connexion est une fonctionnalité payante disponible dans tous les plans payants, à partir du plan Basic, vous n'avez donc pas besoin du niveau supérieur pour cela.

Suivez les étapes ci-dessous pour styliser votre page de connexion WordPress avec SeedProd.

Étape 1 : Installer et activer SeedProd

Tout d'abord, téléchargez le plugin SeedProd et installez-le sur votre site web WordPress.

Si vous débutez, suivez ce guide étape par étape pour installer un plugin WordPress.

Après avoir activé le plugin, vous verrez la page de bienvenue de SeedProd dans votre tableau de bord. Entrez votre clé de licence, puis cliquez sur le bouton Créer votre première page.

Étape 2 : Modifier votre page de connexion WordPress

Vous verrez les différents modes de page que SeedProd peut activer. Pour ce tutoriel, vous voulez le mode Page de connexion.

Cliquez sur Modifier la page sous l'en-tête Page de connexion pour commencer.

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

Sur l'écran suivant, vous verrez la bibliothèque de modèles de page de connexion de SeedProd. Chaque modèle est modifiable dans le constructeur visuel.

Cliquez sur le filtre Connexion pour afficher tous les modèles de page de connexion. Survolez celui que vous aimez et cliquez sur l'icône de coche. Pour ce guide, je choisirai la Page de connexion 8.

Une fenêtre contextuelle vous demande de nommer la page et de définir son URL. Cliquez sur Enregistrer et commencer à modifier la page pour l'ouvrir dans l'éditeur par glisser-déposer.

Étape 4 : Personnalisez votre page de connexion WordPress

L'éditeur comporte deux parties. Les blocs et les sections se trouvent à gauche, et un aperçu en direct de votre page de connexion se trouve à droite.

Pour ajouter du contenu, faites glisser un bloc de la gauche et déposez-le sur la page. Vous pouvez ajouter un logo en haut de la page en quelques clics.

Cliquez sur n'importe quel bloc pour le modifier. Cliquer sur le formulaire de connexion ouvre les paramètres du bloc de connexion de SeedProd à gauche.

Là, vous pouvez modifier les étiquettes du formulaire, afficher ou masquer les champs nom et mot de passe, et changer le texte du bouton.

Cliquez sur l'onglet Modèles pour choisir parmi plusieurs styles de formulaire. Choisissez-en un et il s'applique instantanément à votre formulaire, sans code requis.

Vous pouvez ajouter des boutons, des colonnes et des images pour parfaire le design. Si vous souhaitez que les gens se connectent plus rapidement, c'est aussi ici que vous pouvez ajouter un bouton de connexion sociale afin que les utilisateurs se connectent avec Google ou Facebook.

SeedProd dispose également de sections prédéfinies, vous n'avez donc pas à construire des zones comme un en-tête ou un pied de page bloc par bloc. Cliquez sur l'onglet Sections pour les parcourir.

Pour définir les polices, les couleurs et l'arrière-plan une seule fois pour toute la page, cliquez sur l'icône d'engrenage dans le coin inférieur droit pour ouvrir les Paramètres globaux.

Sous l'onglet Polices, modifiez vos polices et graisses d'en-tête et de corps à partir des menus déroulants.

Cliquez sur le bouton Thèmes de polices pour parcourir les combinaisons qui s'associent bien, puis ajoutez-les en un clic.

Définissez les couleurs des liens, des en-têtes, du texte, des boutons et des arrière-plans avec le sélecteur de couleurs.

Ou cliquez sur le bouton Palettes de couleurs pour choisir parmi plus de 20 schémas prêts à l'emploi.

La section Arrière-plan gère l'arrière-plan de votre page. Définissez une couleur unie, un dégradé ou une image pleine largeur.

Cliquez sur l'icône de corbeille pour supprimer l'image existante, puis cliquez sur Utiliser votre propre image pour en choisir une nouvelle à partir de votre ordinateur ou de votre médiathèque.

N'oubliez pas de cliquer sur Enregistrer pour stocker vos modifications.

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

Une fois le design en place, configurez quelques options. Si vous avez ajouté un formulaire d'optin pour collecter des adresses e-mail, connectez d'abord votre service de marketing par e-mail.

Cliquez sur l'onglet Connexion en haut, choisissez votre service de messagerie et suivez les étapes pour lier votre compte.

SeedProd s'intègre avec les services de newsletter par e-mail populaires, y compris Constant Contact, ConvertKit, AWeber et Mailchimp.

Vous n'avez pas encore de fournisseur d'e-mail ? La fonction de gestion des abonnés de SeedProd stocke les inscriptions sur votre site. Affichez-les sous SeedProd » Abonnés.

Ensuite, cliquez sur l'onglet Paramètres de la page. À partir de là, vous pouvez ajuster :

• Général : Modifiez le nom et l'URL de la page, et définissez-la comme brouillon ou publiée.
• SEO : Modifiez le titre de la page et la méta-description via un plugin SEO comme All in One SEO.
• Analytique : Suivez les performances avec un plugin comme MonsterInsights.
• Scripts : Ajoutez des scripts de suivi ou de reciblage tels que le pixel Facebook.

Cliquez sur Enregistrer avant de passer à autre chose.

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

Chaque page que vous publiez doit être adaptée aux mobiles, sinon il est plus difficile pour les utilisateurs de téléphone de se connecter. Les modèles de SeedProd sont réactifs, et un outil d'aperçu vous permet de vérifier.

Cliquez sur l'icône d'aperçu mobile en bas de l'écran pour voir votre page comme les utilisateurs de téléphone la verraient.

Vous pouvez continuer à modifier dans l'une ou l'autre vue, et SeedProd enregistre les modifications dans les deux.

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

Une fois que vous êtes satisfait de la page, cliquez sur la flèche vers le bas à côté du bouton vert Enregistrer et sélectionnez Publier.

Une fenêtre contextuelle confirme que la page est en ligne. Cliquez sur Voir la page en direct pour l'afficher.

La dernière étape consiste à activer le mode Page de connexion. Quittez le constructeur, puis sous la rubrique Page de connexion, activez le commutateur.

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 utilise WPForms, le meilleur constructeur de formulaires par glisser-déposer pour WordPress. Ce que vous ne savez peut-être pas, c'est que son module complémentaire de formulaire d'inscription utilisateur peut créer un formulaire de connexion pour votre site.

Avec des millions de sites utilisant WPForms pour créer des formulaires plus intelligents, vous êtes entre de bonnes mains. WPForms fait partie de la famille de produits Awesome Motive, tout comme SeedProd.

Si vous souhaitez un formulaire de connexion plutôt qu'une page entière, suivez ce guide sur la façon de créer un formulaire de connexion personnalisé WordPress avec WPForms. Il couvre également l'ajout d'un lien mot de passe oublié et l'affichage du formulaire avec un shortcode.

Comment personnaliser la page de connexion WordPress manuellement

Pouvez-vous personnaliser la page de connexion WordPress sans plugin ? Oui. Vous pouvez ajouter du code au fichier functions.php de votre thème ou à un plugin spécifique au site, bien que cela demande une certaine aisance avec le code et vous donne moins de contrôle qu'un constructeur visuel.

Si vous débutez, lisez ce guide sur la façon d'ajouter des extraits de code dans WordPress afin de ne pas casser votre site par accident.

L'extrait ci-dessous restyle l'écran de connexion et remplace le logo. Modifiez les valeurs de couleur et le chemin du logo pour qu'ils correspondent à votre marque, puis ajoutez-le à functions.php :

// Custom WordPress login page styles
function clp_login_head() { ?>
    <style>
        /* Replace the default logo */
        .login h1 a {
            background-image: url('https://example.com/wp-content/uploads/your-logo.png');
            background-size: contain;
            width: 320px;
            height: 80px;
        }
        /* Link colors */
        .login #nav a,
        .login #backtoblog a { color: #0073aa !important; }
        /* Submit button */
        .login .button-primary {
            background: #0073aa;
            border-color: #0073aa;
        }
    </style>
<?php }
add_action( 'login_head', 'clp_login_head' );

// Point the logo link to your home page instead of wordpress.org
function clp_login_url() { return home_url(); }
add_filter( 'login_headerurl', 'clp_login_url' );

// Change the logo hover/title text
function clp_login_title() { return get_bloginfo( 'name' ); }
add_filter( 'login_headertext', 'clp_login_title' );

Cela modifie le logo, le lien auquel il pointe et les couleurs du formulaire sur votre page de connexion existante. Si vous préférez éviter complètement le code, la méthode SeedProd ci-dessus fait le même travail dans l'éditeur visuel.

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

Pour afficher le formulaire de connexion WordPress sur n'importe quelle page ou modèle, sans plugin ni widget, ajoutez ceci à votre fichier de modèle de thème :

<?php wp_login_form(); ?>

Cela génère le formulaire de connexion standard partout où vous placez le code. Pour personnaliser les étiquettes, la redirection et les options de champ, passez plutôt des arguments :

<?php
$args = array(
    'echo'           => true,
    'redirect'       => home_url(), // where to send users after login
    'form_id'        => 'loginform',
    'label_username' => __( 'Username' ),
    'label_password' => __( 'Password' ),
    'label_remember' => __( 'Remember Me' ),
    'label_log_in'   => __( 'Log In' ),
    'remember'       => true,
);
wp_login_form( $args );
?>

Vous pouvez modifier le CSS autour de ce formulaire pour qu'il corresponde au reste de votre site.

Comment changer le logo de connexion WordPress ?

Vous n'avez pas toujours besoin d'une page personnalisée complète. Parfois, changer le logo et le lien derrière est suffisant, et un plugin gratuit s'en charge sans code.

Installez et activez le plugin Colorlib Login Customizer. Ensuite, allez dans Apparence » Personnaliser et cliquez sur le nouvel élément Colorlib Login Customizer.

Le personnalisateur charge votre écran de connexion avec les paramètres à gauche et un aperçu en direct à droite. Cliquez sur l'onglet Options du logo.

À partir de là, vous pouvez masquer le logo WordPress, télécharger le vôtre et modifier son URL et son texte. Vous pouvez également ajuster la taille, la largeur et la hauteur du logo.

Vous pouvez aller plus loin avec les colonnes, les images d'arrière-plan et les couleurs personnalisées. Publiez les modifications une fois que vous êtes satisfait du nouveau logo.

Comment sécuriser votre page de connexion personnalisée ?

Une page de connexion personnalisée est également une cible plus visible, il vaut donc la peine de la renforcer une fois qu'elle a l'air bien. Quelques étapes réduisent les tentatives de force brute et les bots.

• Modifier l'URL de connexion : Déplacez la connexion de l'évident wp-login.php. Voici comment modifier l'URL de connexion de votre administrateur WordPress.
• Limiter les tentatives de connexion : Limitez le nombre de fois qu'une personne peut essayer un mot de passe avant d'être bloquée, ce qui bloque la plupart des attaques par force brute.
• Utiliser des messages d'erreur génériques : Le message par défaut "Nom d'utilisateur invalide" indique à un attaquant quelle moitié il a correctement devinée. Un message plus vague en révèle moins.
• Ajouter l'authentification à deux facteurs : Un second code en plus du mot de passe empêche qu'un mot de passe volé ne suffise à lui seul.

Sur mes propres sites, je commence toujours par changer l'URL de connexion, car cela bloque la plupart des attaques automatisées avant même qu'elles n'atteignent le formulaire.

Comment tester votre page de connexion personnalisée ?

Avant de considérer que c'est terminé, effectuez un test rapide pour qu'une faute de frappe ne bloque pas vos utilisateurs. Je me déconnecte toujours et j'essaie la page comme un visiteur réel.

• Chargement de la page : Vérifiez que la page se charge correctement, sans éléments cassés.
• Logo et design : Confirmez que le nouveau logo et le style apparaissent comme prévu.
• Test de connexion : Connectez-vous avec votre nom d'utilisateur et votre mot de passe et assurez-vous que cela fonctionne.
• Messages d'erreur : Entrez des identifiants incorrects et vérifiez que l'erreur s'affiche correctement.
• Mot de passe oublié : Déclenchez une réinitialisation et confirmez que l'e-mail arrive avec un lien fonctionnel.
• URL personnalisée : Si vous avez défini une URL personnalisée, confirmez qu'elle pointe vers la nouvelle page de connexion. Vous ne savez pas où se trouve la vôtre ? Voici comment trouver votre URL de connexion WordPress.
• Adaptabilité : Ouvrez la page sur mobile, tablette et ordinateur pour vérifier qu'elle s'affiche correctement partout.

Personnaliser la page de connexion WordPress FAQ

Peut-on personnaliser la page de connexion WordPress sans plugin ?

Oui. Vous pouvez retoucher l'écran de connexion existant en ajoutant du CSS et quelques hooks au fichier functions.php de votre thème ou à un plugin spécifique au site. Cela modifie le logo, le lien qui se trouve derrière et les couleurs du formulaire sans installer de constructeur de page.

Le compromis est que cela demande une certaine aisance avec le code et vous offre moins de contrôle sur le design qu'un outil visuel. Pour une refonte complète sans code, un constructeur comme SeedProd est plus simple.

Comment changer le logo de connexion WordPress sans code ?

Installez un plugin gratuit de personnalisation de connexion comme Colorlib Login Customizer, puis allez dans Apparence » Personnaliser et ouvrez ses paramètres. Dans l'onglet Options du logo, vous pouvez masquer le logo WordPress, en télécharger un personnalisé, et définir le lien et la taille.

Tout se met à jour dans un aperçu en direct, vous voyez donc le nouveau logo avant de publier. Le mode Page de connexion de SeedProd vous permet également de déposer un bloc de logo si vous souhaitez refondre toute la page.

Est-il sûr de personnaliser la page de connexion WordPress ?

Oui, personnaliser la page de connexion est sûr lorsque vous utilisez un plugin réputé ou du code soigné. Cela modifie l'apparence de la page, pas la façon dont WordPress authentifie les utilisateurs, donc votre sécurité n'est pas affaiblie par le design lui-même.

Une page personnalisée est un bon moment pour ajouter une protection réelle. Changer l'URL de connexion, limiter les tentatives de connexion et activer l'authentification à deux facteurs réduisent tous le risque d'attaques par force brute.

Comment ajouter la connexion sociale à la page de connexion WordPress ?

La connexion sociale permet aux gens de se connecter avec un compte Google ou Facebook existant au lieu d'un mot de passe WordPress séparé. Vous l'ajoutez avec un plugin de connexion sociale dédié qui se connecte à ces services.

Cela réduit la friction lors de l'inscription car les utilisateurs évitent de créer et de mémoriser un autre mot de passe. Une fois le plugin configuré, vous pouvez placer les boutons de connexion sociale sur votre page de connexion personnalisée à côté du formulaire standard.

Commencez à personnaliser votre page de connexion WordPress

Cet écran de connexion par défaut n'a plus à accueillir vos membres. Avec SeedProd, vous pouvez changer les couleurs, les polices, le logo et la mise en page sans écrire une seule ligne de code, et avoir une page de connexion personnalisée en quelques minutes.

Commencez avec SeedProd et personnalisez votre page de connexion.

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.