WordPress の無料テーマである STINGER 8 のカスタマイズのお話です。
1. 問題点
STINGER8 は 子テーマと合わせて使用することになっていまして、スタイルシート(CSS)に何か書きたい時は、子テーマ側の style.css
に追記していると思います。
子テーマ側の style.css
に追記したり修正したりした場合、ブログにアクセスしてくるユーザーにはすぐにこの新しい style.css
を読み込んで欲しいわけです。ところが、ブラウザはスタイルシートのファイルをキャッシュして再利用しようとしますので、以前にアクセスしたことのあるユーザーには以前の style.css
が適用されてしまいます(永久にキャッシュするわけではありませんが)。こうして、「変更したのに反映されない!」という困った状況が生まれます。
2. 対策
準備作業
親テーマ側の functions.php
内にある st_enqueue_styles()
関数を、そのまま 子テーマ側の functions.php
にコピーペーストします。
子テーマ側の functions.php にペースとしたコード
//...
function st_enqueue_styles() {
wp_register_style(
'normalize',
get_template_directory_uri() . '/css/normalize.css',
array(),
'1.5.9',
'all'
);
wp_register_style(
'font-awesome',
get_template_directory_uri() . '/css/fontawesome/css/font-awesome.min.css',
array('normalize'),
'4.5.0',
'all'
);
wp_register_style(
'style',
get_stylesheet_uri(),
array('normalize', 'font-awesome'),
false,
'all'
);
wp_enqueue_style( 'style' );
}
//...
子テーマ側でこの関数を定義しておけば、親テーマ側でこちらを使用してくれます。
style.css
に変更を加えた後に必要な作業
では、style.css
に何かスタイルシートの記述を追加したとします。
このとき、style.css
が更新されたことをユーザーのブラウザに知らせるため、次の作業を行います。と言ってもたいした作業ではなく、先ほどペーストしたコード内にある最後の wp_register_style()
関数の第四引数を変更するだけです(ここで 子テーマの style.css
を読み込んでいます)。
一番最初は false
になっていますが、バージョンを表す適当な文字列に変更します。ここでは、’1′ にしてみました。
wp_register_style(
'style',
get_stylesheet_uri(),
array('normalize', 'font-awesome'),
'1', // ← ここです!
'all'
);
以後、style.css
に修正を加える度に、この部分のバージョンを更新していきます(’1′ → ‘2’ → ‘3’ と値を増やすだけで大丈夫です)。
これにより、このスタイルシートのURLの末尾が「style.css?ver=1
」となり、ブラウザがキャッシュではなく新しくファイルを読み込んでくれます(「?」以降の部分が変わっただけで、ブラウザは新しいものとして認識します)。
※ Android の Chrome ブラウザは、これをやってもまだキャッシュを使うことがあるようです。(良かれと思ってやっているのでしょうが、こういうのは困りますね。)
毎回バージョンを更新するのが面倒な方は、「’1’」というような記述ではなく、例えば「time()」としておけばその必要がなくなります(1秒ごとに値が変わりますので)。但し、ブラウザのキャッシュが使われなくなるため、多少ページの読み込みが遅くなります。
wp_register_script()
の第四引数wp_register_script()
の第四引数が false
の場合、ver
パラメータには、その環境にインストールされている WordPress のバージョン番号がセットされます。
3. まとめ
この問題で困っている人って結構いるのではないでしょうか? お役に立てれば嬉しいです。
このような問題をご自分で解決したい方は、PHPの勉強をお勧めします。
他のサイトをみても解決しなかったので助かりました。
有用な記事をありがとうございます。
どういたしまして!