Comment personnaliser votre page de connexion WordPress : un guide détaillé pour améliorer votre image de marque et votre expérience utilisateur

Par défaut, la page de connexion que les visiteurs voient sur votre site est la même que celle utilisée par les administrateursmême. Bien que cette page soit entièrement fonctionnelle, sa conception est très simple, laissant beaucoup d'espace blanc avec le logo WordPress en plein centre. Cela ne contribue guère à soutenir votre marque ou à offrir une expérience conviviale aux visiteurs.

La création d'une page de connexion personnalisée est une amélioration relativement simple que vous pouvez apporter à votre site web WordPress. Dans cet article, nous allons discuter des avantages des pages de connexion personnalisées de WordPress, passer en revue quelques façons de créer une page de connexion, et explorer quelques bonnes pratiques pour l'expérience de l'utilisateur et la sécurité.

Pourquoi avez-vous besoin d'une page de connexion WordPress personnalisée ?

La personnalisation de votre page de connexion WordPress ne doit pas être un projet compliqué. Il suffit d'apporter quelques modifications simples, telles que le remplacement du logo WordPress par le vôtre et la modification de l'arrière-plan.

La personnalisation de la page de connexion permet à la page d'être plus complète :

• convivialeLa personnalisation de la page rend le processus de connexion plus intuitif et plus convivial.
• expertLes pages personnalisées peuvent améliorer votre image de marque et donner un aspect plus professionnel à votre site web.
• attrait visuelLa page peut être rendue plus esthétique par l'ajout d'éléments de marque et de personnalisation.
• informativitéLes notifications et les informations importantes peuvent être affichées sur la page de connexion.
• sûrLa sécurité de la page de connexion peut être améliorée en ajoutant des mesures de sécurité pour protéger les données de l'utilisateur.

Il est facile et rapide d'apporter ces améliorations. Un peu de temps passé maintenant peut améliorer la page de connexion pour tous les visiteurs qui l'utiliseront à l'avenir.

Comment créer une page de connexion WordPress personnalisée (3 façons)

Voici trois façons courantes de créer une page de connexion WordPress personnalisée :

1. utiliser SeedProd Création d'une page de connexion personnalisée pour WordPress

Le plugin SeedProd est un moyen intuitif de personnaliser votre page de connexion. Il est également possible de créer des Pages 404, pages en mode maintenance, pages "Coming Soon" et autres pages de connexion..

Les modules page 404 et page de connexion nécessitent SeedProd Pro Plan. Pour créer votre page de connexion, il vous suffit de suivre les étapes suivantes :

Etape 1 : Installer et activer SeedProd Pro Tout d'abord, rendez-vous sur la page Plugins de votre tableau de bord et sélectionnez Ajouter un nouveau plugin. Rechercher SeedProd et l'installer. Une fois l'installation terminée, leCliquez sur Activer l'activation.

Ensuite, vous devez passer au plan Premium. Pour ce faire, cliquez sur "Get Pro" dans l'onglet SeedProd, puis surl'achatClé d'activation pour la version premium.

Étape 2 : Créer une page de connexion à l'aide du modèle de page de connexion Après avoir activé SeedProd Pro, survolez l'onglet SeedProd et sélectionnez "page d'atterrissage".

Sélectionnez "Mise en place de la page de connexion"Pour personnaliser votre nouvelle page de connexion, utilisez les modèles prédéfinis. Allez ensuite dans l'éditeur où vous pouvez concevoir votre nouvelle page de connexion.

L'éditeur SeedProd se comporte comme l'éditeur de blocs de WordPress, vous permettant d'ajouter et de modifier facilement des aspects de votre page.

Il s'agit notamment des champs de saisie du nom d'utilisateur et du mot de passe, des cases à cocher "se souvenir de moi", des liens de réinitialisation du mot de passe, des images et des arrière-plans.

Du texte, des images, des tableaux, etc. peuvent être ajoutés à l'aide de l'éditeur de blocs, comme pour un article ordinaire. Il vous suffit de personnaliser cette page à votre convenance et de cliquer dans le coin supérieur droit de l'écran "enregistrer (un fichier, etc.) (informatique)Le bouton " " fera l'affaire.

