開発中にキャッシュを回避するにはどうすればよいですか?


31

サイトへの変更の外観をテストするときに、すべてのキャッシュを防ぐ簡単な方法はありますか?WP Super Cacheを使用しています。提供されたオプションを使用してキャッシュを削除し、ブラウザーのキャッシュを削除しても、CSSまたはウィジェットへの一部の変更は更新されません。ブラウザーやコンピューターの切り替えなど、他の回避策を試してみますが、キャッシュされた以前の形式ではなく、行った変更を確認できる、より合理化されたワークフローが必要です。これに最適なソリューションは何ですか?


CSSのためにこれを行うためのプラグインいくつかあるようです。本当に必要ですか?これらのプラグインは、ブラウザーのキャッシュをクリアしてもできないことをしますか?
cboettig

私の場合、DNSプロバイダー(cloudflare)によって作成されたキャッシュをクリアする必要がありました。ただし、以下の提案に感謝します。
-cboettig

Chromeブラウザを使用しています。そのシークレットウィンドウは、開発中にブラウザレベルのキャッシュの問題に遭遇したときに便利です。
ジョセフクランダイ

このプラグインがあなたを助けることを願っています:wordpress.org/plugins/prevent-browser-caching
Kostya Tereshchuk

回答:


32

filemtime()スタイルシートのをバージョンパラメータとして追加します。たとえば、デフォルトのスタイルシートがcss/default.cssand css/default.min.cssnotstyle.css)にあるとします。スタイルシートをwp_loadedではなくinit)登録すると、バージョンを4番目のパラメーターとして渡すことができます。これは最終変更時刻であるため、ファイルを変更するたびに変更されます。

$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 );
});

Node.jsとGruntを使用している場合、Browsersyncを強くお勧めします。ファイルを監視し、ファイルが変更されるたびに即座に更新します。また、開いている複数のブラウザ間でスクロール位置、フォーム送信などを同期できます。とてもかっこいい。


どうもありがとう。これは上記のプラグインのアプローチでもあるようです。私の場合、DNSプロバイダー(CloudFlare)がcssファイルをキャッシュしていたため、問題を解決できませんでした。そこでキャッシュをクリアする必要がありました。簡単な方法はないと思います。しかし一般的には、これがこの種の問題に対する最善の答えだと思うので、受け入れられたとマークします。再度、感謝します。
cboettig

開発中にローカルスタイルシートを使用しないのはなぜですか?
FUXIA

一部のクラウドキャッシングサービスは、8時間以上ファイルをハードキャッシュするため、バージョン管理のためのより良いサービスの実装(一部はこれを行う)、サービスの変更、またはそれらの使用の停止を要求する必要があります。
ウィック

@cboettig CloudFlareには、3時間ウィンドウのキャッシュを停止する開発モード設定があります。その後、3時間後に自動的にキャッシュを再開します。
ギルバート14

7

簡単な解決策を何度も検索した後、私は機能するものを見つけることにしました!

だから...それについて考えた後、新しいウェブサイトを開発しながらキャッシュをオーバーライドする素晴らしい方法を見つけました...(そしてその簡単な)。

必要なのは、wpにこのような新しいCSSバージョンであることを伝えることです...

変更前:

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

変更後:

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

これが追加されたものです。

?v='.time()

説明:
基本的に、CSSファイルに動的なバージョン番号を追加して、更新するたびにブラウザーに新しいCSSを強制的にロードさせます。

開発が完了したら削除することを忘れないでください。削除しないと、キャッシュはこのファイルに対して機能せず、繰り返しユーザーにロードするためにロードされます。

この手法はcssおよびjsファイルで機能します-これが役立つことを願っています;)


かなりいいですが、バージョン4のパラメーターでtime()を使用してください。それはあなたに与えます:wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css', array(), time(), 'all' );
デイブ

4番目のパラメーターとして時間を使用すると、そのバージョンを保持するためにchromeが停止する場合があります。これは、ライブサイトでの作業中に他のすべてをキャッシュする場合に特に当てはまります。この方法で、「新しい」ファイルをchromeに送信し、その「古い」バージョンを(他のリソースに設定されているように)しばらく保持しようとする代わりに使用します。
Sagive SEO

いいえ、クロムでうまく動作します、私は昨日それを使用していました。
デイブ

つまり、htaccessまたはプラグインでキャッシュ/有効期限を設定していないことを意味します。しかし、あなたのために働くものは何でも;)
Sagive SEO

6

これは非常に単純に見えるかもしれませんが、サイトの開発部分が完了するまで、キャッシュを無効にするだけではどうでしょうか。オンとオフを切り替えるのは簡単です。


2
+1-Firefoxの「Web Developer」ツールバーを使用して、キャッシュを非常にすばやく無効にすることができます(特に)
シェーン

ありがとう-ブラウザのキャッシュを無効にするだけでいいですか?WP superCacheは、キャッシュされたコンテンツを提供しますか?DNSサービスのキャッシュですら、すべてのキャッシュ(WP、ブラウザー、DNSなど)を個別に無効にする必要があるかどうかはわかりません。
cboettig

