web-dev-qa-db-ja.com

開発中のキャッシングをどのように避けますか？

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

csscachedevelopment-strategy
31
cboettig

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

32
fuxia

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

それで...それについて考えた後、私は新しいウェブサイトを開発しながらキャッシュを無効にする素晴らしい方法を見つけました...（そしてそれは簡単です）。

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

変更前： 

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ファイルに有効です - これが助けになれば幸いです;）

7
Sagive SEO

これは非常に単純に思えるかもしれませんが、あなたがあなたのサイトの開発部分を終えるまで単にキャッシングを無効にするのはどうですか？オンとオフを切り替えるのは簡単です。

6
mor7ifer

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

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

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

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

プラグインが行うことは、WordpressがどのようにHTMLファイルを作成し（PHPを介して）、コピーを保存するかを評価し、次回誰かが同じ投稿、ページ、その他を要求したときに、コピーを提供し、 PHPで生成されたHTMLを再度再評価する必要がないため、計算時間が節約され、ページの読み込みがより速くなります。 （それが明確であることを願っています。）

問題は、CSSファイルのURLのタイムスタンプをPHP関数経由でスラップしている場合、is a PHP評価HTML、およびwillはWPスーパーキャッシュによってキャッシュされます。ユーザーには元のタイムスタンプ評価のコピーが提供されるため、同じ投稿に対するすべてのリクエストのタイムスタンプは同じになります。 （間違っている場合は修正してください。）

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

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

4
Richard Neil Ilagan

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

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

define('DONOTCACHEPAGE', true);

各サイトには、URLに追加して新しいバージョンのページをロードするための固有のキーもあります。これは、[詳細設定]タブにあります。

さらに良い解決策に分割するには、開発環境と本番環境でWP Super Cacheが有効になっていないものを設定することを検討する必要があります（これも問題です）。

あなたの問題がCSS/JSファイルに関するものであれば、それから上記のm0r7if3rによるtoschoによる答えとその後のコメントを見てください。

2
Matthew Boynes

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

1
moettinger

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

1
fxfuture

Wpスーパーキャッシュについて述べたように、しかし一般的なWPキャッシュについてはwp-config.phpの中でこれを変更してください：

define( 'WP_CACHE', false );

参照： codex.wordpress.org

0
wpcoder