Quand on souhaite customiser la page de Connexion de son site lorsque l’on utilise un thème wordpress, on se retrouve souvent avec des difficultés pour faire la mise en forme si on veut éviter d’utiliser un énième plugin. D’autant plus lorsque l’on utilise un plugin comme « Password-protected » qui nous propose une page spécifique où un mot de passe doit être entré pour accéder au site. Ces pages semblent être chargées dans un ordre qui contrarie le fichier CSS du thème enfant et une des solutions possibles serait de faire une feuille de style CSS spécifique pour ces pages d’authentification. Ensuite il ne reste plus qu’à dire à wordpress d’insérer cette feuille de style lors du chargement de ces pages directement !
Créer la feuille de style CSS pour modifier la page de connexion wordpress
La création de la feuille de style se fera à l’aide de votre éditeur préféré (Notepad++, Sublime Text, Brackets…) et contiendra le style à appliquer aux pages de type « login ». Cette page est celle sur laquelle vous arrivez lorsque vous voulez vous connecter à votre site wordpress et qui ressemble à ça :
Cette page est affichée non seulement pour vous mais également pour tous ceux qui pourraient avoir à se connecter au tableau de bord de votre site. Rédiger des articles de blogs, ajouter des éléments, participer à un travail collaboratif, accès restreint avec mot de passe… les raisons de montrer cette page à du monde ne manquent pas ! C’est pourquoi il est intéressant de pouvoir la rendre un « chouilla » plus agréable et accueillante !
« Personnaliser sa page de connexion au tableau de bord wordpress pour tous les utilisateurs ! »
Afin de vous aider voici une petite liste (non exhaustive) des quelques éléments qui sont souvent sur cette page de connexion. Pour s’assurer des classes css à utiliser ne pas hésiter à aller voir du côté de l’inspecteur en faisant un clic droit sur l’élément que l’on souhaite changer (en faisant un clic droit sur le bouton « se connecter » par exemple).
body.login {}
body.login div#login {}
body.login div#login h1 {} <- pour modifier le logo ou le titre de la page de connexion
body.login div#login h1 a {}
body.login div#login form#loginform {} <- pour modifier le formulaire « utilisateur » « mot de passe »
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {} <- pour modifier les labels des champs du formulaire
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {} <- pour modifier le bouton « connexion » du formulaire
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}
Placer la feuille de style CSS dans son thème WordPress
Une fois la feuille de style CSS pour la page connexion faite, il ne reste plus qu’à la placer dans son installation wordpress afin de pouvoir la retrouver et éviter de se mélanger les pinceaux par la suite.
Si les choses ont été bien faites, vous devriez avoir un thème enfant accolé à votre thème principal sur votre installation wordpress. Pour cela il suffit d’aller vérifier sur votre tableau de bord wordpress dans :
Apparence -> thèmes
Si votre thème principal est activé alors ça n’est pas le cas et vous devriez vraiment envisager de créer et activer un thème enfant afin de pouvoir faire de plus amples modifications sans avoir à risquer des bêtises ou à perdre ces dernières lors de la mise à jour de votre thème. Mais partons du principe que vous avez un thème enfant (indiqué par « nom-de-votre-thème »-child dans vos thèmes).
Il va donc falloir aller sur votre client FTP préféré (Filezilla, FTP voyager, WINscp, etc.) et aller trouver votre dossier contenant votre thème enfant. Dans mon cas (et très probablement dans le vôtre), il sera ici :
On remarque qu’il y a 2 dossiers : le thème parent et le thème enfant. Le mieux est de regrouper tout ce qui est modifications personnelles dans le dossier du thème enfant. On va donc ajouter un dossier « login-perso » dans le thème enfant où on va mettre notre feuille de style que l’on va appeler : login-style.css
« Créer un thème enfant est important, et permet de stocker la feuille de style CSS spécifique à la page connexion »
Charger la feuille de style CSS au bon moment (sur la page « connexion » donc…)
WordPress possède une mécanique de chargement des différents éléments qui le compose très spécifique. Si vous deviez par exemple utiliser un plugin comme « password-protected », qui empêche l’accès au site sans mot de passe, vous vous retrouveriez dans un cas de figure « wordpressien » : La feuille de style CSS de mon thème enfant est chargée lorsque j’arrive sur mon site, mais si j’ai une page avant d’arriver sur mon site où on me demande un mot de passe alors cette feuille de style ne sera pas encore chargée. D’où l’intérêt de créer une feuille de style CSS spécifique à cette page de connexion, et ensuite demander gentiment à WordPress de la charger au bon moment ! (au moment où la page de connexion s’affiche et non pas uniquement une fois qu’on se retrouve sur le site, tout à fait merci de suivre aussi assidûment ! 🙂 )
Pour faire cela on va devoir aller dans le fichier functions.php que l’on trouve dans le thème enfant. Pour y accéder 2 solutions :
- Passer par le tableau de bord wordpress (plus rapide)
- Apparence -> Éditeur
- clic sur « functions.php »
Accès au fichier functions.php directement depuis le tableau de bord wordpress
- Passer directement par votre client FTP préféré et votre éditeur de code préféré pour modifier le fichier avant de le réimporter dans votre client FTP (plus long)
- Clic droit sur le ficher directement dans le client FTP
- clic sur « Afficher/éditer »
ATTENTION ! bien veiller à ne pas laisser d’espaces vides sous la dernière ligne du fichier functions.php ! Cela peut provoquer des erreurs ! Il faut donc impérativement que le fichier commence par « <?php » et termine par le tout dernier caractère que vous aurez rajouté.
On va maintenant rajout un petit bout de code afin d’expliquer à wordpress :
« youhou ! si tu charges la page de connexion (login page) ou une autre page qui demande des informations de connexion, merci d’utiliser cette feuille de style CSS spécifique pour la rendre un peu plus jolie ! Merci ! »
Ce fameux petit bout de code c’est :
/* fonctions ajouter feuille css perso page login et login password-protected */
function mon_css_login_perso() {
wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/login-perso/login-style.css' );
}
add_action( 'login_enqueue_scripts', 'mon_css_login_perso' );
Quelques explications :
- On a ajouté une fonction qui charge la feuille de style CSS lors du chargement de la page « connexion »
- Cette fonction va chercher le fichier dans le thème enfant (get_stylesheet_directory_uri() ou en français : le dossier dans lequel se trouve la feuille de style CSS du thème enfant)
- Enfin on utilise un « hook » wordpress (traduit par « crochet ») qui permet de raccrocher la fonction au chargement de la page « connexion » : add_action pour ajouter l’action de charger la feuille de style CSS sur la page login (login_enqueue_scripts ou mettre dans la file d’attente de la page « login » la fonction mon_css_login_perso)
« Petit code PHP à mettre dans functions.php afin de dire à wordpress de charger la feuille de style CSS au bon moment ! »
Conclusion
Afin de personnaliser la page de connexion de WordPress sans avoir à rajouter un nouveau plugin qui va apporter de la lourdeur à un système déjà bien malmené, il est recommandé de passer par une feuille de style personnalisée spécifique et séparée, ajoutée grâce à un hook WordPress. Le tout sera réalisé en 3 étapes :
- Créer une feuille de style spécifique
- Charger la feuille de style au bon endroit
- Prévenir WordPress qu’il faut aller chercher cette feuille de style à cet endroit
Bien entendu il s’agit surtout de modifier l’apparence de la page de connexion. SI vous souhaitez modifier les choses niveau fonctionnalités il va falloir plus qu’un simple petit tutoriel…