About

小樽で3年と少し経験を積み、現在は札幌でコーダーをしております。

赤い電動車いすに乗って生活をしています。色々と不便はありますが、行列待ち等の椅子がない状況では、真価を発揮します。

好き:食べる/スロープ/エレベーター
嫌い:食事制限/段差/階段
※スロープやエレベーターに関しては、もはや好きという感情では収まり切れません。

気づけばグルメブログになってしまわぬよう、しっかり更新頑張ります!

Links

【PHP】外部CSSやJSのブラウザキャッシュ対策

【PHP】外部CSSやJSのブラウザキャッシュ対策

CSSやJSファイルを更新したのに「えぇ~何も変わってないよ。。」→「ブラウザのキャッシュかと…」というやり取りはあるあるかと思います。

そのような場合、読み込みの際ファイル末尾に?ver=201701011234といったようなタイムスタンプ(ちなみにタイムスタンプという決まりはありません…)のパラメーターを追記する事により、対策することができます。

<!-- キャッシュ対策前 -->
<link rel='stylesheet' id='style-css'  href='style.css' type='text/css' media='all' />
<script type='text/javascript' src='main.js'></script>
<!-- キャッシュ対策後 -->
<link rel='stylesheet' id='style-css'  href='style.css?ver=201701011234' type='text/css' media='all' />
<script type='text/javascript' src='main.js?ver=201701011234'></script>

ここからがいよいよPHPのお話になるのですが、PHPにはfilemtime()という関数があり、カッコ内にファイル名をパス(URL形式はNG)で指定することによりそのファイルの最終更新日を取得できるのです。
今回はWordPressのwp_enqueue_style()wp_enqueue_script()で読み込んだ場合を例に、コードサンプルにしてみます。

// キャッシュ対策前
wp_enqueue_style( 'style', get_stylesheet_uri(), array(), NULL );
wp_enqueue_script( 'main', get_template_directory_uri().'/js/main.js, array(), NULL, true );
// キャッシュ対策後
wp_enqueue_style( 'style', get_stylesheet_uri().'?ver='.filemtime( TEMPLATEPATH.'/style.css' ), array(), NULL );
wp_enqueue_script( 'main', get_template_directory_uri().'/js/main.js?ver='.filemtime( TEMPLATEPATH.'/js/main.js' ), array(), NULL, true );

パスで指定する必要があるのでTEMPLATEPATHという、テーマのパス名を返してくれる定数を使用していますね。

filemtime()で返り値となる最終更新日はUnixタイムスタンプ形式となりますので、見栄えが気になる方はdate()でフォーマット形式を変えるといいですね!

コメントする

トップへ戻る