制作Note

2025.06.28 ｜
制作Note
コメントはまだありません

CSS、自動バージョン管理に変更すると楽ラク

CSSを更新したら「ブラウザをスーパーリロードしてキャッシュをクリアにして再度画面確認お願いします」っていう案内をクライアントにしていたのは、もうずいぶん昔の話ですね。

wordpressにて現在は主に下記のように設定しています

自動バージョン管理に変更

wp_enqueue_style( 
    'your-theme-name', 
    get_template_directory_uri().'/style.css', 
    array(), 
    filemtime(get_template_directory() . '/style.css') 
);

filemtime()とは
filemtime()は、指定されたファイルの最終更新日時をUnixタイムスタンプで取得するPHP関数です。

テーマのstyle.cssファイルの最終更新日時を取得し、それをバージョン番号として使用しています。

この設定により、スタイルシートを更新したら自動的にバージョン管理されてキャッシュに依存することがなくなります。

✅ 自動更新: ファイル更新時に自動でバージョンが変わる
✅ 開発効率: 手動でバージョン番号を変更する手間が不要
✅ 確実性: ファイルが更新されれば必ずキャッシュが無効化される

想定のデメリットは下記です

  • ページが表示されるたびにファイルシステムへのI/O処理が発生
  • 大量のファイルで使用すると、サイトの表示速度が低下する可能性
  • CDNやキャッシュサーバーを使用している場合、効果が薄れる

手動でバージョン管理する際はこちら

wp_enqueue_style( 'your-theme-name', get_template_directory_uri().'/style.css?ver0_0_3' );

この部分の数字を変更する
?ver0_0_3

ローカル環境の開発中は常に最新な状態にするよう設定していたりします

wp_enqueue_style( 
    'your-theme-name', 
    get_template_directory_uri().'/style.css', 
    array(), 
    time() 
);

毎回異なるタイムスタンプが生成される
time() // 1640995200, 1640995201, 1640995202…

完全なキャッシュ無効化を実現。