Lightningの子テーマのstyle.cssを修正直後から即座にページ表示に反映されるようにカスタマイズ

WordPressの公式テーマ「Lightning」のカスタマイズ方法です。WordPress ver.4.8.1/Lightning ver.3.2で確認しました。

Lightning+子テーマでカスタマイズしていて、子テーマのstyle.cssを修正・保存しても、ブラウザキャッシュに残っているCSSが使われてしまうため最新状態のstyle.cssが読み込まれず、なかなかページ表示に反映されません。

このままでは、

  • 表示確認の時にいちいち「Ctrl+F5(Windowsの場合)」などの操作が必要。
  • 読者は「Ctrl+F5」などしてくれないのでいつ最新状態の表示になるのか予測できない。

という問題があります。

特に、読者が見た時に最新状態が反映されないのは深刻で、カスタマイズ内容によっては激しい表示崩れが発生する可能性もあり、しかも、リピートで見に来てくれる読者ほど古いstyle.cssが端末にキャッシュとして保存されている可能性が高いため表示崩れが発生しやすいという致命的な問題だと思います。

そこで、子テーマのstyle.cssを修正したときは、修正直後から自動的に最新のstyle.cssが読み込まれ、すぐにページ表示に反映されるようにカスタマイズしてみました。

カスタマイズ方法

Lightningの子テーマのfunctions.phpに以下のコードを追加しました。

他サイト由来のコードと名前が衝突しないよう、コード中に本サイトのドメイン名「matsmotojp」を使っています。

概説

当カスタマイズをしなくても、もともとLightningの方で子テーマのstyle.cssが読み込まれるようにしてくれていますが、子テーマのstyle.cssのバージョン判定がLightningのバージョンと同じになってしまっています。

そのため、サイトのデザインをカスタマイズするために子テーマのstyle.cssを修正しても、ブラウザがstyle.cssが更新されたことを認識できず、修正以前の表示の際に端末にキャッシュとして保存されたstyle.cssが使われてしまいます。

これを改善するために、

  1. Lightningテーマによる子テーマのstyle.cssの読み込みを外す。
  2. バージョン判定を子テーマのstyle.cssの更新日時で行うようにした子テーマのstyle.cssの読み込みを追加。

に変更。

具体的には、

  1. アクションフック「wp_print_styles」に関数「matsmotojp_theme_style」を追加。
  2. 関数内で「wp_dequeue_style」により、Lightningによるstyle.cssの読み込みを削除。
  3. 関数内で「wp_enqueue_style」により、バージョン判定を更新日付で行うstyle.cssの読み込みを追加。

という処理にしてみました。

これで常に最新の子テーマのstyle.cssが使われるようになり、表示確認での「Ctrl+F5」は不要。

もちろん、読者が見たときに古いstyle.cssで表示される心配もなくなりました。

当記事でご紹介している方法は初心者向きではありません。子テーマの構成ファイルを直接編集する方法ですので、失敗すると公開サイトも管理画面も全く表示されなくなる場合があります。ご注意下さい。
当サイトでご紹介しているWordPressのカスタマイズ方法は、何れも管理人が実際に試してみて動作した方法ですが、WordPressやテーマ、プラグイン、PHPその他のバージョンや設定によってうまく動作しない可能性もあります。ご了承下さい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です