WordPressでCSSのキャッシュを自動リロードさせる方法

はっと気が付いたのですが、CSSって更新しても、キャッシュに残っている場合、スーパーリロードさせないと新しいのが反映されないんですよね。ここもちょこちょことCSS書き足しているのですけれどね・・・。自分だけで見ているのなら、その都度スーパーリロードをかければいいのですが、公開していることを考えるとどうすればいいのか?「皆様、何月何日何時、CSS更新しましたので、キャッシュのリロードお願いします」なんてわけにもいきませんしね。

CSSのキャッシュを自動リロードさせるには、どうすればいいのか?
CSSファイルの更新日時を取得し、それに合わせてリロードするよう、htmlのheadに指示を書き込むことで解決できるみたいです。

やりたいこと

CSS更新時、クライアント側のキャッシュを自動的にリロードさせる

利用する関数

[ PHP関数 ]
filemtime() → ファイルの更新時刻
date() → 日時の取得

[ WordPress関数 ]
bloginfo() → サイト情報を表示
get_stylesheet_directory() → 現在のテーマ、子テーマのスタイルシートのディレクトリパスを取得

手順

1. WordPressの利用中のテーマ、もしくは子テーマ(すでにheader.phpが子テーマの中にあるのなら)から、FTPで header.php をダウンロード
2. header.php に自動リロードの指示を追加
3. 子テーマに header.php をアップロード(子テーマについては後日書きます)

head.php

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<!--?php wp_head(); ?-->

/* ここに↓を追加 */
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>
?ver=<?php echo date('YmdHis', filemtime(get_stylesheet_directory() . '/style.css')); ?>" />

</head>

↑の head.php は、テーマ twenty seventeen のものですが、wp_head() の読み込まれたあとに追加すれば問題ありません。
やっていることは、要するに、更新日をそのままstyle.cssのバージョン名として、新たなstyle.cssとして認識させるということです。キャッシュに残っているのと別のバージョンなら、改めて読み込まれます。