Personnaliser facilement la page de connexion de WordPress

Pour de nombreuses raisons, notamment pour des questions de branding particulièrement si vous êtes un créateur de site Internet ou si vous faites un backoffice personnalisé, vous pouvez avoir envie de personnaliser la page de connexion de WordPress pour l’adapter au thème de votre site. Découvrons ensemble comment le faire facilement grâce à l’extension Custom Login, une petite extension gratuite de WordPress.

Installation de l’extension Custom Login sur votre site WordPress

Comme pour chaque extension, depuis le tableau de bord de vôtre site WordPress, vous rendre dans « Extensions » puis « Ajouter ». Rechercher « Custom Login » dans le champ de recherche, l’installer et l’activer.

Installation de l’extension Custom Login

Vous pouvez également télécharger le plugin Custom Login pour l’uploader via le FTP.

Découverte de l’extension Custom Login pour votre connexion WordPress

Pour commencer, vous rendre dans « Réglages » -> « Custom Login ».

L’interface de cet extension de divise en 3 catégories :

• Design Settings : C’est ici que vous pouvz personnaliser la page de connexion de votre site.
• General Settings : Ce sont les réglages propre au plugin.
• Import / Export : Ce menu vous permet d’importer ou d’exporter des réglages.

Rappel : Cette extension permet uniquement de modifier l’apparence de la page de connexion WordPress. Si les modification que vous faites ne sont pas visibles, pensez à cliquer à nouveau sur « Save Design Settings » et à vider le cache de votre navigateur (ctrl + maj + suppr).

Menu du pluglin custom login

Menus de l’extension Custom Login

Personnalisation du menu de connexion de WordPress grâce à Custom Login

La personnalisation de la page de connexion de WordPress se divise en 6 grands menus.

1 – HTML : personnalisation du fond

Dans cette section, vous pouvez paramétrer tout ce qui concerne le fond (couleur et image) de la page de connexion.

• Background Color : Choix de la couleur de fond de la page et son opacité (ATTENTION : si vous mettez une image, cette couleur ne sera pas visible!).
• Background image : Pour ajouter une image de fond depuis les médias WordPress.
• Background position : Permet de choisir la position de l’image.
• Background repeat : Vous pouvez choisir de répéter l’image si elle est trop petite pour la taille de l’écran (répétition horizontale et verticale / répétition horizontale / répétition verticale).
• Background Size : permet de régler la taille de l’image en fonction de la taille de l’écran.

2 – Logo : personnalisation du H1

Dans cette section, vous avez la possibilité de personnaliser le logo de la page de connexion.

• Hide the WP logo : Permet de masquer le logo WordPress si vous ne souhaitez pas le remplacer, et ne rien afficher.
• Image : Permet d’ajouter votre logo depuis la bibliothèque de media WordPress.
• Image Width / Image Height : Hauteur et largeur de votre logo (si votre image est plus petite que la taille indiquée, elle ne va pas s’agrandir, il faudra le régler dans Background Size).
• Background position : Permet de choisir la position de votre logo (exemple: en bas, à droite).
• Background repeat : permet d’ajouter une répétition du logo si l’image est trop petite par rapport à la taille souhaitée.
• Background size : Permet de régler la taille de l’image (voir « background size » du paragraphe HTML).

3 – Login Form : modification du formulaire de connexion

Dans cette section, vous pouvez configurer la taille, le fond et la position du formulaire de connexion.

• Force max-width : Permet d’ajuster la largeur du formulaire à la largeur du logo.
• Width : Permet de régler la largeur du formulaire.
• Background color : Permet de régler la couleur et l’opacité du formulaire (il s’agit ici du fond de l’ensemble du formulaire, pas des input).
• Background URL / Background position / Background repeat / Background size : Identique à l’image de fond de la page, mais uniquement pour le formulaire de connexion.
• Border radius / Border size / Border Color : Permet de régler l’arrondie, l’épaisseur du trait et la couleur du contour du formulaire.
• Box shadow : Vous pouvez régler l’ombre du formulaire sur la page. Vous devez indiquer 3 valeurs : la largeur de l’ombre sur l’axe horizontale, sur l’axe verticale, et la diffusion de l’ombre.
• Box shadow color : Vous permet de changer la couleur de l’ombre.

4 – Miscellaneous : Réglage des textes du formulaire

Vous pouvez ici changer la couleur des labels (l’intitulé des champs du formulaire).

5 – Below Form anchor : personnalisation des textes supplémentaires

C’est ici que vous pourrez modifier la couleur des textes se situant sous le formulaire de connexion.

• Nav color / Nav text-shadow color : Vous permet de changer la couleur du texte, son ombre ainsi que leur opacité.
• Nav color hover / Nav text-shadow hover : Vous permet de changer la couleur du texte, son ombre ainsi que leur opacité quand l’utilisateur survole ces textes avec la souris.

6 – Custom CSS / HTML / jQuery

Vous pouvez via ces 3 réglages ajouter votre propre code au formulaire de contact.

Exemple de personnalisation de la page de connexion.

Réglage des paramètres du plugin Custom Login pour WordPress

Dans les « General Settings« , vous pouvez activer ou non la personnalisation de la page de connexion et régler la capacité minimum requise pour la personnaliser.

Tracking Settings permet au développeur de l’extension de récupérer des informations sur vos réglages pour l’améliorer.

Login Functions permet de désactiver l’effet de secousse du formulaire quand l’utilisateur se trompe d’identifiant / Mot de Passe. Vous pouvez désactiver le CSS de WordPress pour la page de connexion (l’ajout d’une feuille CSS n’est pas gérée par cette extension). Et vous permet de désactiver le texte « Mot de passe oublié ? » (Attention, désactive uniquement la visibilité du texte et non la fonction de mot de passe oublié).

Partager les réglages de ma personnalisation de l’extension Custom Login

Vous pouvez très facilement partager, ou reproduire à l’identique votre page de connexion sans devoir refaire chaque réglage. Pour cela, allez dans l’onglet Import/Export Settings du plugin, copiez le contenu du texte Export, puis le collez dans l’Import d’un autre site. Attention : si vous avez utilisé des images, pensez à les mettre à jour car l’extension va les chercher sur le site d’origine.

Et si je ne veux pas utiliser d’extension?

Il est tout à fait possible de faire les modifications directement dans une feuille de style CSS. Pour cela il vous faut ajouter cette fonction dans le fichier function.php de votre thème enfant car WordPress ne charge pas les feuille de style des thèmes sur cette page.

function custom_login_css()  {
    echo '<link rel="stylesheet" type="text/css" href="URL de votre feuille CSS" />';
}
add_action('login_head', 'custom_login_css');