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 :
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.
