Share
L’écran de connexion WordPress est bien conçu - il est simple et facile d’interaction et fonctionne bien sur toutes les tailles d’écran. Mais que se passe-t-il si vous construisez un site pour un client qui souhaite afficher son propre logo aux utilisateurs qui se connectent? Ou si vous avez une installation MultiSite et voulez que vos utilisateurs voient votre marque quand ils se connectent? Heureusement, vous pouvez personnaliser l'apparence de l'écran de connexion assez facilement.
Pour ce tutoriel, j'ai créé un plugin pour le faire. L'avantage d'utiliser un plugin est que vous pouvez le déposer sur tous les sites WordPress que vous développez et leur attribuer instantanément une image de marque..
Les étapes que je vais montrer dans ce tutoriel sont les suivantes:
Pour compléter ce tutoriel, vous aurez besoin de:
En haut de mon plugin, j'ajoute les lignes suivantes:
/ * Nom du plug-in: WPTutsPlus Personnalisation de la partie administrateur 1 - URI du plug-in de l'écran de connexion: http://rachelmccollin.co.uk Description: Ce plug-in prend en charge le didacticiel de wptutsplus. Il personnalise l'écran de connexion WordPress. Version: 1.0 Auteur: Rachel McCollin URI de l'auteur: http://rachelmccollin.com Licence: GPLv2 * /
Ajoutez facilement votre logo ou celui de votre client à la page de connexion et donnez instantanément à votre installation WordPress un aspect plus professionnel..
Accentsconagua
login_enqueue_scripts crochet d'action:// ajoute un nouveau logo à la fonction de page de connexion wptutsplus_login_logo () ?>
Ceci ajoutera votre logo à l'écran de connexion, comme indiqué sur la capture d'écran..
En plus d'ajouter un logo, vous pouvez également le redimensionner et l'ajuster pour d'autres éléments de l'écran..
Le logo ci-dessus est légèrement écrasé afin de tenir dans l'espace par défaut qui lui est attribué. Je vais ajuster le dimensionnement.
Modifiez le code dans votre plugin pour qu'il se lise comme suit:
// ajoute un nouveau logo à la fonction de page de connexion wptutsplus_login_logo () ?>
La hauteur que vous utilisez dépendra du format de votre logo. En utilisant 300px et auto pour le taille de fond Cette propriété garantit que votre logo est aussi large que la zone de connexion et que ses proportions sont conservées. la taille valeur fournira assez d'espace pour que votre logo s'intègre.
Maintenant, mon logo ressemble à ceci:
Beaucoup mieux! Mais le dimensionnement du logo n'est pas la seule chose que je puisse faire en matière de style. Que diriez-vous de changer certaines couleurs?
Tout le texte affiché sur la page de connexion se présente sous la forme de liens; vous devrez donc styliser ces liens. Modifiez votre code à nouveau pour qu'il se lise comme suit:
// ajoute un nouveau logo à la fonction de page de connexion wptutsplus_login_logo () ?>
Cela me donne des liens qui correspondent aux couleurs de mon logo. La couleur du lien est cyan et la couleur de survol est magenta.
Remarque: étant donné que la couleur principale de mon logo est similaire au bleu, cela fonctionne bien pour les liens. Vous pouvez ne pas vouloir changer la couleur de vos liens si votre logo est d'une couleur très différente, pour éviter les problèmes d'utilisation.
Le dernier élément à l'écran est le bouton 'Connexion', qui est toujours bleu. Changeons cela. Modifiez votre code pour qu'il se lise comme suit:
// ajoute un nouveau logo à la fonction de page de connexion wptutsplus_login_logo () ?>
J'ai donc maintenant un écran de connexion entièrement personnalisé, ce qui signifie que lorsque mes clients ou utilisateurs se connectent, ils voient quelque chose qui correspond à ma marque et qui donne au site une apparence plus professionnelle..
Personnaliser l'écran de connexion WordPress est simple et peut faire une grande différence pour l'impression que votre site donne aux utilisateurs et aux clients qui se connectent. En modifiant le code ci-dessus pour répondre à vos besoins et refléter votre marque, vous pouvez créer un écran de connexion très professionnel en très peu temps.
