Personnaliser et sécuriser la page Log

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.

Source : https://wpmarmite.com/page-connexion-wordpress/

L’extension parfaite : Custom Login Page Customizer. Suivez le tuto, c’est parti !

Qu’est ce que la page Login WordPress ?

Cette page est la porte d’accès à l’administration de votre site.

résentation du plugin et de ses réglages

Installer l’extension

Téléchargez l’extension, l’installer et l’activer

Cliquer sur Installer, puis activer le plugin.

https://fr.wordpress.org/plugins/login-customizer/

Ajoutez votre titre Personnalisation

ATTENTION : vous trouverez les options de customisation dans le personnaliseur de thème : Apparence / Login Customizer. Vous y êtes ?

Templates

Background : modifier l’arrière-plan

Logo

Le réglage en pourcentage a l’avantage de permettre une meilleure adaptation responsive quels que soient les écrans.

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.

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

Fields : les champs à remplir

L’option Disable remember me supprime la case à cocher qui permet à votre navigateur d’enregistrer le mot de passe.

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 :

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

Sécuriser l’accès au back office

Personnaliser l’URL de connexion et les slugs

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

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.

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.