【WordPress】wp_enqueue_scriptの使い方｜正しいJS読み込みと依存関係の管理

WordPress

2025.09.19

WordPressでJavaScriptを読み込む際に推奨される方法がwp_enqueue_scriptです。テーマやプラグインで正しくスクリプトを読み込むことで、不要な競合を防ぎ、依存関係を管理しやすくなります。直接header.phpやfooter.phpにscriptタグを記述する方法も可能ですが、WordPressの仕組みを活かすためにはenqueue関数を使うのが基本です。

wp_enqueue_scriptの基本構文
基本的な使い方
依存関係の管理
管理画面での読み込み
CDNスクリプトの読み込み
まとめ

wp_enqueue_scriptの基本構文

wp_enqueue_scriptは以下のように記述します。主な引数はハンドル名、読み込むファイルのURL、依存スクリプト、バージョン番号、フッターでの読み込み有無です。

wp_enqueue_script(
  string $handle,
  string $src = '',
  array $deps = array(),
  string|bool|null $ver = false,
  bool $in_footer = false
)

基本的な使い方

functions.phpに以下のようなコードを記述します。テーマディレクトリ内のassets/js/common.jsを読み込み、jQueryを依存関係として指定、フッターで読み込む例です。

<?php
add_action('wp_enqueue_scripts', function () {
  wp_enqueue_script(
    'theme-common', 
    get_template_directory_uri() . '/assets/js/common.js',
    array('jquery'),
    filemtime(get_template_directory() . '/assets/js/common.js'),
    true
  );
});

依存関係の管理

依存関係を正しく指定することで、ライブラリやプラグインの競合を防げます。例えば、Slickスライダーを利用する場合は以下のように記述します。

<?php
add_action('wp_enqueue_scripts', function () {
  // Slick本体
  wp_enqueue_script(
    'slick',
    get_template_directory_uri() . '/assets/slick/slick.min.js',
    array('jquery'),
    '1.8.1',
    true
  );

  // 初期化用スクリプト
  wp_enqueue_script(
    'slick-init',
    get_template_directory_uri() . '/assets/js/slick-init.js',
    array('slick'),
    filemtime(get_template_directory() . '/assets/js/slick-init.js'),
    true
  );
});

管理画面での読み込み

wp_enqueue_scriptは管理画面でも利用可能です。管理画面ではフックをadmin_enqueue_scriptsに切り替えます。

<?php
add_action('admin_enqueue_scripts', function ($hook) {
  if ($hook === 'post.php' || $hook === 'post-new.php') {
    wp_enqueue_script(
      'admin-custom',
      get_template_directory_uri() . '/assets/js/admin.js',
      array('jquery'),
      filemtime(get_template_directory() . '/assets/js/admin.js'),
      true
    );
  }
});

CDNスクリプトの読み込み

CDNからスクリプトを読み込む場合も同様にenqueueで管理できます。

<?php
add_action('wp_enqueue_scripts', function () {
  wp_enqueue_script(
    'axios',
    'https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js',
    array(),
    null,
    true
  );
});