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

WordPressでJavaScriptのコードを組み込んでも、コードが実行されないケースが時々あります。
せっかく自作したコードが動作しないのは、とても悲しいものです。

そこで今回は、WordPressでJavaScriptのコードが動作しない理由と、対処法についてお伝えします。

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

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

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

実は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以外の目的で使用していても問題なく動作します。

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

($=>{

        const $element = $( "id" );

})(jQuery);

JavaScript初心者で最初からjQueryを使用している人は、jQueryを使用しない選択をするのは難しいと思います。
僕もそうでした。

しかしjQueryは1万行を超える大きなスクリプトです。

もしあなたが数10行のコードを作成したとします。
しかしすでに、1万行の負担をブラウザにかけているわけです。

WordPressは初期状態でjQueryを読み込んでいるので、使わないのはもったいない精神でも問題ありません。

しかしWordPress以外の場面でのスクリプト作成に対応できるように、ネイティブなJavaScriptコードを作成できるようになっておきましょう。