自作のWordPressテーマがローカル環境と本番環境でcssの挙動が違う時の対処法。

こんにちは、シロウです。

只今自作のWordPressテーマを作成していまして、ほぼ完成（あとは現在使用中のテーマのショートコードとの差異をなくすだけ）なのですが、実際にこのブログで使用してみたところなぜかローカル環境（開発環境）とcssの挙動が違うという自体に陥りました。

具体的には「CSSが最新のものに反映されていない」というような感じでして、2時間ほど苦戦してようやく解決できたので、記しておきます。

ローカル環境と開発環境でCSSの挙動が違う時の解決方法

結論からいうと、キャッシュが原因だったようです。

つまり、『ローカル環境ではCSSファイル（今回の場合はstyle.css）を変更しているけど、本番環境ではサーバにあっプロードしたCSSファイルではなく、キャッシュに残っているCSSを適用してしまっている』という感じらしいです。

なので、解決策としては『キャッシュを削除する』というのが一番手っ取り早いと思います。

キャッシュではなく常に最新のstyle.cssを読み込ませる方法

キャッシュ削除するだけだと、「毎回キャッシュを削除するのめんどくせー」ってなると思うので、常に最新のstyle.cssを読み込ませる記述にしておくと便利かと思います。

具体的に解説すると、style.cssを読み込む場合、普通は下記のように記述していると思います。

<link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" />

これを下記のように変更してあげます。

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" />

とても簡単ですね。

ちなみに今回の記事は「WordPressで、style.cssを編集してもサイトに反映されないときはこれで解決」の記事を参考にさせて頂きましたm(_ _)m

ふぅ、これだけのことで時間を無駄に浪費しましたが、やっぱり思い通りの処理になった時の爽快感は何とも言えないものがありますね笑

よし、それでは引き続きテーマ作成に励みます。それではまた(*･ω･)ﾉ

シロウ

NFT・仮想通貨投資家 / エンジニア

TwitterInstagramYouTubeLINEContact

仮想通貨・NFTに400万以上投資しています。

本業エンジニア・副業ブロガー。

ブログ最高月80万円。累計200万以上。