ブラウザのキャッシュ機能を有効にしつつ、style.cssが更新されたらキャッシュをクリアする方法

↓過去記事

style.cssが更新されたらキャッシュをクリアする方法

日時を利用したキャッシュクリアだとブラウザでアクセスするごとに、cssファイルを「あ、違うファイルやん」ってブラウザが解釈してくれる反面ブラウザのキャッシュ機能が完全に無視されてしまう↓

//　×日時を利用した書き方（出力：?=20180730172452）
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css?=<?php echo date_i18n('YmdHis'); ?>">

だからファイルが更新されたらキャッシュをクリアするように書き直します↓

//　○ファイルが更新されたら書き換わる書き方（出力：～?1529642699）
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" media="all">

これでブラウザのキャッシュ機能を使用しつつstyle.cssが更新されたらキャッシュはクリアされます。

子テーマを使ってる場合

子テーマを使っている場合のstyle.cssのキャッシュクリアの記述です。
子テーマを使う際に、子テーマのfunction.phpに必ず書くコードをカスタマイズしてます。

//　子テーマのfunction.phpに記述
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css?'. date("ymdHis", filemtime( realpath("wp-content/themes/親テーマ名/style.css"))), false);
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css?'. date("ymdHis", filemtime( dirname(__FILE__) . '/style.css')), array('parent-style') );
}

これで親テーマと子テーマのstyle.cssが更新されたらクエリーを自動更新してキャッシュが消去されるようになります。

↓子テーマの作り方を紹介しています。

style.css内で「@import url」でcssを読み込んでる場合

補足になるけど、親テーマのstyle.cssで@import urlでcssファイル読み込んでいると、読み込んでいるcssファイルを更新しても親テーマのstyle.cssのクエリは変わらないっぽい

//　style.css内の記述
//　以下読み込んでるcssファイルを更新してもstyle.cssのクエリーは変わらない
@import url(css/common.css);
@import url(css/header.css);
@import url(css/footer.css);

だから、

• 日時を利用したキャッシュクリアを使う（ブラウザのキャッシュ機能が使えない）
• style.cssに読み込んでるcssファイルを全部まとめる
• header.phpにcssファイル1つずつ直書き（それぞれにキャッシュクリアの記述）

のどれかで対応する必要がある。

手っ取り早いのは、日時をクエリーに設定するやつなんだけど1番最初に否定してるからなー
「@import url」は読み込み速度が遅いみたいで、style.cssに全部まとめるのがいいみたい…

参考

▼【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる
https://dev.classmethod.jp/ria/html5/css-import-no-parallel-load-sass/