Cacher le numéro de version de WordPress et régler le problème de cache de la feuille de style

Il est prudent de cacher le numéro de version de WordPress afin que les hackers ne détectent pas facilement les retards de mises à jour. Certains développeurs croient à tort qu'ils réussissent à cacher le numéro de version à l'aide d'une toute petite ligne de code judicieusement placée dans le fichier functions.php du thème enfant.

Dans cet article, je vais vous expliquer d'abord pourquoi une seule petite ligne ne peut pas être suffisante puis je vais vous exposer une technique vous permettant de retirer complètement le numéro de version de WordPress tout en conservant les fonctionnalités que son ajout apportait à votre site.

▼Publicité

Le numéro de version de WordPress apparaît dans le code HTML à différents endroits. Pour le voir, il faut afficher le code source d'une page Web de notre site.

On y voit que le numéro de version apparaît d'abord dans la balise <meta name="generator"/> :

Ex :

HTML

<meta name="generator" content="WordPress 3.9" />

Ensuite, on retrouve le numéro de version à la fin de différents noms de fichier .css et .js.

Ex :

HTML

<link rel='stylesheet' href='http://mondomaine.com/wp-content/themes/twentyfourteen/style.css?ver=3.9' ... />

...

<script type='text/javascript' src='http://mondomaine.com/wp-includes/js/admin-bar.min.js?ver=3.9'></script>

Mais pourquoi le numéro de version est-il ajouté à la fin du nom de tous ces fichiers ? Eh bien, il s'agit d'une technique efficace pour gérer la mémoire cache du navigateur.

La mémoire cache du navigateur

Prenons le cas où vous désirez apporter des ajustements à un site existant. Lorsque vous modifiez la feuille de style, votre navigateur ne s'en rend pas compte immédiatement. C'est parce qu'il travaille avec une version cache de la feuille de style. Il ne va donc pas relire le fichier .css sur le serveur à chaque chargement de la page, ce qui lui permet de charger la page plus rapidement.

Donc, lorsque vous modifiez la feuille de style, vous devez absolument appuyer sur F5 dans votre navigateur pour le forcer à relire les données sur le serveur.

Pour nous, les développeurs, ce n'est pas un problème. Nous savons ce qu'il faut faire pour que les modifications soient apparentes. Mais lorsque le site est en ligne, « monsieur-tout-le-monde » ne le saura pas. Il fallait donc trouver une astuce pour forcer un nouveau chargement de la feuille de style au besoin, sans enlever complètement le mécanisme de cache.

Cette astuce consiste à ajouter une version après le nom de la feuille de style dans la balise <link>.

Ex :

HTML

<link rel="stylesheet" href="nomfichier.css?ver=1.0" />

C'est cette même astuce que WordPress a utilisée, mais il l'a étendue à toutes les feuilles de style et à tous les fichiers Javascript.

Ainsi, lorsque vous installez une nouvelle version de WordPress, tous les fichiers dont le nom est suivi par le numéro de version de WordPress seront considérés comme nouveaux et le navigateur sera forcé à les relire directement sur le serveur.

Horodotage de la feuille de style

Il est possible d'utiliser la même astuce pour étendre cette fonctionnalité à chaque enregistrement de feuille de style. On utilisera pour cela l'horodotage correspondant à la dernière modification de la feuille de style.

Ex :

PHP

<link rel="stylesheet" href="nomfichier.css?ver=<?php echo filemtime('nomfichier.css');?>" />

Le code HTML généré par cette ligne sera sous la forme :

HTML

<link rel="stylesheet" href="nomfichier.css?ver=1383225666" />

Maintenant, à chaque fois que la feuille de style est enregistrée, son horodotage change, ce qui force le rechargement automatique du fichier .css par le navigateur.

Remplacer le numéro de version de WordPress par le numéro de version de la feuille de style

Maintenant que le rôle du numéro de version est clair, il faut trouver un moyen d'enlever toute trace de la version de WordPress tout en conservant les avantages de la gestion du cache.

L'utilisation d'un numéro de version a un avantage par rapport à l'utilisation de l'horodotage : il est possible de forcer le rechargement de la feuille de style seulement lorsque nous sommes prêts à le faire. Nous n'allons donc pas utiliser la fonction filemtime() comme numéro de version. Plutôt, nous allons lire le numéro de version directement dans l'entête standard du fichier style.css de votre thème enfant.

