メニュー

WEBMEMOする。とあるクリエイターの個人的な備忘録。

CSSを更新するとキャッシュを自動的に更新してくれる方法。

今までCSSファイルを更新するたびに、ブラウザ側に残っているキャッシュを削除していました。でもサイトを訪れてくれた人はCSSが更新されていることを知りません。表示のおかしい状態で見られてしまう可能性があります。

調べてみると、簡単な対処法がすぐに出てきます。ファイルのパスの末尾に「?◯◯」というクエリー文字をつける、というものです。

例えばこんな感じ。

<link rel="stylesheet" src="style.css?date=20170601">

“date=” は別になくてOK。というかなんでもOK。単純にわかりやすいからdateと書く人が多いみたい。

これはなんじゃ、という方はググるか、以下のようなサイトを参考にしてみてください。

【CSS】WEBサイトの更新時、CSSのキャッシュを自動で読み直す方法

キャッシュを有効にしつつ、cssやjsファイルの変更を確実に反映させる

なるほど、クエリー文字というのはだいたいわかった気がする。

でもWordPressのファイル読み込みはfunction.phpで管理したい。つまり、<link>タグで直接書くんじゃなくてwp_enqueue_を使用して書きたい。

と思ったらこのパターンはあまりでてこなかったので、忘れないようにメモ。

目次

    wp_enqueue_での記述例

    CSSはこんな感じ

    wp_enqueue_style('style_css', $dir.'/style.css', array(), date('YmdGi', filemtime(get_template_directory().'/style.css')));

    jsはこんな感じ

    wp_enqueue_script('mainscript',$dir.'/js/script.js', array(), date('YmdGi', filemtime(get_template_directory().'/js/script.js')), true);

    ※変数 $dir は get_template_directory_uri()を代入しています。

    wp_wnqueue_◯◯は第4引数でバージョン指定ができるのですが、これがつまりクエリー文字に何をつけるか?って指定になってます。指定した文字列が ?ver=”文字列” としてファイル名の後ろに追加されます。

    なので、ここにファイルの更新日を記述しておけば、ファイルが更新されるたびにクエリー文字も更新され、すぐにファイルの変更内容が反映されるようになります。

    ファイルの更新日を記述しているのが、

    date('YmdGi', filemtime(get_template_directory().'/style.css'))

    の部分です。

    子テーマの場合はget_template_directory()ではなくget_stylesheet_directory_uri()を使用。ていうかどっちの場合でもget_stylesheet_directory_uri()でいいと思います。

    filemtime('ファイルへのパス')

    こいつで、ファイルの更新日時の情報をUnix タイムスタンプとやらで取得してきます。

    date('形式指定', 'タイムスタンプ' )

    で、タイム形式を指定した形式の文字列に変換しています。’YmdGi’は’年月日時分’です。

    ちなみに、wp_enqueue_の第二引数はファイルのパスを指定するところなので、ここにクエリー文字を入れると読み込んでくれるけどなんか変になります。

    また、jsの読み込みはwp_footer()で読み込む方法と合わせた記述です。wp_enqueue_scriptの引数の意味などは以下の記事にメモしていますのでよければ参考にどうぞ。

    - Thank you for reading this to the end. -

    コメントする

    CAPTCHA


    TOPへ Top