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

contents

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

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

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

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

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

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

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

—完—

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

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

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

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

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

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

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

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

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

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

conohaの場合

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

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

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

ロリポップの場合

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

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

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

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

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

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

確実に行いましょう。

swellでreCAPTCHAを必要なページだけ稼働させたい。（Blog高速化最終章）

この記事を書いた人

makoto Blogger&YouTuber

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

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

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

現在　ほぼ自由人。