MENU

JavaScriptwordpressjQuery

【JavaScript】 wordpressでjQueryが使えない理由と対処法

更新日:2020/12/24

 

なぜwordpressでjQueryが使用できないのか

 

jQueryが使用できないケースの定義ですが、ここでは次の条件に合っているとします。

 

  • jQuery()での呼び出しが可能
  • $()での呼び出しができない

 

jQuery()での呼び出しもできない場合、webページでjQueryが読み込まれていない可能性があるので、jQueryをロードするようにwordpressを修正する必要があります。
方法についてはここでは解説していないので、他の記事を検索してみてください。

 

 

実はwordpressは独自のjQueryを用意していて、その中で$()での呼び出しを無効にしています。

 

次のコードは、その該当部分を抜き出したものです。

 

jquery.js:wordpressでjQueryの$を無効化部分

 


n.noConflict = function(b) { // 最終行付近
        return a.$ === n && (a.$ = nc),
        b && a.jQuery === n && (a.jQuery = mc),
        n
    }

jQuery.noConflict(); // 最終行

 

jQuery.noConflict();は最終行に記述されています。
この処理で数行上に記述されている、n.noConflict = function(b){…}が呼び出されます。

 

ここで変数aはwindowオブジェクトで、nはjQuery本体です。

 

JavaScriptの&&演算子は、左側が偽と判断される場合そこで終了します。
真と判断される場合は、右側を処理します。

 

この時点ではwindow.$にjQueryがセットされているので、a.$ === n が真になり右側の(a.$ = nc)を処理します。
ncはundefinedなのでa.$にundefinedがセットさます。
これにより$は無効となります。
そして(a.$ = nc)の計算結果はundefined=偽となり、ここで処理終了です。

 

window.$は無効になりましたがwindow.jQueryは残っているので、jQuery( id )などの呼び出しは有効のままです。

対処法

 

$()をjQuery()に書き換えるというのも対象法の一つですが…めんどくさいですね。
ようするに変数$にjQueryを代入すれば、それ以降問題なく使用できます。

 

 

$の再設定

 


(()=>{
        const $ = jQuery;
        const $element = $( "id" );
})();

 

上の例は、上の例は即時関数なので、即、実行されます。

 

windows.$を再設定するのではなくて、関数スコープ内で変数$を定義しています。
こうすることで、他のスクリプトがwindows.$をjQuery以外の目的で使用していても問題なく動作します。

 

なお上の例は、次のように書くこともできます。

 

$の再設定2

 


($=>{

        const $element = $( "id" );

})(jQuery);

記事の内容について

 

こんにちはけーちゃんです。
説明するのって難しいですね。


「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

そんなときは、ご意見もらえたら嬉しいです。

ご意見はこちら。
https://affi-sapo-sv.com/info.php

【お願い】

お願い

■このページのURL


■このページのタイトル


■リンクタグ