# Personnaliser le logo de la page de connexion sans surcharger le CSS

> Deux filtres suffisent pour remplacer le logo WordPress par celui d'un client sur l'écran de connexion, sans écrire une feuille de style complète.

- Auteur : Clément Hadrot
- Publié le : 2020-01-02
- Mis à jour le : 2020-01-02
- Catégorie : Tips
- URL : https://wpmoderne.dev.wordpress-developpement.fr/tips/personnaliser-logo-page-connexion-sans-css/

## L’essentiel

- login_headerurl change le lien du logo
- login_headertext change son texte alternatif
- Une seule règle CSS reste nécessaire pour l'image

Un client demande souvent la même chose en début de mission : « Est-ce qu'on peut au moins mettre notre logo sur la page de connexion ? » La réponse classique consiste à enfiler une feuille de style complète, à recalculer une hauteur de bloc, à gérer un fond dégradé qui ne correspondait à rien. Pour un simple remplacement de logo, cette lourdeur n'a pas lieu d'être.

Deux filtres du cœur de WordPress, `login_headerurl` et `login_headertext`, couvrent exactement ce besoin. Ils modifient respectivement le lien vers lequel pointe le logo (par défaut, wordpress.org) et le texte alternatif affiché au survol. Il ne reste alors qu'une seule règle CSS à écrire, celle qui remplace l'image de fond du logo.

## Comprendre les deux filtres à utiliser

`login_headerurl` reçoit une chaîne d'URL et doit en renvoyer une autre. C'est la destination du clic sur le logo, généralement redirigée vers le site du client plutôt que vers wordpress.org. `login_headertext` fonctionne à l'identique pour l'attribut `title` et le texte visible pour les technologies d'assistance.

Ces deux filtres n'agissent que sur la partie « lien » de l'élément. L'image elle-même reste celle par défaut tant qu'aucune règle CSS ne vient la remplacer.

> L'essentiel à retenir : login_headerurl change le lien du logo ; login_headertext change son texte alternatif ; Une seule règle CSS reste nécessaire pour l'image

## Le code à placer dans functions.php

Voici un exemple complet, pensé pour un client fictif que nous appellerons « Atelier Ferronnier » :

```
function af_login_logo_url() {
    return home_url( '/' );
}
add_filter( 'login_headerurl', 'af_login_logo_url' );

function af_login_logo_text() {
    return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'af_login_logo_text' );

function af_login_logo_css() {
    ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url( '<?php echo esc_url( get_stylesheet_directory_uri() . '/assets/images/login-logo.png' ); ?>' );
            height: 80px;
            width: 320px;
            background-size: contain;
            background-repeat: no-repeat;
            padding-bottom: 20px;
        }
    </style>
    <?php
}
add_action( 'login_enqueue_scripts', 'af_login_logo_css' );
```

La fonction accrochée à `login_enqueue_scripts` imprime un bloc de style directement dans l'en-tête de la page de connexion. C'est la méthode officielle pour cibler cet écran, qui ne charge pas les styles habituels du thème.

## Adapter les dimensions sans casser la mise en page

Le logo par défaut de WordPress fait 84 pixels de côté. Si le logo du client est plus large que haut, comme c'est souvent le cas pour un logotype horizontal, il faut ajuster à la fois `height`, `width` et éventuellement `padding-bottom`, qui contrôle l'espace réservé sous l'image avant le formulaire.

- Un logo carré ou proche du carré : conserver des valeurs proches de 80×80 pixels.
- Un logotype horizontal large : augmenter `width` et réduire `height`, avec `background-size: contain` pour éviter toute déformation.
- Un logo sur fond transparent : vérifier le rendu sur le fond gris clair par défaut de l'écran de connexion avant de livrer.

## Éviter les pièges classiques

Le premier piège consiste à charger l'image via une balise `<img>` injectée en JavaScript plutôt que par CSS : cela fonctionne visuellement, mais casse l'accessibilité, puisque le lien du logo garde son texte natif tant que `login_headertext` n'est pas filtré en parallèle.

Le second piège est d'oublier `esc_url()` autour du chemin de l'image. Ce n'est pas qu'une question de sécurité : sur certaines configurations avec des chemins contenant des espaces ou des caractères spéciaux, l'URL non échappée casse simplement l'affichage du logo.

> Sur ce type de demande, mieux vaut livrer un mu-plugin dédié plutôt que d'alourdir le functions.php du thème : la personnalisation de la page de connexion survit ainsi à un changement de thème.

## Variante : logo différent selon l'environnement

Sur un site avec plusieurs environnements (production, recette, développement), il est utile d'ajouter un bandeau visuel distinctif directement dans ce même bloc de style, pour qu'un développeur ne confonde jamais un environnement de recette avec la production au moment de se connecter :

```
if ( wp_get_environment_type() !== 'production' ) {
    echo '<style>body.login { border-top: 6px solid #d63638; }</style>';
}
```

Cette astuce complémentaire ne remplace pas une vraie surveillance des environnements, mais elle évite l'erreur bête de publication en pensant être sur la recette.

## En résumé

Remplacer le logo de la page de connexion ne nécessite ni plugin ni feuille de style entière : deux filtres pour le lien et le texte, une règle CSS injectée via `login_enqueue_scripts` pour l'image, et le tour est joué en une dizaine de minutes. Pour une refonte complète de l'écran, avec fond, couleurs de boutons et message personnalisé, une approche plus large existe déjà et mérite un traitement séparé.