ブログ初心者・Web制作の情報サイト
【WordPress】CSS編集時に自動で再キャッシュさせる方法

【WordPress】CSS編集時に自動で再キャッシュさせる方法

この記事では編集したスタイルシートを自動で再キャッシュさせる方法を紹介します。

CSSを編集してブラウザで確認したら反映されていない  > ブラウザのキャッシュクリア。これってとても面倒ですよね。自動で再キャッシュして欲しいものです。

自動での再キャッシュは条件を追加するだけで簡単に実装できます。再キャッシュの自動化で無駄な手間を省きWeb制作を楽にしましょう。

再キャッシュの自動化

ここではWordPressでのスタイルシート登録方法と再キャッシュ自動化の方法について解説します。

CSSが反映されないときキャッシュの存在を忘れて真っ先にコードを見直してしまう、そんな経験ありすよね? 解決法はキャッシュを削除するだけなので簡単ですが時間を無駄にしてしまうだけなのでぜひともキャッシュは自動化しておきたいところです。

再キャッシュの自動化の考え方・方法はとてもシンプルなのでぜひこの記事を読んで使いこなせるようになってください。

再キャッシュ自動化の考え方

スタイルシートの登録時にはタイムスタンプを設定することができます。しかし定数で指定する場合は結局手動更新になってしまいます。

再キャッシュで重要なのはファイルのタイムスタンプを更新することです。タイムスタンプを更新するとファイルが更新されたとブラウザが認識し再びキャッシュしてくれます。

それではどうやってタイムスタンプを更新するのでしょうか? タイムスタンプの出力を関数で行うことでファイル読み込み時に自動で更新できそうです。

以下でこれらについて順に説明していきます。

スタイルシートの登録方法

一般的にWordPressでスタイルシートを登録する方法はheaderに直接リンクを書く方法とwp_enqueue_style()で登録する方法の2通りがあります。

header内に書く場合

<link rel="stylesheet" href=<?php echo get_stylesheet_directory_uri().'/style.css'.'?202004221330' ?>>

wp_enqueue_style() で登録する場合は関数内に処理を書き wp_enqueue_scripts にフックします。

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style(
        'my_style.css',
        get_stylesheet_directory_uri().'/style.css',
        array(),
        202004221330,
    );
});

一度に複数のスタイルシートを登録でき、functions.php に記述すればHTMLが煩雑になるのを防げるのでこちらの方法がおすすめです。

上記2つのコード内にある 202004221330 という部分がタイムスタンプであり、この数字を更新することでファイルを再キャッシュさせることができます。キャッシュを保持したいファイルがある場合はこの方法を使えばOKです。

今回の目的は再キャッシュの自動化なのでこの数字を自動で更新する方法を考えます。

date() 関数を使用してタイムスタンプを更新する

タイムスタンプ部分に date() を使用します。date() は日付や時間を指定したフォーマットで出力するPHP関数です。

ファイルが読み込まれるときの時間を出力してくれるのでキャッシュの期間を調整することができ使い勝手が良いです。

例として date(“YmdHi”) と書くと 202004221230 といった分までの時間を出力します。この場合はキャッシュの期間が1分ということになります。

header内に書く場合

<link rel="stylesheet" href=<?php echo get_stylesheet_directory_uri().'/style.css?'; echo date("YmdHi"); ?>>

wp_enqueue_style() で登録する場合

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style(
        'my_style.css',
        get_stylesheet_directory_uri().'/style.css',
        array(),
        date("YmdHi"),
    );
});

スタイルシート以外でも使える

この方法はスタイルシートだけに限らず Javascriptや画像、その他のファイルに対しても使える方法です。

特に Javascriptファイルは編集してチェックする頻度が高いので再キャッシュの自動化は有効な手段だと思います。

再キャッシュしてもCSSが反映されないとき

Web制作で編集したCSSがブラウザに反映されないという状況は良く起こりその原因は複数あります。再キャッシュしてもCSSが反映されない場合はコードに問題がある場合が多いです。

ここではそれら原因の例をあげておきます。

  • クラス名が間違っている
  • 詳細度が低い
  • important! の使いすぎ

対処法については以下の記事が参考になります。

CSSが効かない・反映されないときの対処法まとめ

最後に

CSSファイル編集時の再キャッシュを自動化する方法につて紹介しました。

再キャッシュを自動化するということは実質キャッシュを無効化することなのでファイルの更新頻度に合わせてファイルごと設定するのがいいと思います。

WordPressでテーマを編集する際には確実にぶち当たる問題なのでぜひ対処法を覚えておいてください。