WordPress:「Uncaught ReferenceError: jQuery is not defined」が表示されたときの対策メモ

Chromeで「右クリック>要素を検証」などで、現在ページがどのように読み込まれて実行されているかを確認することが出来るのですが、その下の部分には、エラーが表示されます。

そこに、次のエラーがありました。

Uncaught ReferenceError: jQuery is not defined.

これは、「jQueryという未定義変数が参照されていて困った」というエラーです。

よくjQueryのオブジェクトは「$」で参照されるのですが、WordPressでは衝突を避ける目的だか何かで、標準では「jQuery」で参照することになっています。

そのWordPress方式でjQueryのコードを書いたときに、このエラーが表示され、そうでなく「$」を使う場合には「Uncaught ReferenceError: $ is not defined.」というエラーになるはずです。

WordPressでないただのHTMLであれば、ヘッダにjQueryを参照するコードとして「<script src=".../...jquery-x.x.x.min.js" type="text/javascript"></script>」などと書けばよいのですが、WordPressの場合は、いろいろなプラグインが一斉に同じ.jsファイルを参照してしまわないように、依存関係の整理が行われます。

jQueryオブジェクトを使いたい各プラグインは、勝手気ままに「wp_enqueue_script('jquery');」を実行します。これを実行したプラグインが１つでもあると、先ほどのようなjqueryを参照するコードがヘッダに１つだけ出力されるようになるシステムです。jqueryの場合は標準搭載されているので簡単に書けます。もう少し一般的には、wp_enqueue_script('script-name', WP_PLUGIN_URL.'/plugin-name/script-name.js', array('jquery'));の用に書くことができ、最後のarrayの部分のように、依存しているプラグインを書くことで、htmlに出力される順番を解決してもらうこともできます。

さて、エラーが発生するとしたら、これらのコードが書き忘れられている場合です。

しかし、今回は確かにプラグインにこのコードがありました。

自分の原因は、「Autoptimizeプラグイン」の設定が原因でした。このプラグインで、自動的にCSSの最適化や短縮、.jsの単一ファイル化・最適化・短縮などを自動で行っていました。これを使うと、非同期読込でも、javascriptファイルが単一ファイルになっているので、読込順序などが安心できます。

Autooptimiseでは、.jsの読込位置はフッターに設定されていました。

この仕組みがWordPressの仕組みを横取りする形となっており、jQueryの読込位置が遅すぎて、それより早い位置に現れるjQueryを利用する別のコードでエラーが発生してしまったというわけです。

というわけで、今回は「Autoptimize Settings」の「Exclude scripts from autoptimize」に「jquery」を追加することで、Autooptimizeにjqueryの読込位置を変更されないようにして、jqueryだけヘッダで読み込むようにして回避しました。

しかしこれでは本文の表示が遅くなってしまうので、jqueryを使うjavascriptコードを直接htmlに書き込んでしまうプラグインについてどうにか対策しようかと思います。

Javascriptを直接ヘッダやフッタに書き込むプラグインは、.jsファイルに分離してくれたら嬉しいのに。。。ファイル数を減らすにしても、また別のプラグイン（Autoptimize）が一括して担当するので。。。