Comment éviter la mise en cache pendant le développement?

Existe-t-il un moyen simple d'empêcher toute mise en cache lors du test de l'apparence des modifications apportées au site? J'utilise WP Super Cache. Je peux supprimer son cache en utilisant l'option fournie, supprimer le cache de mon navigateur, et encore quelques modifications apportées aux CSS ou aux widgets ne sont pas actualisées. J'essaie d'autres solutions de contournement comme le changement de navigateur ou d'ordinateurs, mais il doit y avoir un flux de travail plus rationalisé où je peux m'assurer que je consulte les modifications que j'ai apportées et pas un format antérieur mis en cache? Quelle est la meilleure solution pour cela?

Ajoutez le filemtime()de votre feuille de style comme paramètre de version. Disons que votre feuille de style par défaut est dans css/default.csset css/default.min.css( passtyle.css ). Lorsque nous enregistrons une feuille de style sur wp_loaded( pasinit ), nous pouvons passer une version comme quatrième paramètre. Ce sera la dernière heure modifiée et changera donc chaque fois que nous changerons le fichier.

$min    = WP_DEBUG ? '': '.min';
$file   = "/css/default$min.css";
$url    = get_template_directory_uri() . $file;
$path   = get_template_directory() . $file;
$handle = get_stylesheet() . '-default';

// Overridden?
if ( is_child_theme() && is_readable( get_stylesheet_directory() . $file ) )
{
    $url  = get_stylesheet_directory_uri() . $file;
    $path = get_stylesheet_directory()     . $file;
}

$modified = filemtime( $path );

add_action( 'wp_loaded', function() use ( $handle, $url, $modified ) {
    wp_register_style( $handle, $url, [], $modified );
});

add_action( 'wp_enqueue_scripts', function() use ( $handle ) {
    wp_enqueue_style( $handle );
});

Si vous utilisez Node.js et Grunt, je recommande fortement Browsersync . Il surveillera vos fichiers et les mettra à jour instantanément chaque fois qu'ils changeront. Il peut également synchroniser la position de défilement, les soumissions de formulaires et bien plus sur plusieurs navigateurs ouverts. Très sympa.

Après avoir cherché plusieurs fois une solution simple, j'ai décidé de trouver quelque chose qui fonctionne!

alors ... après y avoir réfléchi, j'ai trouvé un excellent moyen de remplacer la mise en cache lors du développement de nouveaux sites Web ... (et c'est facile).

Ce dont nous avons besoin, c'est de dire à wp qu'il s'agit d'une nouvelle version CSS comme celle-ci ...

Avant les changements:

wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css', array(), false, 'all' );

Après les changements:

wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css?v='.time(), array(), false, 'all' );

Voici ce que nous avons ajouté:

?v='.time()

Explication:
Nous ajoutons essentiellement un numéro de version dynamique au fichier css, ce qui oblige le navigateur à charger le nouveau css chaque fois que nous le mettons à jour.

N'oubliez pas de le supprimer après votre développement, sinon votre mise en cache ne fonctionnera pas pour ce fichier et il se chargerait pour les utilisateurs de retour encore et encore.

Cette technique fonctionne pour les fichiers css & js - espérons que cela aide;)

Cela peut sembler trop simple, mais que diriez-vous de simplement désactiver la mise en cache jusqu'à ce que vous ayez terminé la partie développement de votre site? Il est plus que simple d'activer et de désactiver.

Je sais que cette question a reçu une réponse acceptée, mais je pense que cette réponse est encore trop compliquée pour le problème en question, et peut en fait être incorrecte selon l'utilisateur (pas d'infraction cependant), alors j'ai pensé que je partagerais comment je contourne la mise en cache lorsque je fais mon développement (pas seulement avec Wordpress).

La plupart des navigateurs modernes ont ce qu'on appelle le mode incognito . Dans ce mode, rien dans votre ordinateur n'est mis en cache, donc chaque rafraîchissement est un nouveau téléchargement d'ardoise sur le serveur. Dans Internet Explorer, vous appuyez sur Ctrl + Shift + P. Dans Firefox et Chrome, vous appuyez sur Ctrl + Shift + N.

