Menu/Prof
スズキマコト
自由人
元々は楽器屋のギター兄ちゃん。
趣味でプログラミングしてるうちに
本職になってしまった人。

過去に喋っていた言語
c pascal Assembler
perl PHP Python Ruby など
javascriptなどは都度必要に応じて。
最近Mac買ったのでswift勉強してます。

体ぶっ壊して死にかけたので人生RESET中。

ワードプレスでCSSやJavaScriptが反映されない?ここが解決策

Some visuals are licensed via Canva Pro (includes commercial rights).
Usage complies with Canva’s license terms at the time of use.
License policy: canva.com/policies/content-license-agreement

X
     この記事はプロモーションを含みます
contents

ワードプレスのCSSやJavaScript反映問題を解決するには

CSS/JavaScript反映不具合?解決策はこちら

あなたのワードプレスのウェブサイトは、CSSやJavaScriptの更新後に変更が反映されないことがありますか?

よく見聞きするのが「設定したのに変化がありません。」てやつ。

あとたまに話題になるのがワードプレスやSWELLのテーマの大型アップデート時に「まともに動かない!BUGだっ!」と大騒ぎする人が一定数います。

実はどちらのケースも同じ理由でほとんどの人がサーバーの高速化オプションなどをONにしたまま放ったらかしの人です。

率直な結論を言うと、これらの仕組みを明確に理解していない場合、SWELLの高速化オプションを利用するだけで十分に高速化されるため、サーバー側の高速化オプションはすべてOFFにした方が安心です。

逆に、CSSやJavaScriptを修正した際の操作性が向上し、より便利になるでしょう。

—完—

では更に高速化を望むなら避けて通れない部分を理解しよう笑

ちょっとわかってくると基本的にSWELL使いの皆さんは高速化オプションをONにされているとか、サーバー側の高速化オプションをONにしているとか、そもそもブラウザにキャッシュされているとかが普通です。

ところが諸々CSSやJavaScriptもしくは記事そのものとか内部リンクとか色々ありますが基本的にブラウザ側もサーバー側もキャッシュ類の仕掛けがあると変更したcss/JavaScriptは即座に変更が反映されないのが普通ということはしっかり理解しておきましょう。

ブラウザのキャッシュ削除が面倒でPCの方は後述するスーパーリロードでも大丈夫ですが、それ以外のキャッシュ類はスマホも含めて強制的に削除または機能停止が必要です。

私はロリポップサーバーを愛用しておりますがやはりサーバー側が用意したキャッシュサーバーオプションがあります。

しかし頻繁にアップデートを繰り返す えむらぼBlog ではサーバーサイドのキャッシュオプションは削除するためにいちいち管理画面に行くのが面倒なので使ってません。

私の場合、高速化キャッシュは別記事で書いてあるとおりLiteSpeed Cacheも使用しています。こいつの良いところはワードプレスのプラグインなのでSWELLと同じ様にWordPressの管理画面からキャッシュ類の操作ができることです。あとキャッシュそのものよりクローラーに対してゴニョゴニョできることかねw

注意:このプラグインはhttpサーバーにLite speedを採用したレンタルサーバーでしか使用できません。

サーバー側の高速化オプション

CSS/JavaScriptが反映しない?解決策はサーバー側の高速化オプションにあり

conohaや私が使用しているロリポップのような利用者の多いサービスを例に挙げますが、他の企業でも基本的には同様の手順です。

conohaの場合

コンテンツキャッシュとブラウザキャッシュをOFF化する

WEXALを利用しているならこれをOFFにする

特にWEXALは強力にコンテンツをキャッシュしている様なのでcssやJavascriptを変更する場合はOFFにしておくべきでしょう。もちろんcssやjacascriptが正常動作して完成後は再度ONで構いません。

ロリポップの場合

ロリポのアクセラレーターは結構癖がありますので注意です。

具体的には自分のwebサーバーの前段でごそっとキャッシュしてキャッシュサーバーから配信する方式なので感覚的にはCDN配信に近いですかねー

完全にWEBサイトが出来上がった状態で変更が無いならこの方法は実に適切で高速であります。

しかし僕の場合は実験用BLOGで変更バッキバキなので最初から使用するのをやめましたw

有効無効の切り替えについては公式に詳しく書いてある一次情報を参照してください。

SWELLのキャッシュ削除画面

以下の通りですが念のためにコンテンツとブログカードも両方削除すると良いですね。

SWELLのキャッシュ削除の画面

LiteSpeed Cacheのキャッシュ削除画面

個別に削除可能ですが面倒なので全てをパージするで良いと思います。

LiteSpeed Cacheのキャッシュ削除画面

ブラウザ別のスーパーリロードの一覧(パソコンの場合)

スクロールできます
ブラウザプラットフォームスーパーリロード方法
Google ChromeWindowsShift + 更新ボタン, Ctrl + 更新ボタン, Shift + F5, Ctrl + F5, Ctrl + Shift + R
Google ChromeMacShift + 更新ボタン, Cmd + Shift + R
SafariMacShift + 更新ボタン, Ctrl + Shift + R, Ctrl + R
FirefoxWindowsShift + 更新ボタン, Ctrl + F5, Ctrl + Shift + R
FirefoxMacShift + 更新ボタン, Cmd + Shift + R
Microsoft EdgeWindowsShift + 更新ボタン, Ctrl + 更新ボタン, Shift + F5, Ctrl + F5, Ctrl + Shift + R
スーパーリロード

スマートフォンの場合はスーパーリロードではなくキャッシュを削除を推奨。

スクロールできます
デバイスブラウザキャッシュクリア方法
一般ChromeブラウザGoogle ChromeのURLバーの1番右の縦3つの点をクリック→
履歴→
閲覧履歴データーの削除→
キャッシュされた画像とファイルをチェックして削除
AndroidChromeアプリブラウザ画面右上のURL欄右の縦3つの点をタップ→
履歴→
閲覧履歴データーを削除をタップ→
キャッシュされた画像とファイルをチェック→
データーを削除
iPhoneSafariホーム画面から 「設定」 – 「Safari」 を選択 →
下方にスクロールして履歴とWebサイトデーターを消去タップ
スマホのキャッシュクリア

これらの手順を適切に実行することで、あなたのcssやjavascriptの変更がワードプレスに正確に反映されるでしょう。

まとめ

ワードプレスでCSSが反映されない?ここが解決策!

面倒でもcssやJavaScript変更後やWordPressのアップデートやテーマの更新後は毎回必ず

  • ブラウザ側はスーパーリロードもしくは確実に行くならブラウザキャッシュ削除。
  • サーバー側は各種キャッシュ類を削除もしくはOFF

確実に行いましょう。

シェアしてくれると喜びます
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

makotoのアバター makoto Blogger&YouTuber

サーバー管理者として17年ほど仕事でサーバー触ってました。
www,mail,dns,sql各鯖をすべてFreeBSDで運用してましたが現世ではかなりレアなタイプになるみたいですね笑

viやシェルスクリプトとかperlとかgccとかFreeBSDとか実はbashよりtcshが好きとか時々寝ぼけるのは
その名残でしょう。

今まで縁の下の力持ち的な他人のためにプログラムを書き他人のためにサーバー構築し他人のためにWEBサイトを創る的な世界から
自分の好きなことに集中できる環境は実に気持ち良いですね。
現役は引退済みなので難しいことはやりませんしやれません。

現在 ほぼ自由人。

contents