WordPress wp_enqueue_scriptの仕様変更によってコンフリクトが発生している模様

WordPressで外部jQueryや独自JavaScriptファイルを読み込む場合、コンフリクトを回避する為にwp_enqueue_script関数を使うと思います。

ところが最近、wp_enqueue_scriptを使っているにも関わらず、「突然コンフリクトが発生した」もしくは「一部のJavaScriptが動かなくなった」という話がよく聞かれます。
特にContactForm7プラグインを使っている人から多く聞かれます。

これはContactForm7プラグインの不具合ではなく、おそらく wp_enqueue_script が WordPress3.3 から仕様変更されたことが原因だと考えられます。

最新の wp_enqueue_script の書式は以下の通りです。

wp_enqueue_script( 
	$handle
	,$src
	,$deps
	,$ver
	,$in_footer 
);

WordPress3.3から追加されたのは、第5引数の $in_footer です。

$in_footer: wp_footerで出力する場合はtrueを指定(省略時はfalse、つまりwp_headで出力)

この引数によって出力される場所が異なるということですね。

$in_footerを省略時はhead要素の最後、trueを指定するとbody要素の最後に出力されます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<?php wp_enqueue_script('xxx', get_template_directory_uri().'/xxx.js'); ?>	
	<?php wp_head(); ?>
</head>

出力↓

...
<script type="text/javascript" src="http://.../xxx.js"></script>
</head>
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<?php wp_enqueue_script('xxx', get_template_directory_uri().'/xxx.js', array(), '1.0' ,true); ?>	
	<?php wp_head(); ?>
</head>

出力↓

...
<script type="text/javascript" src="http://.../xxx.js?ver=1.0"></script>
</body>

Function Reference/wp enqueue script

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

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

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

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

ということで、「最近突然コンフリクトが発生した」という人は wp_enqueue_script の第5引数で true を指定してみてください。
(それでも解決しない場合は他の原因が考えられます。

コメントを残す