Si votre navigateur n'a pas de mode incognito, vous pouvez normalement forcer un rechargement dur en appuyant sur Ctrl + F5pour IE, ou Ctrl + Shift + Rsur Firefox et Chrome.

Quant à votre question concernant les fichiers CSS (et essentiellement tous vos fichiers de ressources, comme les images et les fichiers Javascript), ceux-ci ne sont en aucun cas mis en cache par WP Super Cache. Vos paramètres et / ou l'utilisation de ce plugin n'affectent pas la façon dont ces fichiers sont servis. Ce qui met en cache ces fichiers, c'est votre navigateur , et c'est la raison pour laquelle vous effectuez un rechargement dur.

Le plugin évalue la façon dont Wordpress construit vos fichiers HTML (via PHP) et stocke une copie, de sorte que la prochaine fois que quelqu'un demandera le même message, la même page ou autre, il servira la copie et n'aura pas à réévaluez à nouveau le code HTML généré par PHP et économisez ainsi du temps de calcul, en chargeant vos pages beaucoup plus rapidement. (J'espère que c'est clair.)

Le problème est que si vous appliquez un horodatage sur l'URL de vos fichiers CSS via une fonction PHP, il s'agit d' une évaluation PHP en HTML et qui sera mise en cache par WP Super Cache. Chaque demande adressée au même article aura le même horodatage car les utilisateurs reçoivent une copie de l'évaluation d'horodatage d'origine. (Corrige moi si je me trompe.)

La bonne façon de contourner la mise en cache de WP Super Cache est de définir l'option Don't cache for known userssur truedans la page de configuration du plugin.

Enfin (et c'est une préférence personnelle, car je suis un vrai bâton en matière de codage), le recours à l'utilisation de rechargements incognito ou forcés ne vous obligera pas à ajouter un balisage inutile sur vos pages HTML. Bien sûr, l'ajout d'un horodatage n'ajoute qu'environ 13 octets par fichier statique par demande, mais bon, comme je l'ai dit, je suis un adepte de ce genre de choses. C'est toujours 13 octets inutiles.

Mon Dieu, de nombreuses façons de répondre à celle-ci! Tout d'abord, vous avez posé des questions sur deux choses différentes: WP Super Cache et les fichiers CSS. Ceux-ci sont mis en cache différemment, à différents endroits, il est donc important de reconnaître où se trouve votre problème.

Si WP Super Cache, vous pouvez définir la constante DONOTCACHEPAGEdans votre functions.php pendant le développement pour empêcher WP Super Cache de mettre quoi que ce soit en cache. N'oubliez pas de supprimer cela au lancement!

define('DONOTCACHEPAGE', true);

Chaque site a également une clé unique à ajouter à l'URL pour charger une nouvelle version de la page, que vous pouvez trouver dans l'onglet "Avancé", je crois.

En le décomposant en une solution encore meilleure, vous devriez envisager de configurer un environnement de développement et un environnement de production, où WP Super Cache n'est pas activé dans votre environnement de développement (encore une fois, en supposant que c'est votre problème).

Si votre problème concerne les fichiers CSS / JS, consultez la réponse de toscho et le commentaire suivant de m0r7if3r ci-dessus.

HyperCache désactive la mise en cache lorsque vous êtes connecté en tant qu'administrateur. Je ne sais pas si WP Super Cache a les mêmes fonctionnalités.

Si vous utilisez Chrome (ce que je suggère fortement), ouvrez Inspector, cliquez sur l'icône des paramètres dans le coin inférieur droit, et sous "Réseau", sélectionnez "Désactiver le cache".

Comme indiqué pour le super cache wp, mais pour la mise en cache WP générale dans wp-config.php Changer en ceci:

define( 'WP_CACHE', false );

Référence: codex.wordpress.org

Vous pouvez utiliser cet extrait https://gist.github.com/jhayiwg/92bae4330aeb738a98022d7ab63ce9b1

Il générera une nouvelle version de votre thème actif css et js à chaque fois que vous chargez la page