お問い合わせはコチラから

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

サイト運営

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

Lightningが人気のわけ

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

そんなとても人気のある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だけです。

子テーマの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の変更が反映されない時には、子テーマのクエリのつけ方を変更したら幸せになれると思います。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました