• かちびと.net

    WordPressテーマのcssの末尾にクエリ文字を加えてキャッシュさせないようにする方法をご紹介。末尾にクエリ文字を加えてキャッシュを防ぎます。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

WordPressテーマのcssの末尾にクエリ文字を加えてキャッシュさせないようにする

スポンサーリンク

凄く今更な話題かもしれませんが、知ってると便利なのでちょっと書いてみます。WordPressのテーマのcssに変更を加えたときに、表示をクライアントさん等に確認して貰う際、キャッシュの説明をするのがかなり面倒です。

というわけで、古来から伝わるcssファイルのキャッシュ(cssに限りませんけど)を防ぐ方法をWordPressで、という内容です。

この辺の理屈は、よく拝見させて頂いている小粋空間さんが書かれてますので合わせてご参照下さい。

コード

get_bloginfo( ‘stylesheet_url’ )の方の方が多いかもですけど、今回はcssを読み込ませるのにこれ使います↓

href="<?php bloginfo('stylesheet_directory'); ?>/style.css"

これで以下のように出力。

href="http://example.com/wp-content/themes/example/style.css"

タイムスタンプを末尾に加える

さきほどのような、キャッシュによる時間のロスを防ぐために末尾に更新時のタイムスタンプを加えます。

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

filemtimeはファイルの更新時刻を取得する関数で、これをcssの後に?をかまし、その後に加えます。

以下のように出力

href="http://example.com/wp-content/themes/example/style.css?1324216986"

末尾にタイムスタンプが加わりました。

たとえばcssを修正して、再度アップロードした際は

href="http://example.com/wp-content/themes/example/style.css?1324217634"

と言った具合でcssを新たに更新した時間が加わります。気持ちが悪いなら修正後に元のコードに戻せばOKです。

キャッシュさせない方法はいろいろあるでしょうけど、こんな手軽な方法でも、先方に何度も確認してもらうというやり取りがある場合はキャッシュによる混乱を防げるんじゃないでしょうか。

via:css-tricks

URL :
TRB :

Comments & Trackbacks (6)

  1. たかなし

    WordPress で使われているスタイルシートに、どれもクエリ文字が付いているのでスタイルシートにクエリ文字がどんな働きがあるのか検索したらここに着きました。すっきりしました。

    関係ないのですが、このページを Chrome で見ると、スクロールバーサムをドラッグしたときに、途中で自動的に離してしまうような挙動を見せます。

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services