もくじ
はじめに
WordPressのテーマ開発やカスタマイズをしていると、CSSやJavaScriptファイルを追加・更新する機会が多くなります。ただ、更新したのにブラウザに反映されない…それ、キャッシュの仕業かもしれません。
今回は、functions.phpを使ってCSSとJSを読み込む方法、そしてキャッシュを回避するテクニックをわかりやすく紹介します！
CSSファイルの読み込み（＋キャッシュ対策）
基本パターン（style.cssを読み込む）
function mytheme_enqueue_styles() {
wp_enqueue_style(
'mytheme-style',
get_stylesheet_uri(),
array(),
filemtime(get_theme_file_path('style.css'))
);
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_styles');filemtime()を使うことで、CSSファイルの更新時刻を自動でバージョン番号に- これにより、ブラウザのキャッシュが無視されて、最新のCSSが即反映されます✨
JavaScriptファイルの読み込み（＋キャッシュ対策）
テーマ内の js/main.js を読み込む例
function mytheme_enqueue_scripts() {
wp_enqueue_script(
'mytheme-script',
get_theme_file_uri('/js/main.js'),
array(), // 依存スクリプト（例：['jquery'] など）
filemtime(get_theme_file_path('/js/main.js')),
true // フッターで読み込むならtrue
);
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_scripts');filemtime()を使ってJSのキャッシュも回避できる- 最後の引数
trueは、「footerで読み込む」の意味 → パフォーマンス的におすすめ！
CDNで提供されているファイルの場合
CDNのファイル（例：FontAwesome、jQueryなど）は filemtime() できないので、バージョンを空にするか手動でつける形になります。
wp_enqueue_script(
'jquery-cdn',
'https://code.jquery.com/jquery-3.7.1.min.js',
array(),
null,
true
);まとめ
| 項目 | 方法 | キャッシュ対策 |
|---|---|---|
| CSS読み込み | wp_enqueue_style() + filemtime() |
◎ 自動で反映される |
| JS読み込み | wp_enqueue_script() + filemtime() |
◎ リロード不要で安心 |
| CDN系 | バージョン指定 or null でもOK | △ ファイル更新は外部依存 |
CSS・JSともに functions.php にまとめて書いておけば、メンテもしやすく管理もスマート！
開発効率も上がるので、ぜひ取り入れてみてくださいね✨
