目次
「修正されてませんよ？」対策
個人的にサイト制作やブログカスタマイズをお受けすることがあります。依頼があってCSSを修正したときにクライアントさんから
（修正してって言ったのに…）修正されてませんよ？
「修正されてません」「前と変わってないんですけど？」「デザイン崩れてる」と言われてしまうことがあります。
これはブラウザにキャッシュが溜まっていてキャッシュをクリアせずに閲覧した場合に起こります。
こういった誤解を避けるために「必ずCtrl + F5又はCommand + Rでスーパーリロードしてから見て下さい」と言うようにしているのですが、毎回言うのもしんどいですし、一々スーパーリロードするのも手間です。
そこでJSやCSS更新時にはファイルにタイムスタンプのクエリパラメータを付け、キャッシュを読み込まれないようにすることができます。
静的なサイトであれば読み込みCSSに日付などのクエリを付ければOKです。
WordPressの子テーマのfunctions.phpで自動的にクエリを付ける
WordPressの場合のキャッシュ対策の方法はネットにもよく書かれているのですが、header.phpでスタイルシートを読み込むやり方が多く、functions.phpでCSSの読み込みを管理している場合のやり方はあまり見かけませんでした。
カスタマイズしている多くのユーザーは子テーマを使っていると思います。ここでは子テーマ使用時にCSSファイルにクエリを自動的付加するやり方を紹介します。
子テーマのfunctions.phpの子テーマを読み込んでいるところを以下のように書き換えます。ハンドル名などは適宜変えて下さい。
functions.php
// 親テーマと子テーマのCSSを読み込みクエリ付き
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css?'. date("ymdHis", filemtime( get_stylesheet_directory() . '/style.css')), array('parent-style') );
}SANGOの子テーマfunctions.phpでの書き方
このブログはSANGOを使っているのですが、子テーマのfunctions.phpに以下のように書いています。
SANGOの子テーマfunctions.php
//子テーマのCSSの読み込みクエリ付き
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css?'. date("ymdHis", filemtime( get_stylesheet_directory() . '/style.css')), array('sng-stylesheet','sng-option') );
}これで以下のように出力されます。
headに出力
<link rel='stylesheet' id='child-style-css' href='https://ureshi-design.com/wp-content/themes/sango-theme-child/style.css?180516081234' type='text/css' media='all' />参考： 参考 CSSのキャッシュを読み込み時に更新させるMemo+...
この方法だとスーパーリロード無しで更新されたCSSファイルを読み込みことが出来、即座に変更が反映されます。頻繁にCSSを修正される方は是非導入してみて下さい。