【WordPress】テーマのstyle.cssを変更したさいに疑似キャッシュクリアさせ、確実に最新状態を閲覧してもらいたいとき！

WordPressのテーマのstyle.cssは、header.php内で以下のようなphpで出力されている。

↓ php

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">

↓ 出力されるhtmlコード（※例はサイトurlがsample.comで、テーマ名がsample_themeだったとき）

<link rel="stylesheet" type="text/css" href="http://sample.com/wp-content/themes/sample_theme/style.css">

このstyle.cssを変更した場合、普通は.cssのあとに更新日付をパラメータ名にして付与し、style.css?20230728のようにすることで、

ブラウザのキャッシュに残っっているstyle.cssとは別のファイルと認識することで、擬似的にキャッシュをクリアできる。

ただし、先ほどの一つ目のテンプレートタグのように

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>?20230728">

のように記述してもこれがだめ！

テンプレートタグの挙動なのか、末尾につけた

?20230728

がきれいにパージされて、それがない形のstyle.cssのみが出力されてしまう。

結果、擬似的にキャッシュがクリアされないで、古いスタイルで表示される。

なので、あくまでphpで出力するときはphpで解決できる。以下のように書き換える。

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>">

こうすることで、フロントでも

style.css?20230728

が出力される。(結果、ブラウザのキャッシュクリアをせずとも、ブラウザが別のcssとして更新して表示してくれる。

※余談ですが、そもそも本記事で取り上げたテーマディレクトリ直下のstyle.cssファイルは、カスタマイズして変更しない方が本当は管理上よいです。

なぜかというと、Wordpressの”テーマのアップデート”を行った際に、この、テーマ直下のstyle.cssというファイルが新バージョンに自動更新されてしまい、自分の行ったカスタマイズ内容が全て消えるからです。

以上です！