Comment évitez-vous 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 à l'aide de l'option fournie, supprimer le cache de mon navigateur, mais certaines modifications apportées à CSS ou aux widgets ne sont pas actualisées. J'essaie d'autres solutions de rechange, telles que le changement de navigateur ou d'ordinateur, mais il doit exister un flux de travail plus simple permettant de vérifier que les modifications que j'ai apportées ont été visualisées, et non un format mis en cache auparavant. Quelle est la meilleure solution pour cela?
Ajoutez la filemtime() de votre feuille de style comme paramètre de version. Disons que votre feuille de style par défaut est en css/default.css et css/default.min.css ( pas style.css ). Lorsque nous enregistrons une feuille de style sur wp_loaded ( pas init ), nous pouvons passer une version en tant que quatrième paramètre. Ce sera la dernière fois 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 vous recommande fortement Browsersync . Il surveillera vos fichiers et les mettra à jour instantanément à chaque changement. Il peut également synchroniser la position de défilement, les soumissions de formulaires, etc. entre plusieurs navigateurs ouverts. Très sympa.
Après avoir recherché une solution simple plusieurs fois, 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 qu'il nous faut, c'est 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 modifications:
wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css?v='.time(), array(), false, 'all' );
C'est ce que nous avons ajouté:
?v='.time()
Explication:
Nous ajoutons un numéro de version dynamique au fichier css, ce qui oblige le navigateur à charger le nouveau fichier 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 chargera pour les utilisateurs qui reviennent encore et encore.
Cette technique fonctionne pour les fichiers css & js - espérons que cela aide;)
Cela peut sembler excessivement simple, mais pourquoi ne pas désactiver la mise en cache jusqu'à ce que vous ayez terminé la partie développement de votre site? C'est plus que simple d'allumer et d'éteindre.
Je sais que la réponse à cette question a été acceptée, mais je pense que cette réponse est encore trop compliquée pour le problème en question et peut même être incorrecte en fonction de l'utilisateur (aucune infraction cependant), alors j'ai pensé que je partagerais toujours comment je contourne la mise en cache lorsque je fais mon dev (pas seulement avec Wordpress).
La plupart des navigateurs modernes ont quelque chose appelé Mode incognito . Dans ce mode, rien sur votre ordinateur n'est mis en cache. Chaque actualisation correspond donc à un téléchargement récent du serveur. Dans Internet Explorer, vous appuyez sur Ctrl + Shift + P. Dans Firefox et Chrome, vous appuyez sur Ctrl + Shift + N.
Si votre navigateur ne dispose pas du mode navigation privée, vous pouvez normalement forcer une recharge dure en appuyant sur Ctrl + F5 pour IE ou Ctrl + Shift + R sur Firefox et Chrome.
En ce qui concerne votre question sur les fichiers CSS (et essentiellement sur tous vos fichiers de ressources, tels que 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'affecte pas la manière 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 en stocke une copie, de sorte que la prochaine fois que quelqu'un demande le même article, la même page ou quoi que ce soit, il sert la copie et n'a pas à le faire. réévaluez à nouveau le code HTML généré par PHP et économisez ainsi un peu de temps de calcul en chargeant vos pages beaucoup plus rapidement. (J'espère que c'est clair.)
Le problème, c’est que si vous frappez un horodatage sur l’URL de vos fichiers CSS via une fonction PHP, cela signifie que est a PHP évaluation en HTML, et que sera sera mis en cache par WP Super Cache. Toutes les demandes adressées au même message auront le même horodatage, car une copie de l’évaluation d’horodatage originale est remise aux utilisateurs. (Corrige moi si je me trompe.)
La bonne façon de contourner WP la mise en cache de Super Cache consiste à définir l'option Don't cache for known users sur true dans la page de configuration du plug-in.
Enfin (et ceci est une préférence personnelle, comme je suis un vrai collant en matière de codage), le recours à des rechargements incognito ou forcés ne vous obligera pas à ajouter des balises inutiles sur vos pages HTML. Bien sûr, l'ajout d'un horodatage n'ajoute que 13 octets environ par fichier statique et par demande, mais bon, comme je l'ai dit, je suis un stickler pour ce genre de choses. Il reste encore 13 octets inutiles.
Gosh, beaucoup de façons de répondre à celui-ci! D'abord et avant tout, vous avez demandé deux choses différentes: WP Super Cache et fichiers CSS. Celles-ci sont mises en cache différemment, à différents endroits. Il est donc important de savoir où se trouve votre problème.
Si WP Super Cache, vous pouvez définir la constante DONOTCACHEPAGE dans votre fichier functions.php pendant le développement pour empêcher WP Super Cache de rien mettre en cache. N'oubliez pas de supprimer ceci 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.
Si vous envisagez une solution encore meilleure, vous devriez envisager de configurer un environnement de développement et un environnement de production où votre environnement de développement ne dispose pas de WP Super Cache (à nouveau, en supposant que ce soit votre problème).
Si votre problème concerne les fichiers CSS/JS, reportez-vous à la réponse de toscho et au commentaire de m0r7if3r ci-dessus.
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, puis sous "Réseau", sélectionnez "Désactiver le cache".
HyperCache désactive la mise en cache lorsque vous êtes connecté en tant qu'administrateur. Vous ne savez pas si WP Super Cache a les mêmes fonctionnalités.
Comme indiqué pour le super cache wp, mais pour le WP général, la mise en cache dans wp-config.php Changez en ceci:
define( 'WP_CACHE', false );
Référence: codex.wordpress.org