Personnaliser le design du formulaire de connexion permet de donner aux personnes qui géreront le site un sentiment de propriété

WordPress dispose d’un hook permettant de changer la page, c’est 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.

Que vous soyez débutant ou confirmé, vous aurez certainement besoin de customiser cette page un jour ou l’autre ! De plus, si votre site est destiné à accueillir des utilisateurs qui se connectent régulièrement, la personnalisation de votre page de connexion en vaut la peine : elle vous permettra de vous démarquer de vos concurrents.

Création du répertoire FTP des médias

Déposer en ftp les photos choisies ainsi que le logo dans le dossier /img.
Appelez-les:

• background_1.jpg
• background_2.jpg
• etc (mettre un format d’image correct)

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’);

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 » );

$background = array(         « background_1.jpg »,         « background_2.jpg »,         « background_3.jpg »,         « background_4.jpg »,         « background_5.jpg »,         « background_6.jpg »     );

J’ai mis six images, mais vous pouvez en rajouter.

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*/ 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.