1. TOP
  2. WordPress
  3. CSS変更時のキャッシュクリア【開発中のみ】

CSS変更時のキャッシュクリア【開発中のみ】

CSSを変更した際にブラウザキャッシュをクリアしないと反映されない

こんな煩わしさに対して、これまでは
〜/style.css?20210112

などいちいち書き直したりしていました。

動的に変更されるような記事も見て試したりしてましたが、うまく行かないことも多く、
ftp等でアップロードする際にfunctions.phpとstyle.cssをアップロードしていた・・・
（面倒ではあるがある意味慣れてしまっていた・・・）

しかし、開発途中である場合はしょっちゅう変更があるので面倒。。。。。

色々と調べたり試した結果、とてもシンプルで簡単な方法に落ち着いた。
というわけで、自身のための 覚書メモ

function Load_style(){
	wp_enqueue_style('style',
	get_template_directory_uri().'/assets/css/style.min.css?'.date('YmdHi')
	);
}
add_action('wp_enqueue_scripts','Load_style');

functions.php
※wp_head()で読み込み時の場合



ただし、これはページを読み込む毎に
ヘッダーでは

<link rel='stylesheet' id='style-css'  href='https://blogurl/wp-content/themes/themesname/assets/css/style.min.css?202101120735' type='text/css' media='all' />

このように吐き出されるため、逆にキャッシュは一切効かなくなる。
（読み込む毎に現在の時間になるためページを読み込む毎に〜/style.min.css?202101120735’の数字が変わっているのが確認できる。）



よって、納品時には今までのように

function Load_style(){
	wp_enqueue_style('style',
	get_template_directory_uri().'/assets/css/style.min.css?20100112')
	);
}
add_action('wp_enqueue_scripts','Load_style');

というように、最後には戻しておく必要があるので注意。

開発途中での小技という感じですね。

SENSITIVITY