CSS、JavaScript などをブラウザに強制更新する: 総合ガイド

XAMPP 経由で WordPress で開発する場合、CSS やスクリプトに変更を適用するときに遅延が発生する可能性があります、その他の要素。変更を確認するにはブラウザーを頻繁に切り替える必要があるため、これによりフラストレーションが生じる可能性があります。ただし、この問題を解決するには効果的な方法がいくつかあります。

一般的な解決策

最も簡単な解決策は、Ctrl F5 (または Mac の場合は Ctrl Shift R) を押してキャッシュを強制的に再ロードすることです。このアクションは、キャッシュされたデータを無視し、サーバーから新しいリソースを直接取得するようにブラウザに指示します。

PHP ソリューション

PHP ベースのサイトの場合、ヘッダーを使用してキャッシュを無効にすることが実行可能なオプションです。有効期限を過去の日付に設定すると、ブラウザに強制的にコンテンツを新しいものとして扱うことができます。次のコード スニペットはこれを実現します。

header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

Chrome ソリューション

Chrome のデベロッパー ツール内で、歯車アイコンをクリックして [キャッシュを無効にする] を選択すると、キャッシュを無効にすることができます。これにより、Chrome はキャッシュされたリソースに依存できなくなり、CSS、JavaScript、その他のアセットの最新バージョンを強制的に取得するようになります。

Firefox の解決策

Firefox では、次の方法でキャッシュを手動で無効にすることができます。 URL バーに「about:config」と入力し、「network.http.use-cache」設定を「false」に設定します。これにより、Firefox はキャッシュが無効になっている Chrome と同様に動作するようになります。

これらの解決策のいずれかを実装することで、ブラウザの更新が遅れる問題を排除し、常に最新の変更を表示できるようにすることができます。 CSS、スクリプト、その他のコード。