Lightningの子テーマのstyle.cssを修正したら最新を読み込むようにする

Lightningを子テーマでカスタマイズするとき、style.cssを修正・保存しても修正後に自動的に修正済みの新しいstyle.cssが読み込まれません。

この状態だと、

  • いちいち「Ctrl+F5(Windowsの場合)」などの操作が必要なのが面倒。
  • 読者は「Ctrl+F5」などしてくれないのでいつ最新になるか読めない。

という問題がありそうです。

そこで、style.cssを修正したときは、修正直後から自動的に最新のstyle.cssが読み込まれるようにカスタマイズしてみました。

カスタマイズ方法

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

コード中の「mycustom」の部分(3箇所)は、当サイト以外のカスタマイズ方法と重複しないよう適宜変更して下さい。

概説

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

そのため、デザインのカスタマイズをするために子テーマのstyle.cssを修正しても、ブラウザがstyle.cssが更新されたことがわからず、以前読み込んだ時にブラウザが記憶しているキャッシュから内容が読み込まれてしまいます。

これを改善するために、

  1. Lightningによる子テーマのstyle.cssを読み込んでいる行を削除する。
  2. 新たに子テーマのstyle.cssを読み込む行を追加し、その時のバージョン判定をstyle.cssの更新日時によって行うようにする。

を行ったのが、上記コードです。

具体的には、

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

という処理になりました。

以上、ご参考になれば幸いです。

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

コメントを残す

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