1. ホーム
  2. CSS
  3. 【WordPress】CSS のキャッシュを自動リロードさせる方法
投稿日: 投稿者: Hazuki

【WordPress】CSS のキャッシュを自動リロードさせる方法

はっと気が付いたのですが、CSS って更新しても、キャッシュに残っている場合、スーパーリロードさせないと新しいのが反映されないんですよね。ここもちょこちょこと CSS 書き足しているのですけれどね・・・。自分だけで見ているのなら、その都度スーパーリロードをかければいいのですが、公開していることを考えるとどうすればいいのか？「皆様、何月何日何時、CSS 更新しましたので、キャッシュのリロードお願いします」なんてわけにもいきませんしね。

CSS のキャッシュを自動リロードさせるには、どうすればいいのか？
CSS ファイルの更新日時を取得し、それに合わせてリロードするよう、htmlのheadに指示を書き込むことで解決できるみたいです。

やりたいこと

CSS 更新時、クライアント側のキャッシュを自動的にリロードさせる

利用する関数

[ PHP関数 ]
filemtime() → ファイルの更新時刻
date() → 日時の取得

[ WordPress関数 ]
bloginfo() → サイト情報を表示
get_stylesheet_directory()　→ 現在のテーマ、子テーマのスタイルシートのディレクトリパスを取得

手順

1. WordPressの利用中のテーマ、もしくは子テーマ（すでにheader.phpが子テーマの中にあるのなら）から、FTP で header.php をダウンロード
2. header.php に自動リロードの指示を追加
3. 子テーマに header.php をアップロード（子テーマについては後日書きます）

head.php

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<!--?php wp_head(); ?-->

/* ここに↓を追加 */
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>
?ver=<?php echo date('YmdHis', filemtime(get_stylesheet_directory() . '/style.css')); ?>" />

</head>

↑の head.php は、テーマ twenty seventeen のものですが、wp_head() の読み込まれたあとに追加すれば問題ありません。
やっていることは、要するに、更新日をそのまま style.css のバージョン名として、新たな style.css として認識させるということです。キャッシュに残っているのと別のバージョンなら、改めて読み込まれます。