CSS/JS キャッシュとバージョン管理¶
概要¶
INPortalのテーマアセット(CSS/JS)は、自動バージョン管理により手動でバージョン番号を更新する必要はありません。
仕組み¶
自動バージョン管理 (filemtime())¶
functions.php で以下のようにアセットを読み込んでいます:
$base_css_path = get_theme_file_path('assets/css/base.css');
$base_css_ver = file_exists($base_css_path) ? filemtime($base_css_path) : $theme_version;
wp_enqueue_style(
'kitanihon-portal-base',
get_theme_file_uri('assets/css/base.css'),
[],
$base_css_ver // ← ファイル更新日時がバージョンになる
);
filemtime()はファイルの最終更新日時(UNIXタイムスタンプ)を返す- FTPでファイルをアップロードすると更新日時が変わる
- 出力されるHTML:
<link href=".../base.css?ver=1736388xxx"> - ブラウザは
?ver=パラメータが変わると新しいファイルとして再取得
対象ファイル¶
| ファイル | 自動バージョン管理 |
|---|---|
assets/css/base.css |
✅ |
assets/css/app-home.css |
✅ |
assets/js/app-home.js |
✅ |
assets/js/interactions.js |
✅ |
assets/js/swup-init.js |
✅ |
assets/js/pwa-refresh.js |
✅ |
UI修正の更新フロー¶
- ローカルでCSS/JSを編集
- FTPで本番サーバーにアップロード
- 完了!(バージョン番号の手動更新は不要)
# 例: base.cssをアップロード
curl.exe -T "path/to/base.css" -u ksb1969:password "ftp://sv16678.xserver.jp/kitazo-group.com/public_html/portal/wp-content/themes/kitanihon-portal/assets/css/base.css"
キャッシュの種類と影響¶
| キャッシュ種類 | CSS/JSへの影響 | 対処方法 |
|---|---|---|
| ブラウザHTTPキャッシュ | ?ver= パラメータで回避 |
ファイル更新で自動解決 |
| Service Worker Cache | HTMLはNetworkOnly設定 | 通常は問題なし |
| PWAアプリ内蔵キャッシュ(iOS) | 影響少 | アプリ再起動で解決 |
| localStorage | 影響なし | - |
注意事項¶
Service Workerバージョンとの違い¶
- SWバージョン: Service Workerキャッシュのクリアに使用
- アセットバージョン: ブラウザHTTPキャッシュの制御に使用
これらは独立しているため、CSS/JSの更新だけならSWバージョンを上げる必要はありません。
プラグイン(SuperPWA等)の設定変更¶
プラグインの設定変更はファイル更新とは別のメカニズムで動作するため、設定変更が反映されない場合があります。その場合:
- 問題のUI要素をCSSで非表示にする方法が確実
- 例:
.snackbar { display: none !important; }
参考¶
functions.php26行目〜160行目: アセット読み込み処理class-service-worker-bridge.php: SW設定(HTMLはNetworkOnly)