スポンサーリンク

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' />

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

ご注意

当ブログの記事は全て記載した時点での内容となります。ご覧頂いた時期によっては情報が古くなっていることがあります。

HTML・CSS雑記
スポンサーリンク
periodをフォローする

コメント

タイトルとURLをコピーしました