WordPress子テーマでCSSにタイムスタンプ追加して古いキャッシュを無効にする

WordPressのstyle.cssでデザインやレイアウトを編集してブログの表示を確認しても、ブラウザキャッシュの影響で古い(編集前の)状態にになっていることがあります。

CSS修正でブラウザキャッシュをクリアにして再読み込みするのも面倒だし、自分以外の訪問者のブラウザにも古いキャッシュが残ってる場合もある。いちいち「ブラウザキャッシュをクリアしてください」と言うのも無理がある。

style.cssの更新日時からタイムスタンプを付けて「style.css?0123456789」のようにファイルを読み込むと、style.cssを編集するたびに新しいタイムスタンプに変わるので古いキャッシュが表示されることは無い。

今回参考にしたのがこちらのサイトです。

Wordpressで修正したCSSを即効でWebサイトに反映させるテクニック - システム開発と英語勉強の日々
最近、Wordpressを使用する機会が多くなったのでWordpressネタも少しずつ投稿していこうかなと思っています..

この方法だと、親テーマの「header.php」に直接記入することになるので、僕のブログで使ってる「Simplicity2」の子テーマだと使えないから少しアレンジした。

やり方として「style.css」を読む際に、functions.phpで子テーマのstyle.cssにタイムスタンプを付けて「style.css?0123456789」のようにすること。

functions.phpを編集するので間違えると最悪ブログが表示されなくなります。事前にバックアップを取って元に戻せるようにしてください。

スポンサーリンク

functions.phpでstyle.cssにタイムスタンプを付けて読み込む

functions.phpで、親テーマの「header.php」にタイムスタンプ付きのstyle.cssを読み込みます。

functions.phpに次のコードを追記します。各行のコードについても簡単に説明します。

 //style.cssをタイムスタンプ付きで読み込む関数
function header_stylecss_include() {
 $styleurl = get_bloginfo("stylesheet_url"); //現在のテーマのstyle.cssのパスを取得
 $styletime = filemtime( get_stylesheet_directory() . '/style.css'); //現在現在のテーマのstyle.cssのタイムスタンプ取得
 echo '<link rel="stylesheet" id="child-style-css" href="',$styleurl,'?',$styletime,'" />'; //タイムスタンプ付きstyle.cssを読み込む
}
add_action('wp_head', 'header_stylecss_include');

このコードをSimplicity2子テーマのfunctions.phpに追加するだけで良い。変数を使ってるのは見やすくするためです。

各行のコードについて簡単に説明します。

$styleurl = get_bloginfo("stylesheet_url");

get_bloginfo(“stylesheet_url”)で現在使用しているテーマのstyle.cssのURLを取得している。それを変数「$styleurl」に代入している。

$styletime = filemtime( get_stylesheet_directory() . '/style.css');

get_stylesheet_directory()で「style.css」のディレクトリのパスを取得して、その中にある「style.css」のファイルのタイムスタンプをfilemtimeで取得している。先ほどと同じく変数「$styletime」に入れている。

echo '<link rel="stylesheet" id="child-style-css" href="',$styleurl,'?',$styletime,'" />';

上記2つの変数を組み合わせてstyle.cssを読み込みます。

「<link rel=”stylesheet” id=”child-style-css” href=”http://example.net/wp-content/themes/simplicity2-child/style.css?0123456789” />」のように「style.css」にタイムスタンプが付いた状態になります。背景が「橙、水色」に「$styleurl」、「$styletime」の中身(値)が入ります。

add_action('wp_head', 'header_stylecss_include');

この行でhtmlの<head>~</head>内に出力されます。

この記事の「3.の方法」を少し変えたものです。

STINGER8子テーマにヘッダーファイルとフッターファイルを追加する方法
WordPressの無料テーマSTINGER8について気になる記事がを見かけました。 トラッキングコードなどは、HTM...

ちなみに「style.css?0123…」と「?(はてな)」を付けることについて、僕自身詳しくは知らないからイメージとしては

「style.css?0123…」でもstyle.cssを読み込む。?の後ろにある文字列が変わるとブラウザで別の「style.css」だと認識して新しく読むので古いキャッシュが更新される

という感じになります。

古いキャッシュが効いたままなのか検証

style.cssを編集しても古いキャッシュが効いたままなのか検証してみます。

  1. タイムスタンプなしでstyle.cssを読み込む(新規読み込み)
  2. タイムスタンプなしでstyle.cssを編集してキャッシュを検証
  3. タイムスタンプ付きでstyle.cssを編集してキャッシュを検証
  4. タイムスタンプ付きでstyle.cssのキャッシュを検証(無編集)
  5. タイムスタンプ付きでstyle.cssのキャッシュを検証(編集後)

の順で行います。

一番下のstyle.cssです。緑枠にファイルサイズが書いてあるので新たに読み込んでいるのが分かります。

次にstyle.cssを編集して読み込みます。「from disk cache」と表示されブラウザのキャッシュから読み込んでるのが分かります。Timeの読み込み時間もローカルからなので速いです。

タイムスタンプ付きのstyle.cssが現れて、新しく読み込んでるのが分かりますね。他の「style.css」は既に読み込んでるのでブラウザキャッシュになってます。

タイムスタンプが変わらないのでブラウザキャッシュになってます。

style.cssを編集したのでタイムスタンプが更新され、新しく読み込んでいます。

それでも古いキャッシュが使われていたら

パソコンで確認したら上記の検証の通りキャッシュが更新された。でもスマートフォンでOperaのブラウザで更新しても、古いキャッシュが残ったままだった。

このブログのレンタルサーバーは「LiteSpeed」というwebサーバーを使っていて、サーバーキャッシュでブログのページがキャッシュされている。

WordPressのキャッシュ系プラグイン「LiteSpeed Cache」とサーバーキャッシュが連動していて、プラグインでキャッシュをクリアにしたらスマートフォンでもキャッシュが更新された。

なので、他のキャッシュ系プラグインで使える方法か分かりませんが参考までに。

「LiteSpeed Cache Purge All」をクリックするとサーバーキャッシュがクリアされます。

Simplicity2子テーマの「header-insert.php」に書くと使えない(失敗談)

実は最初に、Simplicity2子テーマの「header-insert.php」に参考にしたサイト『システム開発と英語勉強の日々』と同じ方法でコードを書いていた。

「style.css?013…」のようにタイムスタンプが付いて読み込んだのだけど、肝心のcssが無効のままだった。

これはSimplicity2子テーマの「header-insert.php」に書いたコードががstyle.cssより手前に入り、style.cssを読み込む順番が関係して

  1. 子テーマheader-insert.phpの「style.css?0123…」
  2. 子テーマの「style.css」

の順でになるので、後で読み込む「style.css」が優先される(親テーマのcss読み込みはここでは省略)

このように無効になっている。

これが「functions.php」で追加する方法だと

  1. 子テーマの「style.css」
  2. 子テーマheader-insert.phpの「style.css?0123…」

の順に読み込むので、「style.css?0123…」が優先される。

あとがき

この方法は子テーマのstyle.cssを2回読み込むことになるので、新規訪問者やブラウザのキャッシュをクリアにした状態でブログを開くと読み込み時間が遅くなるかもしれないです。

例えば記事本文に<iframe>で埋め込んだYouTubeなどの動画を、cssでレスポンシブに表示するのにfunctions.phpで<iframe>の一部のコードを置き換える方法があるから、子テーマの「style.css」をタイムスタンプ付きに置き換える事も出来そうだけど、今の僕のスキルでは今回説明したやり方でせいいっぱいです。

<iframe>のやり方は記事本文を取得してから置き換えてるから、<head>~</head>内の取得と正規表現で子テーマのstyle.cssを置き換え、それを<head>~</head>内に出力で行けそうなんだけど、さっぱりです。

なので、効率は悪いかもしれないけど、こんな方法もあると参考にしてくれたらと思います。

スポンサーリンク

当ブログのレンタルサーバーは『mixhost』で運営してます。

フォローする

スポンサーリンク