wp_enqueue_script()

関数の概要

wp_enqueue_script()は、WordPressでJavaScriptファイルをキューに登録し、テーマやプラグイン内で正しく読み込むための関数です。この関数を使用することで、依存関係を管理し、スクリプトの読み込み順序を制御することができます。これにより、サイトのパフォーマンスを最適化し、スクリプトの競合を防ぐことができます。

パラメータの説明

wp_enqueue_script()関数は6つのパラメータを受け取ります。

  1. $handle (string, 必須): スクリプトの一意の識別子。
  2. $src (string, 必須): スクリプトのURL。URLを指定しない場合、登録済みのスクリプトが使用されます。
  3. $deps (array, オプション): スクリプトの依存関係を示すハンドルの配列。デフォルトは空の配列です。
  4. $ver (string|bool|null, オプション): スクリプトのバージョン番号。デフォルトはfalseです。バージョン番号を指定しない場合、WordPressのバージョンが使用されます。
  5. $in_footer (bool, オプション): trueの場合、スクリプトをページのフッターに出力します。デフォルトはfalse（ヘッダーに出力）です。

使用例

以下は、wp_enqueue_script()関数を使用してJavaScriptファイルをテーマに追加する例です。

<?php
function my_custom_scripts() {
    // カスタムスクリプトをキューに登録する
    wp_enqueue_script(
        'my-custom-script', // ハンドル
        get_template_directory_uri() . '/js/custom-script.js', // スクリプトのURL
        array('jquery'), // 依存関係（例：jQuery）
        '1.0.0', // バージョン番号
        true // フッターに出力する
    );
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');
?>

依存関係のないスクリプトを追加する例

<?php
function my_simple_script() {
    // 依存関係のないシンプルなスクリプトをキューに登録する
    wp_enqueue_script(
        'simple-script', // ハンドル
        get_template_directory_uri() . '/js/simple-script.js', // スクリプトのURL
        array(), // 依存関係なし
        '1.0.0', // バージョン番号
        false // ヘッダーに出力する
    );
}
add_action('wp_enqueue_scripts', 'my_simple_script');
?>

外部スクリプト（CDNなど）を追加する例

<?php
function my_cdn_script() {
    // CDNから外部スクリプトをキューに登録する
    wp_enqueue_script(
        'cdn-script', // ハンドル
        'https://cdnjs.cloudflare.com/ajax/libs/example/1.0.0/example.min.js', // 外部スクリプトのURL
        array(), // 依存関係なし
        '1.0.0', // バージョン番号
        true // フッターに出力する
    );
}
add_action('wp_enqueue_scripts', 'my_cdn_script');
?>

関連する関数

  • wp_enqueue_style(): CSSファイルをキューに登録し、読み込みます。
  • wp_register_script(): スクリプトをキューに登録せずに登録します。
  • wp_register_style(): スタイルシートをキューに登録せずに登録します。
  • wp_deregister_script(): キューからスクリプトを解除します。
  • wp_deregister_style(): キューからスタイルシートを解除します。

使用上の注意

  • wp_enqueue_script()関数は、通常、テーマのfunctions.phpファイルやプラグインファイル内で使用されます。
  • 依存関係を適切に指定することで、スクリプトの競合や読み込み順序の問題を防ぐことができます。
  • wp_enqueue_scriptsアクションフックを使用してスクリプトを登録することで、WordPressの適切なタイミングでスクリプトが読み込まれるようにします。