PubliĂ© par le 30 juillet 2019 ‱ 9 Commentaires

Aujourd’hui, on va s’intĂ©resser Ă  une page trop souvent dĂ©laissĂ©e
 Celle sur laquelle vous vous retrouvez certainement plusieurs fois par jour, mais que vous ne regardez mĂȘme plus. La fameuse : page de connexion WordPress.

Eh oui ! Que ce soit pour travailler sur votre site web ou ceux de vos clients, c’est le passage obligatoire pour vous connecter Ă  l’administration et au tableau de bord. Sauf que, par dĂ©faut, elle est un peu tristoune, mais surtout, pas trĂšs originale


La page de connexion Ă  l'admin WordPress est un peu austĂšre...

Si vous avez choisi WordPress, c’est pour ses nombreuses possibilitĂ©s de customisation, alors pourquoi se contenter de cette interface commune Ă  tous les utilisateurs ? Et si c’est pour vos clients, cela ajoute une petite touche de personnalisation en plus. Petit geste de prime abord, c’est une jolie attention qui amĂ©liorera son expĂ©rience client ;).

Vous pourriez tenter de rentrer dans le code, y passer un temps fou et vous arracher les cheveux
 Ou vous faciliter la vie avec un bon plugin qui a fait ses preuves ! Aller, parce qu’on sait que votre temps est prĂ©cieux, la Marmite vous a dĂ©gotĂ© l’extension parfaite : Custom Login Page Customizer. Suivez le tuto, c’est parti !

Qu’est ce que la page Login WordPress ?

On reprend les bases :

Cette page est la porte d’accĂšs Ă  l’administration de votre site. C’est lĂ  que vous pourrez crĂ©er des pages, des articles de blog, personnaliser votre thĂšme, ajouter des extensions etc.

Pour vous y rendre, il suffit d’ajouter /wp-admin ou /wp-login Ă  la suite de l’URL de votre site (ex : www.monsupersite/wp-admin ). Nous verrons d’ailleurs un peu plus loin dans cet article comment modifier cet URL pour sĂ©curiser d’avantage votre site.

Par défaut, vous y trouverez :

  • le logo WordPress, avec un lien vers le site WPFR, asso officielle de la communautĂ© WP francophone ;
  • un formulaire oĂč vous entrerez votre identifiant de connexion ou votre mail, ainsi que votre mot de passe ;
  • un lien vers un rĂ©cupĂ©rateur de mot de passe si vous l’avez oubliĂ© (pas bien !) ;
  • un lien de retour vers l’accueil de votre site ;

tout ça sur un magnifique fond d’écran gris. Wahou ;).

Page de connexion WordPress par défaut.

Alors mĂȘme si le design minimalisme est de mise dans les tendances actuelles, nous allons vous donner quelques pistes pour ajouter votre touche perso sans pour autant tomber dans l’effet sapin de NoĂ«l.

Pourquoi modifier votre page de connexion ?

Pour respecter la charte graphique

Vous avez certainement passĂ© du temps Ă  peaufiner le design des diffĂ©rentes pages de votre site, il serait dommage de s’arrĂȘter en si bon chemin. En ce sens, personnaliser la page de login en fonction de la charte graphique n’est pas un gadget ! Si vous livrez ce site Ă  un client, il sera certainement enchantĂ© de se loguer sur une interface qui lui correspond. Cela montre aussi votre professionnalisme, et que vous ĂȘtes Ă  l’aise avec WordPress.

Pour harmoniser l’expĂ©rience des utilisateurs du site

Il est possible que vous ayez crĂ©Ă© plusieurs profils, afin que des contributeurs ou abonnĂ©s se connectent Ă  un espace membre. Dans ce cas, la personnalisation devient particuliĂšrement intĂ©ressante pour uniformiser le design. C’est le cas pour la Marmite, et regardez notre magnifique page de connexion :

Page de connexion WordPress, personnalisée aux couleurs et au design de WP Marmite

Alors, convaincu ?

Custom Login Page Customizer : présentation du plugin et de ses réglages

On entre maintenant dans le vif du sujet. L’extension Login Customizer, dĂ©veloppĂ©e par Hardeep Asrani et dispo en open source, compte Ă  ce jour plus de 80 000 installations actives, pour une notation de 4,5/5 Ă©toiles.

RĂ©guliĂšrement mise Ă  jour, elle n’est pas encore traduite en français, mais la prise en main est tout de mĂȘme facile et intuitive. Si vous voulez un aperçu vidĂ©o, n’hĂ©sitez pas Ă  aller visionner celle qu’Alex lui a consacrĂ© :

Pour le tuto pas à pas, c’est par ici que ça se passe !

Installer l’extension

Rendez-vous sur la page officielle du plugin, téléchargez le fichier Zip.

