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


Construire un formulaire de connexion WordPress personnalisé avec une interface utilisateur plate 1

WordPress existe depuis un temps considérable. Ce qui a commencé comme un portail pour les blogueurs est devenu un système de gestion de contenu chargé d’exploiter près de la moitié des sites Web mondiaux. Son interface simple mais intuitive et ses conceptions personnalisables en font 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 de l'utilisateur et augmenter son taux de clics. La plupart des développeurs se concentrent principalement sur des thèmes uniquement, mais pour les sites d’appartenance 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 à celui des membres non inscrits, l'impact est légèrement atténué et vous laisse plutôt insatisfait. Cependant, le fait d’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 suscite leur intérêt.

Pour vous aider, nous avons récapitulé quelques instructions simples pour inclure vos styles dans une page de connexion WordPress personnalisée qui s'intègre visuellement à votre schéma de conception de 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, la feuille de style de votre 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.

Formulaire de connexion WordPress personnalisé

Commencez par créer un dossier appelé «Login» dans votre dossier de thème et ajoutez un fichier .txt portant le nom suivant: 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 le fond

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

De plus, si vous souhaitez modifier l’image d’arrière-plan de votre page de connexion, sélectionnez la ligne de code. background-image: url (logo_login.png ’) et remplacer logo_login.png, qui est le nom du fichier avec votre URL de fichier image mise à jour.

Les entreprises qui souhaitent que leurs clients se souviennent de leur marque peuvent modifier le logo WordPress en 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 répertoire. background-image: url ('logo_login') code.

Personnaliser le formulaire de connexion en ajustant le remplissage et la marge

Les développeurs peuvent adapter 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 police des étiquettes, etc. Vous pouvez ajouter plus d’espace à l’intérieur du bouton afin que le texte ne semble pas trop serré en augmentant le remplissage; il suffit d'augmenter les nombres dans le code rembourrage: 12px 12px 12px 12px. Si vous souhaitez créer plus d’espace en dehors du bouton de manière à ce que les éléments environnants ne soient pas surchargés, vous pouvez le faire en augmentant l’espace de la marge dans le code. marge: 12px 12px 12px 12px. Même quelque chose d'aussi simple que d'ajouter quelques espaces blancs peut, collectivement, avoir un impact sur l'aspect final de votre page de connexion et lui donner un aspect plus élaboré.

Formulaire de connexion WordPress personnalisé

Changer la taille et la couleur de la police

Vous pouvez modifier la taille de la police du texte de paragraphe, des liens ou des champs de formulaire à l'aide du code taille de la police: 15px en ajustant le nombre à la taille de votre choix. La même chose peut être faite pour la couleur de 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 la montée de la cybercriminalité 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 mauvaises informations de connexion, un message d'erreur par défaut est généré automatiquement. Bien que cela signale aux utilisateurs de cette erreur, les pirates informatiques peuvent avoir du mal à essayer de déchiffrer les données de connexion. Ainsi, le meilleur moyen de garder les pirates informatiques à distance est de modifier le message d'erreur function.php fichier.

Formulaire de connexion WordPress personnalisé

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

Login Customizer Plugin

Login Customizer est l’un des plugins les plus conviviaux et vous permet d’apporter des modifications directement à partir de votre WordPress Customizer. Après une installation simple, vous pouvez facilement y accéder depuis votre Tableau de bord WordPress dans le Apparence languette. Cliquer sur Commencer à personnaliser et il vous redirigera vers l'écran du personnalisateur où vous modifierez toutes les zones selon vos préférences.

Colorlib Login Customizer

Colorlib Login Customizer est un outil ingénieux et flexible qui offre toutes les fonctionnalités d’un plug-in premium, mais les offre gratuitement. Son large éventail de fonctionnalités uniques en fait le choix ultime pour les développeurs Web cherchant à créer une solution personnalisée pour leurs utilisateurs. Cela aussi, permet la personnalisation via WordPress Customizer afin que vous puissiez facilement naviguer et faire remodeler votre page de connexion.

En résumé

En fin de compte, il existe plus d'une approche pour personnaliser une page de connexion et les développeurs de tous 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 actuel afin d'améliorer l'expérience utilisateur. Personnaliser la page de connexion de votre site est un moyen simple mais efficace d'enchanter les clients et de créer une identité de marque. Commencer simple et utiliser les bases peut transformer un simple écran en quelque chose de spectaculaire et offrir aux clients une expérience en ligne personnalisée, jamais vue auparavant.

Partagez cet article

Newsletter

Inscrivez-vous à notre newsletter pour profiter de toutes nos astuces !

Laissez une réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *