CSSのリロード、こちらの記事「Google Chromeでキャッシュ無視して再読込する方法」にて、サイト開発中に自分の環境でリロードすることは可能になりましたが、
見てくれているユーザーのみなさまが更新されないと全然意味ないじゃん
なんてことに気づいたわたくし。
やり方を調べてみましたが、意外と使っているテーマによっては厄介。僕が現在つかっているWordpressのテーマ「Simplicity」の場合に、一応ボクがだした結論を共有しておきましょう。
CSSの強制リロードの実現方法の基本
ユーザーにCSSの強制リロードの実現する方法は、こちら記事を参考にさせてもらいました。
「キャッシュのせいだから再読込して」と毎回言わなくて済むようにする記述方法
これが全てです。わざわざ僕が語る必要もないのですが、読むのが面倒くさい人向けに、さらに簡単に記述しましょう。
WebページのCSS読み込みのHTML記述部分
<link type="text/css" rel="stylesheet" href="styles.css">
と書いてある部分を
<link type="text/css" rel="stylesheet" href="styles.css?1">
とする。以上です。
こうすると
ブラウザキャッシュ的には、style.css?1というキャッシュがないので、改めて取りに行く。
だが、?1は読み込むファイル自体には影響がないので、style.cssが通常通り読み込まれる。
となるということです。
ユーザーにCSSを強制リロードさせたいタイミングで、都度「?1」を「?2」などと書き換えれば、意図的にリロードさせることができます。
詳しい原理、すなわち「?1」をつけることで何を意味しているか、は上記参考サイトを参照ください。
Simplicityでどうするか
そこまでわかった上で、Simplicityで、そのCSS読み込みコードをどうやれば書き換えられるのか。
テーマカスタマイズする場合、通常は子テーマをインストールしてそちらをのstyle.cssを変更すると思います。その場合、実際に子テーマのCSSを読み込んでいるHTMLコードは以下になります。
<link rel='stylesheet' id='child-style-css' href='https://freelifetech.com/wp-content/themes/simplicity2-child/style.css' type='text/css' media='all' />
これを書き換えられればいいので、これが記述してあるファイルを子テーマへコピーすれば、影響最小限で対応ができます。
が、ここで問題。そのコードは直接記述しているのではなく、「Simplicity/lib/scripts.php」のscript処理によって出力されているのでした。
このscripts.phpを意図したように書き換えれば実現できるわけです。じゃぁこれを子テーマへコピーしましょう・・
って、「lib/」以下、すなわちサブディレクトリ以下にあるファイルってどう扱われるの？ という未知の子テーマカスタマイズ環境にぶち当たったわけです。
で調べてみると、サブディレクトリにあるファイルを子テーマで上書きはできない模様。実際に、子テーマにも「lib」サブディレクトリを掘ってコピーしたり、直下にコピーしたりして、試してみましたが、うまく動きませんでした。
というわけで、どうするか。いくつか選択肢が思い浮かびましたが、最終的に僕がとった手段は
子テーマのheader-insert.phpに直接以下のコードを追加する。
<link rel='stylesheet' id='child-style-css' href='https://freelifetech.com/wp-content/themes/simplicity2-child/style.css?1' type='text/css' media='all' />
でした。
header-insert.phpに書くと、style.css?1としてリクエストが先に処理され、続いてstyle.cssが処理される形のHTMLとなります。
結果的に同じCSSへのタグが2回記述されており、あまりよろしくはないのですが、こうすることで子テーマのCSSの強制読み込みが実現できます。実際の挙動は、先にstyle.css?1のリクエストでキャッシュ上のstyle.cssが上書きされ、2回目の読み込みはキャッシュのものが使われる、となると思います。
他の手立ても考えました。例えば以下。
- 親テーマのscripts.phpを直接いじる
- header.phpをコピーして該当部分をなんとかする
しかし、どちらも、親テーマ更新をスムーズに受け入れにくい処置であることが確かでかなりイケてない。それならまだ・・、ということで、今回の手法でした。
何かさらに良い手法があればぜひコメント等で教えてください。
以上SimplicityでのCSS強制リロード方法でした。
コメント