# Repérer d’un coup d’œil l’environnement dans la barre d’administration

> Une barre d'admin rouge en production, verte en local : un réflexe visuel simple pour ne plus jamais modifier le mauvais environnement par erreur.

- Auteur : Clément Hadrot
- Publié le : 2023-12-25
- Mis à jour le : 2023-12-25
- Catégorie : Tips
- URL : https://wpmoderne.dev.wordpress-developpement.fr/tips/reperer-environnement-barre-admin/

## L’essentiel

- Une couleur par environnement, sans confusion possible
- Basé sur wp_get_environment_type
- Quelques lignes de CSS injectées en admin

Un vendredi soir, veille de vacances, j'ai vu un développeur junior désactiver un plugin de cache directement en production en croyant être sur l'environnement de recette. Les deux onglets ouverts dans le navigateur avaient un titre presque identique, et la barre d'administration WordPress, grise partout, ne donnait aucun indice. Depuis ce jour, chaque projet que je livre affiche une couleur différente selon l'environnement.

La solution ne demande ni extension ni configuration complexe : quelques lignes de CSS injectées conditionnellement dans l'admin, pilotées par la constante d'environnement de WordPress.

## Définir l'environnement du site

Depuis WordPress 5.5, la constante `WP_ENVIRONMENT_TYPE`, définie dans `wp-config.php`, permet de déclarer explicitement le type d'environnement parmi les valeurs reconnues : `local`, `development`, `staging` et `production`. Sans cette constante, WordPress considère par défaut l'environnement comme `production`.

```
// wp-config.php sur le serveur de recette
define( 'WP_ENVIRONMENT_TYPE', 'staging' );
```

La fonction `wp_get_environment_type()` retourne ensuite cette valeur n'importe où dans le code, y compris dans les thèmes et les extensions.

## Colorer la barre d'admin

Le hook `admin_bar_menu` ou plus simplement une injection de style dans `wp_before_admin_bar_render` permet d'ajouter un bandeau de couleur sans surcharger de fichier CSS existant :

> L'essentiel à retenir : Une couleur par environnement, sans confusion possible ; Basé sur wp_get_environment_type ; Quelques lignes de CSS injectées en admin

```
add_action( 'wp_before_admin_bar_render', function () {
    $environnement = wp_get_environment_type();

    $couleurs = [
        'local'       => '#2ecc71',
        'development' => '#3498db',
        'staging'     => '#f39c12',
        'production'  => '#e74c3c',
    ];

    if ( ! isset( $couleurs[ $environnement ] ) ) {
        return;
    }

    printf(
        '<style>#wpadminbar{background:%1$s !important;} #wpadminbar:before{content:"%2$s";position:absolute;right:10px;top:0;color:#fff;font-size:11px;line-height:32px;}</style>',
        esc_attr( $couleurs[ $environnement ] ),
        esc_html( strtoupper( $environnement ) )
    );
} );
```

Le résultat est immédiat : rouge en production, orange en recette, bleu en développement, vert en local. Aucune confusion possible entre deux onglets ouverts côte à côte.

## Ajouter un libellé textuel explicite

Une couleur seule ne suffit pas toujours pour les personnes daltoniennes ou en cas de captures d'écran en noir et blanc partagées par messagerie. Le libellé textuel ajouté dans le pseudo-élément `:before` ci-dessus règle ce point, mais on peut aussi l'afficher de façon plus visible dans le titre de l'onglet du navigateur :

```
add_filter( 'admin_title', function ( $titre_admin, $titre ) {
    $environnement = wp_get_environment_type();
    if ( 'production' !== $environnement ) {
        return '[' . strtoupper( $environnement ) . '] ' . $titre_admin;
    }
    return $titre_admin;
}, 10, 2 );
```

## Ne pas se fier uniquement à la constante

Sur des projets hébergés chez plusieurs prestataires différents, la constante `WP_ENVIRONMENT_TYPE` n'est pas toujours définie de façon fiable dans le `wp-config.php` livré par l'hébergeur. Un test de secours sur le nom de domaine complète la détection :

```
function detecter_environnement_par_domaine() {
    $hote = $_SERVER['HTTP_HOST'] ?? '';
    if ( str_contains( $hote, '.recette.' ) ) {
        return 'staging';
    }
    return wp_get_environment_type();
}
```

> Une barre d'admin colorée n'empêche pas une erreur humaine, mais elle transforme un oubli en réflexe visuel presque impossible à ignorer.

## Pour aller plus loin

Ce même principe de coloration peut s'étendre au favicon de l'administration, en générant dynamiquement une icône différente par environnement, ou à un bandeau fixe en haut de l'écran signalant « SITE DE PRODUCTION » en toutes lettres pour les comptes qui n'ont pas l'habitude de naviguer entre plusieurs environnements. L'essentiel reste la même idée : rendre visible ce qui, par défaut, ne l'est pas.