WordPressで更新したCSSを自動で反映させる

当サイトは標準テーマをベースに子テーマを作ってカスタマイズしている。先日、16:9のモニターを導入したところ(今更？)、余計な空白が多いと気が付いたのでレイアウトを調整したのだが、調整結果が反映されない、ユーザー側でスーパーリロードする必要があった。

---

サーバーには保存した時点で反映されているけれども、それを読むブラウザはキャッシュを更新しない。

ユーザーにスーパーリロードをしてください、ってお願いするのはお門違い。更新したことを上手くブラウザに伝えてキャッシュを更新してもらうのがいい。
MergeSystem / 【CSS】WEBサイトの更新時、CSSのキャッシュを自動で読み直す方法
Qiita / 【WordPress】CSSキャッシュ対策のクエリ文字をファイルの更新日時を見て自動でつける
iscle / CSSを更新してもキャッシュで反映されない？更新内容を確実に反映させる方法

どうやら、スタイルシートを参照するために使う<link>タグで、スタイルシートでは使われないパラメーターを渡すようにする。で、このパラメーターを変えてあげるとブラウザはスタイルシートを読み直すよ、ということらしい。パラメーターにはCSSのファイル更新日時を使うのがお手軽。

ページのソースを表示させたところ、<link rel=’stylesheet’ id = ‘… で始まる行がずらっと並んでいるところがあり、子テーマのstyle.cssに日時を付けてあげれば良さそうなことが分かる。

<Wordpressのホームディレクトリ>/wp-content/themes/<子テーマディレクトリ>/function.php

// テーマの親子関係を表す
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    $time_string = date('YmdHis', filemtime( get_stylesheet_directory() . '/style.css'));
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'), $time_string);
}

子テーマの style.css の更新日時をYYYYMMDDhhmmssの形式で取り出してくる。関数に _uri を付けていないのは、ローカルファイの更新日時を取り出すため。_uri を指定すると取りだせない。

wp_enqueue_styleは安全にスタイルシートを追加する関数。この関数の呼び出しパラメーターにファイルの更新日時を追加したところ、linkのURLに ?ver=YYYYMMDDhhmmssが追加されるようになった。

これで、CSSを更新するとブラウザがstyle.cssを読み直すようになった。

起きたこと

WordPressのテーマエディターでstyle.cssを編集して保存したら、すぐに反映されるはずだったのに、何度更新しても反映されない。それどころか[CTRL]+[F5]でスーパーリロードをしても反映されない。おかしい…

と思って、sshでログインして中身を見たら、インデントのための空白が何かおかしな記号に変わっていた。TABキーを使ったのか、全角空白を使ったのかよく分からなかったが、いずれにしてもおかしい。

このおかしな空白を打ち直して問題は解決した。

さいごに

今回参照させて頂いたいくつかのページは、きっと過去にも読ませて頂いていると思う。しかし、そのときには動作の原理を理解する気にならず、結局問題解決できないままだった。

モニタが変わったことで余計な空白が多いことに気づき、それをどうにかして解消したくなった。さらに、ここ一週間でいくつかのコメントをいただいたが、アイコンがきれいに表示されない問題が発生することが分かったので修正したくなった。
でも、修正をしても訪れてくださる皆さんに反映されないんじゃ意味がないなぁ、と思ったので今回は本気で取り組んでみた。

そう…その気になって見てみないと、せっかくの貴重な情報なのに頭に入らないし理解できない。同じ情報もあるときには「ふーん」で終わるけれど、あるときには「お宝情報」に感じる。このことは昔から分かっているんだけれども、なかなか上手い改善ができないでいる。

とにかく何でも書き留めるようにしてみようかな。