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

サイト運営

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

Lightningが人気のわけ

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

WordPress Theme Usage Distribution in Japan
Usage Statistics for WordPress Theme technologies in Japan

そんなとても人気のある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の元のデータをカスタマイズしてもバージョンアップの際には全て新しいデータで上書きされてしまうので、カスタマイズの際には子テーマでのカスタマイズを推奨しています。子テーマでカスタマイズしやすいサンプル用データは下記よりダウンロードできます。ダウンロードしたzipファイルを解凍してお好みに応じて改変した上...

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

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

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

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);

}

まとめ

Lightningはビジネスサイトを作りやすい、ツボを押さえたテーマだと思います。しかし、子テーマのstyle.cssを自動で読み込むように親テーマで処理しているため、子テーマのstyle.cssを読み直す時には子テーマ側で処理する必要がありました。

もし、ブラウザキャッシュやサーバーのキャッシュの影響でCSSの変更が反映されない時には、子テーマのクエリのつけ方を変更したら幸せになれると思います。

 

 

タイトルとURLをコピーしました