WordPress

【初心者向け】filemtime()とは?キャッシュを自動更新する便利な仕組みを解説


CSSやJSを更新しても反映されない?その原因はキャッシュかも

「CSSを修正したのに、ブラウザで反映されない…」
「JavaScriptを直したはずなのに、なぜか動かない…」

そんな経験はありませんか?
実はそれ、ブラウザのキャッシュが原因であることが多いんです。

ブラウザは「同じファイル名のCSSやJS」を再利用(キャッシュ)して表示するため、
ファイルを更新しても古いバージョンが残ってしまうことがあります。

そんなときに役立つのが、PHPの関数 filemtime()(ファイル・エムタイム) です。


なぜfilemtime()を使うと解決できるのか

WordPressでCSSやJSを読み込むとき、多くの人は以下のように書きます。

wp_enqueue_style('style', get_theme_file_uri('css/style.css'), array(), '1.0', 'all');

この '1.0' の部分は「バージョン番号」です。
この番号が変わらない限り、ブラウザは「同じファイル」と判断してキャッシュを使い続けます。

つまり、ファイルの中身が更新されても、
バージョン番号を手動で変えないと反映されないのです。

しかし、filemtime()を使えばこのバージョン番号を自動で更新できます。
これにより、CSSやJSを編集するたびに自動的に最新のファイルが読み込まれるようになります。


実際のコード例(テーマで使う形)

以下のように書くだけでOKです👇

function my_scripts() {

    // CSSの読み込み(更新時間をバージョンとして使用)
    wp_enqueue_style(
        'my_style',
        get_theme_file_uri('css/style.css'),
        array(),
        filemtime(get_theme_file_path('css/style.css')),
        'all'
    );

    // JSの読み込み(同様に更新時間をバージョン化)
    wp_enqueue_script(
        'my_script',
        get_theme_file_uri('js/main.js'),
        array('jquery'),
        filemtime(get_theme_file_path('js/main.js')),
        true
    );
}
add_action('wp_enqueue_scripts', 'my_scripts');

💡filemtime()ってなに?

filemtime()file modified time(ファイルの更新時間) の略で、
指定したファイルの「最終更新時刻」を数値で取得できるPHP関数です。

つまり、ファイルを編集して保存するたびに
filemtime()の値が自動で変わり、
それをバージョン番号として利用することで、
常に最新ファイルが読み込まれるという仕組みです。


✅ filemtime()を使うメリット

メリット内容
🔄 自動でバージョン更新ファイルを編集するたびに自動でバージョン番号が変わる
🚫 キャッシュ問題を防止古いCSSやJSが残ることを防ぐ
🧠 管理がラク手動でバージョン番号を変更する手間が不要
⚙️ テーマ開発に最適開発中も公開後も常に最新の状態を反映できる

まずは自分のテーマでも試してみよう!

もしあなたのテーマでまだ固定のバージョン番号を使っているなら、
今すぐ filemtime() に置き換えてみましょう。

キャッシュが原因で「更新されない…」というストレスがなくなり、
開発効率も大幅に上がります。

✉️ あなたのリクエスト教えてください!

「この記事わかりやすかった!」
「他にもこんな記事書いてほしい!」
そんな声を、ぜひXのDMで教えてください!😊📩

できるだけリクエストにお応えして、今後の記事作成に活かしていきます

▶️ X@TumaLOVE0127もフォローしてもらえるとめちゃくちゃ嬉しいです!

hisa

コメントを残す

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

CAPTCHA