L’URL de l’administration d’un site basé sur le CMS WordPress est trop souvent non sécurisée, ce qui expose de très nombreux sites à des attaques potentielles et fréquentes, où des robots, des hackeurs, tentent de pénétrer dans le back-office à des fins malveillantes.
Outre la couche de sécurité qu’il faut donc impérativement ajouter, il est également possible de personnaliser la page de connexion, pour en modifier le logo, et ajouter par exemple des fonds d’écran.
Ainsi, en deux étapes :
Pour la première étape nous utiliserons un plugin plutôt puissant, mais il vous faudra vous armer d’un thème enfant pour personnaliser sans aucun plugin le design de la page de connexion à l’administration de votre site WordPress.
Let’s go !
Sécuriser l’URL de connexion à WordPress
Afin de sécuriser l’URL de connexion à WordPress, nul besoin d’installer de nombreux plugins, un seul suffit et propose même de très nombreuses options en supplément, sur sa version gratuite. Je n’ai pas eu l’occasion de tester la version payante, tant le plugin est déjà très abouti.
Le nom de ce plugin ? Cerber Security, faisant référence au chien gardant l’entrée des Enfers dans la mythologie grecque
Il faut tout d’abord savoir qu’afin de se connecter à WordPress, deux URL peuvent être majoritairement testées :
- /wp-login.php, qui fait référence au fichier de connexion
- /wp-admin, qui fait référence à l’URL de l’administration
Il faut donc, à l’aide de Cerber Security, bloquer cela. Notez qu’il n’est pas recommandé d’installer le plugin lorsque vous développez votre site sur un hébergement autre que celui de production, car vous pourrez rencontrer des soucis lors de la mise en ligne de votre site WordPress.
Suite à installation, un nouvel onglet apparaît dans l’administration de votre site WordPress. Cliquez dessus pour vous rendre dans le panel de gestion du plugin de sécurité. Plusieurs onglets vous seront proposés, rendez-vous dans celui nommé « Réglages généraux »
Plusieurs informations vous sont proposées, permettant ainsi de bloquer des robots, des tentatives d’accès malveillantes… L’image ci-dessus montre les réglages de blocage par défaut, mais ce qui nous intéresse se trouve un peu plus bas.
C’est ici que vous pouvez personnaliser l’URL de connexion à votre site. Bloquer le fichier wp-login.php va être la petite couche de sécurité supplémentaire, mais indispensable pour parer à toute éventualité.
Personnalisez donc l’URL de connexion, et notez-la précieusement, le plugin envoyant à l’administrateur du site cette information. Si vous l’avez oubliée, il vous faudra désactiver manuellement le plugin en renommant le nom de son répertoire via FTP, dans /wp-content/plugin.
Sauvegardez simplement pour enregistrer le changement, votre administration vient d’être sécurisée 🙂
Modifier le design de la page de connexion WordPress
Pour modifier le design de votre page de connexion, quand bien même vous avez sécurisé l’URL de connexion comme vu précédemment, sous-entend que vous disposez d’un thème enfant, ou que vous avez vous-même développé votre propre thème. Nul besoin de plugins, qui par-dessus le marché alourdiraient votre site, nous allons coder cela.
Personnaliser le design du formulaire de connexion est très sympathique car cela permet de donner aux personnes qui géreront le site un sentiment de propriété un peu plus poussé que si la page n’affichait que le logo du CMS sur une page totalement blanche.
WordPress dispose d’un hook permettant de changer cette page, c’est très exactement ce que nous allons utiliser dans une fonction, afin de changer le logo et de mettre des images de fond qui seront chargées de manière complètement aléatoires.
Création du répertoire FTP des médias
Nous allons dans le thème enfant créer un répertoire dédié à nos médias, si celui-ci n’existe pas. Comme il s’agit d’être ordonné, le répertoire sera donc /wp-content/themes/child-theme/assets/img
Placez-y un fichier index.php vide, par mesure de précaution, et mettez-y vos images. Appelez-les background, comme ceci :
- background_1.jpg
- background_2.jpg
- etc (veillez à avoir un format d’image correct)
Mettez également dans ce répertoire votre logo, en l’appelant simplement logo.png (ou jpg si vous préférez).
Fonction de personnalisation de la page de connexion
Le hook déclenché par WordPress est login_head, faisant référence à l’en-tête de la page de connexion. Appelons notre fonction « custom_login ». Ce qui nous donne d’emblée ceci :
add_action('login_head', 'custom_login');
Il s’agit à présent de coder cette fonction. En premier lieu, un tableau PHP va nous permettre d’avoir toutes les images de fond en une variable.
$background = array(
"background_1.jpg",
"background_2.jpg",
"background_3.jpg",
"background_4.jpg",
"background_5.jpg",
"background_6.jpg"
);Je me suis contenté de six images, mais vous pouvez incrémenter le tableau à convenance. Je ne vois cependant pas l’intérêt de mettre beaucoup de médias, la page ne sera pas affichée systématiquement.
Nous allons « echo » des CSS, pour réécrire le design de cette page. Ce qui nous donne le code suivant :
echo '<style type="text/css">
body.login {
background-image: url("'.get_stylesheet_directory_uri().'/assets/img/'.$background[array_rand($background)].'");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
h1 a{
background-image: url("'.get_stylesheet_directory_uri().'/assets/img/logo.png") !important;
height:120px!important;
background-size:100%Au sein de cet « echo » PHP, le tableau charge de manière totalement aléatoire grâce à array_rand une image. L’URL de l’image est elle-même récupérée grâce à l’utile fonction native de WordPress get_stylesheet_directory_uri(), qui fait référence au répertoire de votre thème actif (dans le cas présent donc, votre thème enfant).
La fonction finale est à présent celle-ci, dans sa globalité :
<?php
/**
* Custom admin login logo
* @see https://www.team-ever.com/wordpress-personnaliser-et-securiser-la-page-de-connexion/
*/
function custom_login() {
$background = array(
"background_1.jpg",
"background_2.jpg",
"background_3.jpg",
"background_4.jpg",
"background_5.jpg",
"background_6.jpg"
);
echo '<style type="text/css">
body.login {
background-image: url("'.get_stylesheet_directory_uri().'/assets/img/'.$background[array_rand($background)].'");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
h1 a{
background-image: url("'.get_stylesheet_directory_uri().'/assets/img/logo.png") !important;
height:120px!important;
background-size:100%!important;
</style>';
}
add_action('login_head', 'custom_login');Quant au logo, celui-ci est directement modifié via un background-image, à vous de redimensionner soit l’image, soit son affichage en CSS. Pensez au cas où à vider le cache de votre site si toutefois vous en avez un, et déconnectez-vous pour voir le rendu final.
N’hésitez pas non plus à recharger la page pour tester l’image de fond aléatoire. Avouez que c’est tout de même plus sympa 😎
Imprimer
Laisser un commentaire