CSSファイルの更新をすぐに反映させる方法

Webの開発を行っているとCSSファイル(スタイルシート)を更新したのにデザインが変わらないことがあります。この場合、ブラウザのキャッシュが原因で一旦キャッシュを削除してから確認という流れになります。
この作業は面倒ですし、実際ホームページを見てくれてる人にはキャッシュ削除を依頼できないので、古いデザインで閲覧されている可能性もあります。
この問題を解決するためにCSSファイルのクエリ文字列を使います。クエリ文字列を使うことでブラウザにCSSファイルの更新を知らせることができます。

CSSファイルへのクエリ文字列の付け方

style.css?201906100900style.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" />
このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

関連コンテンツ

スポンサードリンク

Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です