Dans le cadre de la mise en place d’un annuaire SEO de sites WordPress, j’ai eu envie de personnaliser la page de connexion à WordPress. En effet, je n’avais pas trop envie que les utilisateurs qui souhaitent ajouter le site à l’annuaire arrivent sur la page classique de connexion avec le logo WordPress. Si vous êtes un spécialiste de la création de site web sous WordPress, vous aurez certainement envie de customiser la page login de l’interface d’administration WordPress avec le logo et les couleurs du site de votre client pour une expérience moins générique, plus personnelle.
Je vais aborder dans ce tutoriel WordPress 2 méthodes pour changer l’apparence de la page de connexion : la customisation via l’ajout de petits bouts codes (snippets WordPress) au fichier functions.php ou la personnalisation de l’interface de connexion par l’ajout d’extensions WordPress.
Sommaire
Qu’est-ce que la page de login de WordPress ?
De quoi parle-t-on exactement ?
La page de connexion à WordPress (appelée également page login ou page d’identification de WordPress) est la page de WordPress qui permet de s’identifier sur votre site WordPress en saisissant son identifiant ou son adresse email ainsi que son mot de passe. Une fois identifié, selon votre rôle et les permissions qui vous sont accordées sur le site WordPress, vous pourrez accéder à l’interface d’administration du site (également désignée par les termes anglophones de backoffice ou backend). Si vous ne disposez pas des droits suffisants ou selon la configuration du site WordPress, vous accéderez peut-être à une page de type Mon compte qui vous permet de réaliser différentes actions liées à votre utilisateur.
Comme vous le voyez, par défaut, la page pour s’identifier est assez minimaliste : un simple logo WordPress, un fond gris, un formulaire d’identification.
URL de la page de connexion à WordPress
Par défaut, la page pour se connecter à WordPress et à l’administration du site est du type : http:monsite.fr/wp-admin/
La page de connexion à WordPress et la sécurité de votre site WordPress
Le problème avec cette page de connexion commune à tous les sites de WordPress, c’est que cette URL est connue de tous. Donc des pirates et des robots qui cherchent à se connecter et à prendre le contrôle de votre site.
Comment procèdent-t-ils ? La technique la plus courante est l’attaque par force brute : les robots ou pirates cherchent à se connecter avec l’utilisateur admin créé par défaut ou avec votre identifiant s’ils ont réussi à le récupérer. Ils essayent ensuite des mots de passe génériques issus de plusieurs dictionnaires. C’est notamment pour ça qu’il faut utiliser un mot de passe sécurisé et fuir les mots de passe courants trop facilement piratables.
Quelques astuces pour sécuriser la page de connexion à votre site WordPress
- supprimer les compte administrateur qui ont pour nom admin ou administrator. Car les pirates vont tout d’abord cibler ces identifiants.
- utiliser un mot de passe sécurisé
- modifier l’URL de connexion à l’interface d’administration : changez l’URL pour une URL personnalisée que les pirates ne connaissent pas
- désactiver les messages d’erreur liés à l’identification de WordPress. Par défaut, WordPress affiche des messages d’erreur (mot de passe incorrect, identifiant inconnu etc…) qui donnent des indices aux pirates. Éviter, par exemple, de leur dire qu’un utilisateur n’existe pas est un bon moyen pour compliquer leur tâche.
Il existe des snippets (codes qui modifient le comportement basique de WordPress) pour ces différentes astuces. J’y reviendrai probablement dans un prochain article.
Des plugins pour renforcer la sécurité la page d’identification de WordPress
Sachez qu’il existe cependant de nombreux plugins spécialisés dans la sécurité WordPress qui permettent de mettre en place ces mesures préventives et améliorer la sécurité de votre site web WordPress comme Wordfence Security ou iThemes Security. Ces extensions proposent entre autres des paramètres pour sécuriser la page login de votre site.
L’extension WPS Hide Login est quant à elle une extension plus légère qui permet juste de changer l’URL de connexion à votre administration. Elle peut être associée au plugin du même éditeur, WPS Limit Login, qui limite le nombre de tentatives de connexion et donc les tentatives d’identification par force brute.
Tutoriel pour personnaliser la page login de WordPress
Maintenant que l’on sait de quoi on parle et que vous êtes conscient des risques et mesures à prendre pour sécuriser la page de connexion à WordPress, voici des astuces pour personnaliser votre page d’identification en utilisant des snippets WordPress.
Ils sont à copier/coller dans le fichier functions.php de votre thème WordPress. Pour rappel, le fichier functions.php permet de redéfinir les fonctions de base de WordPress, de votre thème ou de vos plugins et ainsi obtenir précisément ce que vous souhaitez.
Voilà par exemple l’apparence de ma page de connexion de WordPress customisée :
Utiliser une feuille de style CSS personnalisée pour l’administration
Avant toute autre modification, nous allons mettre en place une nouvelle feuille de style CSS pour la page de connexion qui permettra de changer l’apparence de cette page à votre guise.
Instruction : créez une feuille de style CSS nommée login.css que vous transférerez à la racine du dossier de votre thème puis copiez le code ci-dessous dans votre fichier functions.php.
//feuille de style personnalisée pour la page login WordPress
function login_stylesheet() {
wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/login.css' );
}
add_action( 'login_enqueue_scripts', 'login_stylesheet' );
Ce snippet indique à WordPress qu’il doit charger une feuille de style nommée login.css qui surchargera la feuille de style CSS de base et modifiera donc l’apparence basique de votre page de connexion.
Ajouter un image de fond personnalisée pour sa page de connexion à WordPress
Vous souhaitez mettre une image à la place du gris tristounet de la page de connexion à l’administration de WordPress ?
Il vous suffit de copier/coller ce bout de code dans votre feuille de style CSS login.css précédemment créée et copier votre image (ici fond.jpg) à la racine de votre thème.
/* image de fond de la page login WordPress */
body.login {
background: url('fond.jpg') no-repeat fixed center ;
}
Vous n’êtes bien sûr pas obligé d’appeler votre image fond.jpg . Il suffit de modifier le snippet ci-dessus par le nom de votre image (copiée à la racine de votre thème ou à un autre emplacement qu’il faudra spécifier dans le snippet).
Remplacer le logo de WordPress
Vous souhaitez supprimer le logo WordPress de la page de connexion et mettre votre logo à la place ?
Rien de plus simple avec ce bout de code à copier dans votre fichier login.css de votre thème :
/* logo personnalisé de la page login WordPress */
.login h1 a {
background-image: url('mon-logo.png');
}
Il vous faudra copier votre image (ici appelée mon-logo.png) pour changer le logo de la page d’identification.
Modifier l’URL du logo
Par défaut, le lien sur le logo WordPress mène au site de la communauté francophone responsable de la traduction de WordPress : https://wpfr.net/
Pour renvoyer vers la page d’accueil de votre site WordPress, voici le snippet à copier dans le fichier functions.php de votre thème :
/* URL du logo de la page login WordPress */
function logoLogin_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'logoLogin_url' );
Modifier l’attribut title du logo
L’attribut title d’une image permet d’afficher une infobulle au survol de l’image. Celui par défaut sur le logo WordPress indique “Propulsé par WordPress“.
Pour modifier le texte affiché, voici le snippet à copier/coller dans le fichier functions.php de votre thème :
/* attribut title du logo de la page login WordPress */
function logoTitle_url() {
return 'Mon site';
}
add_filter( 'login_headertitle', 'logoTitle_url' );
Remplacez Mon site par ce que vous voulez afficher !
Précocher « Se souvenir de moi »
Pour cocher par défaut la case Se souvenir de moi du formulaire de connexion pour rester connecté sans avoir à s’identifier à chaque fois, voici ci-dessous le code à copier dans votre fichier functions.php.
/* Précocher la case Se souvenir de moi de la page login WordPress */
function seSouvenirDeMoi_coche() {
echo "<script>document.getElementById('rememberme').checked = true;</script>";
}
function seSouvenirDeMoi() {
add_filter( 'login_footer', 'seSouvenirDeMoi_coche' );
}
add_action( 'init', 'seSouvenirDeMoi' );
Cacher les messages d’erreur d’identification
Si vous n’avez pas installé une extension de sécurité masquant les erreurs d’identification, il est possible de remplacer les différents messages d’erreur par un message indiquant une erreur, sans préciser l’origine de l’erreur. Cela compliquera la tâche des pirates.
Une fois de plus, ce snippet est à copier dans votre fichier functions.php . Le message d’erreur est bien sûr personnalisable !
/* Affichage d'un message d'erreur générique pour les erreurs d'identification de la page login WordPress */
function cacheErreurs_login()
{
return 'Informations de connexion incorrectes.';
}
add_filter('login_errors', 'cacheErreurs_login');
Plugins pour personnaliser la page connexion de WordPress
Si vous n’avez pas envie de mettre les mains dans le cambouis et que vous souhaitez personnaliser votre page de connexion à WordPress, il existe de nombreux plugins pour cela :
- My Thème Login
- Custom Login Page Customizer
- Customize WordPress Login Page
- WP Custom Admin Login Page Logo
Ces plugins permettent de modifier l’apparence et le comportement de la page d’identification de WordPress sans avoir à modifier le code. Il suffit juste d’installer le plugin et de le paramétrer selon vos souhaits et besoins !
