#032
posted on 2021.04.02

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

CATEGORY

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

 

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

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

 

 

置換用の関数を作成して該当箇所で実行

phpで置換用の関数を作成
//置換用の関数
function ag2add_query($path){
	if(file_exists($path)){
		return $new_path = $path.'?'.date('YmdHis', filemtime($path));
	}
}

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

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

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

 

該当箇所で関数を実行

引数に読み込むファイルのパスを指定して作成した関数を実行して出力。

<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');

 

 

この記事をシェア