WordPressでJavascriptを読み込む

WordPressでJavascriptを読み込むときの指定方法のメモ。

WordPressでJavascriptを読み込むには、wp_enqueue_script()を利用する。

デフォルトスクリプトを読み込む

デフォルトスクリプトを読み込む場合は、

ハンドル名を指定するだけで読み込むことができる。
（例：コメント返信とjQueryの場合 – 必要に応じて書き換え）

function my_scripts() {
    if ( is-single() ) {
        wp_enqueue_script( 'comment-replay' );
    }
    wp_enqueue_script( 'jquery' );
}

add_action( 'wp_enqueue_scripts', 'my_scripts' );

デフォルトスクリプト以外のスクリプトを読み込む

function my_script() {
    wp_enqueue_script(
        'script-name', get_template_dictionary_uri() . '/js/example.js' );
    }

add_action( 'wp_enqueue_scripts', 'my_scripts' );

ひとつのアクションフックでスクリプトとスタイルをエンキューする。

function theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

JQuery に依存するテーマのスクリプトをリンクする

function my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_stylesheet_directory_uri() . '/js/custom_script.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

script.aculo.us ライブラリをリンクする

function my_scripts_method() {
    wp_enqueue_script( 'scriptaculous' );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
// wp_enqueue_scripts action hook to link only on the front-end

script.aculo.us に依存するプラグインのスクリプトをリンクする

function my_scripts_method() {
    wp_enqueue_script(
        'newscript',
        plugins_url( '/js/newscript.js' , __FILE__ ),
        array( 'scriptaculous' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

子テーマから依存関係のないスクリプトを読み込む

add_action( 'wp_enqueue_scripts', 'child_add_scripts' );

/**
* Register and enqueue a script that does not depend on a JavaScript library.
*/
function child_add_scripts() {
    wp_register_script(
        'google-analytics',
        get_stylesheet_directory_uri() . '/google_analytics_object.js',
        false,
        '1.0',
        true
    );

wp_enqueue_script( 'google-analytics' );
}

プラグイン管理画面のみでスクリプトをリンクする

add_action( 'admin_init', 'my_plugin_admin_init' );
add_action( 'admin_menu', 'my_plugin_admin_menu' );

function my_plugin_admin_init() {
/* Register our script. */
    wp_register_script( 'my-plugin-script', plugins_url( '/script.js', __FILE__ ) );
}

function my_plugin_admin_menu() {
/* Add our plugin submenu and administration screen */
    $page_hook_suffix = add_submenu_page( 'edit.php',
    // The parent page of this submenu
    __( 'My Plugin', 'myPlugin' ), // The submenu title
    __( 'My Plugin', 'myPlugin' ), // The screen title
        'manage_options', // The capability required for access to this submenu
        'my_plugin-options', // The slug to use in the URL of the screen
        'my_plugin_manage_menu' // The function to call to display the screen
    );

/*
* Use the retrieved $page_hook_suffix to hook the function that links our script.
* This hook invokes the function only on our plugin administration screen,
* see: http://codex.wordpress.org/Administration_Menus#Page_Hook_Suffix
*/
add_action('admin_print_scripts-' . $page_hook_suffix, 'my_plugin_admin_scripts');
}

function my_plugin_admin_scripts() {
/* Link our already registered script to a page */
    wp_enqueue_script( 'my-plugin-script' );
}

function my_plugin_manage_menu() {
/* Display our administration screen */
}

詳細な解説はWordPress Codex 日本語版 関数リファレンス/wp enqueue scriptに。