Téléchargez le plugin Login Customizer sur le répertoire officiel WordPress pour personnaliser votre page de connexion au tableau de bord.

Allez ensuite dans votre tableau de bord / Extensions / Ajouter. Cliquez sur le bouton TĂ©lĂ©verser une extension, puis parcourez l’explorateur / finder de votre ordinateur, ou faites simplement glisser l’archive.

Téléversez l'extension Login Customizer

Cliquer sur Installer, puis activer le plugin.

Activer l'extension Login Customizer pour accéder aux options de personnalisation de votre page de login WordPress

Autre solution : vous pouvez également faire une recherche directement via le répertoire des extensions WordPress.

Personnalisation

ATTENTION : contrairement Ă  de nombreux plugins qui proposent directement un bouton “RĂ©glages” Ă  cĂŽtĂ© du bouton “Activer”, ou un accĂšs depuis les onglets “Outils” ou “RĂ©glages”,  vous trouverez les options de customisation dans le personnaliseur de thĂšme : Apparence / Login Customizer. Vous y ĂȘtes ?

Accédez aux options du plugin Login Customizer depuis le personnaliseur de thÚme WordPress

Bon, ça commence plutît bien : le menu de personnalisation est trùs complet. Et ce qui est top, c’est que l’on peut voir directement les modification en WYSIWYG (What You See Is What You Get -> traduisez “ce que vous voyez est ce que vous obtenez” 😉 ), à savoir en visualisant le rendu de chaque action en live.

DĂ©taillons maintenant les options pas Ă  pas.

Templates

Pour les plus pressĂ©s d’entre vous, 3 templates sont proposĂ©s.

Templates pour personnaliser en quelques clics votre page login WordPress

MĂȘme s’ils restent assez impersonnels, ils vous donnent une idĂ©e des changements possibles, et c’est une bonne base pour dĂ©marrer. Choisissez le style que vous prĂ©fĂ©rez, vous pourrez ensuite modifier et ajuster les Ă©lĂ©ments un par un.

Background : modifier l’arriùre-plan

Vous pouvez choisir la couleur d’arriĂšre-plan de votre choix en entrant son code hexadĂ©cimal.

Personnalisez la couleur d'arriÚre plan de votre page de connexion WordPress avec précision en entrant le code hexadécimal de la teinte choisie

Mais si vous prĂ©fĂ©rez utiliser une image, c’est possible Ă©galement. Vous pourrez alors dĂ©finir si l’image reste Ă  son format d’origine (original), si elle s’adapte Ă  l’écran (fit to screen), si elle le remplit quel que soit le format (fill to screen), ou mĂȘme dĂ©finir le format de votre choix (custom).

Si vous avez optĂ© pour un format qui ne recouvre pas intĂ©gralement l’écran, vous pourrez le faire se rĂ©pĂ©ter horizontalement ou verticalement.

Enfin, spĂ©cifiez l’origine et positionnez l’image d’arriĂšre-plan avec prĂ©cision grĂące aux flĂšches directionnelles.

Personnalisez l'arriÚre plan de votre page de connexion au tableau de bord WordPress en insérant une image

Logo

Vous pouvez dĂ©cider d’afficher ou non un logo, et le personnaliser.

TĂ©lĂ©chargez votre mĂ©dia, puis ajustez sa taille en largeur et en hauteur, en pixels ou en pourcentage. Le rĂ©glage en  pourcentage a l’avantage de permettre une meilleure adaptation responsive quels que soient les Ă©crans.

Ajoutez votre logo sur la page login WordPress

Il est possible de paramĂ©trer le padding, c’est Ă  dire la marge entre le logo et le formulaire de connexion, encore une fois en pixels (px) ou en pourcentage.

Ajustez la taille du logo en pixels ou en pourcentage

Pour finir, modifiez l’URL du logo pour rediriger vers votre page d’accueil plutît que sur celle du site WPFR.

Form : le formulaire de connexion

Attelons nous maintenant à l’encart qui vous permet de vous loguer. Comme pour l’arriùre-plan de la page, il est possible d’y ajouter une couleur ou une image de fond.

Jouez ensuite sur le format du formulaire : largeur et hauteur (pix ou %), padding des différents champs (haut, bas, gauche et droite), radius pour arrondir les bords.

L'option radius permet d'arrondir les bords de vos formulaires.

Pour ajouter du relief, l’options shadow spread ajoute une ombre Ă  l’arriĂšre du formulaire. Vous pouvez alors dĂ©finir sa portĂ©e, choisir sa couleur et paramĂ©trer la transparence.

Fields : les champs Ă  remplir

