La première chose à laquelle un site web WordPress est reconnaissable, c’est sa page de connexion. Eh oui, si vous aussi vous êtes comme moi et que vous voulez personnaliser cette page sans toucher en profondeur les codes, alors cet article est fait pour vous. La solution que je vous propose est d’utiliser LoginPress, un plugin conçu pour la customisation de la page de connexion pour les sites WordPress. Suivez l’article et je vous montrerais de A à Z comment customiser la page de connexion de votre site WordPress avec LoginPress.
LoginPress c’est quoi exactement ?
LoginPress est un plugin pour WordPress. Il est développé par WPBrigade, et proposé en version gratuite et en version Prémium à partir de 39$/an. Le plugin vous facilitera la personnalisation de votre page de connexion WordPress.
Rendez votre page de connexion WordPress unique avec LoginPress
Avant toute chose, on doit procéder à l’installation de LoginPress. Rendez-vous à la page d’ajout d’extension de votre site WordPress pour le faire.
Installer LoginPress
Pour l’installation, rien de plus facile : faites une recherche avec le mot-clé ‘’loginpress’’ via la barre de recherche. Cliquez ensuite sur le bouton ‘’Installer maintenant’’ pour lancer l’installation.
N’oubliez pas d’activer LoginPress avant de passer à l’étape suivante.
Configurer LoginPress
Avant de personnaliser la page de connexion, nous allons d’abord configurer LoginPress. Survolez le nouveau menu ‘’LoginPress’’qui est ajouté sur votre barre d’administration WordPress et cliquez sur le sous-menu ‘’Réglages’’ pour accéder aux réglages du plugin.
LoginPress vous demandera la permission de collecter des données, mais vous pouvez ignorer tout simplement si vous ne voulez pas en cliquant sur ‘’passer cette étape’’.
Dans cet onglet ‘’Réglages’’ vous verrez :
–Session Expirée : pour configurer le délai d’expiration de la session (délai en minutes).
–Auto Remember Me : activez cette option si vous voulez que la case ‘’Remember Me’’ de la page de connexion soit cochée par défaut.
–Mot de passe personnalisé : cette option vous permet d’ajouter un champ ‘’mot de passe’’ personnalisé sur le formulaire d’inscription de votre site WordPress.
–Ordre de Connexion : vous permet de choisir entre le nom d’utilisateur, son adresse e-mail ou les deux à la fois pour la connexion.
–URL mot de passe perdu : vous permet de basculer entre l’URL par défaut de WordPress et celui de WooCommerce.
–Réinitialiser les paramètres par défaut : activez cette option si vous voulez réinitialiser les personnalisations que vous avez apportées.
–Supprimer les paramètres lors de la désinstallation : en activant cette option, vous allez supprimer toutes les personnalisations apportées par LoginPress
N’oubliez pas de sauvegarder vos paramètres avec le bouton ‘’Enregistrer les modifications’’ avant de quitter cette page.
Personnalisez l’image de fond de votre page de connexion WordPress avec LoginPress
Pour ajouter une image personnalisée à votre page de connexion, rien de plus facile. Pour le faire, rendez-vous dans le menu ‘’Apparence’’ depuis votre barre d’administration et cliquez sur le sous-menu ‘’LoginPress’’.
Une fois sur la page de personnalisation, deux possibilités s’offrent à vous pour changer l’image de fond. Vous pouvez cliquez sur le menu ‘’Arrière plan’’, soit vous cliquez directement sur l’icône background depuis la prévisualisation de votre page.
Depuis le menu ‘’Arrière-plan’’, vous pouvez choisir une couleur de fond, une image depuis la galerie de fond proposée par LoginPress. Vous avez également la possibilité de choisir une image depuis votre galerie ou d’en importer une nouvelle.
Vous verrez aussi dans cette section les paramètres concernant la disposition et le mode répétition de l’image.
Personnalisez le fond de votre formulaire de connexion
La démarche pour la personnalisation de l’image de fond de votre formulaire de connexion est la même que pour l’arrière-plan.
Vous pouvez le personnaliser directement depuis le menu ‘’Personnaliser le formulaire de connexion’’ ou en survolant le formulaire et en cliquant sur l’icône correspondant comme sur la photo.
Dans cet onglet, vous avez le choix entre la transparence pour rendre le formulaire transparent, une image personnalisée, ou une couleur comme fond. Pour notre cas, nous allons opter pour la transparence et ajouter une ombre. Vous avez également la possibilité de customiser la taille de votre formulaire.
Customisez les champs, textes et libellés de votre formulaire de connexion avec LoginPress
Comme nous le voyons sur l’image en dessus, les textes et les libellés ne se détachent pas complètement du fond. Pour régler ce détail, nous allons personnaliser leurs couleurs. Descendez un petit peu, toujours dans la page de personnalisation de formulaire pour voir les options de personnalisations.
Et voilà le résultat, vous verrez apparaître vos modifications en temps réel avec LoginPress.
Personnalisez le bouton de connexion et le pied de page de votre formulaire de connexion
Cliquez simplement sur l’icône de personnalisation correspondante pour modifier et personnaliser le bouton et le pied de page.
–Customisez votre bouton :
La personnalisation de votre bouton de connexion est très complète avec LoginPress. De sa couleur à sa taille, vous n’avez que votre imagination comme limite.
–Customisez le pied de page :
Vous pouvez personnaliser la couleur des liens, la taille du texte dans cette option. Vous avez également la possibilité de modifier le texte à afficher pour la réinitialisation de mot de passe, ainsi que la note de copyright de votre site WordPress.
Et voilà le résultat après quelques modifications, nous avons une page de connexion avec un formulaire unique à notre image.
CONCLUSION
LoginPress est une extension simple et extrêmement efficace pour WordPress. Vous pouvez même ajouter une vidéo comme arrière-plan avec LoginPress avec de simples clics. Je dirais que ce ne sont pas les possibilités de customisation qui manque avec ce plugin. Seulement, pour profiter de plus de fonctions et personnalisations, je vous invite à jeter un œil sur les plans que propose la version Prémium.
