テーマのCSSとJavaScriptは、functions.phpからwp_enqueue_style() / wp_enqueue_script()で読みこむのが正しい方法です。header.phpに<link>を直書きするやり方は、順番や重複が管理できずトラブルの原因になります。
function my_assets() {
wp_enqueue_style('main', get_theme_file_uri('style.css'), [], '1.0.0');
wp_enqueue_script('main', get_theme_file_uri('js/main.js'), [], '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_assets');これだけで、wp_head()とwp_footer()の位置に正しい形で出力されます。
引数の意味
wp_enqueue_style('ハンドル名', 'URL', 依存, バージョン, メディア);
wp_enqueue_script('ハンドル名', 'URL', 依存, バージョン, フッターに置くか);| 引数 | 役割 | 例 |
|---|---|---|
| ハンドル名 | このファイルの識別名（重複の防止に使われる） | 'main' |
| URL | ファイルの場所 | get_theme_file_uri('style.css') |
| 依存 | 先に読むべきファイルのハンドル名 | ['jquery'] |
| バージョン | キャッシュ対策の文字列 | '1.0.0' |
| 第5引数 | CSSはメディア（'all'）/ JSはフッターに置くか | true |
JSの第5引数trueは重要です。false（既定）だと<head>で読みこまれ、その分だけ表示開始が遅くなります。基本はtrueにしておきます。
ファイルのURLを取る関数
get_theme_file_uri('style.css') // テーマ内のファイル（子テーマ優先）
get_stylesheet_uri() // 使用中テーマのstyle.css
get_parent_theme_file_uri('style.css') // 親テーマのファイルget_theme_file_uri()は子テーマにも対応するので、get_template_directory_uri() . '/style.css'より安全です。
キャッシュ対策のバージョン指定
CSSを直したのに反映されない——バージョンを付けていない（または固定のまま）が原因です。
// 開発中：ファイルの更新時刻を自動でバージョンにする
$css = get_theme_file_path('style.css');
wp_enqueue_style('main', get_theme_file_uri('style.css'), [], filemtime($css));filemtime()はファイルの更新時刻を返すので、保存するたびにURLが変わって必ず再読みこみされます。公開後は'1.0.3'のように手で上げる運用でもかまいません。
jQueryを使う
WordPressにはjQueryが同梱されています。依存配列に書くだけで読みこまれます。
wp_enqueue_script('main', get_theme_file_uri('js/main.js'), ['jquery'], '1.0.0', true);同梱のjQueryはノーコンフリクトモードのため、$がそのままでは使えません。囲んで使います。
(function ($) {
$('.menu-toggle').on('click', function () {
$('.global-nav').toggleClass('is-open');
});
})(jQuery);PHPの値をJavaScriptに渡す
テンプレートに<script>で直書きするのではなく、変数として渡すのが正攻法です。
wp_enqueue_script('main', get_theme_file_uri('js/main.js'), [], '1.0.0', true);
wp_localize_script('main', 'MY_DATA', [
'ajaxUrl' => admin_url('admin-ajax.php'),
'homeUrl' => home_url('/'),
'nonce' => wp_create_nonce('my_action'),
]);console.log(MY_DATA.homeUrl);wp_localize_script()は指定したスクリプトの直前に変数を出力するので、順番の心配もありません。
ページごとに読みこみを分ける
全ページで全部読みこむ必要はありません。条件分岐で絞れば、その分だけ軽くなります。
function my_assets() {
wp_enqueue_style('main', get_theme_file_uri('style.css'), [], '1.0.0');
if (is_front_page()) {
wp_enqueue_script('slider', get_theme_file_uri('js/slider.js'), [], '1.0.0', true);
}
if (is_singular('shohin')) {
wp_enqueue_style('product', get_theme_file_uri('css/product.css'), ['main'], '1.0.0');
}
}
add_action('wp_enqueue_scripts', 'my_assets');['main']のように依存を書くと、必ずmainより後に読みこまれるので、上書きの順番が保証されます。
管理画面・ブロックエディタで読みこむ
| フック | 対象 |
|---|---|
wp_enqueue_scripts | サイト側（フロント） |
admin_enqueue_scripts | 管理画面 |
enqueue_block_editor_assets | ブロックエディタの編集画面 |
ブロックエディタの中でも記事の見た目を再現したいときは、enqueue_block_editor_assetsでCSSを読みこみます。
wp_head()とwp_footer()が必須
wp_enqueue_*で登録したファイルは、テンプレートのこの2つの位置に出力されます。
<?php wp_head(); ?>
</head> <?php wp_footer(); ?>
</body>この2行が無いとCSSもJSも一切出力されません（プラグインも動かなくなります）。テーマを自作したときにいちばん最初に確認するポイントです。
外部のCDNを読みこむ場合
wp_enqueue_style('lightbox', 'https://cdn.example.com/lightbox.min.css', [], null);外部URLはバージョンにnullを渡してURLをそのまま保ちます。ただし、外部サービスの停止や改変の影響を受けるため、本番では自前にダウンロードして読みこむほうが安全です。
まとめ
- CSS・JSは
functions.phpからwp_enqueue_style()/wp_enqueue_script()で読みこむ - JSは第5引数
trueでフッターへ。依存配列で読みこみ順を保証する - バージョン（
filemtime()など）でキャッシュ対策。反映されないときはまずここ - PHPの値は
wp_localize_script()でJSへ。wp_head()/wp_footer()が無いと何も出力されない
読みこみを制御できると、表示速度とトラブルの少なさが一段変わります。