#032
posted on 2021.04.02

cssやjsファイルのキャッシュ対策として更新日時のタイムスタンプをクリエとして自動付加。

cssやjsファイルがブラウザのキャッシュから読み込まれて更新が効かないときの対策として、PHPでファイル更新日時のタイムスタンプをクエリとしてファイル名に自動付加させる方法。

 

//同名ファイルはキャッシュ優先で更新が反映されないことがある
<link type="text/css" rel="stylesheet" href="style.css">

//ファイル更新日時をクエリとして付加してキャッシュ対策
<link type="text/css" rel="stylesheet" href="style.css?20210101010101">

 

 

ファイル名置換用の関数を作成して該当箇所で実行

ファイル更新日時のタイムスタンプを付与したファイル名に置換する関数を作成
//置換用の関数
function ag2add_query($path){
	if(file_exists($path)){
		return $new_path = $path.'?'.date('YmdHis', filemtime($path));
	}
}

file_exists(‘パス’) : 指定したパスのファイルあるいはディレクトリが存在するかどうかを調べる。存在すればtrue、無ければfalseを返す。

date(‘フォーマット’) : デフォルトタイムゾーンでの現在時刻を指定フォーマットで返す。

filemtime(‘パス’) : 指定したパスのファイルの最終更新時刻をUnixタイムスタンプで返す。

 

関数を実行して出力

HTML内の任意の場所で、引数に読み込むファイルのパスを指定して上記の関数を実行して出力。

<link type="text/css" rel="stylesheet" href="<?php echo ag2add_query('style.css'); ?>">

<script type="text/javascript" src="<?php echo ag2add_query('js/hoge.js'); ?>"></script>

 

 

WordPressで実装する場合

WordPressで実装する場合は、該当ファイルのサーバー内での絶対パスとテンプレート内での出力パス(サイト上でのパスになる)の違いに注意が必要。

 

インラインで直接記述するとき
//置換用関数
function ag2add_query($path){
	$file_path = get_template_directory().$path;
	if(file_exists($file_path)){
		return $new_path = get_template_directory_uri().$path.'?'.date('YmdHis', filemtime($file_path));
	}
}

ファイルを読み込みたい位置で上記の関数を実行。

//出力処理
<script type="text/javascript" src="<?php echo esc_url(ag2add_query('js/hoge.js')); ?>"></script>

 

システムが読み込むファイルへの対応

システムが自動的に読み込むcssとjsファイルにタイムスタンプを付加するには、function.phpにフックを記述して対応。

function ag2_add_file_ver($path){
  if(strpos($path, home_url()) !== false){
    //自動で付加されるwordpressバージョン情報のクエリを削除
    $path = preg_replace('/\?.+$/', '', $path);
    //サイトURL部分をサーバー内パスに置換
    $resource_path = str_replace(home_url('/'), ABSPATH, $path);
    //URLにクエリパラメーターを付与
    $new_path = $path.'?'.date('YmdHis', filemtime($resource_path));
  }
  return $new_path;
}
//フィルターフックで関数呼び出し
add_filter('style_loader_src', 'ag2_add_file_ver');
add_filter('script_loader_src', 'ag2_add_file_ver');

 

 

この記事をシェア

この記事へのコメント

コメントの書き込みはまだありません。

  • コメント内のタグはエスケープ処理され、文字列として出力されます。
  • セキュリティーのため、投稿者のIPアドレスは取得されます。
  • 管理者が内容を不適切と判断したコメントは削除されます。
  • このフォームにはスパム対策として、Googleの提供するreCAPTCHAシステムが導入されています。
    (Google Privacy Policy and Terms of Service.)