Il est possible de personnaliser l’écran de connexion de WordPress afin de l’adapter aux couleurs de vos thèmes et de vos clients. Une petite touche esthétique rapide à mettre en place mais plutôt sympathique.
On va profiter des prochains cours pour personnaliser l’interface d’administration de notre site, dans le but de la simplifier, et l’adapter à nos besoins.
Et on va commencer par personnaliser l’écran de connexion du site. À l’aide d’un hook et un peu de CSS, on passera de ça :
à ça, par exemple :
Le hook
Pour cela nous avons le hook login_enqueue_scripts à notre disposition, que l’on va utiliser comme d’habitude, dans notre functions.php :
On pourrait écrire notre CSS directement dans ce hook via un echo, mais je ne suis pas très fan de cette technique. Je préfère créer un fichier CSS distinct et l’appeler via wp_enqueue_style, qu’on a déjà utilisé pour charger les scripts et styles de notre thème.
En dépendance, j’ai justement indiqué login, afin que ma feuille de styles vienne se charger après celle de WordPress. De cette manière, il me sera plus facile de surcharger les styles de bases, sans avoir recours à des subterfuges CSS comme !important.
Les styles et le logo
Ensuite, créez votre fichier CSS et placez-le par exemple dans le dossier /css/ à partir de la racine du thème . J’ai appelé le mien custom-login.css.
Dans cet exemple, j’ai personnalisé le fond, le logo, le bouton de connexion et les liens en dessous.
Pour le logo, comme mon fichier CSS se trouve dans /css/, j’utilise ../ pour revenir un dossier en arrière (à la racine du thème) avant de repartir dans le dossier /img/.
Vous pourriez aller encore plus loin et ajouter une police d’écriture, modifier l’apparence des champs, la taille des textes…
Surcharger les styles avec les bons sélecteurs
Pour surcharger les styles sans se prendre la tête, il faut réutiliser les mêmes sélecteurs CSS que ceux utilisés par WordPress. Afin de les trouver, ouvrez l’inspecteur (clic droit, Inspecter).
- Cliquez sur le bouton de sélection ;
- Survolez ensuite l’élément que vous souhaitez personnaliser directement sur la page ;
- Copiez enfin le sélecteur utilisé.
Reportez-le tel quel dans votre propre feuille de style. Comme ça, vous n’aurez pas de souci de conflit CSS.
Dans cet exemple, n’écrivez donc pas juste .input, mais le sélecteur complet, à savoir :.login form .input.
Et voilà ! Vous savez maintenant personnaliser dans les moindres détails la page de connexion à WordPress, afin de tailler une expérience sur mesure à vos clients et utilisateurs.
jf
Le 22 mai 2023
Merci, pour ce tuto clair et bien fait, j’ai changé mon logo et la couleur de fond d’écran en un clin d’oeil (sauf le cache de WordPress qui m’a fait des misère…)
franck drebin
Le 18 janvier 2024
J’adhère à l’idée, mais pour ma part, ça ne fonctionne pas du tout et je ne comprends pas pourquoi. C’est bien dommage.
Maxime BJ
Le 19 janvier 2024
Quelques vérifications à faire :
– Vérifier que le hook est bien dans le functions.php du thème actuellement actif sur le site
– Pour contrôler que WordPress rentre bien dans le hook, tu peux ajouter un var_dump(‘coucou’); die; au début de la fonction : si ce texte s’affiche, c’est que c’est bon
– Vérifier le nom du fichier CSS chargé et son chemin, il y a peut-être une erreur
– Vérifier qu’une extension ne créé pas de conflit avec l’écran de chargement. Les désactiver dans un premier temps
BP
Le 20 avril 2024
Dommage le fond s’affiche bien mais pas le logo. Les explications ne sont pas très fluides, je ne sais pas ou mettre le doc CSS, dans le fichier de mon thème ?!
Maxime BJ
Le 22 avril 2024
Tu peux mettre le fichier CSS où tu veux, il suffit d’indiquer son chemin dans la déclaration. Dans le cours, tu peux voir que j’ai mis le fichier dans /css/.
Si tu appelles une image dans ton fichier css, et qu’elle se trouve dans un dossier /img/ au même niveau que CSS, il faut que tu indiques comme URL ../img/ : les deux points indiquent au CSS de revenir dans le dossier précédent.