wp_enqueue_script() の使い方｜説明・引数・注意点

説明

基本構文

wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, array|bool $args = array() ): void

引数

• $handle：スクリプトの識別名
• $src：JSファイルのURL
• $deps：先に読み込むスクリプト（例：jquery）
• $ver：バージョン
• $args：in_footer（フッターで読み込む）や strategy（defer / async）を指定

戻り値

戻り値はありません。

使い方（サンプル）

function my_enqueue_scripts() {
	wp_enqueue_script( 'my-script', get_theme_file_uri( 'js/app.js' ), array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

注意点

• wp_enqueue_scripts フックで呼びます。
• 従来は最後の引数に true を渡してフッター読み込みにしていました。WordPress 6.3 以降は $args 配列でも指定できます。
• jQueryは $ ではなく jQuery で参照する必要があります（noConflict モード）。

実務での使いどころ

• テーマやプラグインのJavaScriptを読み込むとき。wp_enqueue_scripts フックの中で呼びます。
• 特定のページだけで読み込みたいとき。is_page() などの条件分岐の中で呼びます。
• jQueryなど、他のスクリプトに依存するスクリプトを、正しい順序で読み込むとき。

よくあるミスと対処

• header.php や footer.php に <script> を直接書いている。依存関係の管理ができず、同じファイルが二重に読み込まれることもあります。
• jQueryなどに依存するのに、第3引数（依存）に array( 'jquery' ) を書いていない。jQueryより先に実行されて、エラーになることがあります。
• バージョン（第4引数）を指定していない。省略するとWordPress本体のバージョンが付くため、ファイルを更新してもブラウザのキャッシュが残ることがあります。
• wp_enqueue_scripts フックを使わずに、直接呼び出している。読み込まれなかったり、警告が出たりすることがあります。

NG例

wp_enqueue_script( 'my-script', get_theme_file_uri( '/js/main.js' ) ); // フックの外で呼んでいる

OK例

add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_script( 'my-script', get_theme_file_uri( '/js/main.js' ), array( 'jquery' ), '1.0.0', true );
} );

使い分け早見表

関連項目

wp_register_script()、wp_localize_script()、wp_add_inline_script()

公式リファレンス：wp_enqueue_script() | Function | WordPress Developer Resources