Étape 3 : Activer la nouvelle page de connexion Après avoir sauvegardé le design, quittez l'écran d'édition et retournez à l'écran de la page de connexion de SeedProd dans le tableau de bord. Basculez le commutateur du module Page de connexion sur Actif pour remplacer la page de connexion par défaut par la page de connexion nouvellement conçue.

Déconnectez-vous et revenez pour le voir en action ! Testez le lien de réinitialisation du mot de passe et d'autres fonctionnalités avant de vous reconnecter.

2. utiliser LoginPress Modifier la page de connexion

Si vous cherchez quelque chose de plus abordable et de plus simple, LoginPress est un plugin gratuit pratique pour personnaliser votre page de connexion. Il ne dispose pas de certaines des fonctionnalités et optimisations de SeedPod Pro, mais ajoute des fonctionnalités à l'éditeur de site complet de WordPress pour personnaliser facilement votre page de connexion. Suivez les étapes ci-dessous :

Étape 1 : Installer et activer le plugin LoginPress Sur la page Plugins du tableau de bord, sélectionnez "Ajouter un nouveau plugin"et rechercher "LoginPress". Installer et activer le plugin.

Étape 2 : Modifier la page de connexion à l'aide du personnalisateur Après avoir installé et activé LoginPress, vous verrez un nouvel onglet sur le côté gauche de votre tableau de bord WordPress. Survolez l'onglet LoginPress et sélectionnez Customizer pour modifier votre page de connexion.

Vous accéderez directement à la page de connexion dans l'éditeur de site complet. Vous verrez des icônes pour les fonctions suivantes :

