Tout savoir sur WordPress

Mettre à jour automatiquement la mise en cache des fichiers CSS

Pour faciliter la mise à jour d’un fichier CSS par les navigateurs, il est conseillé d’éviter de mettre en cache les fichiers CSS de notre thème.

Il peut être assez pratique sous WordPress de mettre automatiquement à jour la mise en cache du CSS. En effet, si vous mettez à jour un fichier CSS, selon la configuration du serveur, vous devez rafraîchir votre navigateur pour apercevoir vos modifications.

Heureusement, il est possible d’y remédier en modifiant l’appel du fichier CSS comme ci-dessous :

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); echo '?ver=' . filemtime( get_bloginfo( 'stylesheet_url' ) ); ?>" type="text/css" media="screen" />

Et c’est tout ! Le code s’occupera d’ajouter automatiquement le numéro de version à chaque modification et c’est la dernière mise à jour du fichier qui sera prise en compte.

A noter que cette technique est aussi valable pour les fichiers JavaScript.

Cet article a été publié il y a 4283 jours - Il n'est peut être plus à jour !

Article écrit par jmlapam

33 Commentaires

  1. Excellente astuce, j’allais la mettre en place dans ma V3, j’aurais même pas à la coder.
    Bravo merci !

  2. Je crois que je n’ai rien compris à cet article. C’est une manip utile lorsqu’un système de cache est installé ? Est-ce qu’il ne faut pas de toute manière taper F5 pour visualiser une modif de CSS ? Que des questions…

  3. En effet, ça évite quelques petits problèmes.

    Mais je vais faire le chieur =D On pourrait avoir un petit exemple avec un wp_enqueue_script ?

  4. Je vais faire le chieur : wp_enqueue_script() sur un CSS ? #lol
    Et je pense que les style.css du thème est à mettre “en dur” dans le header.php du thème non ? #lechieur

  5. Ouai bon ok, tout le monde à compris que je voulais dire wp_enqueue_style =D

    Je suis d’accord avec le fichier du thème, mais si tu dois en ajouter d’autres avec une dépendance, etc. Idem pour les fichiers JS.

  6. @Li-an : L’astuce est totalement indépendant des plugins de cache. Elle permet de modifier les fichiers mis en cache par les navigateurs !

    Ce qui évite pour le coup de faire le fameux F5 pour refresh le cache navigateur :)

  7. Non pas besoin, on précise la nouvelle version du fichier au navigateur grâce à la date de sa dernière modification.

    Donc quand tu vas modifier ton fichier, la version du fichier sera différente et le navigateur va comprendre qu’il doit mettre à jour son cache avec cette version là.

  8. “…si vous mettez votre à jour un fichier CSS…” :
    il manque des mots dans la phrase , non ?

  9. Salut à tous.
    @JONATHAN BUTTIGIEG : j’enqueue pas le style principal – en revanche peut-être que pour des fichiers js ce serait mieux.
    @JULIO POTIER : :)
    @LI-AN : en effet tu as raison (peut-être que la phrase peut porter à confusion) mais parfois le refresh ne suffit même pas quand on a un système de cache ce qui devrait toujours être le cas d’ailleurs… La même chose avec certaines configurations. J’ai mis en place cette solution parce que j’en avais marre de vider le cache de mes sites.
    @STEF : non je ne crois pas mais si c’est pas très français désolé.

  10. Euh oui mais une fois mon fichier .css modifié et uploadé, faut bien faire F5, sinon … ça bouge pas :|
    F5 c’est juste refresh sur PC, c’est Ctrl+F5 qui force un no cache.

  11. Euh faudrait faire des tests parce que normalement la navigateur check auto la dernière version préciser dans l’url du fichier.

  12. Oui mais faut bien reload la page pour que le lien du CSS soit modifié, donc F5 ^^

  13. “si vous mettez à jour votre fichier CSS”

    “un”
    +
    “à jour” “votre”
    =
    “si vous mettez votre à jour un fichier CSS”
    #math

  14. Bonjour à tous

    J’ai pour ma part, un léger bug.
    Il ne m’affiche pas la taille !
    Pire, il ne trouve même pas le fichier avec la fonction :
    file_exists(get_bloginfo(‘stylesheet_url’))
    Le safe_mod est à Off pour information.
    Ce tip, très intéressant du reste, ne semble pas marcher sur tous les serveurs.

  15. @jonathan : j’étais justement en train d’écrire cela. Effectivement sans style.css pas de thème.

  16. @Julio : la taille du fichier fait 2kb

    @Julio & @Jonathan : le but était de me faire un return car la taille n’étant pas trouvé, je me suis posé la question de savoir si le fichier existait vraiment ; mais comme le dit si bien Julio, et comme je n’ai pas réfléchi, il faut de toutes façons un path ;)

    Cependant, je confirme que
    filemtime( get_stylesheet_directory() . ‘/style.css’) fonctionne alors que get_bloginfo(‘stylesheet_url’) ne fonctionne pas sur mon serveur…

  17. je fais mon boulet aujourd’hui :p
    Vous aurez compris que je voulais écrire filemtime(get_bloginfo(‘stylesheet_url’))

  18. @fmarie : la taille ? taille du fichier ? De quelle taille parles-tu, on ne parle pas de taille ici :|
    Pour file_exists() il faut lui fournir un path, et tu lui donnes une url, donc normal qu’il n’y arrives pas.
    safe_mode à off, donc tu es en php <5.3 mais je ne vois pas le rapport.

  19. @FMARIE : j’ai testé, c’est un problème de path chez toi. Après cela dépend de ta config, par exemple si c’est un child theme…

  20. @JmLaPaM : 1) Oui, c’est surement une conf de mon serveur.
    2) Non c’est un thème parent
    3) Le but est de donner une solution alternative si cela arrivait à quelqu’un d’autre ;)

    @Julio : J’ai testé avec get_stylesheet_uri() et cela ne fonctionne pas non plus

  21. @FMarie : euh attention file_exists(get_bloginfo(‘stylesheet_url’)) renvoi un booléen ! Ca n’affiche pas le lien vers le fichier CSS du thème.

    Et d’ailleurs pourquoi utiliser file_exists() ? Le fichier CSS du thème style.css doit forcément exister sinon on ne peut pas déclarer le thème :)

  22. Utilisez “get_stylesheet_uri()”, ça devrait passer pour un theme parent ET enfant je pense (non testé, je viens de lire le codex)

  23. @FMARIE : comme j’utilise pas mal les child theme en général j’utilise get_stylesheet_directory_uri()

  24. Personnellement, j’utilise une autre approche :
    J’injecte le paramètre `ver` via le filtre `stylesheet_uri`, mais cela implique que la feuille de style soit appellée via la fonction `get_stylesheet_uri()` dans le fichier `header`.

    Couplée à une fonction maison qui récupère la version du thème (info version dans les en-têtes de la feuille de style), il me suffit de modifier la version du thème pour forcer la mise à jour coté client.
    Utilisée pour fournir le paramètre `$ver` des fonctions `wp_enqueue_style` et `wp_enqueue_script` pour les assets du thème, une mise à jour de la version permet la mise à jour automatique de TOUS les assets du thème ;)

    http://github.com/Seebz/Snippets/blob/master/Wordpress/functions/wp_theme_version.php

  25. @Seebz : Pas mal cette idée. Par contre, cela implique plutôt l’utilisation d’un thème gratuit ou payant. En tant que développeur, je préfère me basé sur la date de dernière modification plutôt modifier à chaque la version de mon propre thème.

  26. Salut à tous,

    mon serveur m’a conseillé cette page pour pouvoir accélérer la lecture de mes css.
    Mais (oui je suis novice) ou est-ce que je dois placer cette ligne de code ?

    Merci et bonne journée

  27. @BigBook: Cela dépend de votre thème. Vous devez chercher les appels à vos fichiers CSS et JavaScript.

  28. @Bigcook: Il suffit de chercher les balises correspondants aux fichiers CSS de votre thème.

  29. Bon c’est pas tout a fait ce que je cherchais, moi je voulais justement forcer la mise en cache de mon css. Mais une fois que j’aurais reussi a faire ca, j’utiliserais le numero de version pour la mise a jour de celui ci :)

    Merci