WordPress

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

投稿日:2018年2月27日 更新日:

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 のバージョン番号がセットされます。

参考: wp_register_script()

3. まとめ

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

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

📂-WordPress
-

執筆者:labo


  1. hoge より:

    他のサイトをみても解決しなかったので助かりました。
    有用な記事をありがとうございます。

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPressで作られたサイトの利用テーマを調査する

ブラウザでサイトを見ていて、「これは WordPressを使っているのか?」「WordPressを使っているとしてら、何のテーマを使っているのか?」を調査する方法です。 ※ 100%分かるわけではあり …

WordPress の Attitude テーマに日本語翻訳ファイルを使用する(子テーマ利用)

WordPress の Attitude テーマに日本語翻訳ファイルを追加する方法です。 子テーマを利用していることを前提としており、子テーマのディレクトリ側に翻訳ファイルを追加します。 目次前置き( …

WordPress

WordPressのカスタムHTMLブロックで ‘>’ などを記述する場合の問題点 (未解決)

WordPressのカスタムHTMLブロックで ‘>’ などを記述する場合の問題点 (未解決)

WordPress

【WordPress】Gutenberg の 画像ブロック(core/image)で相対URLをセットする

WordPress の Gutenberg において、「 画像ブロック (core/image)」で相対URLを使用するプラグインを作りましたので紹介します。

WordPress

WordPress のプラグイン Autoptimize についての覚書

WordPress のプラグイン Autoptimize についての覚書です。