ワードプレスで jQuery の後に script を読み込ませる方法、これは動的スクリプトも可能な方法です。

ワードプレスのプラグインで動くシステムを開発していたところ、ユーザーインターフェイスでどうしても javascriptを使わないといけない場面が出てしまいました。
それはなんてことなかったのですが、ベースにしていたテーマが cocoon 。
cocoonは、simplecity の後継ともいわれる ワードプレスのテーマです。

なので気軽に始めようとしたら cocoon の表示ページは、jQuery をフッターで出力しているので、

javascript を使うと
jQuery is not defined
とか
$ is not defined

とエラーが出ます。

jQuery is not defined 、 $ is not defined と表示される理由

JavaScript は、呼出しに物理的な順番が影響する言語です。
そのため　jQuery を使う関数は、jQuery が読み込み済み(物理位置）でないと
jQuery is not defined や is not defined といったエラーが出てしまいます。

対策は、そのページのソースを開いて、jQuery の読み込み位置と動かそうとする script の位置を確認してください。
jQuery の方が先にでてきていれば、その前の javascript でトラブルが発生している可能性があります。

jQuery が 目的の javascript よりも後に出てくるようならば、その順番を変えることでエラーを消すことができます。。

なぜ jQuery の読み込みをフッターにするのか

ワードプレスは、jQuery を標準で読み込んでいますから、普段は意識せずに jQuery を使用することができます。
事実ダッシュボードで動かすプログラムは jQuery を読み込ませなくても動きます。

これはワードプレスの管理画面(ダッシュボード系）では、jQuery は、管理画面のヘッドの部分で読み込んでいる証拠です。

ところがテーマ側で意図的 jQuery をフッターで読み込むように細工しているものがあります。
なぜ jQuery の読み込みをわざわざフッターにもっていくのかといえば、
jQuery はご存知の通り、とっても便利な javascript のライブラリーです。
そのため jQuery は、サイズがおおきくなっています。

その大きなファイルをヘッダで読み込もうとするとコンテンツが表示されるまで時間がかかってしまいます。
そこでフッターのさらに下で jQuery を読み込むことでコンテンツの表示速度を上げることができるからです。

ワードプレスで jQuery の後に script を読み込ませる方法(動的スクリプト可)

jQuery を利用するスクリプトを常に jQuery の下に配置するように指示すれば動的スクリプトでも性的スクリプト(jsファイルにしたもの)でも問題なく動きます。


ワードプレスでは、ヘッダーで jQuery を読み込むのがセオリーですが、テーマによってはフッターで読み込んでいます。
通常ワードプレスで jQuery の読み込む時は、以下のようにしています。
jQuery is not defined とか $ is not defined から抜け出せない場合、次のように改変すると動きます。

１、ダミーの js ファイル(例では fillerpadding.js 中味は空っぽ)を作ります
２、スクリプトを $line にいれて以下のように記述します。

	// $dUrls : fillerpadding.js のあるURLのパス
	// $line : スクリプト
	
	// (1)
	wp_enqueue_script(    'myjscript', $dUrls.'/fillerpadding.js', array( 'jquery' ), false, true  );
	// (2)
	wp_add_inline_script( 'myjscript' , $line, 'after' ) ;

wp_enqueue_scriptは、ワードプレスのリファレンスでは、こういう説明があります。
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

ですが、解説がイマイチ高度なので平たく言いますと。
$handle: 読み込んだ場所につけるアンカー（目印）
$src:script の 読み込み場所（今の説明でいうと jQuery の URL)
$deps:通常は、array() で指定しません。が、どの場所(アンカー)の下に配置するかを指定します。
$ver:読み込むスクリプトのバージョン番号(自作のスクリプトなら別に何でもいい。省略可)
$in_footer:false ならヘッダーで true ならフッターで読み込みます。


(1) jquery の次の行へ myjscript という名前の アンカーを 付けます。
(2) (1)でつけたアンカーと同じ場所へ $line のスクリプトを読み込ませます。

ワードプレスで jQuery の後に script を読み込ませる方法(動的スクリプトもOK)まとめ

ポイントは、jquery というアンカー（wordpress が jquery 読み込みの場所につけてるアンカー）の次の行にアンカーを貼り、
そのアンカーのところへ自分のスクリプトを読み込ませるということです。

関数的になかなか検索で見つけられないのが wp_add_inline_script です。
wp_enqueue_script の意味とwp_add_inline_scriptがわかってしまえば、案外簡単ですよね。


この記事があなたのお役に立てれば幸いです。