ブログでよく利用されているWordPress。
テーマやプラグインなどカスタマイズ性が高く、未だに人気が高い。
しかしその自由度故に予期せぬエラーに当たることがある。
そのひとつがコレ。
jQueryを使っているはずなのに「無い」と言ってくるエラーである。
何故エラーになるのか。
そこで今回はWordPressで「jQuery is not defined」の原因と直し方について解説する。
この記事を書いている人
記事を読むメリット
WordPressで「jQuery is not defined」の原因と直し方がわかり、同じエラーがあってもすぐに修正できるようになる。
「jQuery is not defined」の現象
まず「jQuery is not defined」はどのようにして起こるのか。
実はエラー自体は画面には現れない。
Google ChromeのようなWEBブラウザで F12 キーを押すと開発者ツールの画面が開く。
そこでタブの右側に☓マークが出ており、それをクリックすると画面下部にコンソールエリアが表示され、エラーメッセージがわかるようになる。
 |
|---|
メッセージの意味としては以下のようになる。
要は事前に定義されてないものをコードで呼び出そうとしてエラーになる定番のエラーである。
しかしテーマにしろプラグインにしろこのようなエラーは当然潰してからリリースしているはず。
では何故「jQuery is not defined」が発生するのか。
「jQuery is not defined」の原因
「jQuery is not defined」の原因はjQueryの定義がされていないことだが、何故定義されていないのか。
原因のひとつは「javascriptの読み込みを遅延させるプラグイン」である。
例えば Scripts to Footer プラグインを使うと、HTMLのヘッダー部分で定義されていたjavascriptをフッターに移動させることでHTML部分の読み込みを早める効果がある。
しかしフッターに持っていったことで
の順で書かれていたものが、
という順になってしまいjQueryの定義より先に処理を読み込んでエラーになってしまうわけである。
JavaScriptが実行される前にjQueryが完全にロードされていない
jQueryなどの依存関係製品を操作する際の最初のルールは、jQueryと残りのコードの間でロードの順序を維持することです。まず、jQueryを完全にロードする必要があります。そうすれば、依存関係のデータを使用してコードが正しく機能します。そうしないと、「jQuery $ is not defined」というエラーが必ず表示されます。
参考：How to fix the "jQuery is not defined" error in WordPress
「jQuery is not defined」の直し方
「jQuery is not defined」の原因が、javascriptをHTMLのフッターに移動させたことであれば、解決方法は「jQueryの定義部分をヘッダーに戻すこと」だ。
Scripts to Footer プラグインであれば、設定の Kssp jQuery in the Header にチェックを入れればいい。
 |
|---|
そしてWEBブラウザの開発者ツールで再度ページを読み込んでみると、エラーが無くなっているのがわかる。
 |
|---|
まとめ
今回はWordPressで「jQuery is not defined」の原因と直し方について解説した。
「jQuery is not defined」が発生する原因のひとつはプラグインでjQueryの定義部分をHTMLヘッダーからフッターに移動させて読み込みを遅らせた為。
直し方はjQueryの定義部分をHTMLヘッダーに戻すこと。
他にもWordPress関連のTipsもあるので、気になったら覗いてみて欲しい。
