CSSのキャッシュを読み込み時に更新させる

私のchromeだけかもしれませんが(^^;)、最近cssのキャッシュがきつくて、[ctrl]+[F5]キーを押さないと更新されません。
これが面倒(というほどのものでもないけど)なので、ちょっと細工してみました。

私はWordPressで親子テーマを使っているので次のようにしてみました。

functions.phpに記載しているCSSの読み込みで、子テーマのcssの最後にタイムスタンプの時間を付け加えます。
こうすれば読み込み時にファイル名が変わってるので強制的に再読み込みされるというわけです。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css?'. filemtime( get_stylesheet_directory() . '/style.css'), array('parent-style') );
}

4行目のstyle.cssのあとに「?」を付けて、ファイルのタイムスタンプの時間を加えます。
すると次のように表示されるようになります。

<link rel='stylesheet' id='child-style-css'  href='https://sample.jp/wp/themes/theme-child/style.css?1489823585' type='text/css' media='all' />

でも、これだと「?」のあとの数字が長いので、時分だけにしたいと思います。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css?'. date("Hi", filemtime( get_stylesheet_directory() . '/style.css')), array('parent-style') );
}

これだと次のように表示されます。

<link rel='stylesheet' id='child-style-css'  href='https://sample.jp/wp/themes/theme-child/style.css?0753' type='text/css' media='all' />

更新が時分まで一致することは確率的に低いかなということで。。。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です