【WordPress】キャッシュを有効化しつつ[CSS]や[JavaScript]ファイルの変更を確実に反映させる方法。

Ads by Google

ウェブサイト開発時に、[CSS]や[JavaScript]が即時に反映されないケースが多々あります。
これはブラウザが[CSS]や[JavaScript]のキャッシュファイルを保持しているために、修正前のデータを参照してしまうために起こる問題です。

弊社オンズが制作している全てのサイトでも、レスポンス向上のためにキャッシュを利用していますが、何も対策を講じないと修正内容が反映されずに業務に支障が生じる場合もあります。
特に開発環境では頻繁にファイルを更新するため、変更を確実に反映させるテクニックを用いるべきです。

例えばブラウザ側で全てのキャッシュをクリアすれば解決しますが、ファイルに変更を加える度に必要になる作業なので、それも面倒です。
ショートカット(Safariならば「⌘+Option+E」)を用いれば一瞬で済みますが、できることならばシステムに組み込んでしまいたいものです。

WordPress でサイトを構築している場合、この問題を簡単に解決できる方法があります。

通常、[CSS]や[JavaScript]を読み込む際は以下のように記述しているかと思います。

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

これを以下のように書き換えます。

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>">

すると、スタイルシートの部分が「style.css?1409022003」というように、末尾にタイムスタンプ(クエリ情報)が付加された状態で吐き出されます。

これによりブラウザに半ば強制的に最新のファイルを読み込ませることができます。
手動でファイル名の後ろにパラメータを書き加えるなどの手間もなく、キャッシュを有効化したままで開発にも専念できるので非常に便利な方法です。

特に、クライアントと何度も微調整を行うサイト構築の最終段階などでは、細かい点で混乱が生じる可能性が高いものです。
納品時にパラメータ部分の記述を削除して元のコードに戻せばいいだけなので不具合やデメリットは皆無。
サイト開発時には必ず導入したいテクニックではないでしょうか?

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です