Comment personnaliser l’écran de connexion WordPress?

Tu es si proche! Vous avez un site fantastique créé avec wordpress. Vous avez des lecteurs intéressés. Vous utilisez maintenant la fonction d’abonnement dans WordPress afin que vos visiteurs puissent créer leur propre compte. Que va – t – il se passer ensuite? Ils vont s’inscrire ou se connecter et voir: Vous avez peut – être investi beaucoup de temps et de ressources dans la conception de votre site Web pour vous assurer que tout va bien en obtenant des images de première classe de depositphotos ou pixlr, puis en utilisant un logiciel comme crello, mais même si le reste de votre site semble professionnel, cette page d’atterrissage entièrement branded peut étouffer la haute qualité de votre site.
Ne gâchez pas votre expérience utilisateur avec une page de connexion de base. Dans ce tutoriel, vous apprendrez comment personnaliser tous les aspects de la page de connexion WordPress par défaut. J’ai essayé quelques solutions et j’ai choisi l’option la plus intuitive (et gratuite). Continuez à lire pour savoir comment personnaliser l’écran de connexion WordPress! Personnaliser votre page d’atterrissage vous voudrez peut – être voir à quoi ressemble le produit final. Vous êtes libre de personnaliser votre page de connexion préférée, mais voici un exemple de formulaire de connexion que vous pouvez créer en suivant les étapes de ce tutoriel: Plus important encore, vous pouvez changer la marque WordPress avec votre propre marque et personnaliser les couleurs. Pour le site auquel vous appartenez, les utilisateurs ne savent même pas que vous utilisez WordPress, car vos modules sont entièrement branded. Comme la personnalisation de la page de connexion est une demande très courante pour les utilisateurs de WP, il y a beaucoup de plug – ins merveilleux à choisir. Toutefois, il me semble qu’il y en a un qui est particulièrement important. J’ai trouvé la plupart des plug – ins WordPress logon Screen Custom confus ou trop complexes à utiliser.
Plug – in
À mon avis, le meilleur équilibre entre flexibilité et simplicité est le plug – in personnalisé de personnalisation de page d’atterrissage pour Hardeep aslani. Dans le reste de ce guide, vous donnerez un aperçu du plug – in et apprendrez comment l’utiliser pour créer une page de connexion comme celle que j’ai partagée ci – dessus. Installez et activez le plug – in dans le tableau de bord WordPress, accédez à la page du plug – in et cliquez sur le bouton Ajouter un nouveau en haut. Ensuite, trouvez le personnalisateur de page de connexion personnalisé et cliquez sur le bouton Installer maintenant sur ce plug – in. Vous verrez également d’autres plug – ins disponibles. Bien qu’il soit possible d’essayer, après plusieurs tests, je pense que la personnalisation de la page d’atterrissage personnalisée est la meilleure option.
Une fois le plug – in installé, le bouton est mis à jour pour activer le bouton que vous pouvez appuyer pour compléter le processus d’installation. Où trouver une nouvelle page d’atterrissage personnalisée personnaliser les paramètres personnalisés n’encombrera pas votre tableau de bord avec un nouvel élément de menu de haut niveau. Si vous passez le curseur sur l’élément de menu apparence, vous verrez une nouvelle option de personnalisation d’accès. En cliquant sur ce bouton, vous serez dirigé vers les nouveaux paramètres du Programme personnalisé. Au lieu de créer un nouveau menu d’administration, vous trouverez de nouveaux paramètres et des options personnalisées pour le sujet dans le personnalisateur. Voici une capture d’écran du thème Challenger après l’activation de ce plug – in. Vous pouvez voir comment cela a un impact minimal sur la disponibilité des menus administratifs. Lorsque vous cliquez sur la section login customizer, le formulaire de connexion se charge immédiatement et vous trouverez de nombreuses sections pour la personnalisation. Regardons d’abord la section modèle. Il est disponible en trois styles prédéfinis différents. Lorsque vous sélectionnez un modèle, il ne fait que mettre à jour les paramètres dans d’autres sections. En d’autres termes, vous pouvez choisir le modèle qui ressemble le plus à la conception finale souhaitée
Ou arrondir légèrement l’angle du module avec un bord de 3 pixels.
Ces changements sont assez subtils, mais ils aident encore à étiqueter les modules. Personnellement, je suis satisfait de l’apparence des champs, mais je n’ai jamais été fan de la boîte \
À ce stade, le bouton se distingue parce qu’il ne correspond pas à la couleur du logo et de l’arrière – plan. J’ai changé l’arrière – plan et la couleur de la bordure du bouton. De plus, j’ai changé la couleur de l’ombre de texte du texte de connexion et redimensionné le bouton pour le rendre un peu plus grand. Nous approchons d’une page d’atterrissage de marque complète! La dernière partie d’un lien sous un formulaire d’édition avec des personnalisations simples est la section plus. Les options ici sont principalement des liens affichés avant de personnaliser le formulaire. Même si vous voudrez peut – être perdre le lien mot de passe, le lien vers le site Web me semble toujours superflu, car le logo est déjà lié. J’ai supprimé le lien de retour du site, atténué le lien de mot de passe manquant et agrandi le texte. Maintenant, je suis très satisfait de mon nouveau formulaire de connexion personnalisé. Cependant, je n’aime pas avoir plus d’alignement de texte. Cela rend la page un peu désordonnée. Le personnalisateur de connexion personnalisé n’inclut pas l’option de centrer les boutons et les liens de mot de passe, mais fournit des sections CSS et Javascript personnalisées. J’ajoute à
Certains CSS centrent ainsi les deux: Si vous souhaitez personnaliser le formulaire de connexion de la même façon, utilisez le CSS suivant: # loginform. Soumettre l’alignement du texte: Centre;} Loginform # WP submit {float: none;} Accès # NAV {alignement du texte: Centre;} Le bouton semble bien centré, mais je n’aime toujours pas la façon dont il crée un nouvel alignement sur la page. Pour compléter la conception, j’utilise les paramètres du bouton pour changer la largeur du bouton de 96 pixels à 100%. J’ai donc ajouté plus de remplissage en bas dans la section modules pour créer l’apparence finale: Avec ces dernières mises à jour, il est plus facile de cliquer sur les boutons de votre bureau et de votre appareil mobile. De plus, le formulaire de connexion est maintenant entièrement personnalisé pour correspondre à ma marque et créer une meilleure expérience utilisateur pour mes visiteurs. Maintenant, c’est votre tour d’utiliser le plug – in personnalisé login Customer, et il est très facile d’apporter des changements drastiques ou simples au formulaire de connexion. Je suis content que mon nouveau formulaire de connexion soit sorti et ça n’a pas pris longtemps. La marque WordPress logon Screen offre aux visiteurs un look plus professionnel sur le site. Si le logo WordPress n’est pas visible lors de la connexion, il ressemblera à votre plateforme. Avez – vous de l’expérience dans la personnalisation des droits d’accès? Avez – vous des questions sur ce tutoriel? Postez vos idées et vos commentaires dans la section commentaires ci – dessous.