Comment empêcher la mise en cache du navigateur d'une feuille de style CSS dans WordPress

Ce guide rapide vidéo et texte explique comment empêcher la mise en cache par le navigateur de fichiers CSS dans WordPress. Les astuces de contournement du cache CSS ici fonctionneront également en dehors de WordPress: vous aurez simplement besoin de votre propre méthode d’ajout de chaînes de requête.

Pourquoi les navigateurs cachent les feuilles de style CSS

Lorsqu'un navigateur met en cache une feuille de style CSS, il récupère cette feuille de style du serveur. une fois queen l'enregistrant, puis en envoyant sa propre version enregistrée de cette feuille de style à l'utilisateur chaque fois que la page en cours de chargement le demande.

Les navigateurs agissent ainsi pour améliorer les performances du site: ils ne sont plus obligés de demander la feuille de style à chaque serveur de site Web, ce qui signifie moins de demandes, des chargements de page plus courts et des temps de chargement plus courts.

Pourquoi vous souhaitez empêcher la mise en cache de fichiers CSS par le navigateur

Cependant, la mise en cache CSS peut également poser des problèmes à la fois aux utilisateurs et aux développeurs. Si vous changement Dans le cas d’une feuille de style, un utilisateur donné de votre site risque de ne pas voir les modifications tant que le cache de son navigateur n’aura pas été effacé, c’est-à-dire jusqu’à ce qu’il supprime la version enregistrée et récupère à nouveau la feuille de style. Cela peut prendre des heures ou des jours, période pendant laquelle vos utilisateurs voient une version obsolète et éventuellement cassée des règles CSS du site.

Désactiver le comportement du cache CSS pour une feuille de style donnée signifie que chaque Le navigateur de l’utilisateur doit charger ce fichier à partir de zéro, chaque chargement de la page. Cela supprime les avantages de la mise en cache du navigateur en termes de rapidité, mais garantit que chaque utilisateur voit la version la plus mise à jour de la feuille de style à chaque chargement de page.

La vidéo ci-dessous explique (avec l'aide de mon chien, qui voulait attirer l'attention) comment désactiver la mise en cache du navigateur de toute feuille de style CSS dans WordPress:

Vous trouverez ci-dessous un guide de texte contenant les mêmes informations.

Comment désactiver le cache CSS dans WordPress: Ajouter une chaîne de requête

Le point principal de la vidéo ci-dessus est que l'ajout d'une chaîne de requête à une feuille de style CSS efface sa mise en cache par le navigateur, car celui-ci traitera les deux fichiers suivants de manière différente:

mysite.com/style.css

mysite.com/style.css?anything=goeshere

Cependant, c’est toujours le même fichier! Rien sur ses Contenu doit changer, et la chaîne de requête ? n'importe quoi = va ici ne doit rien faire. Le simple fait de placer la chaîne de requête à cet endroit oblige le navigateur à respecter la «nouvelle» feuille de style et à la charger à partir de zéro.

Forcer les mises à jour ponctuelles avec le versioning CSS de WordPress

Donc, si vous voulez effacer la feuille de style CSS d’un site WordPress pour chaque visiteur, mais une seule fois, vous pouvez modifier votre wp_enqueue_style () appel de ceci:

wp_enqueue_style ('wpshout-style', get_stylesheet_uri ());

Pour ça:

wp_enqueue_style ('wpshout-style', get_stylesheet_uri (), '', '1.0.0');

Notez que cela ne désactive le cache CSS que si le navigateur n’a jamais vu cette chaîne de requête auparavant. En ajoutant cette chaîne de requête, vous actualiserez ainsi les caches du navigateur de tous les utilisateurs. une fois que, mais une fois que leurs navigateurs ont chargé mysite.com/style.css?anything=goeshere une fois, ils sont libres de mettre en cache cette feuille de style, comme elle le ferait avec l’original.

Ensuite, si vous souhaitez forcer un autre effacement ponctuel du cache CSS de chaque visiteur, vous pouvez simplement modifier le code comme suit:

wp_enqueue_style ('wpshout-style', get_stylesheet_uri (), '', '1.0.1');

Etc.

