Livrer un site avec le logo WordPress bien visible sur l’écran de connexion, pour un client qui a payé une identité visuelle sur mesure, c’est le genre de détail qui ternit une livraison par ailleurs impeccable. Personne ne le remarque tant que personne n’y va, mais dès qu’un client se connecte, c’est la première chose qu’il voit.
Bonne nouvelle : rhabiller cet écran ne demande ni extension ni bidouille du cœur. Trois hooks bien documentés suffisent à changer le logo, son lien et son texte alternatif, et un peu de CSS fait le reste.
Charger une feuille de style dédiée
Le hook login_enqueue_scripts est l’équivalent, pour l’écran de connexion, de wp_enqueue_scripts sur le site public. C’est là qu’il faut enregistrer le CSS qui redessine le logo.
function agence_style_page_connexion() {
wp_enqueue_style(
'agence-login',
get_stylesheet_directory_uri() . '/assets/css/login.css',
array(),
'1.0'
);
}
add_action( 'login_enqueue_scripts', 'agence_style_page_connexion' );Dans login.css, on cible le sélecteur #login h1 a, qui correspond au lien enveloppant le logo :
#login h1 a {
background-image: url( '../images/logo-client.svg' );
background-size: contain;
width: 260px;
height: 80px;
}Rediriger le lien du logo vers le site
Par défaut, cliquer sur le logo renvoie vers WordPress.org — un comportement qui n’a aucun sens sur un site client. Le filtre login_headerurl permet de le rediriger vers l’accueil du site.
function agence_url_logo_connexion() {
return home_url( '/' );
}
add_filter( 'login_headerurl', 'agence_url_logo_connexion' );Changer le texte alternatif du logo
Le texte alternatif du lien, utilisé par les lecteurs d’écran et affiché en infobulle, reste « Propulsé par WordPress » si on ne le change pas. Le filtre login_headertext le remplace par le nom du site — un détail d’accessibilité trop souvent négligé.
function agence_texte_logo_connexion() {
return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'agence_texte_logo_connexion' );Depuis WordPress 5.2, login_headertext est parfois dépassé au profit d’un filtre sur login_headertitle selon la version ; en cas de doute, vérifiez le comportement réel sur l’installation ciblée avant de livrer, les deux filtres ayant coexisté pendant une période de transition.
Aller plus loin : couleurs et arrière-plan
Le formulaire lui-même se personnalise avec les mêmes outils CSS que n’importe quel élément d’interface : bouton de connexion, arrière-plan du corps de page, bordures des champs.
body.loginpour l’arrière-plan général de la page..wp-core-ui .button-primarypour la couleur du bouton « Se connecter ».#loginformpour l’encadré du formulaire (ombre, coins arrondis, marge).
body.login {
background-color: #0f1116;
}
.wp-core-ui .button-primary {
background: #c9a34e;
border-color: #c9a34e;
}Un cas particulier : le multisite
Sur une installation multisite avec un thème par site, il est tentant d’appeler get_stylesheet_directory_uri() pour charger le CSS de connexion, mais ce chemin dépend du site actif au moment de la requête. Pour un habillage identique sur tous les sites du réseau, mieux vaut charger le fichier depuis le thème parent ou un chemin absolu indépendant du site courant, faute de quoi le logo peut disparaître sur certains sous-sites.
Je regroupe toujours ces trois fonctions dans un fichier
inc/login-branding.phpchargé depuisfunctions.php, jamais directement dans une extension tierce : en cas de changement de thème, l’habillage de connexion suit naturellement la nouvelle identité visuelle.
En résumé
login_enqueue_scripts, login_headerurl et login_headertext forment un trio suffisant pour effacer toute trace visuelle de WordPress sur l’écran de connexion. C’est un travail de quelques dizaines de lignes qui change nettement la perception qu’a un client de la qualité de sa livraison — sans jamais toucher à la sécurité de l’écran, qui reste un sujet à part entière.
