Lightningの子テーマが反映されない時のstyle.cssの読み込み方法

この記事は、WrodpressのLightningのテーマを導入したけど、子テーマのCSSの変更が反映されなくて困っている人に役に立つ記事となっています。

この記事で分かること

Lightningが人気のわけ
Lightningの子テーマのハマりポイント
1. Lightningの子テーマのstyle.cssはどこで読み込まれる？
2. 子テーマのstyle.cssのクエリのつけ方を変える
まとめ

Lightningが人気のわけ

日本製のWordpressテーマはいろいろありますが、実はBizVectorのシェアがとても高いです。

IP Access Denied

IP Address Denied

そんなとても人気のあるBizVectorですが、ついに、サポート終了となりました。

BizVektorのご利用ありがとうございます。
既に「BizVektor 拡張プラグイン販売停止のお知らせ」にてご案内させていただきましたが、BizVektorに関して事実上今後のアップデートは終了いたしますので、できる限りLightningへの移行をよろしくお願いいたします。
[ Lightningへの移行についてはこちらを参照ください ]
有償製品以外の質問対応は終了させていただきました。問い合わせされても一切返信しておりませんので予めご了承ください。
引用元：https://bizvektor.com/info/bizvektor-v-1-12-0/

LightningはBizVektorについでシェアは2位です。どちらも同じ会社からリリースされているテーマなので結構なシェアを一つのテーマ作成会社が抑えていることになりますがBizVektorからLightningへの移行を薦めているため、今後はBizVektor後継のLightningのシェアが高まっていくと予想できます。

Lightningの子テーマのハマりポイント

公式サイトに子テーマが用意されているのでダウンロードして、テーマアップロードして有効化すれば大丈夫です。

中身はfunction.phpとstyle.cssだけです。

設定ガイド | Lightning

無料版での設定クイックスタートクイックスタートは、真っさらな WordPress 環境にデモサイトと同じデータを丸ごとインポートすることで、ビジネス向けサイトを素早くセットアップできるようになっています。クイックスタートへ基本設定基本設定に...

子テーマのstyle.cssにカスタマイズを追加していくと、CSSの修正が反映されない時がありました。

スパーリロードなどの通常のキャッシュ削除の方法を試しても、キャッシュに残っている古いstyle.cssを読んでいる模様。

以前、Elementor + OceanWPの組合せの時にも同じ現象になってクエリのつけ方を変更して対処しました。

Elementorで子テーマのCSSが反映されない、その解決方法

最近、を使い始めました。 Elementorは無料だと機能制限はありますが、十分使えます。有料版を使えば、便利なウィジットやショートコードが使えるようになりますが、レイアウトだけ気にして他はCSSで対応するという場合は、無料版でも問題あり...

Lightningの子テーマのstyle.cssはどこで読み込まれる？

子テーマのstyle.cssは、親テーマのfunction.phpの中で以下のように読み込まれています。

読み込み時にクエリを付加するようになっています。付加されるのはLightningのバージョンなので、style.cssのバージョンとは無関係です。

このクエリのつけ方がstyle.cssの更新が反映されない要因になります。

/*-------------------------------------------*/
/* Load CSS
/*-------------------------------------------*/
add_action( 'wp_enqueue_scripts', 'lightning_css' );
function lightning_css() {
wp_enqueue_style( 'lightning-common-style', get_template_directory_uri() . '/assets/css/common.css', array(), LIGHTNING_THEME_VERSION );
wp_enqueue_style( 'lightning-theme-style', get_stylesheet_uri(), array( 'lightning-design-style' ), LIGHTNING_THEME_VERSION );
}

子テーマのstyle.cssのクエリのつけ方を変える

親テーマで子テーマのstyle.cssを読み込んでいますので、単純に子テーマのfunction.phpに子テーマのstyle.cssの読み込みを追加すると子テーマのstyle.cssが2重に読み込まれてしまいます。

そこで、親テーマで読み込まれた子テーマのstyle.cssを一度dequeueしてから、再度enqueuesするように子テーマのfunction.phpで処理します。

その際、クエリをstyle.cssのタイムスタンプと同じにすれば、style.cssを保存するたびにクエリが変更されるので古いキャッシュを読み込むことが無くなります。

add_actionする時に優先順位を下げておくのがポイントです。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles',20 );
function theme_enqueue_styles() {
wp_dequeue_style( 'lightning-theme-style' );
$s_dire_uri = get_stylesheet_directory_uri();
$date_query = date("ymdGis", filemtime( get_stylesheet_directory() . '/style.css'));
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css',
array( 'lightning-design-style' ), $date_query);

}