［WP覚書］『wp_enqueue_script』の一番ベストな記述方法は？

2012年12月4日

［WP/JS覚書］カスタムメニューの子ページをJQueryでドロップダウン（アコーディオン）構造にしたい場合のtips – ponnao-clip

以前こちらの記事で、「wp_enqueue_script」を使ったスクリプトタグの仕組みについてざっくりと触れたのですが、今回設置時にうまくいかなかったこともあって、少し深めに調べてみたので載せておきます。

3.3からの仕様変更については、こちらの記事が大変詳しく書いてあって納得行きました。
WordPress wp_enqueue_scriptの仕様変更によってコンフリクトが発生している模様 | hijiriworld Web

まず、そもそもこの引数が追加された背景には以下の理由が挙げられます。

CSSはhead要素内、JavaScriptはbody要素の直前に記述した方が高速化する。

よって、現在のWeb標準からすれば、body要素の直前に記述（出力）した方がよさそうです。

これを理解してWordPressの仕様変更にきちんと対応しているプラグインはすでにそうしています。
一方、WordPress制作者がそれを知らないとコンフリクトを起こす可能性があるわけですね。

現状では、引数「$in_footer」を「true」と表記すると、スクリプトタグが前に出力される設定になっていますね。
またfooter.phpに直接記述しても、前に出力される設定になっているようです。

↓fotterに記述すると</body>の直前に記述されることを実証してくれてるページ
wp_enqueue_scriptの仕様がWordPress3.3でちょこっと変わったって話 | マイペースクリエイターの覚え書き

↓こちらは自作のjqueryを使ったプラグインが、ヘッダーでjqueryが呼ばれてないと動かないもので、3.3以降の仕様でscriptタグが</body>タグの直前に行っちゃって動かなくなった話。
wordpress 3.4 でwp_enqueue_scriptの仕様が変わった？ « もみんぎゅぅ

wp_enqueue_scriptのスクリプトソース出力の表示する場所の検証

気になったので、上のことを踏まえて出力の様子について検証してみました。
直下フォルダを指定する場合と、テンプレートフォルダを指定する場合にも分けてます。

特に何も指定がないとWordpressファイルのURLパスが頭に付きます。

こんな感じで。

<script type='text/javascript' src='http://hogehoge.com/wp/js/functions.js?ver=1.0'></script>

◯header.phpに記述する場合

<?php wp_enqueue_script('functions','/js/functions.js'); ?>

◯function.phpに記述する場合

wp_enqueue_script('functions','/js/functions.js');

直下のフォルダ（例：js）を指定する場合の出力表示

なので、例えば直下のJSフォルダを指定したい場合は、http://から記述しなきゃいけないぽい。

<script type='text/javascript' src='http://hogehoge.com/js/functions.js?ver=1.0'></script>

◯header.phpに記述する場合

<?php wp_enqueue_script('functions','http://hogehoege.com/js/functions.js'); ?>

◯function.phpに記述する場合

wp_enqueue_script('functions','http://hogehoege.com/js/functions.js');

テンプレートフォルダを指定する場合の出力表示

例えばテーマで「vicuna」を利用してる場合はこんな感じ。

<?php wp_enqueue_script('functions','http://hogehoege.com/wp/wp-content/themes/vicna/js/functions.js'); ?>

◯header.phpに記述する場合

<?php wp_enqueue_script('functions', get_bloginfo('template_url').'/js/functions.js'); ?>

◯function.phpに記述する場合

wp_enqueue_script('functions', get_bloginfo('template_url').'/js/functions.js');

表示される場所

◯header.phpに記述した場合

<!-- WordPress general-template  start -->
<meta name='robots' content='noindex,nofollow' />
< !-- ココ　--! >

◯function.phpに記述した場合

<!-- WordPress general-template  start -->
<meta name='robots' content='noindex,nofollow' />
<link rel="alternate" type="application/rss+xml" title="～省略>
< !-- ココ　--! >

で、最終的に一番良さそうなのはやっぱりこれでしょうか。

◯function.phpに記述した場合で、自分の指定したjsフォルダへのリンクで前に出力する記述

wp_enqueue_script('functions','http://hogehoege.com/js/functions.js', array(), '1.0' ,true);

javascript, WordPress

Posted by ponnao