• Changer de logo
• Formulaires personnalisés (nom d'utilisateur et mot de passe)
• Boutons personnalisés (login)
• Navigation personnalisée (mot de passe oublié ?)
• Modifier le pied de page
• Modifier le modèle
• changer l'arrière-plan

Sélectionnez l'icône de crayon ou de pinceau appropriée pour modifier l'élément. En quelques clics, il est facile de changer le logo, de télécharger votre propre arrière-plan ou de modifier le formulaire et les boutons de connexion.

Il n'est pas possible de modifier cette page aussi librement qu'avec l'éditeur de blocs de SeedProd Pro, mais cela suffit pour personnaliser la plupart des pages de connexion.

Étape 3 : Explorer les fonctionnalités supplémentaires et envisager des mises à niveau Certaines fonctionnalités ne sont disponibles que dans la version Premium de LoginPress, comme le module reCAPTCHA. Pour la plupart des sites WordPress de petite ou moyenne taille, la version gratuite est suffisante pour créer des pages de connexion personnalisées.

Modifications proposées Si vous choisissez de personnaliser la page de connexion de cette manière, la première chose à faire est probablement de changer le logo. Il vous suffit de cliquer à côté du logo par défaut dans la fenêtreIcône du crayon bleuIl suffit de télécharger votre propre logo.

Ensuite, essayez d'autres modèles pour voir s'ils correspondent à votre style. Si ce n'est pas le cas, n'hésitez pas à télécharger votre propre modèle ou à créer un arrière-plan en utilisant les couleurs primaires de votre marque.

Envisagez ensuite de modifier la valeur de l'attributPolices de caractères ou textepour qu'elle soit cohérente avec le reste du site. Vous devez également vous assurer que tous les liens fonctionnent correctement.

3. utiliserCode personnaliséModifier la page de connexion

Si vous ne souhaitez pas utiliser de plugin, vous pouvez également personnaliser la page de connexion à l'aide d'un code. Cela nécessite davantage de connaissances techniques, mais offre une flexibilité maximale.

C'est à vous de décider comment vous allez adapter la page de connexion à l'aide d'un code personnalisé. Examinons un exemple de modification simple que vous pourriez vouloir apporter.

Imaginons que vous souhaitiez remplacer manuellement le logo WordPress de votre écran de connexion par votre propre graphisme. Cette opération peut sembler décourageante pour les débutants, mais elle n'est pas difficile pour ceux qui ont l'habitude d'accéder aux fichiers du site web et de manipuler le code de base. Il suffit de suivre les étapes ci-dessous :

Étape 1 : Sauvegarde de votre site web Lorsqu'un fichier ou un dossier est modifié manuellement sur un site web, il est préférable deCréation d'une sauvegarde.

C'est toujours une bonne idée de faire des sauvegardes régulières de l'ensemble du site, mais vous devriez au moins copier tous les fichiers que vous prévoyez de modifier. Dans ce cas, vous ferez une sauvegarde de functions.php pour apporter des modifications.

Étape 2 : Créer et télécharger votre logo Bien entendu, une image de logo est nécessaire pour remplacer le logo par défaut. Téléchargez l'image que vous souhaitez utiliser dans votre bibliothèque de médias.

Bien que vous puissiez théoriquement définir n'importe quelle taille pour l'image, une taille d'environ 300 pixels de large est parfaite pour la partie supérieure du formulaire de connexion par défaut. Nous utiliserons 300×300 pixels comme exemple d'image de remplacement carrée.

Les images peuvent être redimensionnées en dehors de WordPress ou dans la bibliothèque des médias. Pour ce faire, il suffit de cliquer sur l'image après l'avoir téléchargée et de sélectionner "Modifier l'image" près de la vignette à droite. Vous pouvez sélectionner la taille et cliquer sur "zoom (graphiques)"pour la redimensionner. Enregistrez ensuite l'image et continuez.

L'étape suivante nécessitera l'URL de l'image. Cliquez donc sur le bouton Copier l'URL dans le presse-papiers ou laissez cette fenêtre ouverte.

Étape 3 : Modification functions.php papiers Ensuite, trouvez votre functions.php Fichiers. Accédez au dossier de votre thème via le protocole de transfert de fichiers (FTP). Ce dossier doit porter le même nom que votre thème et se trouver dans le dossier wp-content dossier.

Pour faire basculer le logo de WordPress sur l'écran de connexion, ajoutez ce code à l'un des éléments suivants functions.php dans le fichier. Pour éviter de le placer au milieu d'un autre script, il suffit d'insérer ce fragment de code sous le reste du code à la fin du fichier :

function wpb_login_logo() { ? <style
    
        #login h1 a, .login h1 a {
            background-image : url(L'URL DE VOTRE IMAGE ICI) ;
            hauteur.300px;
            largeur.300px;
            taille de l'arrière-plan. 300px 300px;
            background-repeat : no-repeat ;
            padding-bottom : 10px ; }
        }
    </style
<?php }
add_action('login_enqueue_scripts', 'wpb_login_logo' ) ;

Collez l'URL que vous avez copié à l'étape précédente dans le champ "L'URL DE VOTRE IMAGE ICI"est remplacé. Une fois les modifications apportées, enregistrez le fichier functions.php Documentation.

Étape 4 : Visitez votre page de connexion Quittez et revenez à la page de connexion.

Voyez votre logo remplacer l'ancien. Si la taille ne vous convient pas, vous pouvez la redimensionner en modifiant les valeurs en pixels de la hauteur, de la largeur et de l'arrière-plan dans l'extrait de code.

Si des anomalies sont détectées, les modifications peuvent être rétablies simplement en restaurant la sauvegarde. Il est également possible d'écraser une copie de sauvegarde précédemment créée à l'aide de la fonction functions.php Documentation.

Comment protéger votre page de connexion WordPress

Lors de la mise en œuvre d'une page de connexion personnalisée, il convient de garder à l'esprit certaines choses afin de garantir la sécurité et la santé de votre site web. La page de connexion est une cible privilégiée pour les pirates et les robots, elle doit donc être étroitement protégée. Voici quelques moyens de la protéger :

Authentification à deux facteurs (2FA)

La double authentification (également connue sous le nom de 2FA) réduit considérablement le risque de piratage d'un compte. Avec la double authentification, outre le nom d'utilisateur et le mot de passe, lorsqu'un visiteur tente de se connecter à partir d'un appareil nouveau ou non enregistré, il doitDeuxième identitéValider le formulaire.

