WordPress

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

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

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

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

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

そのひとつがコレ。

jQuery is not defined

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

何故エラーになるのか。

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

この記事を書いている人


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

記事を読むメリット

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が定義されていません

要は事前に定義されてないものをコードで呼び出そうとしてエラーになる定番のエラーである。

しかしテーマにしろプラグインにしろこのようなエラーは当然潰してからリリースしているはず。

では何故「jQuery is not defined」が発生するのか。



「jQuery is not defined」の原因

「jQuery is not defined」の原因はjQueryの定義がされていないことだが、何故定義されていないのか。

原因のひとつは「javascriptの読み込みを遅延させるプラグイン」である。


例えば Scripts to Footer プラグインを使うと、HTMLのヘッダー部分で定義されていたjavascriptをフッターに移動させることでHTML部分の読み込みを早める効果がある。

しかしフッターに持っていったことで

  • jQueryの定義
  • jQueryを使用した処理
  • の順で書かれていたものが、

  • jQueryを使用した処理
  • jQueryの定義
  • という順になってしまい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もあるので、気になったら覗いてみて欲しい。

    ITipsと同じようなブログを作る方法

    ブログに興味がありますか?

    もしブログに興味がある場合は↓このページ↓を参考にすれば、ITipsと同じ構成でブログを作ることができます

    サーバー、ドメイン、ASPと【ブログに必要なものは全て】このページに書きました。
    同じ構成でブログ作るのはいいけど、記事はマネしないでネ (TДT;)

    ランキング参加中

    にほんブログ村 IT技術ブログへ

    他にもブログやSNSで紹介してくれると励みになります。

    はてブのコメントで酷評されると泣きます(´;ω;`)

    -WordPress
    -, ,

    © 2022 ITips