WordPress テーマ STINGER 8 で、style.css の変更をすぐに反映させる方法

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秒ごとに値が変わりますので）。但し、ブラウザのキャッシュが使われなくなるため、多少ページの読み込みが遅くなります。

3. まとめ

この問題で困っている人って結構いるのではないでしょうか？ お役に立てれば嬉しいです。

このような問題をご自分で解決したい方は、PHPの勉強をお勧めします。