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

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をぜひご活用ください。

コメント / トラックバック 3 件

:show555| 2012/02/26 22:11

wp_footerの直前に書かなくてもwp_enqueue_script関数の第5引数にtrueを指定すればfooterの方で出力してくれますよ

:mypacecreator| 2012/02/27 11:55

>show555さん

補足コメントありがとうございますー。
今回の記事は記述自体はwp_headの前に書くことになっていたのが、今回body内の好きなとこに書いて良くなったよーというのがポイントです。

in_footer引数の仕様は今回変更されてないと思うので、その点は記事内に注記を入れますね!

ほしいも2012/04/02 18:13

いまちょうどenqueue使おうとしてたところで、この記事を発見しました。
豆知識をわざわざ記事にしてくれてありがとうございます。

コメントをどうぞ

メールアドレス (必須・公開されません)
コメント本文

  • スパム・迷惑コメント投稿防止のため、メールアドレスの入力が必須ですが、公開はされません。何卒ご協力のほどお願いいたします。
  • 投稿いただいたコメントは管理者のチェック後掲載しておりますので、即時には反映されません。
  • 記載内容に関する批判や間違いの指摘などはそのまま掲載する方針ですが、投稿内容と無関係な誹謗中傷、一方的な罵詈雑言の場合は削除させていただく可能性があります。
  • 通常業務の合間にコメントチェックをしておりますので、すべてのコメントへのお返事が出来ない場合もございます。あらかじめご了承ください。
  • 管理人個人への連絡等は、コメント欄ではなくコンタクトフォームをご利用ください。

書籍を執筆しました

WordPress 標準デザイン講座【Version 4.x対応】


翔泳社さんより、2015/02/27発売しました。2年経ちますのでもう賞味期限切れだとは思いますが、一応実績として...

寄付歓迎(・ω<)☆

当ブログの記事があなたの役に立ったら、気が向いたらでいいのでドネーションいただけると更新の励みになります!
気が向いた方はこちらから

ブログ内検索