#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で実装する場合は、該当ファイルのサーバー内での絶対パスとテンプレート内での出力パスの違いに注意が必要。

  • サーバー内での絶対パスは、サーバーサイドでの内部的なパス。
  • テンプレートの出力パスは、サイト上に出力表示されるときのパス。(サイトのドメインでのURL。)

※ 処理の実行内容によってパスを考慮する必要がある。

 

 

インラインで直接記述するとき

//置換用関数
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>

 

 

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

WordPressのシステムが自動的に読み込む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');

preg_replace(‘正規表現’, ‘置換後文字列’, ‘対象文字列’) : 対象文字列内のすべてのマッチした文字列を置換後文字列で置換。文字列ではなく配列の指定も可能。返り値はすべての該当箇所を置換した後の対象文字列。str_replace()関数の方が処理は速い。

str_replace(‘置換前文字列’, ‘置換後文字列’, ‘対象文字列’) : 対象文字列内のすべての置換前文字列を置換後文字列で置換。文字列ではなく配列の指定も可能。返り値はすべての該当箇所を置換した後の対象文字列。

 

 

この記事をシェア
この記事のURL

https://memo.ag2works.tokyo/post-1482/

コピー
この記事のタイトル

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

コピー
この記事のリンクタグ

<a href="https://memo.ag2works.tokyo/post-1482/" target="_blank" rel="noopener">cssやjsファイルのキャッシュ対策として更新日時のタイムスタンプをクリエとして自動付加。 | memo メモ [AG2WORKS]</a>

コピー
※ フィールドをクリックでコピーするテキストの編集ができます。

この記事へのコメント

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

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