# Personnaliser la page de connexion WordPress : logo, lien et styles

> Le logo WordPress sur l'écran de connexion d'un client, ça fait mauvais genre. Trois hooks suffisent pour remplacer logo, lien et couleurs.

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

## L’essentiel

- login_enqueue_scripts charge un CSS dédié
- login_headerurl change le lien du logo
- login_headertext change son texte alternatif

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.

> L'essentiel à retenir : login_enqueue_scripts charge un CSS dédié ; login_headerurl change le lien du logo ; login_headertext change son texte alternatif

```
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.login` pour l'arrière-plan général de la page.
- `.wp-core-ui .button-primary` pour la couleur du bouton « Se connecter ».
- `#loginform` pour 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.php` chargé depuis `functions.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.