blog

ブログ

WordPressで更新したCSSやJSファイルだけキャッシュクリアを行う方法

| カテゴリー : WordPress

こんにちは、福岡のホームページ制作アイドットデザインの越水です。

Webページを高速化するために、ブラウザにファイルをキャッシュさせるという方法があります。

しかし、頻繁にCSSやJavaScriptの更新を行うホームページの場合、このキャッシュが邪魔になって即時に修正内容が確認できなかったり、ページの表示に不具合を生むことがあります。

とはいえキャッシュをクリアしてしまうとページ表示速度は損なわれるし、なかなか悩ましいところです。

今回はWordPressサイトでこのような問題を解決する方法をご紹介します。

CSSやJSファイルのキャッシュクリアはタイムスタンプを追加することで解決する。

先に結論を書くと、CSSやJSファイルはHTMLで読み込む時に末尾にstyle.css?1521173854というようなタイムスタンプを追加してあげることでキャッシュクリアを行うことができます。

WordPressのテンプレートでCSSを読み込む時は次のようなコードを書いていると思います。

このCSSファイルにタイムスタンプ情報を追加するためには、次のようにしてクエリを付与します。

PHPのfilemtime関数がファイルの更新日時に関する情報を取得してくれるので、それをファイル名の末尾につけることができます。

JSファイルの場合や、配置しているディレクトリが上記のサンプルと異なる場合はファイルへのパスを適宜変更してください。

このようなコードを使うことで、更新したCSSまたはJSファイルのキャッシュだけクリアすることが可能になり、普段のページ表示速度への影響を最低限に抑えることができます。

Webサイト高速化のためにファイルキャッシュを取り入れたのは良いものの、更新作業のチェック時にキャッシュに悩まされているという方はぜひ試してみてください。

それではまた!

経営課題解決のためのWebマーケティング提案、ネットショップ構築や採用サイトの企画・制作も承っております。

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。