Créer un formulaire de connexion WordPress personnalisé avec une interface utilisateur plate

Dernière mise à jour - 8 juillet 2021

WordPress existe depuis un temps considérable. Ce qui a commencé comme un portail pour les blogueurs est maintenant devenu un système de gestion de contenu responsable de l'exploitation de près de la moitié du nombre total de sites Web dans le monde. Son interface simple mais intuitive et ses conceptions personnalisables en ont fait un choix numéro un pour les développeurs et les concepteurs Web du monde entier qui cherchent à créer leurs sites Web à partir de zéro.

Quiconque utilise WordPress a le souci du détail et de l'originalité pour améliorer l'expérience utilisateur et augmenter son taux de clics. La plupart des développeurs se concentrent uniquement sur les thèmes, mais pour les sites d'adhésion et les autres plates-formes, le point de départ est une page de connexion. Imaginez ceci, si vous êtes un membre nouvellement inscrit sur un site Web et que vous vous connectez à un écran similaire aux membres non inscrits, l'impact est légèrement atténué et vous laisse plutôt insatisfait. Cependant, avoir une page de connexion WordPress personnalisée pour répondre aux exigences et à l'esthétique de votre entreprise laisse une meilleure impression sur les visiteurs et pique leur intérêt.

Pour vous aider, nous avons résumé quelques directives simples pour inclure vos styles pour une page de connexion WordPress personnalisée qui s'intègre visuellement au schéma de conception de votre site Web.

Construire une page de connexion WordPress personnalisée sans plugin

On peut apporter plusieurs modifications à la page de connexion WordPress en mettant à jour le code source dans le fichier function.php du thème choisi. Cependant, une fois que vous aurez mis à jour WordPress, ces modifications seront perdues. En effet, votre feuille de style de thème pour la page de connexion ne fait pas partie de la configuration du thème WordPress, ce qui vous oblige à créer une autre feuille de style pour la page de connexion personnalisée.

Commencez par créer un dossier appelé "Login" dans votre dossier de thème et ajoutez un fichier .txt avec le nom custom-login-style.css . À partir de là, vous pouvez procéder à quelques modifications de base pour personnaliser et ajouter un caractère unique à la page de connexion.

Changer l'arrière-plan

Pour mettre à jour la couleur d'arrière-plan de la page ou d'un bouton spécifique, vous sélectionnerez la couleur d'arrière-plan : #222222 et remplacerez le code hexa par la couleur de votre choix. Aidez-vous d'une palette de couleurs pour sélectionner une couleur qui complète l'esthétique de votre entreprise et qui est visuellement attrayante.

De plus, si vous souhaitez faire varier l'image de fond de votre page de connexion, sélectionnez la ligne de code background-image: url(logo_login.png') et remplacez logo_login.png , qui est le nom du fichier par l'URL de votre fichier image mis à jour .

Les entreprises qui souhaitent que leurs clients se souviennent de leur marque peuvent remplacer le logo WordPress par leur logo personnalisé. Après avoir enregistré le fichier image du logo personnalisé dans votre dossier de connexion, remplacez le nom du fichier par votre logo personnalisé dans le code background-image: url('logo_login') .

Personnalisation du formulaire de connexion en ajustant le rembourrage et la marge

Les développeurs peuvent ajuster le formulaire de connexion pour rendre leur page attrayante et adaptée à l'apparence de leur site. Du rembourrage des boutons à la couleur et à la taille de la police des étiquettes, etc. Vous pouvez ajouter plus d'espace à l'intérieur du bouton afin que le texte n'apparaisse pas comprimé en augmentant le rembourrage ; augmentez simplement les nombres dans le remplissage de code : 12px 12px 12px 12px. Si vous souhaitez créer plus d'espace à l'extérieur du bouton afin que les éléments environnants ne soient pas serrés, vous pouvez le faire en augmentant l'espace de marge dans la marge de code : 12px 12px 12px 12px. Même quelque chose d'aussi simple que l'ajout de quelques espaces blancs peut collectivement avoir un impact sur l'aspect final de votre page de connexion et la rendre plus organisée.

Modification de la taille et de la couleur de la police

Vous pouvez modifier la taille de la police du texte des paragraphes, des liens ou des champs de formulaire à l'aide du code font-size: 15px en ajustant le nombre à la taille de votre choix. La même chose peut être faite pour la couleur de la police en mettant à jour la couleur dans le code couleur : #222222 et en remplaçant la couleur.

Modification du message d'erreur de connexion

Avec l'augmentation des cybercrimes et des escroqueries sur Internet, les développeurs Web et les propriétaires d'entreprise ne peuvent prendre aucun risque sur leurs sites Web et perdre des données confidentielles. Lorsqu'un utilisateur entre à la hâte les mauvais identifiants de connexion, un message d'erreur par défaut est généré automatiquement. Bien que ce soit pour signaler cette erreur aux utilisateurs, cela peut être une lacune pour les pirates d'essayer de déchiffrer les données de connexion. Ainsi, la meilleure façon de garder les pirates à distance est de modifier le message d'erreur dans le fichier function.php .

Pour conclure, ceux qui possèdent un savoir-faire étendu en CSS peuvent avoir un contrôle ultime sur le style et la personnalisation de leur formulaire de connexion WordPress. Mais si votre manque de compétences en codage limite votre capacité à créer une page de connexion personnalisée, ne vous inquiétez pas ! Il existe une variété d'options de plugins disponibles à votre disposition dans le référentiel WordPress pour rationaliser le processus de développement Web WordPress et nous avons répertorié les plus populaires pour vous.

Plugin de personnalisation de connexion

Login Customizer est l'un des plugins les plus conviviaux et il vous permet d'apporter des modifications directement à partir de votre WordPress Customizer. Après un processus d'installation simple, vous pouvez facilement y accéder depuis votre tableau de bord WordPress dans l' onglet Apparence . Cliquez sur Démarrer la personnalisation et il vous redirigera vers l'écran de personnalisation où vous reconcevez toutes les zones selon vos goûts.

Personnalisateur de connexion Colorlib

Colorlib Login Customizer est un outil ingénieux et flexible qui contient toutes les fonctionnalités d'un plugin premium mais les offre gratuitement. Sa large gamme de fonctionnalités uniques en fait le choix ultime pour les développeurs Web qui cherchent à créer une solution personnalisée pour leurs utilisateurs. Cela aussi permet la personnalisation via WordPress Customizer afin que vous puissiez facilement naviguer et remodeler votre page de connexion.

En résumé

En fin de compte, il existe plusieurs approches pour personnaliser une page de connexion et les développeurs de tous les niveaux d'expérience sont invités à les essayer. Ce qui compte, c'est que la page de connexion WordPress personnalisée corresponde et complète l'esthétique du site réel pour améliorer l'expérience utilisateur. Personnaliser la page de connexion de votre site est un moyen simple mais efficace de ravir les clients et de construire une identité de marque. Commencer simplement et s'appuyer sur les bases peut transformer un simple écran en quelque chose de spectaculaire et offrir aux clients une expérience en ligne personnalisée qu'ils n'ont jamais vue auparavant.