少々混乱して悩んだので備忘録です。
サイト更新時にCSSキャッシュを破棄して確実に反映させる方法
サイトの読み込み速度を上げるためにCSSファイルの内容をキャッシュさせるというのは良くある話ですが、同時に、CSSファイルを書き換えたのにキャッシュのせいですぐに反映されないというのもまた良くある話です。
この場合、CSSファイルの名前を変更すれば別のファイルと認識されるのか、即時反映されます。
例えば、「style.css」を「a-style.css」みたいに変更するわけです。
これをやろうと思うとちょっと変更を加える度に毎回色々なところをリネームしなければなりません。非現実的です。
もしくは、キーボードの「Shift+F5」同時押しでスーパーリロードという手段もあります。
この方法も自分はそれで良いのですが、閲覧者の人はそもそも更新に気付くわけがありません。
そこで、CSSファイルにタイムスタンプを付けて更新の度に名前を自動変更するような形にしてしまいます。
これが一般的な方法だと思います。
具体的にどういうことかと言いますと、
上の画像のように「style.css」のあとに「？」を挟んで数字をくっつけるようにします。
この数字は年月日と更新時刻を元に生成されるのでタイムスタンプと呼ばれ、未来永劫被る事がありません(多分)。
ゆえに、更新する度に必ず名前が変わって最新のCSSとして読み込まれるようになるわけです。
書き方
<head>の中に書く方法です。
まずstyle.cssへのパスですが、子テーマを使っていると「echo get_stylesheet_uri();」を使ってこうなります。
テーマフォルダ直下にあることを前提にしていますのでご注意を。
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
見やすいようにhref=のところだけ抜き出してみます。
実際に書く時は最後の「>」を忘れないようにお気をつけ下さい。
href="<?php echo get_stylesheet_uri(); ?>"WordPressにおけるCSSへのパスは「bloginfo(‘stylesheet_url’);」という書き方が有名ですが、いつの間にか非推奨になっているそうなので上記の書き方の方が良いかと思います。
ここへ「？」と「タイムスタンプ」を加えます。
記述は「echo ‘?’ . filemtime( get_stylesheet_directory() . ‘/style.css’);」です。
href="<?php echo get_stylesheet_uri(); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>"
これでCSSを更新する度にタイムスタンプが加わり、即時反映されるようになります。
ここまではいいんです、ここまでは……。
他のCSSファイルは？
本題はこちらです。style.css以外のCSSファイルにもタイムスタンプを付けたい！
例えば、メディアクエリ用に作った「mediaq.css」というCSSファイルがあるとします。
その場合は「get_stylesheet_directory_uri();」というのを使ってこうなります。
href="<?php echo get_stylesheet_directory_uri().'/mediaq.css'; echo '?' . filemtime( get_stylesheet_directory() . '/mediaq.css'); ?>"mediaq.css は style.css と同じく、テーマフォルダ直下にあることを前提にしています。
もし「css」フォルダなどを作ってその中に入れているという場合は‘/mediaq.css’のところを‘/css/mediaq.css’のように変更して下さい。
以上です。
