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

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

Lightningを子テーマを使ってカスタマイズするとき、style.cssを修正・保存しても、すぐには修正済みの新しいstyle.cssが読み込まれないため、なかなかページの表示に反映されません。

そのため、

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

という問題があります。

特に、読者が見た時に最新版が反映されないのは問題で、場合によっては激しい表示崩れが発生する可能性もあり、しかも、リピートで見に来てくれる読者ほど表示崩れが発生しやすいのが致命的だと思います。

そこで、子テーマの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その他のバージョンや設定によってうまく動作しない可能性もあります。ご了承下さい。

気に入って頂けたらフォローお願いします