CSSファイルの更新をすぐに反映させる方法
Webの開発を行っているとCSSファイル(スタイルシート)を更新したのにデザインが変わらないことがあります。この場合、ブラウザのキャッシュが原因で一旦キャッシュを削除してから確認という流れになります。
この作業は面倒ですし、実際ホームページを見てくれてる人にはキャッシュ削除を依頼できないので、古いデザインで閲覧されている可能性もあります。
この問題を解決するためにCSSファイルのクエリ文字列を使います。クエリ文字列を使うことでブラウザにCSSファイルの更新を知らせることができます。
CSSファイルへのクエリ文字列の付け方
style.css?201906100900やstyle.css?ver=1.0.0のようにします。style.css以降が前回と違えばOKということですね。
<link rel='stylesheet' href='style.css?ver=1.0.0' />
WordPressの場合
WordPressの場合はfunctions.phpなどにwp_enqueue_style()を使ってスタイルシートを読み込ませます。この時にクエリ文字列を指定可能です。
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
$verがバージョン用のクエリ文字列になります。
サンプル
wp_enqueue_style( 'style-useful', get_stylesheet_directory_uri() . '/style-useful.css', array(), '1.0.0', 'all' );
または
wp_register_style( 'style-useful', get_stylesheet_directory_uri() . '/style-useful.css', array(), '1.0.0', 'all' );
wp_enqueue_style( 'style-useful' );
出力例
<link rel='stylesheet' id='style-useful-css' href='{テーマフォルダのアドレス}/style-useful.css?ver=1.0.0' type='text/css' media='all' />
WordPressで更新日時を指定する場合
header.phpに直接記述する場合など。
サンプル
<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>/style-useful.css?<?php echo filemtime( get_stylesheet_directory() . '/style-useful.css' ); ?>" type="text/css" />
または
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style-useful.css?<?php echo filemtime( get_stylesheet_directory() . '/style-useful.css' ); ?>" type="text/css" />
出力例
<link rel="stylesheet" href="{テーマフォルダのアドレス}/style-useful.css?1560180098" type="text/css" />
CakePHP3で更新日時を指定する場合
/{CakePHPプロジェクト}/config/app.phpで'Asset'を変更します。
'Asset' => [
'timestamp' => 'force',
],
デバッグモードがtrueのときにタイムスタンプを有効にするにはtrueを設定します。デバッグモードに関係なく常にタイムスタンプを有効にするには'force'を設定します。
Laravelで更新日時を指定する場合
File::lastModified()でファイルの更新日時が取得できます。
<?php $timestamp = File::lastModified( public_path() . '\css\main.css'); ?>
<link rel="stylesheet" href="<?= asset('css/main.css') ?>?<?= $timestamp; ?>">
