こんにちは、福岡のホームページ制作シンス株式会社の越水です。
Webページを高速化するために、ブラウザにファイルをキャッシュさせるという方法があります。
しかし、頻繁にCSSやJavaScriptの更新を行うホームページの場合、このキャッシュが邪魔になって即時に修正内容が確認できなかったり、ページの表示に不具合を生むことがあります。
とはいえキャッシュをクリアしてしまうとページ表示速度は損なわれるし、なかなか悩ましいところです。
今回はWordPressサイトでこのような問題を解決する方法をご紹介します。
CSSやJSファイルのキャッシュクリアはタイムスタンプを追加することで解決する。
先に結論を書くと、CSSやJSファイルはHTMLで読み込む時に末尾にstyle.css?1521173854というようなタイムスタンプを追加してあげることでキャッシュクリアを行うことができます。
WordPressのテンプレートでCSSを読み込む時は次のようなコードを書いていると思います。
1 | <link rel="stylesheet" src="<?php echo get_template_directory_uri(); ?>/style.css" /> |
このCSSファイルにタイムスタンプ情報を追加するためには、次のようにしてクエリを付与します。
1 | <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>"> |
PHPのfilemtime関数がファイルの更新日時に関する情報を取得してくれるので、それをファイル名の末尾につけることができます。
JSファイルの場合や、配置しているディレクトリが上記のサンプルと異なる場合はファイルへのパスを適宜変更してください。
このようなコードを使うことで、更新したCSSまたはJSファイルのキャッシュだけクリアすることが可能になり、普段のページ表示速度への影響を最低限に抑えることができます。
Webサイト高速化のためにファイルキャッシュを取り入れたのは良いものの、更新作業のチェック時にキャッシュに悩まされているという方はぜひ試してみてください。
それではまた！
経営課題解決のためのWebマーケティング提案、ネットショップ構築や採用サイトの企画・制作も承っております。