L’option Disable remember me supprime la case Ă  cocher qui permet Ă  votre navigateur d’enregistrer le mot de passe. Si vous avez une stratĂ©gie efficace pour gĂ©rer vos mots de passe, cela peut ĂȘtre pertinent.

Ici encore, un large panel de modifications s’offre à vous :

  • width : modifier la largeur des champs (pix ou %)
  • font : choisir la taille de police du texte de remplissage
  • border width : indiquer l’épaisseur du trait de bordure
  • border color : changer la couleur de la bordure
  • radius : arrondir les angles, attention Ă  bien harmoniser avec les angles de votre formulaire
  • disable box shadow : activer ou non une ombre interne
  • margin : dĂ©finir l’espacement entre les lignes
  • padding : spĂ©cifier la marge interne
  • background : ajouter une couleur de fond
  • text color : modifier la couleur du texte de remplissage
  • label color : dĂ©terminer la couleur des libellĂ©s
  • label font size : adapter la taille de police des libellĂ©s.

Button : bouton de connexion

En bon Call To Action qui se respecte, le bouton doit attirer le regard. Pour qu’il tranche avec les rĂ©glages prĂ©cĂ©dents, des options, et encore des options :

  • background : modifiez la couleur de fond et sa saturation
  • background hoover : modifiez la couleur au survol (pour que le design reste harmonieux, on vous conseille de garder la mĂȘme teinte et de jouer sur la saturation)
  • Button Size : spĂ©cifiez la taille du bouton, soit Auto (dans ce cas il sera petit, en bas Ă  droite) ou Custom (largeur en pix ou %, et hauteur en pix uniquement)
  • Font Size : indiquez la taille de la police d’écriture
  • Text Color : changez la couleur du texte
  • Padding : jouez sur les marges internes (haut, bas, gauche et droite)
  • Box Shadow : mettez une ombre pour donner du relief au bouton
  • Text Shadow : ajoutez une ombre sur le texte, mais attention dans ce cas Ă  sa bonne lisibilitĂ©.
Personnalisation du bouton de connexion Ă  l'administration WordPress

Other

LĂ , on arrive Ă  la fin. Le terme Other est un peu Ă©nigmatique, mais il ne concerne en rĂ©alitĂ© que les 2 Ă©lĂ©ments prĂ©sents par dĂ©faut sous l’encart :

  • disable lost password : supprimer le lien vers le rĂ©cupĂ©rateur de mot de passe. À vous de voir, mais cela peut-ĂȘtre dangereux, surtout si plusieurs personnes sont amenĂ©es Ă  se loguer sur un espace personnel ;
  • disable back to website : dĂ©sactiver le lien de retour Ă  l’accueil. Si vous avez dĂ©fini un logo, cette option n’est pas forcĂ©ment utile.
  • text color et text color (hover) : personnaliser la couleur du texte par dĂ©faut et au survol.
Autres options de l'extension Login Customizer

Custom CSS and JavaScript

Enfin, le dernier onglet vous offre la possibilitĂ© d’entrer du code Ă  la main, si vous souhaitez aller plus loin dans les rĂ©glages.

Entrer du code CSS et JavaScript pour personnalisez votre page de connexion WordPress

N’oubliez pas d’appuyer sur le bouton publier avant de fermer le personnaliseur, histoire de ne pas perdre toutes les prĂ©fĂ©rences que vous venez de configurer.

Ça y est : votre page d’administration est personnalisĂ©e, vous ĂȘtes fier du rĂ©sultat ? Vous avez envie de montrer cette magnifique page Ă  tout le monde ? Dommage, ce n’est pas le but ! 😉

SĂ©curiser l’accĂšs au back office

Si vous ĂȘtes un habituĂ© de la Marmite, vous savez combien la sĂ©curisation de votre site WordPress est une Ă©tape Ă  ne pas nĂ©gliger.

Personnaliser l’URL de connexion et les slugs

Tout d’abord, rappelons que si vous savez oĂč trouver l’URL d’accĂšs Ă  l’administration
 Les hackers et les robots le sauront aussi !

Robot qui danse car il a réussi à hacker facilement un site WordPress

Pour limiter les attaques de force brute, mieux vaut  prĂ©venir que guĂ©rir : on vous donne quelques tips pour mettre des bĂątons dans les roues des pirates.

PremiĂšre chose Ă  faire, modifiez l’URL de la page de connexion grĂące Ă  l’extension Move Login dĂ©veloppĂ©e par GrĂ©gory Viguier.

Extension WordPress Move login pour changer l'URL de la page de connexion Ă  l'administration de votre site

TĂ©lĂ©chargez, installez puis activer l’application pour accĂ©der aux rĂ©glages. Vous pourrez ensuite modifier les URL les plus ciblĂ©es par les robots : page login, dĂ©log, inscription, rĂ©initialisation du mot de passe, etc.