Par exemple, si un pirate informatique parvient à obtenir les identifiants de connexion d'un utilisateur particulier d'un site web, il peut simplement se connecter à ce compte et faire des ravages. Parfois, un pirate peut simplement deviner le mot de passe à partir du nom d'utilisateur. Avec la mise en œuvre de 2FA, une deuxième forme d'authentification est nécessaire.

Généralement, ce message est envoyé sous forme de courriel ou de texte au titulaire du compte pour confirmer qu'il essaie de se connecter. Comme il est peu probable que les pirates aient accès à l'adresse électronique ou à l'appareil d'un utilisateur, cela permet de s'assurer de l'authenticité de l'utilisateur.

Il est souvent possible d'accélérer le processus 2FA en permettant aux utilisateurs d'enregistrer leurs appareils, de sorte que les tentatives de connexion à partir de cette source ne doivent pas être vérifiées à chaque fois. Il existe un certain nombre de plugins permettant de mettre en place le 2FA sur votre site. Cela est particulièrement important si votre site traite des informations sensibles ou financières.

CAPTCHA et reCAPTCHA

L'un des moyens de deviner les identifiants de connexion consiste à utiliser un robot pour forcer votre site. En d'autres termes, le programme essaiera automatiquement de deviner des combinaisons de noms d'utilisateur et de mots de passe courants jusqu'à ce qu'il y parvienne. Cela peut sembler une tâche ardue pour un humain, mais les robots peuvent le faire rapidement et automatiquement, en devinant des milliers de mots de passe courants sans intervention humaine.

Le but de l'ajout de CAPTCHA à WordPress est d'empêcher ces robots d'essayer de se connecter. Vous avez peut-être déjà rencontré ces tests. Ils se présentaient sous la forme de mots déformés qu'il fallait déchiffrer et entrer dans la boîte.

Les CAPTCHA plus modernes consistent à sélectionner des images contenant des objets spécifiques, tels que des voitures ou des cheminées. Ces tests sont difficiles à résoudre pour les robots et bloquent donc efficacement les tentatives de piratage par force brute.

reCAPTCHA est une forme avancée de cette technologie qui nécessite peu ou pas d'intervention de la part des utilisateurs humains pour bloquer les robots. loginPress inclut la technologie reCAPTCHA dans sa version Pro, ou des applications CAPTCHA peuvent être trouvées dans des plugins spécifiques ou des outils de sécurité plus complets.

Avis de lutte contre l'hameçonnage

Une stratégie de faible technicité pour voler les identifiants de connexion consiste à imiter une source faisant autorité et à les demander directement. C'est ce qu'on appelle l'hameçonnage.

Par exemple, quelqu'un peut créer une adresse électronique en utilisant votre nom ou celui de votre entreprise, puis envoyer un courriel demandant des identifiants de connexion pour résoudre le problème. Si le courriel et l'adresse sont convaincants, certaines personnes peuvent mordre à l'hameçon et répondre en divulguant les informations relatives à leur compte.

Une façon d'éviter cela est de publier un avis anti-phishing annonçant que vous et votre entreprise ne solliciterez jamais de telles informations. Tout courriel ou message de ce type doit être considéré comme du spam et ignoré. Un simple avis sur une page de connexion peut faire la différence entre une tentative d'hameçonnage réussie et un compte sécurisé.

Résumé :

La personnalisation de votre page de connexion améliore l'expérience de l'utilisateur, donne à votre site web un aspect professionnel et peut être utilisée pour partager des informations importantes.

La page de connexion de WordPress peut être modifiée en utilisant la méthode suivante :

• Créez une toute nouvelle page de connexion à l'aide d'un plugin comme SeedProd.
• Modifiez votre page de connexion à l'aide d'un outil gratuit comme LoginPress.
• Utilisez des codes personnalisés pour effectuer des modifications manuelles, telles que l'échange de logos par défaut.

Pour tirer le meilleur parti de votre écran de connexion, le plugin permet de personnaliser facilement la page afin qu'elle réponde parfaitement à vos besoins.