うぇぶもよう

WordPressでCSS・JSをfunctions.phpから読み込む方法とキャッシュ対策

うぇぶもようの中の人

はじめに

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');

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');

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 にまとめて書いておけば、メンテもしやすく管理もスマート！
開発効率も上がるので、ぜひ取り入れてみてくださいね✨

モバイルバージョンを終了