ワードプレスで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を採用したレンタルサーバーでしか使用できません。
サーバー側の高速化オプション

conohaや私が使用しているロリポップのような利用者の多いサービスを例に挙げますが、他の企業でも基本的には同様の手順です。
conohaの場合
コンテンツキャッシュとブラウザキャッシュをOFF化する
WEXALを利用しているならこれをOFFにする
特にWEXALは強力にコンテンツをキャッシュしている様なのでcssやJavascriptを変更する場合はOFFにしておくべきでしょう。もちろんcssやjacascriptが正常動作して完成後は再度ONで構いません。
ロリポップの場合
ロリポのアクセラレーターは結構癖がありますので注意です。
具体的には自分のwebサーバーの前段でごそっとキャッシュしてキャッシュサーバーから配信する方式なので感覚的にはCDN配信に近いですかねー
完全にWEBサイトが出来上がった状態で変更が無いならこの方法は実に適切で高速であります。
しかし僕の場合は実験用BLOGで変更バッキバキなので最初から使用するのをやめましたw
有効無効の切り替えについては公式に詳しく書いてある一次情報を参照してください。
SWELLのキャッシュ削除画面
以下の通りですが念のためにコンテンツとブログカードも両方削除すると良いですね。

LiteSpeed Cacheのキャッシュ削除画面
個別に削除可能ですが面倒なので全てをパージするで良いと思います。

ブラウザ別のスーパーリロードの一覧(パソコンの場合)
ブラウザ | プラットフォーム | スーパーリロード方法 |
---|---|---|
Google Chrome | Windows | Shift + 更新ボタン, Ctrl + 更新ボタン, Shift + F5, Ctrl + F5, Ctrl + Shift + R |
Google Chrome | Mac | Shift + 更新ボタン, Cmd + Shift + R |
Safari | Mac | Shift + 更新ボタン, Ctrl + Shift + R, Ctrl + R |
Firefox | Windows | Shift + 更新ボタン, Ctrl + F5, Ctrl + Shift + R |
Firefox | Mac | Shift + 更新ボタン, Cmd + Shift + R |
Microsoft Edge | Windows | Shift + 更新ボタン, Ctrl + 更新ボタン, Shift + F5, Ctrl + F5, Ctrl + Shift + R |
スマートフォンの場合はスーパーリロードではなくキャッシュを削除を推奨。
デバイス | ブラウザ | キャッシュクリア方法 |
---|---|---|
一般 | Chromeブラウザ | Google ChromeのURLバーの1番右の縦3つの点をクリック→ 履歴→ 閲覧履歴データーの削除→ キャッシュされた画像とファイルをチェックして削除 |
Android | Chromeアプリ | ブラウザ画面右上のURL欄右の縦3つの点をタップ→ 履歴→ 閲覧履歴データーを削除をタップ→ キャッシュされた画像とファイルをチェック→ データーを削除 |
iPhone | Safari | ホーム画面から 「設定」 – 「Safari」 を選択 → 下方にスクロールして履歴とWebサイトデーターを消去タップ |
これらの手順を適切に実行することで、あなたのcssやjavascriptの変更がワードプレスに正確に反映されるでしょう。
まとめ

面倒でもcssやJavaScript変更後やWordPressのアップデートやテーマの更新後は毎回必ず
- ブラウザ側はスーパーリロードもしくは確実に行くならブラウザキャッシュ削除。
- サーバー側は各種キャッシュ類を削除もしくはOFF
確実に行いましょう。
