# Un thème enfant qui ignore les mises à jour de style.css : cache et versioning

> Le client jure ne rien voir changer après chaque modification de CSS, alors que le fichier est bien à jour sur le serveur. Le diagnostic mène tout droit à un numéro de version figé depuis la création du thème.

- Auteur : WordPress Développement
- Publié le : 2021-07-24
- Mis à jour le : 2021-07-24
- Catégorie : Thèmes
- URL : https://www.wpmoderne.fr/themes/theme-enfant-style-css-cache-versioning/

## L’essentiel

- Un numéro de version figé rend le cache navigateur invisible aux mises à jour
- filemtime remplace avantageusement un numéro codé en dur
- Le cache serveur et les CDN restent un problème distinct

« Je vois toujours l'ancien style, même en rafraîchissant la page. » Ce retour, reçu à plusieurs reprises sur un projet de thème enfant construit sur Astra, ne concernait qu'un sous-ensemble des clients : certains voyaient bien les changements immédiatement, d'autres continuaient à voir l'ancienne mise en page pendant des jours après chaque mise à jour de CSS.

## Symptôme : un problème qui touche certains visiteurs, pas tous

Ce comportement inégal orientait naturellement le diagnostic vers un problème de cache navigateur plutôt que de cache serveur : un cache serveur ou un CDN aurait touché tous les visiteurs de façon identique, alors qu'un cache navigateur dépend de l'historique de visite propre à chaque poste. Les visiteurs n'ayant jamais chargé le site auparavant voyaient la nouvelle version immédiatement ; les visiteurs réguliers, dont le navigateur avait déjà mis en cache l'ancien `style.css`, continuaient à voir l'ancienne version tant que le cache local n'expirait pas.

## Diagnostic : un numéro de version qui ne bouge jamais

L'inspection du `functions.php` du thème enfant a révélé la cause : le numéro de version passé à `wp_enqueue_style()` était codé en dur, fixé une fois pour toutes à la création du thème, et jamais mis à jour depuis :

```
function mon_enfant_styles() {
    wp_enqueue_style(
        'astra-child-style',
        get_stylesheet_uri(),
        array( 'astra-theme-css' ),
        '1.0.0'
    );
}
add_action( 'wp_enqueue_scripts', 'mon_enfant_styles' );
```

Chaque déploiement de CSS générait exactement la même URL (`style.css?ver=1.0.0`), donc exactement la même clé de cache pour le navigateur. Aucune modification de contenu ne pouvait déclencher un rechargement tant que ce numéro restait identique.

> L'essentiel à retenir : Un numéro de version figé rend le cache navigateur invisible aux mises à jour ; filemtime remplace avantageusement un numéro codé en dur ; Le cache serveur et les CDN restent un problème distinct

## Correctif : indexer la version sur le contenu réel du fichier

Plutôt que de demander à l'équipe de penser à incrémenter manuellement un numéro à chaque déploiement — une étape presque toujours oubliée sous la pression d'une mise en ligne —, la version a été recalculée automatiquement à partir de la date de dernière modification du fichier :

```
function mon_enfant_styles() {
    $chemin_css = get_stylesheet_directory() . '/style.css';
    $version    = file_exists( $chemin_css ) ? filemtime( $chemin_css ) : '1.0.0';

    wp_enqueue_style(
        'astra-child-style',
        get_stylesheet_uri(),
        array( 'astra-theme-css' ),
        $version
    );
}
add_action( 'wp_enqueue_scripts', 'mon_enfant_styles' );
```

Avec ce changement, chaque modification du fichier `style.css` produit automatiquement une nouvelle URL de cache, sans intervention humaine et sans risque d'oubli.

## Cas particulier des fichiers CSS additionnels

Le thème enfant chargeait également un second fichier, `responsive.css`, avec le même défaut. Plutôt que de dupliquer la logique de `filemtime()` pour chaque fichier, une petite fonction utilitaire centralise le calcul :

```
function mon_enfant_version_asset( $nom_fichier ) {
    $chemin = get_stylesheet_directory() . '/' . ltrim( $nom_fichier, '/' );
    return file_exists( $chemin ) ? filemtime( $chemin ) : '1.0.0';
}

wp_enqueue_style(
    'astra-child-responsive',
    get_stylesheet_directory_uri() . '/responsive.css',
    array( 'astra-child-style' ),
    mon_enfant_version_asset( 'responsive.css' )
);
```

## Ce que ce correctif ne résout pas

Ce diagnostic concerne exclusivement le cache navigateur des visiteurs. Un cache serveur (plugin de cache de page, cache d'hébergeur) ou un CDN en amont peuvent poser un problème similaire mais nécessitent une purge distincte, indépendante du numéro de version passé à `wp_enqueue_style()`.

> Sur nos projets, ce correctif de versioning automatique est désormais posé par défaut dans tout thème enfant livré, avant même que le problème ne se manifeste chez le client.

## En résumé

Un numéro de version figé dans `wp_enqueue_style()` rend un thème enfant invisible aux yeux du cache navigateur après chaque mise à jour de CSS. Indexer automatiquement cette version sur la date de modification réelle du fichier, via `filemtime()`, élimine ce problème sans exiger de discipline particulière de la part de l'équipe de développement.