Comment dire aux navigateurs de mettre à jour les fichiers CSS/JS lorsque les fichiers sont modifiés dans WordPress ?

Dans les en-têtes wordpress, vous avez probablement remarqué que les actifs statiques CSS et JS sont référencés comme ceci :

https://justyy.com/wp-content/themes/twentytwelve/style.css?ver=4.4.2

La chaîne de requête ?ver= est utilisée pour indiquer aux navigateurs d’effectuer une mise à jour forcée sur les ressources statiques lorsque la version principale de wordpress a changé, car certains navigateurs peuvent ne pas être en mesure d’ignorer les fichiers de cache puisque l’URL n’a pas changé.

Parfois, je veux changer le style.css dans le thème enfant mais le navigateur récupère toujours le fichier mis en cache puisque la version wordpress n’a pas changé. et je dois aller sur CloudFlare pour purger le cache. Une meilleure solution consiste à remplacer ?ver= par ?filetime= afin qu’à chaque modification du fichier, l’URL change.

Vous pouvez ajouter ce qui suit dans le modèle children-theme functions.php pour que cela se produise.

function justyy_remove_cssjs_ver( $src) {
  $newsrc = $src;
  if( strpos( $newsrc, '?ver=')) {
    $newsrc = remove_query_arg( 'ver', $newsrc );
  }
  $rootdir = '/var/www'; // the path to your domain on the server
  $url = parse_url($newsrc, PHP_URL_PATH);
  $source = $rootdir .'/'. $url;
  if (is_file($source)) {
    $newsrc .= "?m=".filemtime($source);
    return $newsrc;
  }     
  return $src; // keep unchanged if file is not accessible.
}
add_filter( 'style_loader_src', 'justyy_remove_cssjs_ver', 10, 2 );
add_filter( 'script_loader_src', 'justyy_remove_cssjs_ver', 10, 2 );

Vous pouvez utiliser le contenu du fichier.