wp_enqueue_scriptの仕様がWordPress3.3でちょこっと変わったって話

wp_enqueue_scriptの仕様がWordPress3.3でちょこっと変わったって話

2012年2月26日
JavaScript

WordPressづかいなら頻繁にお世話になっているであろう、wp_enqueue_script関数。
自作やどっかから拾ってきたjQueryプラグイン（=not WordPressプラグイン）とかを使う時に、JavaScriptライブラリを正しく、あるべき順序で読み込んでくれるというアレです。
wp_enqueue_scriptをちゃんと使えたら、初心者から中級者にランクアップって言ってもいいんじゃないかと勝手に思ったりしてます。中級者の定義って難しいですけど。

それはどうでもいいとして、このwp_enqueue_scriptの仕様が3.3から微妙に変わったのに、あまり話題に登場しないなーと思っておりまして。
そうこうしてるうちに3.3.1が出て久しくなってしまったので、誰かが書く前に自分で書いときます。

目次

wp_enqueue_scriptの、今までの使い方

header.phpのの前に記述することになっていました。

<?php wp_enqueue_script(
    'function', //スクリプトの固有名
    get_template_directory_uri() . '/js/function.js', //スクリプトファイルへのパス
    array('jquery') //使うライブラリ
); ?>
<?php wp_head(); ?>

※function.phpに記述してadd_actionする方法もありますが、今回はその話はしません。

出力されたソースをブラウザで確認すると、

クリックで拡大

という具合でよきにはからってくれるというやつです。

でもこれ、スクリプトの記述位置がの前になるんですよね。
特に、素早く読み込まなくても問題ないスクリプトについてはソース内の後ろの方、の直前とかに置くことがあるかと思うんですけど、
wp_enqueue_scriptを使うと、デフォルトではhead内に出力します。

##show555さんから補足コメントあり
引数でin_footerをtrueにするとwp_footerの方での方で出力してくれるという機能はWP2.8からありましたー。
その場合は

<?php wp_enqueue_script(
	'function',
	get_template_directory_uri() . '/js/function.js',
	array('jquery'),
	1.0,　//スクリプトのバージョン
	true //in_footer引数　※trueにするとfooterでスクリプトを呼び出す
); ?>

こうですね。
ただ記述場所はwp_headより前でないといけないというのは同じでした。

3.3以降でのwp_enqueue_scriptの挙動

WordPress3.3がリリースされた時に、既存のテーマのカスタマイズで支障が出るところはないか、アップデートして大丈夫か調べるためにリリース情報を読んでいました。
Version 3.3 – WordPress Codex 日本語版

すると、翻訳されてない部分に以下の記述がありました。

Support for using wp_enqueue_script() and wp_enqueue_style() in the HTML body; all scripts and styles are added in the footer

ほうほう！！

これを読むと、body内で使えるようになりましたよ、フッターに付与されますよと書いてある・・・
ということで確かめてみました。

さっきのwp_enqueue_scriptの記述を、footer.phpに移動。

<?php wp_enqueue_script(
    'function',
    get_template_directory_uri() . '/js/function.js',
    array('jquery')
); ?>
<?php wp_footer(); ?>
</body>
</html>

すると、

クリックで拡大

おー、たしかに。in_footer引数を使わなくてもfooterで吐いてくれる。
ちなみに、

</head>
<body>
<?php wp_enqueue_script(
    'function',
    get_template_directory_uri() . '/js/function.js',
    array('jquery')
); ?>
<div id="wrapper">
<header id="header">

という感じで、直後にいきなり書いても、出力される位置はさっきと同じく、最後のの直前。

念のため、以前のVerのWordPressでも試してみました。
1つ前の3.2.1でやってみたところ、より後に記述した場合は、何も出力されませんでした。

header.php以外でも、どこでも好きな場所に書けるようになったことで、たとえばトップページで使うスクリプトをis_front_pageで分岐しなくても、
トップページ用のテンプレート内にwp_enqueue_scriptを書いておいてもOKということになります。
メンテ上やりやすくなる部分もあるんじゃないでしょうか。

ということで、新しくなったwp_enqueue_scriptをぜひご活用ください。