Personnaliser la page de login de wordpress sans plugin

Il peut vous arriver d’avoir besoin de modifier la page de login parceque vous faites un thème pour un client ou pour le fun !
Il est possible d’utiliser un plugin mais cela risque de ne pas être en harmonie avec votre design.
Mais les développeurs de wordpress ont pensé à tout : en modifiant le fichier functions.php et en ajoutant un css spécifique le tour sera joué.

Mise à jour de notre fichier functions.php

Tout d’abord nous allons modifier les comportements de base des liens de la page de login. Pour cela nous allons utiliser différents hook de filtre.

Les codes qui suivent devront être dans le fichier functions.php (à la racine de votre dossier de template).

NB : A noter que si vous souhaitez organiser un peu votre fichier functions.php, il vous est possible de créer un dossier functions et d’y créer un fichier nommé tweaks.php par exemple. Ensuite dans votre fichier functions.php appellez ce fichier de cette manière :

Faites de même pour vos autres fonctions, par exemple en ce qui me concerne,une partie de mon fichier functions.php ressemblerait à ca :

Bon, je digresse, revenons à nos moutons…

Modification du lien (l’attribut href) du logo

Dans notre fichier functions.php ajouter ce filtre qui permet de changer l’url du logo en le faisant pointer vers la page d’accueil du site

codex

Modification de l’attribut title du logo

Si vous laissez votre souris sur le logo, par défaut vous aurez le message « Propulsé par WordPress », ce qui ne nous convient pas. Grâce au filtre login_headertitle, vous pourrez afficher maintenant le message que vous souhaitez. Dans notre cas, nous allons afficher la description du site.

codex

Ajout de contenu

Voici 2 manières d’ajouter du contenu avec les 2 types de hooks : actions et filtres.

avec le filtre login_message, nous afficherons un message au dessus du formulaire de login. Ce filtre peut retourner du html.

Bienvenue sur le site. Veuillez vous connecter pour continuer.

codex

ou avec l’action login_footer, nous afficherons un message en dessous du formulaire de login (dans le footer de la page de login en fait). Cet action hook peut retourner du html.

En cas de problème de connexion, veuillez nous contacter

codex

Modification du design

Nous avons pu modifier les informations affichées. Maintenant nous allons « customisé » tout cela.

ajoutons notre fichier css

Si vous essayez de modifier le style de la page de login via le fichier styles.css, vous remarquerez que cela ne fonctionne pas. C’est normal, wordpress ne charge pas le css du thème pour la page de login.
La solution : surcharger les fichiers css de l’admin (wp-admin.min.css, buttons.min.css etc…) grâce au notre :
Créez un dossier css, dans votre dossier de template et créez y un fichier login-styles.css.

Puis toujours dans notre fichier functions.php

Modification du fichier css

Maintenant que le fichier est chargé , il ne nous reste plus qu’à le « remplir ».
Les images que nous ajouterons devront être mis dans un dossier image de notre template. Notre dossier ici s’appele img.

Et voila, après tout cela notre page de login est maintenant différentes de la page de login de base.

+++

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *