wordpress css更新時に自動でキャッシュをリロードする方法

20.05.06

デザイナーなら必ず一度は経験している以下のやり取り…
クライアント：「デザインの変更お願いしたのにまだ変更されてないんですが～」
制作者：「キャッシュが残ってると思うので、リロードしてください～」
…この不毛なやり取り、もうすることありません、解放されます！

クライアント側でキャッシュクリアの手間を取らせずに、こちらでcssを変更するたびに「キャッシュを自動でリロードさせる方法」です。

方法としてはcssを変更するたびに「バージョン名を自動書き込み」することでサーバーにその都度新しいcssを読み込ませるという方法をとります。
なんだか説明はややこしいですが、やることはとても簡単！

css名に「更新した日時の数字をバージョン名」として追記する。

headerのcss表記を以下に変えることでできます。

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css?ver=<?php echo date('YmdHi', filemtime(get_stylesheet_directory() . '/style.css')); ?>"  type="text/css" />

1	<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css?ver=<?php echo date('YmdHi', filemtime(get_stylesheet_directory() . '/style.css')); ?>" type="text/css" />

filemtimeでファイルの最終更新時刻を返します。YmdHiだと「年月日時分」までの表示ですがYmdHisにすると「秒」まで表示することができます。

スマホとＰＣでレスポンシブファイルを使い分けているcssには以下のような感じ。

<link rel="stylesheet" media="screen and (min-width:771px)" href="<?php bloginfo('template_url'); ?>/style_pc.css?ver=<?php echo date('YmdHi', filemtime(get_stylesheet_directory() . '/style_pc.css')); ?>"  type="text/css" />
<link rel="stylesheet" media="screen and (max-width:770px)" href="<?php bloginfo('template_url'); ?>/style_sp.css?ver=<?php echo date('YmdHi', filemtime(get_stylesheet_directory() . '/style_sp.css')); ?>"  type="text/css" />