ソータは依存します、あなたはそれで遊んで、あなたの構成のために何をする必要があるかを理解する必要があります。
mor7ifer

彼と一緒に、それを無効にするだけです、それが私がしていることです。
マット

4

この質問には回答が受け入れられていることは知っていますが、その回答は手元の問題に対してまだ複雑すぎて、ユーザーによっては実際には間違っているかもしれないと思います(しかし、違反はありません) (Wordpressだけでなく)開発時にキャッシュをバイパスする方法。

最新のブラウザには、シークレットモードと呼ばれるものがあります。このモードでは、コンピューター内の何もキャッシュされないため、更新するたびにサーバーから新しいスレートがダウンロードされます。Internet Explorerでを押しCtrl + Shift + Pます。FirefoxおよびChromeでは、を押しCtrl + Shift + Nます。

ブラウザにシークレットモードがない場合は、通常Ctrl + F5、IEの場合、またはCtrl + Shift + RFirefoxとChromeの場合、を押してハードリロードを強制できます。

CSSファイル(および本質的に、画像やJavascriptファイルなどのすべてのアセットファイル)に関する質問については、これらはWPスーパーキャッシュによってキャッシュされません。このプラグインの設定や使用は、これらのファイルの提供方法に影響しません。これらのファイルをキャッシュしているのはブラウザであり、それがハードリロードを行う理由です。

プラグインが行うことは、WordpressがどのようにHTMLファイルを(PHPを介して)構築し、コピーを保存するかを評価することです。 PHPで生成されたHTMLを再度再評価して、計算時間を節約し、ページをより速くロードします。(それが明確であることを願っています。)

もし、PHPの関数を介して、あなたのCSSファイルのURLのタイムスタンプにしているぴしゃり場合の問題点は、あるある HTMLとPHPの評価、そしてそれはなり WPスーパーキャッシュでキャッシュされます。ユーザーには元のタイムスタンプ評価のコピーが提供されるため、同じ投稿に対するすべてのリクエストのタイムスタンプは同じになります。(間違っている場合は修正してください。)

WP Super Cacheのキャッシュをバイパスする正しい方法は、プラグインの設定ページでオプションDon't cache for known userstrue設定することです。

最後に(これは個人的な好みであり、コーディングに関しては本物のこだわりです)、シークレットモードまたは強制的なハードリロードを使用することで、HTMLページに不要なマークアップを追加する必要はありません。もちろん、タイムスタンプを追加しても、リクエストごとに静的ファイルごとに約13バイトしか追加されませんが、ちょっと言ったように、私はこの種のものにこだわっています。まだ13バイトは不要です。


役に立つヒントをありがとう。残念なことに、私のソリューションではドメインネットワークサービスプロバイダーであるcloudflareのキャッシュをクリアする必要があったため、ここでの答えはいずれも正しいものではありませんでしたが、多くはまだ良い情報でした。
-cboettig

2

まあ、これに答える多くの方法!何よりもまず、WP Super CacheとCSSファイルという2つの異なることについて尋ねました。これらは異なる場所に異なる方法でキャッシュされるため、問題の場所を認識することが重要です。

WPスーパーキャッシュの場合、WPスーパーキャッシュがDONOTCACHEPAGE何かをキャッシュしないように、開発中にfunctions.phpで定数を定義できます。ただし、起動時にこれを削除することを忘れないでください!

define('DONOTCACHEPAGE', true);

各サイトには、ページに新しいバージョンをロードするためにURLに追加する一意のキーもあります。これは、「詳細」タブにあります。

さらに優れたソリューションに分解するには、開発環境と本番環境のセットアップを検討する必要があります。開発環境ではWPスーパーキャッシュが有効になっていません(これが問題であると仮定します)。

問題がCSS / JSファイルにある場合は、toschoによる回答と、上記のm0r7if3rによる後続のコメントを参照してください。


1

管理者としてログインしている場合、HyperCacheはキャッシュを無効にします。WP Super Cacheに同じ機能があるかどうかはわかりません。


はい、そのためのオプションがあります。
マシューボイン

1

Chromeを使用している場合(強くお勧めします)、Inspectorを開き、右下隅の設定アイコンをクリックし、[ネットワーク]で[キャッシュを無効にする]を選択します。


0

wpスーパーキャッシュについて述べたように、しかしwp-config.php これへの変更の一般的なWPキャッシングについて:

define( 'WP_CACHE', false );

参照:codex.wordpress.org


-1

このスニペットを使用できますhttps://gist.github.com/jhayiwg/92bae4330aeb738a98022d7ab63ce9b1

ページをロードするたびに、アクティブなテーマcssとjsの新しいバージョンが生成されます


関連するすべてのコードを含めて、ここに回答を投稿してください。参照用にのみ外部サイトを使用してください。あなたの投稿は他のサイトに行く必要なしに完全な答えを提供するべきです。サードパーティのサイトがダウンした場合、あなたの答えは役に立たなくなります。
cybmeta17年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.