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

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

サイト運営

最近、Elementorを使い始めました。

Elementorは無料だと機能制限はありますが、十分使えます。

有料版を使えば、便利なウィジットやショートコードが使えるようになりますが、レイアウトだけ気にして他はCSSで対応するという場合は、無料版でも問題ありません。

Elementorにはウィジット毎にCSSを設定できるカスタムCSSと言う機能があります。しかし、無料版ではカスタムCSSと言う機能が使えないので、CSSは書けないのではと思う人がいるかもしれませんが、そんなことはありません。

従来通り、子テーマのstyle.cssに追記すれば事足ります。

子テーマのstyle.cssを編集すれば、特に問題ないと思っていたのですが、今回、子テーマのstyle.cssに追記してもキャッシュの影響なのか、反映されたりされなかったりと言う現象が起きて、かなりハマったので、この記事で対策をまとめておきたいと思います。

結論から言えば、CSSを変更するたびに子テーマのstyle.cssのクエリパラメータを変更すれば都度読み込むようになりました。

Elementorに限らず、年がら年中、CSSを変更してキャッシュを削除しているような人はその苦行から逃れられるので参考になると思います。

もし、Lightningをご利用の場合は、次の記事を参考にしてください。

Elementorで子テーマのCSSが反映されない、その理由

Elementor自体はプラグインという位置づけなので、別途Wordpressのテーマが必要です。

Elementorは利用者が多いので、ほとんどのテーマは問題なく使えます。

余談だが、ElementorのFontawsomeはVersion4.7なんだぜ

ただ、Elementorは使用しているFontawsomeのバージョンが古い(Ver.4.7)ようで、テーマが使用しているFontawsomeのバージョンがFontawsome5だとアイコンフォントが□になってしまうことがあります。

テーマ側でFontawsomeのバージョンの切り替えができればベストですが、そういうテーマを探すよりもElementor対応と謳っているテーマを使用する方がストレスは少ないです。

なぜ、Fontawsome 4.7しか選べないのか謎ですが、無料プラグインだから制限を加えているという感じでもないのでよくわかりません。

Elementorと相性が良いテーマと言えば?

Elementorと相性が良いテーマと言えば、超有名なのはAstraとOceanWPです。

どちらも有料テーマの無料版ではありますが、非常に表示が早く、軽量コンパクトなテーマです。

どちらを使うのかは、正直好みだと思います。

公式サイトからダウンロードするときにメール登録などが必要なので、勇者以外はWordpressのダッシュボードから公式テーマで検索してインストールする方が簡単です。

公式サイトを見るとOceanWPの方がカスタマイズの情報が多い感じがするので、個人的にはOceanWPを選びました。Astraの紫がちょっと嫌なのもあります。

どちらも公式に子テーマが用意されていますので、子テーマをuploadすれば子テーマのstyle.cssやfunction.phpなど導入できて、すぐに使えます。

実はこれが罠なのですが。

子テーマのCSSを更新しても読み込まない現象が発生

今回、OceanWPを使ってぺらサイトを作ろうとして、子テーマのCSSを更新しても読み込まない現象があり、頭を抱えました。

ファイルそのものは読み込まれているし、ファイルの中身も書き換わっているのに、読み込まれている内容が古い、簡単に言うとキャッシュなのですが、通常のキャッシュ削除だとどうもうまくいきません。

キャッシュの影響かどうかは、キャッシュを削除すればわかります。

ブラウザによってキャッシュの削除方法は違いますが、キャッシュかな?と思ったらまず削除するよりも、シークレットモードやプライベートモードなどを使用するのがおススメです。

シークレットモードやプライベートモードでは、キャッシュを読み込まなくなるので原因を切り分けられます。

今回は、キャッシュを削除しても、プライベートモードやシークレットモードを使っても問題が解決しませんでした。

style.cssの後にクエリが付いていると、どうもダメらしい

リリースしている子テーマを使うと、子テーマのstyle.cssを読み込む際にWordpressのバージョン番号のクエリが付きます。

こんなやつです。

style.css?ver=5.2.2

子テーマのfunction.phpに以下のような記述が予めあります。

function oceanwp_child_enqueue_parent_style() {
// Dynamically get version number of the parent stylesheet (lets browsers re-cache your stylesheet when you update your theme)
$theme = wp_get_theme( 'OceanWP' );
$version = $theme->get( 'Version' );
// Load the stylesheet
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'oceanwp-style' ), $version );

}
add_action( 'wp_enqueue_scripts', 'oceanwp_child_enqueue_parent_style' );

style.cssを手動で更新しても、クエリのバージョンが書き換わらないのでキャッシュ?を読んでしまっている感じでした。クエリを削除すると正しく表示されます。

この仕組みはAstraでも同じで、OceanWPからAstraにテーマを変えて、子テーマを導入しても同じ結果でした。

Elementorで子テーマのCSSが反映されない、その対処法

style.cssを書き替えるたびにクエリを変更すればよい

ファイル作成日時をクエリにしたら、ファイルが更新されるたびにクエリが変わるので、古いファイルの読み込みは起きないはずです。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
$t_dire_uri = get_template_directory_uri();
$s_dire_uri = get_stylesheet_directory_uri();
$date_query = date("ymdGis", filemtime( get_stylesheet_directory() . '/style.css'));

wp_enqueue_style( 'parent-style', $t_dire_uri .'/style.css' );
wp_enqueue_style( 'child-style', $s_dire_uri.'/style.css', array('parent-style'), $date_query );
}

このようにすると、上手く動きました。

親テーマのstyle.cssを読み込みたくない場合は、

wp_enqueue_style( ‘parent-style’, $t_dire_uri .’/style.css’ );

の部分は不要ですが、親テーマ⇒子テーマという順番(読み込みの依存関係)で読み込むことを指定する部分は必要です。

もっと進んだ解決策

子テーマのstyle.cssだけじゃなく、すべてのwp_enqueue_styleに対してクエリを付加する方法がありました。この方法はテーマ依存もなく、万能だと思います。

//CSS、JSファイルに編集時間をバージョンとして付加する(ファイル編集後のブラウザキャッシュ対策)
add_filter( 'style_loader_src', 'add_file_ver_to_css_js_demo');
add_filter( 'script_loader_src', 'add_file_ver_to_css_js_demo');
if ( !function_exists( 'add_file_ver_to_css_js_demo' ) ):
function add_file_ver_to_css_js_demo( $src ) {
//サーバー内のファイルの場合
if (strpos( $src, site_url() ) !== false) {
// //Wordpressのバージョンを除去する場合
// if ( strpos( $src, 'ver=' ) )
// $src = remove_query_arg( 'ver', $src );

//クエリーを削除したファイルURLを取得
$removed_src = preg_replace('{\?.+$}i', '', $src);
//URLをパスに変換
$resource_file = str_replace(site_url('/'), ABSPATH, $removed_src );
//ファイルの編集時間バージョンを追加
$src = add_query_arg( 'fver', date('Ymdhis', filemtime($resource_file)), $src );
}
return $src;
}
endif;

参考https://nelog.jp/add-file-ver-to-css-and-js

まとめ

Elementor対応を謳う公式テーマの子テーマを使用して変なキャッシュトラブルに見舞われました。

過去にどのようなテーマを使っても、クエリパラメータが付いたstyle.cssでキャッシュ削除しても更新されなかったことは無かったのですのが、なぜかElementorと有名テーマではキャッシュ削除しても亡霊のように古い内容が残る事象が発生しました。

この記事を書いた人
ブーン

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

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

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

mixhost

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

Conoha Wing

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

エックスサーバー

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

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