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 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
    Kssp jQuery in the Header


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

    jQuery is not defined のエラーが無くなった
    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
    -, ,

    © 2024 ITips