WordPressでscriptタグを出力するためのあれこれ

新人君向けに。

基本

wp_enqueue_script関数を使います
wp_enqueue_scripts、admin_enqueue_scripts、login_enqueue_scriptsアクションフックのいずれかで呼び出しましょう

// functions.php
add_action('wp_enqueue_scripts', function(){
    wp_enqueue_scripts('riot', 'https://cdnjs.cloudflare.com/ajax/libs/riot/2.3.18/riot+compiler.js');
});

wp_enqueue_script関数の第3引数は、配列で依存するhandle名が設定できます
scriptの出力順は、この設定により制御されます

scriptタグの出力は、wp_head関数かwp_footer関数で行われます
どちらの関数で出力されるかは、第5引数の設定と依存関係によります

同梱のjQuery以外を使いたい

wp_deregister_script関数を使い、wordpressが設定するものを解除し、wp_register_script関数を使い、設定し直します

なお、jqueryなどの一部のscriptは、wordpressが保護しているため、wp_enqueue_scriptsアクションフックで解除しようとする、管理画面/ログインページを表示した際に警告されます
どのscriptが保護されているかはwp_deregister_scriptのソースコードを確認してください

// functions.php
add_action('wp_enqueue_scripts', function(){
    if (! is_addmin() && 'wp-login.php' === $GLOBALS['pagenow']){
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js');
    }
});

phpから値を渡したい

jsで使う値をphpで制御したい場合は、wp_script_add_data関数(第2引数 'data')を使います
enqueueされていないhandleには、dataを追加できないので、wp_enqueue_scripts関数の直後にやるか、wp_script_is関数でenqueueされているか確認してください

// functions.php
add_action('wp_enqueue_scripts', function(){
    wp_enqueue_scripts('riot', 'https://cdnjs.cloudflare.com/ajax/libs/riot/2.3.18/riot+compiler.js');
    wp_script_add_data('riot', 'data', 'var foo = { "bar": "baz" };');
});

また、意図された使い方ではないですがwp_localize_script関数でも、上記同様の出力が可能です
が、WP_Scripts#localizeの処理によりデータが書き換わる場合があるので気をつけてください

// functions.php
add_action('wp_enqueue_scripts', function(){
    wp_enqueue_scripts('riot', 'https://cdnjs.cloudflare.com/ajax/libs/riot/2.3.18/riot+compiler.js');
    wp_localize_script('riot', 'foo', [ 'bar' => 'baz' ]);
});

IE Conditional Comments

もうそんなに必要になることはないと思いますが、IEの条件付きコメントを使いたい場合は、wp_script_add_data関数(第2引数 'conditional')を使います

// functions.php
add_action('wp_enqueue_scripts', function(){
    wp_enqueue_script('html5shiv', 'https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.js');
    wp_script_add_data('html5shiv', 'conditional', 'lt IE 9');
});

番外

js で window.$ が undefined

wordpressに同梱されているjQueryはnoConflictされています

!function($){
    // hogehoge
}(jQuery);

で囲うなどして、window.$がなくても動作するようにしましょう

---