WordPressでJavaScriptを正しく読み込む方法｜wp_enqueue_scriptの使い方と条件分岐も解説

WordPressで独自のJavaScriptファイルを読み込みたいとき、どのように書くのが正解でしょうか？

実は wp_enqueue_script() 関数を使うことで、WordPressに最適な形でJSを安全に読み込むことができます。
この記事では、基本的な使い方に加えて、「特定ページだけ読み込む」などの条件分岐テクニックも解説します。

✅ wp_enqueue_script() の基本構文

まずは functions.php に以下のように記述します。

function my_theme_enqueue_scripts() {
  if ( !is_admin() ) {
    wp_enqueue_script(
      'custom-script', // ハンドル名（識別用）
      get_template_directory_uri() . '/js/script.js', // JSファイルのパス
      array(), // 依存スクリプト（例: jQuery）
      '1.0.0', // バージョン
      true // フッターで読み込む（true = </body>直前）
    );
  }
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

💡 各引数の意味

✅ 条件分岐で「特定のページだけ」読み込む方法

WordPressには条件分岐タグが豊富に用意されているため、指定ページだけにJSを読み込むことが可能です。

例：固定ページ「お問い合わせ」だけに読み込む

function my_theme_enqueue_scripts() {
  if ( !is_admin() && is_page('contact') ) {
    wp_enqueue_script(
      'contact-form-script',
      get_template_directory_uri() . '/js/contact.js',
      array(),
      '1.0.0',
      true
    );
  }
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

その他の条件分岐例：

✅ jQueryに依存したスクリプトを読み込む場合

WordPressには jQuery があらかじめ同梱されています。依存させる場合は以下のように記述します。

function my_theme_enqueue_scripts() {
  if ( !is_admin() ) {
    wp_enqueue_script(
      'jquery-script',
      get_template_directory_uri() . '/js/jquery-custom.js',
      array('jquery'),
      '1.0.0',
      true
    );
  }
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

🔒 is_admin() を使う理由

is_admin() を使うことで、管理画面ではスクリプトを読み込まないようにできます。
テーマや管理プラグインに干渉する心配を避けるためにも、特にフロント専用スクリプトではこの条件分岐を加えるのがベストプラクティスです。

実務Tips（ベストプラクティス集）

functions.php で正しく管理する

• 直接 <script> タグを header.php や footer.php に書くのは非推奨。
• wp_enqueue_script() を使い、依存関係や読み込み順をWordPressに任せましょう。

子テーマで管理する

• 親テーマを直接編集するとアップデートで消えてしまいます。
• 必ず子テーマにコードを追加し、カスタマイズを維持しましょう。

wp_enqueue_scripts アクションを利用する

• 通常は以下のように記述します：

function my_theme_scripts() {
    wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

• 第3引数は依存するライブラリ（例: jquery）、第5引数の true はフッター読み込みを意味します。

不要なスクリプトは読み込まない

• 使わないプラグインやテーマのJSは読み込み負荷になります。
• wp_dequeue_script() を使って整理するのもパフォーマンス改善のコツです。

バージョン管理でキャッシュ対策

• 第4引数のバージョン番号を変更すれば、ブラウザキャッシュを回避できます。
• 例: filemtime() を使って自動更新する方法も有効です。

よくある質問

<script> タグを直接書くのはなぜ良くないのですか？

WordPressの更新やテーマ切り替えで消えるリスクがあり、依存関係の管理もできないためです。

jQueryを使うときはどうすればいいですか？

wp_enqueue_script の依存関係に array('jquery') を追加することで、安全に読み込めます。

フッターに読み込ませたい場合は？

第5引数を true にすると </body> の直前に読み込まれます。

管理画面でも読み込みたいときは？

wp_enqueue_scripts ではなく admin_enqueue_scripts を使用します。

既存テーマのJSを削除することは可能ですか？

はい。wp_dequeue_script() や wp_deregister_script() を使って無効化できます。

🧪 まとめ

• JavaScriptは wp_enqueue_script() で読み込むのがWordPressの正しい方法
• 条件分岐で「必要なページだけ」読み込めるので高速化にも貢献
• is_admin() を使って管理画面の影響を防ぐのもポイント

✅ 今すぐ使えるシンプル実装

function my_theme_enqueue_assets() {
  // 管理画面では読み込まない
  if ( !is_admin() ) {

    // CSSの読み込み
    wp_enqueue_style(
      'main-style',
      get_template_directory_uri() . '/style.css',
      array(),
      '1.0.0',
      'all'
    );

    // JavaScriptの読み込み
    wp_enqueue_script(
      'main-script',
      get_template_directory_uri() . '/js/script.js',
      array('jquery'), // 
      '1.0.0',
      true // trueでフッターに読み込み
    );
  }
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_assets');