Choisissez des slugs facile Ă  mĂ©moriser, mais pas trop explicites (Ă©vitez vos initiales ou vos identifiants), et n’hĂ©sitez pas Ă  enregistrer la nouvelle adresse en favori sur votre navigateur pour y accĂ©der plus facilement.

DĂ©sactivez ou modifiez les messages d’erreur

Pensez Ă  dĂ©sactiver les messages d’erreurs, ou du moins Ă  les rendre un peu plus ambigĂŒs
 Ne dites pas aux pirates que c’est spĂ©cifiquement l’identifiant ou le mot de passe qui sont erronĂ©s, laissez planer un peu de mystĂšre 😉 et redirigez les erreurs de login vers votre page d’accueil.

Personnalisation des redirections et messages d'erreur du plugin Move Login

Choisissez des identifiants et des mots de passe forts

Pour les hackers, il est relativement simple d’inspecter le code Ă  la recherche des noms des diffĂ©rents contributeurs d’un site. Évitez donc d’utiliser comme identifiant les noms des auteurs, et pensez toujours Ă  personnaliser les pseudos.

Portez une attention particuliĂšre aux mots de passe : on Ă©vite 123monsite, lenomdemonchat et autres combinaisons faciles Ă  mĂ©moriser, et on prĂ©fĂšre un mix de diffĂ©rents caractĂšres (minuscules, majuscules, chiffres et caractĂšres spĂ©ciaux). Pour en savoir plus, je vous invite Ă  consulter l’article et la vidĂ©o d’Alex sur la crĂ©ation de mots de passe sĂ©curisĂ©s.

Alternatives Ă  Login Customizer

  • Theme My Login : plus de 100 000 installations actives pour cette extension, avec une note de 4,5/5 Ă©toiles.

Ici, la page de connexion s’adapte automatiquement Ă  votre thĂšme. La personnalisation se fait en un clic, certes, mais vous n’avez aucune possibilitĂ© de modifier les Ă©lĂ©ments un par un. À utiliser si vous ĂȘtes pressĂ© et pas trop regardant sur les finitions. 

Theme my login : personnalisez votre page de connexion Ă  l'administration WordPress en un clic
  • Admin Custom Login : + de 70 000 installations actives, 4,5/5. Il manque le WISIWYG, et c’est vraiment dommage. De plus, il y a beaucoup d’infos et d’animations sur le tableau de bord, on est vite perdu dans les nombreux rĂ©glages. Sans parler de la forte incitation Ă  passer sur la formule premium. Personnellement, je n’ai pas accrochĂ© car lorsque j’ajoute un plugin je cherche plutĂŽt la simplicitĂ©.
  • 3Ăšme solution : le combo du builder Elementor Pro et du thĂšme OceanWP permet de rĂ©aliser une page de connexion sur mesure, mais Ă©galement des pages 404, etc. Si vous avez le budget nĂ©cessaire, cela peut ĂȘtre intĂ©ressant.

Pour conclure, on peut vous dire que l’extension Login Customizer nous a vraiment convaincus, notamment grĂące Ă  ces nombreuses possibilitĂ©s de personnalisation.

On apprécie :

  • le WYSIWYG, qui permet de visualiser en direct toutes les modifications
  • la facilitĂ© de prise en main, y compris pour les dĂ©butants
  • l’ergonomie intuitive grĂące Ă  un accĂšs aux rĂ©glages depuis le personnaliseur de thĂšme
  • l’exhaustivitĂ© des options de personnalisation
  • la prĂ©cision des paramĂštres, que vous pouvez indiquer en pixels ou en pourcentages
  • la flexibilitĂ© offerte par le rĂ©glage des marges et paddings
  • les templates qui permettent de partir d’une base et de gagner du temps
  • l’ajout de CSS ou JavaScript pour ceux qui souhaitent aller plus loin.

À amĂ©liorer :

  • la traduction en français ? Mais si le coeur vous en dit, sachez que vous pouvez y contribuer 😉 ;
  • la perte de tous vos rĂ©glages si vous changez de  template : ce qui peut s’avĂ©rer trĂšs frustrant ! D’oĂč l’importance de penser Ă  sauvegarder les paramĂštres Ă  chaque changement d’onglet ;
  • impossibilitĂ© de modifier la bordure bleue du champ de dĂ©connexion…
Page de déconnexion admin WordPress de WP Marmite

Mais ça, c’est vraiment parce qu’on est tatillons, et que l’on a pas grand chose à reprocher à cette extension ;).

Et vous, avez-vous pensĂ© Ă  personnaliser les pages de connexion Ă  l’administration de vos sites WordPress ? Vous avez testĂ© d’autres applications qui fonctionnent ?