WordPress テーマで CSS や JavaScript を読み込むとき、header.php に直接 <link> や <script> を書いていませんか？実は WordPress には、CSS・JS を読み込むための正式な仕組み wp_enqueue_style() と wp_enqueue_script() が用意されています。この記事では、それらを使った正しい読み込み方法を、依存関係・読み込み順・キャッシュ対策まで含めて解説します。
目次
なぜ直接 link / script タグを書いてはいけないのか
テンプレートに直接タグを書く方法でも表示自体はできますが、次のような問題が起こります。
- 重複読み込み：プラグインやテーマが同じライブラリ（jQuery など）を二重に読み込んでしまう
- 読み込み順を制御できない：依存関係（A の後に B）を WordPress 側に伝えられない
- キャッシュが更新されない：ファイルを修正してもブラウザが古い CSS/JS を使い続ける
これらを WordPress に任せて解決するのが「エンキュー（enqueue＝順番待ちの列に並べる）」という考え方です。タグを自分で出力するのではなく、「このファイルを読み込んでほしい」と登録し、出力は WordPress に任せます。
基本：wp_enqueue_scripts フックに登録する
フロント側で CSS・JS を読み込むときは、必ず wp_enqueue_scripts アクションフックの中で行います。functions.php に次のように書きます。
function mytheme_enqueue_assets() {
// CSS を読み込む
wp_enqueue_style(
'mytheme-style',
get_stylesheet_uri()
);
// JavaScript を読み込む
wp_enqueue_script(
'mytheme-script',
get_theme_file_uri( '/js/main.js' ),
array(), // 依存関係
'1.0.0', // バージョン
true // フッターで読み込む
);
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );ポイントは、読み込み処理を関数にまとめ、add_action( 'wp_enqueue_scripts', ... ) で登録することです。テンプレートに直接タグを書く必要はなくなります（header.php の <?php wp_head(); ?> と footer.php の <?php wp_footer(); ?> があれば自動で出力されます）。
wp_enqueue_style() の使い方
CSS を読み込む関数です。引数は次の通りです。
wp_enqueue_style(
string $handle, // 識別名（ユニークに）
string $src = '', // CSS ファイルの URL
array $deps = array(), // 依存する CSS のハンドル名
string $ver = false, // バージョン（キャッシュ対策）
string $media = 'all' // メディアタイプ（all / screen / print など）
);第1引数の $handle は、この CSS を識別するための名前です。他とぶつからないよう、テーマ名やプレフィックスを付けると安全です。
// 複数の CSS を読み込む例
wp_enqueue_style( 'mytheme-reset', get_theme_file_uri( '/css/reset.css' ) );
wp_enqueue_style(
'mytheme-main',
get_theme_file_uri( '/css/main.css' ),
array( 'mytheme-reset' ) // reset.css の後に読み込まれる
);第3引数に array( 'mytheme-reset' ) を渡すと、「reset.css を読み込んでから main.css を読み込む」という依存関係を指定できます。読み込み順を自分で気にしなくてよくなります。
wp_enqueue_script() の使い方
JavaScript を読み込む関数です。CSS とほぼ同じですが、第5引数が異なります。
wp_enqueue_script(
string $handle, // 識別名
string $src = '', // JS ファイルの URL
array $deps = array(), // 依存するスクリプトのハンドル名
string $ver = false, // バージョン
bool $in_footer = false // true で body 終了直前に出力
);第5引数の $in_footer を true にすると、スクリプトが wp_footer() の位置（</body> 直前）に出力されます。ページの表示速度の観点から、JavaScript は基本的にフッターで読み込むのがおすすめです。
jQuery に依存するスクリプトを読み込む
WordPress には jQuery があらかじめ登録されています。jQuery を使うスクリプトは、第3引数に array( 'jquery' ) を指定するだけで依存関係を解決できます。
wp_enqueue_script(
'mytheme-slider',
get_theme_file_uri( '/js/slider.js' ),
array( 'jquery' ), // jQuery を先に読み込む
'1.0.0',
true
);自分で jQuery を読み込む必要はありません。array( 'jquery' ) と書けば、WordPress が同梱の jQuery を適切な順序で読み込んでくれます。
WordPress 6.3 以降の strategy（defer / async）
WordPress 6.3 からは、第5引数に配列を渡して defer や async を指定できるようになりました。
wp_enqueue_script(
'mytheme-script',
get_theme_file_uri( '/js/main.js' ),
array(),
'1.0.0',
array(
'in_footer' => true,
'strategy' => 'defer', // defer または async
)
);バージョン指定でキャッシュ対策をする
第4引数のバージョンは、出力される URL の末尾に ?ver=1.0.0 として付与されます。CSS や JS を修正したときにこの値を変えると、ブラウザが新しいファイルを読み込み直します（キャッシュバスティング）。バージョンの付け方には、主に「テーマのバージョンを使う方法」と「ファイルの更新日時を使う方法」があります。
テーマのバージョンを使う（一般的な方法）
もっとも一般的なのは、テーマの style.css に書かれている Version: の値を使う方法です。wp_get_theme() でテーマ情報を取得し、get( 'Version' ) でバージョン番号を取り出してバージョンに渡します。
$theme_version = wp_get_theme()->get( 'Version' ); // style.css の Version を取得
wp_enqueue_style(
'mytheme-style',
get_stylesheet_uri(),
array(),
$theme_version
);こうしておくと、テーマを更新して style.css の Version: を上げるだけで、読み込んでいる CSS・JS すべてのバージョンが一度に切り替わります。テーマの更新とキャッシュ更新のタイミングがそろうため、本番サイトで管理しやすいのがメリットです。
filemtime() でファイルの更新日時を使う（もう一つの方法）
もう一つの方法として、filemtime() でファイルの更新日時（タイムスタンプ）をバージョンに使う方法があります。ファイルを保存するたびに値が自動で変わるので、テーマのバージョンをいちいち上げなくても更新が反映されます。修正が頻繁な開発中に便利です。
$main_css = get_theme_file_path( '/css/main.css' );
wp_enqueue_style(
'mytheme-main',
get_theme_file_uri( '/css/main.css' ),
array(),
filemtime( $main_css ) // ファイル更新時刻をバージョンに
);get_theme_file_path() はサーバー上の絶対パス、get_theme_file_uri() はブラウザ用の URL を返します。filemtime() はパスを受け取るので、URL ではなくパスを渡す点に注意してください。
本番サイトでは「テーマのバージョン」、開発中は「filemtime()」のように使い分けると管理しやすくなります。
条件によって読み込みを分ける
特定のページだけで使うスクリプトは、条件分岐タグと組み合わせて必要なときだけ読み込めます。不要な読み込みを減らせるので、表示速度の改善につながります。
function mytheme_enqueue_assets() {
// 全ページ共通
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
// お問い合わせページだけで読み込む
if ( is_page( 'contact' ) ) {
wp_enqueue_script(
'mytheme-form',
get_theme_file_uri( '/js/form.js' ),
array(),
'1.0.0',
true
);
}
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );テーマファイルの URL を取得する関数
ファイルの URL を指定するときは、ハードコーディングせず専用の関数を使います。サーバー環境や子テーマでもパスがずれません。
| 関数 | 説明 |
|---|---|
get_stylesheet_uri() | 有効なテーマの style.css の URL |
get_theme_file_uri( '/path' ) | テーマ内ファイルの URL（子テーマを優先） |
get_template_directory_uri() | 親テーマのディレクトリ URL |
get_stylesheet_directory_uri() | 子テーマのディレクトリ URL |
子テーマを使う可能性があるなら、get_theme_file_uri() を使っておくと、子テーマ側に同名ファイルがあればそちらを優先してくれるため便利です。
CSS・JSが読み込まれないときに確認すること
「登録したのに反映されない」というときは、次のような原因が考えられます。順に確認してみてください。
wp_enqueue_scripts フックの外で呼んでいる
読み込み処理は必ず wp_enqueue_scripts フックの中で呼び出します。functions.php のトップレベルやテンプレートに直接書いても、適切なタイミングで実行されず正しく動きません。add_action( 'wp_enqueue_scripts', ... ) で登録した関数の中に書いているか確認しましょう。
ハンドル名が他とかぶっている
第1引数の $handle は識別名なので、他のテーマやプラグインと重複すると、後から登録したものが無視されてしまいます。読み込まれないときは、テーマ名などのプレフィックスを付けて、ハンドル名がユニークになっているか見直してみてください。
wp_head() / wp_footer() がテーマにない
エンキューしたファイルは、header.php の wp_head() と footer.php の wp_footer() の位置に出力されます。テーマのテンプレートにこれらの関数が書かれていないと、登録しても実際には出力されません。自作テーマの場合は特に見落としやすいポイントです。
filemtime() に URL を渡している
バージョンに filemtime() を使う場合、渡すのは URL ではなくサーバー上のファイルパスです。get_theme_file_uri()（URL）を渡すとエラーになるため、get_theme_file_path() で取得した絶対パスを渡しているか確認しましょう。
まとめ
WordPress で CSS・JavaScript を読み込むときは、テンプレートに直接タグを書くのではなく、wp_enqueue_scripts フックの中で wp_enqueue_style() と wp_enqueue_script() を使うのが正しい方法です。
- 読み込みは必ず
wp_enqueue_scriptsフック内で行う - 依存関係は第3引数で指定する（jQuery は
array( 'jquery' )） - JavaScript は第5引数
trueでフッター読み込みにする - バージョンに
filemtime()を使うとキャッシュ対策が自動化できる
この仕組みを使えば、読み込み順やキャッシュの問題に悩まされず、テーマやプラグインと安全に共存できます。まずは functions.php に基本形を1つ書くところから始めてみましょう。