Formation « Développer un thème WordPress sur-mesure (Classique) »

Personnaliser la page de connexion de WordPress et son logo

Lecture : 2 minutes • 7

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 :

L'interface de connexion de WordPress, comme elle est présentée nativement.
L’écran de connexion par défaut de WordPress

à ça, par exemple :

L'interface de connexion de WordPress, personnalisée grâce à un logo et du CSS
Avec un peu de CSS et un logo sur mesure

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 :

PHP
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.

Attention

Au niveau du nom du style, ‘login’ est déjà utilisé par le système, c’est pour ça que j’ai appelé le premier paramètre ‘custom-login’.

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.

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.

CSS
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…

Information

Par contre, vous ne pouvez pas modifier le HTML de cette page. Le mieux reste donc de se concentrer sur le CSS.

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).

  1. Cliquez sur le bouton de sélection ;
  2. Survolez ensuite l’élément que vous souhaitez personnaliser directement sur la page ;
  3. Copiez enfin le sélecteur utilisé.
L'inspecteur du navigateur permet de voir les sélecteurs CSS utilisés nativement par WordPress
Aidez-vous de l’inspecteur pour connaitre les sélecteurs à surcharger

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.

7

Questions, réponses et commentaires

  1. 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…)

  2. 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.

    1. 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

  3. 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 ?!

    1. 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.

  4. Emilie

    Le 27 avril 2024

    Super! Et une fois le logo changé, comment changer le lien du logo qui pointe vers WP?

    1. Maxime BJ

      Le 2 mai 2024

      Tu peux changer le logo en CSS, mais comme tu n’as pas accès au HTML, tu ne pourras pas changer le lien. Mais il existe un hook pour ça visiblement : Voici un tutoriel : https://www.isitwp.com/change-login-logo-url/.

Laisser un commentaire