C'est donc une bonne solution pour la gestion des versions vos feuilles de style: lorsque vous apportez des modifications, vous pouvez modifier la chaîne de requête et la nouvelle feuille de style sera transmise à tous vos utilisateurs. La version la plus propre de cette méthode consiste à utiliser un système de gestion des versions normalement mis en forme, ce qui signifie que votre chaîne de requête ressemblera à quelque chose comme: v = 1.1.2, plutôt qu’un nombre aléatoire que vous choisissez à chaque fois.

Nous avons décrit comment forcer des actualisations CSS uniques dans WordPress. Cependant, vous voudrez peut-être simplement jamais se soucier de la mise en cache du navigateur, c’est-à-dire s’assurer que la feuille de style se charge entièrement à chaque chargement de page, quoi qu’il en soit. Que faisons-nous dans ce cas?

WordPress CSS Cache avec chaque chargement de page: Ajouter un au hasard Chaîne de requête

Par défaut, WordPress ajoute des chaînes de requête, mais elles ne changent pas souvent. Toutefois, la vidéo explique comment forcer la chaîne de requête à modifier chaque chargement de page en lui attribuant un nombre aléatoire élevé. Vous voudrez changer votre wp_enqueue_style () appels de cette:

wp_enqueue_style ('wpshout-style', get_stylesheet_uri ());

Pour ça:

$ rand = rand (1, 99999999999);
wp_enqueue_style ('wpshout-style', get_stylesheet_uri (), '', $ rand);

C’est si l’appel initial à wp_enqueue_style () n'a pas de troisième argument (la chose que nous avons remplie ''). S'il y a un troisième argument, laissez-le tel quel, car il est susceptible de faire quelque chose d'important.

L’effet de ce code est de en permanence empêchez le navigateur de mettre en cache la feuille de style CSS mise en file d'attente en lui ajoutant une chaîne de requête aléatoire différente à chaque chargement de page. Votre navigateur, ainsi que les navigateurs de vos utilisateurs, seront obligés de charger la feuille de style à partir de zéro à chaque chargement de page.

Ajouter une chaîne de requête aléatoire à une feuille de style WordPress que vous ne contrôlez pas

C'est un peu plus compliqué. Tu devras déballer le style original et remettez-le vous-même en file d'attente avec la chaîne de requête. Vous voudrez écrire ceci dans un plugin, avec le corps suivant:

fonction wpshout_force_css_refresh () 
wp_dequeue_style ('[STYLESHEET_SLUG]');

$ rand = rand (0, 999999999999);
wp_enqueue_style ('[STYLESHEET_SLUG]', [PERMALINK_TO_STYLESHEET], [STYLESHEET_DEPENDENCIES], $ rand);

add_action ('wp_enqueue_scripts', 'wpshout_force_css_refresh');

Pour trouver le slug d’une feuille de style, «View Source» et trouver le identifiant de la feuille de style, puis retirez -css. Par exemple, le identifiant de la feuille de style principale de WPShout est wpshout-style-csset ainsi sa limace est wpshout-style.

Si vous avez besoin d’aide pour savoir quoi mettre dans [PERMALINK_TO_STYLESHEET], consultez notre article sur le sujet. Si vous avez besoin de détails sur add_action, consultez notre tutoriel sur les hooks WordPress.

[STYLESHEET_DEPENDENCIES] devrait être soit '' ou quelles que soient les dépendances énumérées dans la feuille de style se trouvent dans le code mettre en file d'attenteasseoir.

Mise en cache du navigateur CSS: Informations complémentaires

Si vous souhaitez en savoir plus sur l’ajout et l’utilisation de feuilles de style CSS dans WordPress, voici quelques ressources:

Tout ce que vous devez savoir sur l'utilisation de scripts et de styles personnalisés dans WordPress

Comment utiliser wp_enqueue_style pour charger des feuilles de style CSS

Et si vous souhaitez mieux comprendre la mise en cache en général, voici un bon article pour vous aider à démarrer:

Mise en cache WordPress: Les six choses différentes que les gens peuvent vouloir dire

Merci d'avoir lu!

Crédit d'image: tiagonicastro

en relation