2026年5月20日
2026年5月20日
WordPressでJavaScriptを正しくエンキューする方法
はじめに
WordPressでJavaScriptを使う際は、 タグを直接テンプレートに書くのではなく、wp_enqueue_script() を使って登録するのが正しい方法です。依存関係の自動管理・重複防止・PHPからJSへのデータ受け渡しが可能になります。
症状・原因
タグを直接書いたがjQueryが読み込まれていない- 同じスクリプトが複数回読み込まれる
- PHPの変数をJavaScriptで使いたい
- 特定のページでのみJSを読み込みたい
解決手順
ステップ1:基本的な wp_enqueue_script() の使い方
// functions.php
add_action('wp_enqueue_scripts', function(): void {
// wp_enqueue_script(ハンドル名, URL, 依存, バージョン, フッター)
wp_enqueue_script(
'my-theme-script', // ユニークなハンドル名
get_stylesheet_directory_uri() . '/js/main.js', // スクリプトURL
['jquery'], // 依存(jQueryが先に読み込まれる)
filemtime(get_stylesheet_directory() . '/js/main.js'), // バージョン(キャッシュバスター)
true // フッターに読み込む
);
});
ステップ2:PHPの値をJavaScriptに渡す
// functions.php
add_action('wp_enqueue_scripts', function(): void {
wp_enqueue_script(
'my-ajax-script',
get_stylesheet_directory_uri() . '/js/ajax.js',
['jquery'],
'1.0.0',
true
);
// wp_localize_script でPHP変数をJS側に渡す
wp_localize_script(
'my-ajax-script', // 対象ハンドル名
'MyAjax', // JS側のオブジェクト名
[
'ajaxurl' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('my_ajax_nonce'),
'siteurl' => home_url('/'),
'postId' => get_the_ID(),
]
);
});
// js/ajax.js — PHP から渡された値を使用
jQuery(function($) {
$.ajax({
url: MyAjax.ajaxurl,
type: 'POST',
data: {
action: 'my_action',
nonce: MyAjax.nonce,
},
success: function(response) {
console.log(response);
}
});
});
ステップ3:条件付きで読み込む
// functions.php
add_action('wp_enqueue_scripts', function(): void {
// フロントページのみ
if (is_front_page()) {
wp_enqueue_script('hero-slider', get_stylesheet_directory_uri() . '/js/slider.js', [], '1.0', true);
}
// 投稿詳細ページのみ
if (is_single()) {
wp_enqueue_script('share-buttons', get_stylesheet_directory_uri() . '/js/share.js', [], '1.0', true);
}
// WooCommerceのカートページのみ
if (function_exists('is_cart') && is_cart()) {
wp_enqueue_script('cart-upsell', get_stylesheet_directory_uri() . '/js/cart.js', ['jquery'], '1.0', true);
}
});
ステップ4:既存スクリプトのバージョンを上書きする
// functions.php — jQuery を最新版に差し替え
add_action('wp_enqueue_scripts', function(): void {
wp_deregister_script('jquery-core');
wp_register_script(
'jquery-core',
'https://code.jquery.com/jquery-3.7.1.min.js',
[],
'3.7.1',
true
);
}, 20);
ステップ5:スクリプトの読み込みを確認する
# 登録済みスクリプト一覧を確認
wp eval "
global \$wp_scripts;
foreach (\$wp_scripts->queue as \$h) {
\$s = \$wp_scripts->registered[\$h];
echo \$h . ' | ' . (\$s->extra['group'] ?? 'head') . ' | ' . basename(\$s->src) . PHP_EOL;
}
"
注意事項
- ハンドル名はサイト内でユニークにしてください。プラグインと衝突するとスクリプトが重複または欠落します
wp_localize_script()はwp_enqueue_script()の後に呼び出してください- バージョンに
filemtime()を使うと、ファイル更新時に自動でキャッシュが破棄されます。本番環境ではテーマバージョンを使うのが一般的です
まとめ
wp_enqueue_script() を wp_enqueue_scripts アクック内で使い、依存・バージョン・フッター配置を正しく設定することで、安全かつ効率的にJavaScriptを管理できます。PHPとJSのデータ受け渡しには wp_localize_script() を使ってください。