WordPressで「jQuery is not defined」の原因と直し方

なんかWordPressで「jQuery is not defined」とかいうエラーが出るんだけど…

ブログでよく利用されているWordPress。

テーマやプラグインなどカスタマイズ性が高く、未だに人気が高い。

しかしその自由度故に予期せぬエラーに当たることがある。

そのひとつがコレ。

jQueryを使っているはずなのに「無い」と言ってくるエラーである。

何故エラーになるのか。

そこで今回はWordPressで「jQuery is not defined」の原因と直し方について解説する。

この記事を書いている人

システムエンジニア、AIエンジニアと、IT業界で10年以上働いている中堅。WordPressは個人的に数年触っている。

「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 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 にチェックを入れればいい。

Kssp jQuery in the Header

そしてWEBブラウザの開発者ツールで再度ページを読み込んでみると、エラーが無くなっているのがわかる。

jQuery is not defined のエラーが無くなった

まとめ

今回はWordPressで「jQuery is not defined」の原因と直し方について解説した。

「jQuery is not defined」が発生する原因のひとつはプラグインでjQueryの定義部分をHTMLヘッダーからフッターに移動させて読み込みを遅らせた為。

直し方はjQueryの定義部分をHTMLヘッダーに戻すこと。

わかってしまえば単純ですが、エラー原因を探り当てるのがなかなか難しいですね

他にもWordPress関連のTipsもあるので、気になったら覗いてみて欲しい。