WordPress サイトを運営していると、CSS や JavaScript の変更後にブラウザでリロードしても、変更が反映されないということがあります。これはブラウザが以前のバージョンのファイルをキャッシュしているために起こります。この問題を解決するためには、ブラウザに新しいファイルを読み込ませる必要があります。
クエリパラメータを利用したキャッシュのクリア
ファイル名の後にクエリパラメータを付与することで、ブラウザのキャッシュを回避することができます。例えば、CSSファイルに対しては以下のように記述します。
- 付与前:
<link rel='stylesheet' href='style.css'> - 付与後:
<link rel='stylesheet' href='style.css?ver=210714045333'>
この方法では、ファイルの更新日時をクエリパラメータとして付与します。これにより、ファイルが更新されるたびにURLが変わるため、ブラウザは新しいファイルと認識し、キャッシュされた古いファイルを無視します。
WordPressのfunctions.phpでの対応
WordPressでは、functions.php ファイルを利用してスタイルシートや JavaScript ファイルを読み込む際に、自動的にクエリパラメータを付与することができます。 wp_enqueue_style や wp_enqueue_script 関数を使用する際に、バージョン情報としてファイルの更新時間を指定します。
wp_enqueue_style( 'スタイル名', get_template_directory_uri() . '/style.css', array(), date('ymdHis', filemtime( get_stylesheet_directory() . '/style.css')) );この方法を用いることで、スタイルシートやJavaScriptファイルが更新されるたびに、自動的にブラウザのキャッシュを回避し、最新のファイルが読み込まれるようになります。
まとめ
WordPress サイトで CSS や JavaScript の変更がブラウザに反映されない問題は、クエリパラメータの付与や functions.php の適切な設定によって解決することができます。これらの方法を活用することで、ユーザーに常に最新のコンテンツを提供することが可能になります。
created by Rinker
¥3,536
(2024/04/27 11:53:01時点 Amazon調べ-詳細)