Ceci sera réalisé en ajoutant le code suivant dans le fichier functions.php de votre thème enfant

Ce code enlèvera complètement la balise <meta name="generator">. De plus, dans les autres lignes, il remplacera le numéro de version de WordPress par le numéro de version inscrit dans l'entête du fichier style.css de votre thème enfant.

Je vous conseille d'utiliser un numéro de version qui ne donne aucune informations sur le temps qui s'est écoulé depuis la dernière modification (éviter les dates). Essayez également de ne pas utiliser un numéro de version qui pourrait être confondu avec celui de WordPress. Pour ma part, j'utilise une chaîne aléatoire (ex : fjdsk6).

À chaque fois que vous changerez ce numéro de version dans l'entête de votre feuille de style, les navigateurs seront forcés de relire les informations sur le serveur. Tout ceci sans exposer le numéro de version de WordPress. On aura donc le meilleur des deux mondes. Si vous choisissez d'utiliser une chaîne aléatoire comme numéro de version, il vous suffira d'incrémenter les dernier caractère à chaque mise à jour (ex : fjdsk7).

fichier functions.php du thème enfant (PHP)

/* *************************************************************************************** */

/* ********** retirer la version de WordPress ******************************************** */

/* *************************************************************************************** */

remove_action( 'wp_head', 'wp_generator' ); 

 

/* *************************************************************************************** */

/* ********** changer l'attribut ?ver des .css et des .js pour la version de style.css *** */

/* *************************************************************************************** */

function montheme_attribut_version_style( $src ) {

   $version = montheme_version_style();

   if ( strpos( $src, 'ver=' . get_bloginfo( 'version' ) ) ) {

      $src = remove_query_arg( 'ver', $src );

      $src = add_query_arg( 'ver', $version, $src );

   }

   return $src;

}

add_filter( 'style_loader_src', 'montheme_attribut_version_style', 9999 );

add_filter( 'script_loader_src', 'montheme_attribut_version_style', 9999 );

 

/* *************************************************************************************** */

/* ********** retrouve le numéro de version de la feuille de style *********************** */

/* *************************************************************************************** */

function montheme_version_style() {

   $default_headers =  array( 'Version' => 'Version' );

   $fichier = get_stylesheet_directory() . '/style.css';

   $data = get_file_data( $fichier, $default_headers );

   if ( empty( $data['Version'] ) ) {

      return "1.0";

   } else {

      return $data['Version'];

   }

}

Une fois ce code en place, si votre thème enfant contient la ligne suivante dans l'entête de son fichier style.css :

fichier style.css du thème enfant (CSS)

Theme Name: MonThemeEnfant

... 

Version: fjdsk6

Les lignes contenant auparavant la version de WordPress contiendront désormais la version du fichier style.css.

Ex :

HTML

<link rel='stylesheet' href='http://mondomaine.com/wp-content/themes/twentyfourteen/style.css?ver=fjdsk6' ... />

...

<script type='text/javascript' src='http://mondomaine.com/wp-includes/js/admin-bar.min.js?ver=fjdsk6'></script>

Attention : le numéro de version de WordPress apparaît en clair dans le fichier readme.html présent à la racine du dossier wordpress. Ce fichier n'a aucune utilité pour un site WordPress et ne devrait en aucun cas être copié sur le serveur.

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories

4 commentaires

  1. Je te remercie pour l’astuce. Mon ancienne technique, avec mon nouveau thème, mettait un bazar pas possible sur le rendu des fonts et des lightbox (ces dernières ne fonctionnait plus du tout au final)

    Merci et bonne année 2015 au passage !

    • Christiane Lagacé

      C’est la technique que j’utilise dans tous mes sites WordPress, nickel pour moi aussi ! J’ai cependant effectué un tout petit ajustement : je n’utilise plus de numéro de version qui pourrait s’apparenter à une date, histoire que les hackers ne puissent pas penser que le site n’a pas été modifié depuis X temps. Mes numéros de versions sont maintenant une suite de lettres et de chiffres sans signification, du genre fjdks8776.

      Salutations !

      Christiane