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

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

<?php
add_action('wp_enqueue_scripts', function () {
  $rel  = '/assets/js/common.js';
  $file = get_template_directory() . $rel;

  wp_enqueue_script(
    'theme-common',
    get_template_directory_uri() . $rel,
    array('jquery'),
    file_exists($file) ? filemtime($file) : null,
    true
  );
});

<?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
  );

  // 初期化用スクリプト
  $rel  = '/assets/js/slick-init.js';
  $file = get_template_directory() . $rel;

  wp_enqueue_script(
    'slick-init',
    get_template_directory_uri() . $rel,
    array('slick'),
    file_exists($file) ? filemtime($file) : null,
    true
  );
});

<?php
add_action('admin_enqueue_scripts', function ($hook) {
  if ($hook === 'post.php' || $hook === 'post-new.php') {
    $rel  = '/assets/js/admin.js';
    $file = get_template_directory() . $rel;

    wp_enqueue_script(
      'admin-custom',
      get_template_directory_uri() . $rel,
      array('jquery'),
      file_exists($file) ? filemtime($file) : null,
      true
    );
  }
});

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

<?php
add_action('wp_enqueue_scripts', function () {
  $rel  = '/assets/js/common.js';
  $file = get_template_directory() . $rel;

  wp_enqueue_script(
    'theme-common',
    get_template_directory_uri() . $rel,
    array('jquery'),
    file_exists($file) ? filemtime($file) : null,
    array(
      'in_footer' => true,
      'strategy'  => 'defer', // 'defer' または 'async'
    )
  );
});