WordPress標準でどのページでも読み込まれ、使えるようになっているはずのjQuery。
動作がJava Scriptと比べると遅いといわれがちですが、個人的には大差がつくほどの処理をWordPressサイトで行うこともないし、何かの機能をjQueryベースで解説している記事も多いし、何より扱いやすいのでこのサイトで配布している【HABONE】でももちろん各所で使用しています。
しかし、何かの参考ページを元にコードを入れてみたけど動かない．．そんなことに遭遇したことはありませんか？
WordPressでjQueryが動かないのは、「紹介ページのコードが役に立たない」ということではなく、正常に動作させるようにしていないことがほとんどです。
本ページでは、WordPressへ挿入したjQueryが動かないときの確認方法と、正常に動かす方法、半ば強制的に動かす方法などを紹介していきます。
強制的に動かしてもダメな場合は．．．そのコードがひょっとしたら間違ってるかも．．という指標にもなりますよ。
jQueryが動かない原因の特定方法
コードは間違っていないのにjQueryが動かない、参考ページの通りにコードを設置したのに動かない．．というパターンの多くはこれから紹介する3つです。
どちらが原因なのかは、いずれもブラウザのデベロッパーツール（ページ表示させて右クリック→検証、またはF12を押して表示させる開発者用ツール）で判別可能です。
WordPressのjQueryが読み込まれる前にコードが処理されている
多くあるパターンがこれです。jQueryは、
- jQueryを動かすためのプログラムが読み込まれる
- 書かれているjQueryのコードが実行される
という順番でないと動作しません。
読み込み順序が原因の場合、動作しないページでデベロッパーツールを起動し、ツールの右上に表示される赤い×マークをクリックすると容易に判断できます。
以下がエラー時のサンプルです。
エラーメッセージとして「Uncaught ReferenceError: jQuery is not defined at．．．」と表示されます。
日本語にすると、「jQueryが使える状態でないので、．．．の処理を実行できませんでした」という意味です。
つまり、WordPressのjQueryプログラムが読み込まれる前に、コードを実行して動かそうとしてまっせ！というエラーなのです。
このエラーの場合は、後述する以下のいずれかの方法で検証と対処が可能です。
WordPressのjQuery用のコードになっていない
WordPressで読み込まれるjQueryは、Googleが提供するjQueryプログラムと違ってJava ScriptとjQueryを明確に分ける仕様になっています。
分かりやすく言えば、コード中の「$」という文字列は使えないということです。
この種のエラーは以下のようにデベロッパーツール上で表示されます。
エラー内容は「Uncaught TypeError: $ is not a function at．．．」、日本語に訳すと「構文に誤りがあります。$という文字列は使用できません」というものです。
上図のエラーはコード一行目でわざと出したものですが、エラー末尾の「:1」で一行目が間違っていると親切に教えてくれていますから、そこに書かれている「$」を「jQuery」へ変えればWordPressで読み込まれるjQueryプログラムでも動作します。
最初にエラーが発生した行のみが表示されるので、修正してはデベロッパーツールで確認．．を繰り返して完全にエラーのない状態にする必要があります。
この種のエラーは、ご自身でコードを書いたという場合ではなく、どこかの参考ページで紹介されているコードを使用したときに発生することが多いです。
簡単に言えば、紹介されているコードはのGoogleのCDN（「$」を使う前提）のものということです。
後述するGoogleのCDNを使用してコードの問題を解消する方法でGoogle CDNのjQueryプログラムを読み込ませることもできますが、せっかくWordPress用のjQueryプログラムが備わっているのですから、わざわざ外部スクリプトを読み込ませて動作を遅くする必要はないと個人的には思います。
今まで動いていたのにいつの間にか動かなくなった
この要因は大きく2つです。
1つめは、jQueryを使用するプラグインを有効にしていた時期があり、それを停止や削除した場合です。
もう1つは、サイトの表示高速化などの施策で、読み込み順が変わってしまった場合です。
前者の場合は以下の方法で解消できますが、後者の場合は高速化措置の方法によりますので、一旦その措置を切って動作するかを試して判断および対策を行うことになります（対処方法が多岐にわたるため、本ページでこの場合の解消方法は紹介していせん）。
jQueryを問題なく動作させる方法いろいろ
読み込み順の問題を解消する方法①
- jQueryが問題なく動作するかのチェックをしたいとき
- その投稿や固定ページだけで動作させたいとき
に有効な方法です。
投稿または固定ページの編集画面へ「カスタムHTML」ブロックを追加して、以下のように記述します。
1行目の記述で、WordPressのjQueryを読み込ませ、そのあとで「jQueryの内容」に書かれたものを実行する確実な方法なので、コードに問題がなければ動作するようになります。
厳密にはヘッダータグやフッタータグの範囲外にプログラムを入れることになり、HTMLの構文としてあまりよろしくない方法ですので、上記の場合のみに使用することをおすすめします。
これで動作しない場合で、「$」のエラーが出る場合は、前述したように「$」を「jQuery」へ変える作業をしてみて、それでも動作しなければjQueryの構文が間違っている可能性が高いです。
読み込み順の問題を解消する方法②
上の、読み込み順の問題を解消する方法①で紹介した方法で動作することが確認できたら、WordPress標準の作法で、ヘッダー（またはフッター）内で、しかもWordPressのjQueryプログラムが読み込まれた後で確実に読み込まれるようにしましょう。
この方法は、以下の環境及びスキルが必要です。
- FTPクライアントツールなどで、有効化しているテーマフォルダ内へファイルを転送する
- テーマのfunctions.phpへコードを追記する
- パソコンのテキストエディタなどで、拡張子「.js」ファイルの作成ができる
まず、前述したコードの「jQueryの内容」の部分をテキストエディタへコピーし、「〇〇.js」（〇〇は任意の半角英数字と記号）で保存します。
次にFTPで有効化しているテーマのフォルダへ「〇〇.js」を転送します
最後に以下のコードを有効化しているテーマのfunctions.phpへ追加します。
function ha_jquery_script_include() {
wp_enqueue_script( '〇〇', get_template_directory_uri() .'/〇〇.js', array('jquery'));
}
add_action('wp_enqueue_scripts','ha_jquery_script_include');- 〇〇の部分は作成した.jsファイルのファイル名を入れてください
- 子テーマを使っている場合には「get_template_directory_uri」「get_stylesheet_directory_uri」へ変更してください
これで問題なく動作すれば、不具合解消です。
GoogleのCDNを使用してコードの問題を解消する方法
「$」問題の解消のためのみに有効な方法です。前述したように、コード修正すれば読み込む必要がないファイルですので、個人的にはあまりおすすめしません。
テーマのfunctions.phpへ以下のコードを追加します。
function ha_google_jquery_cdn_include(){
echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>';
}
add_action('wp_head','ha_google_jquery_cdn_include',1);一応優先度を上げているので問題ないかと思いますが、動作しない場合には、読み込み順をさらに工夫する必要があります
