CSSを更新した時に必ず最新のCSSを読み込ませる方法

access_time

CSSを更新した時に必ず最新のCSSを読み込ませる方法

ホームページを更新する際にHTMLと一緒にCSSを更新してアップする作業はよくあると思います。その際にキャッシュが影響しているせいでCSSの更新が反映されずにイライラする事ってありませんか?

ブラウザにはキャッシュ機能があって素早く読み込ませるためにCSS等のファイルを保存しておくという事がわかっていれば、CTRL+F5キーで最新版を読み込ませればOK!となるのですが、モバイル版は実機で確認する場合いちいちキャッシュデータを削除して確認するなど色々と面倒です。
それと、お客様からある「ページが崩れてるんだけど」という問い合わせの対応…毎回再読み込みの方法をお伝えしたりします。

というわけで時短のためにメモしておきます。

WordPress対応のサイトの場合

ワードプレスの場合はphpが使えますしテンプレートを読み込ませるコードもありますので、HTMLのCSSを読み込ませる部分の最後にクエリを一文追加するのと、読み込ませるためのテンプレートを用意するだけなのでお手軽です。

用意するもの

update.php というファイルを用意して中身はこんな感じにしておきます。

20191217

1行だけのphpテンプレートファイルです。数字は適当ですが、私は日付を入力したりしています。ちなみにファイル名は主要なテンプレートファイルの名前とかぶらなければ何でも良いです。
用意したらテーマファイル内に配置します。

CSSの読み込み部分に細工する

通常以下の様になっていると思います。

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

最後の.cssの後ろに ?<?php get_template_part('update'); ?>
と追記してテンプレートファイルを読み込んでクエリを作れるようにします。

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

これをアップする事でホームページ上では実際にこんな感じに表示されるようになります。

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

CSSの更新をした時だけupdate.phpを更新するようにすればクエリが更新されますので最新のCSSを読み込める仕組みになっています。
ひと手間かかりますが、CSSを確実に更新する方法としてのメモでした。

静的HTMLで作成されているサイトの場合

基本的なやり方はワードプレスのサイトと同じでCSSの読み込みにクエリを書きます。HTMLに直接書き込んで更新する場合はそれでOKなのですが、規模がおおきくなったり、する場合は結構大変な作業になりますので、HTMLの中でPHPが動くようにサーバー設定をいじってワードプレスのやり方同様に管理する方法をメモしておきます。

ワードプレスの時と同様にupdate.phpを用意します。
拡張子はphpでなくてもOKです。htmlでもtxtでもテキストが書いてあるファイルを用意します。

通常はHTML上ではPHPを動かす事ができないので、.htaccessファイルに追記します。これは大体同じなのですが、サーバーによって多少変わりますのでサーバーのマニュアルを参考にすると良いと思います。

ちなみにこのサイトはColorfulBox(カラフルボックス) というサーバーを利用しているのでこんな感じで.htaccessに追記してルートディレクトリにアップします。

AddType application/x-httpd-php .php .html

注意!.htaccess をいじる際は必ずバックアップをとってから作業をしましょう。

参考
拡張子.htmlのファイルでPHPを動作させることはできますか?
カラフルボックスサポートサイト

これでHTML上でPHPが動くようになりましたので、ワードプレスでやったようにCSSの後ろに追記すれば大丈夫です。ただし、テンプレートではないのでインクルードで追記します。

<link rel="stylesheet" type="text/css" href="css/style.css?<?php include("update.php"); ?>">

こんな感じでクエリを利用して最新版のCSSを読み込ませます。
モバイル版の実機テストでも役に立ちます!

他にも色々と方法はあるみたいですが、私自身は更新の際にCSSをあまり弄くりたくないのでHTMLだけ更新するパターンが多いです。
なので、CSSを更新した時だけupdate.phpの文字列を変更できるように考えました。長々とコレを読んでくれた方のお役に立てば幸いです。

HTML Wordpress サーバー