情報科学屋さんを目指す人のメモ

方法・手順・解説を書き残すブログ。私と同じことを繰り返さずに済むように。

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

jQuery (2) WordPress (76) WordPressプラグイン (25)

Chromeでブログのコードを確認したところ、「jQuery」が見つからないというエラーが表示されていました。この原因と対策についてメモしておきます。私の場合は少し特殊な原因だったので、普通の確認事項についても少し書いておきます。

エラー

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

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

Uncaught ReferenceError: jQuery is not defined.

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

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

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

「jQuery」が定義されるタイミング

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

jQueryオブジェクトを使いたい各プラグインは、勝手気ままに「wp_enqueue_script('jquery');」を実行します。これを実行したプラグインが1つでもあると、先ほどのようなjqueryを参照するコードがヘッダに1つだけ出力されるようになるシステムです。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)が一括して担当するので。。。

コメント(0)

新しいコメントを投稿