WordPress : personnaliser la page de connexion au Tableau de bord WordPress

Pour personnaliser la page de connexion au Tableau de bord WordPress à l’aide d’un hook, vous pouvez utiliser le hook login_enqueue_scripts.

Ce hook vous permet d’ajouter du code CSS et JavaScript à la page de connexion de WordPress.

Vous pourrez ainsi personnaliser la page de connexion au Tableau de bord WordPress aux couleurs de vos clients.

Voici les étapes à suivre pour personnaliser la page de connexion :

1. Accédez au fichier functions.php de votre thème ou utilisez un plugin personnalisé pour ajouter votre code.
2. Utilisez le hook login_enqueue_scripts pour ajouter vos styles CSS et scripts JavaScript.
3. Créez un fichier custom-login.css dans le répertoire de votre thème (ou un autre emplacement spécifié dans la fonction wp_enqueue_style). Dans ce fichier CSS, vous pouvez personnaliser l’apparence de la page de connexion en utilisant les sélecteurs CSS appropriés.

Voici comment cela peut être fait :

function custom_login_page() {
    // ajouter un lien vers un fichier CSS personnalisé pour le style de la page de connexion
    wp_enqueue_style('custom-login', get_stylesheet_directory_uri() . '/custom-login.css', array('login'));

    // ajouter un lien vers un fichier JavaScript personnalisé (si nécessaire)
    // wp_enqueue_script('custom-login', get_stylesheet_directory_uri() . '/custom-login.js', array(), '1.0', true);
}

add_action('login_enqueue_scripts', 'custom_login_page');

Par exemple, pour changer le fond de la page de connexion, vous pouvez ajouter ceci dans votre custom-login.css :

body.login {
    background-color: #f1f1f1;
}

Il vous faudra utiliser l’inspecteur de votre navigateur web afin de trouver les bons sélecteurs CSS à utiliser.

Rappel : la fonction wp_enqueue_style() permet d’appeler un fichier CSS.

Attention ! Le nom de style ‘login’ est déjà utilisé par le système WordPress.
Il peut par contre être utilisé en tant que dépendance pour que le style personnalisé soit chargé après le style système afin de pouvoir plus facilement surcharger.

Remarque : il vous est impossible de modifier le code HTML de la page de connexion.