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

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

filemtime()スタイルシートのをバージョンパラメータとして追加します。たとえば、デフォルトのスタイルシートがcss/default.cssand css/default.min.css（notstyle.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を強くお勧めします。ファイルを監視し、ファイルが変更されるたびに即座に更新します。また、開いている複数のブラウザ間でスクロール位置、フォーム送信などを同期できます。とてもかっこいい。

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

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

必要なのは、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ファイルで機能します-これが役立つことを願っています;）

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

この質問には回答が受け入れられていることは知っていますが、その回答は手元の問題に対してまだ複雑すぎて、ユーザーによっては実際には間違っているかもしれないと思います（しかし、違反はありません） （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 usersをtrue設定することです。

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

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

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

define('DONOTCACHEPAGE', true);

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

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

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

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

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

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

define( 'WP_CACHE', false );

参照：codex.wordpress.org

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

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