WordPressでjQueryが動かなくて困った、なんて経験をした方も多いと思います。原因は沢山考えられますが、主な原因として下記が考えられます。
jQueryのプラグインを使用する場合で、動作要件のjQueryのバージョンと一致しない
画像スライダーやコンテンツスライダーなどのjQueryのプラグインを使用する場合、プラグインの動作要件に記載されたjQueryのバージョンと、実際に使用しているjQueryのバージョンが一致しないと動かない場合があります。
この場合はWordpressにデフォルトで入っているjQueryのバージョンで動くプラグインを用意するか、自前で用意したjQueryを使用するようにしましょう。
最近作成されたプラグインの場合、それほど問題が起きる事はないと思いますが、何年も前に作成された古いプラグインを使用する場合は注意が必要です。
デフォルトで用意されているjQueryのバージョンの確認方法や、自前で用意したjQueryを使用する方法は長くなるのでここでは省きます。
ここで言うプラグインとは、Wordpressのプラグインではなく、jQueryライブラリ用のプラグイン（scriptファイル）の事を言います。
付属のjQueryを読み込ませていない
WordPress公式のテーマや市販のテーマを使用している場合、何もしなくてもjQueryが読み込まれていると思います。（使用するテーマにより読み込まれていない場合もあります）
しかし、テーマを自作している場合は、自分で付属のjQueryを読み込ませるようにしなくてはなりません。
読み込ませ方はいくつかありますが、ここでは長くなるので割愛します。
私はトラブルが少ない下記の方法を使用しています。
functions.phpに以下を記述します。（header.phpに</php wp_head(); ?>を記述して使用している場合に限ります）
//Scriptの読込
function my_scripts() {
wp_enqueue_script('jquery'); //付属のjQueryの読込
wp_enqueue_script('script', get_template_directory_uri().'/js/script.js', array(), '20200930', false);
//jQueryで動かすオリジナルスクリプトを記述したファイル
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );上記はブラウザで表示した際に、HTMLの</head>の上に付属のjQueryを読み込ませ、その後にオリジナルスクリプトを記述したファイルを読み込ませるための内容になっています。
header.phpに</php wp_head(); ?>を記述して使用していないと動作しませんが、記述している場合は上記についてheader.phpに何も追記しなくて大丈夫です。自動的に読み込まれます。
「20200930」の部分はバージョン管理用にアップ日の日付など、好きな数字を入れます。
次回、script.js（オリジナルのスクリプトファイル）を更新してサーバへアップする際に、ここの数字を更新日の日付など、現在とは別の数字に変更すると、サイトのリピートユーザに対し「script.js」のキャッシュを使用せず、新規に読み込ませてくれます。空欄にした場合はWordpressが勝手にバージョン名を入れてくれます。（jQueryの動作には影響ありません）
自前で用意したjQueryの読込先を間違えて記述している
WordPressで用意されている付属のjQueryを使用せず、自前で用意したjQueryをサーバへアップロードして使用する場合もあるかと思います。
この場合単純なミスとして、header.php などに記述したjQueryの読込先のディレクトリを間違えていると言うケースです。
下記はサーバのテーマディレクトリ内に作成した「js」フォルダの下へjQueryを保存しているケースです。「jquery-x.x.x.min.js」には用意したjQueryのファイル名が入ります。
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-x.x.x.min.js"></script>jQueryをアップロードしたディレクトリと読み込み先のディレクトリが合っているかよく確認しましょう。CDNで読み込ませている場合は、CDNの記述をチェックします。
また、作成したオリジナルスクリプトを外部ファイルとして読み込ませている場合も同様です。オリジナルのスクリプトファイルのアップロード先と読み込み先が合っているかよく確認しましょう。下記の「script.js」部分には用意したオリジナルスクリプト名が入ります。
<script src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>作成したjQueryのスクリプトが間違っている
この場合は当たり前ですが、動きませんよね。
まずはローカル環境で、作成したスクリプトが動作する事を確認しましょう。
ローカルで問題なく動作する場合には、このページに書いている他の原因の可能性が高いと思います。
WordPress付属のjQueryを使用している場合に、「＄」を使うと動作しない
WordPressにデフォルトで用意されているjQueryは、他のJavaScriptライブラリとの競合（コンフリクト）を避けるために、カスタマイズされた内容になっております。
そのため、プラグインや自前で作成したスクリプト内で「＄」を使用していると動作しないようになっています。
この場合の一番分かり易い対処方法は、プラグイン又は自前で作成したスクリプト内の「＄」を「jQuery」に変更する方法です。
●変更前
$(document).ready( function() {
$('.box').css('color','red');
});●変更後（「＄」を「jQuery」へ変更）
jQuery(document).ready( function() {
jQuery('.box').css('color','red');
});この方法の欠点は、長いスクリプトの場合に、ソース内にある沢山の「＄」を置き換える事になりますので、テキストエディタやDreamweaverなどのオーサリングソフトに用意されている「検索・置換」などの機能を使用して一発で変更出来るにしても、「＄」を「jQuery」へ変更するわけですから、文字数が増える分ソースも長くなってしまいます。
これを避けるための方法として、以下のやり方だと「＄」をそのまま使用できるのでおすすめです。
●変更前
$(document).ready( function() {
$('.box').css('color','red');
});●変更後
jQuery(document).ready( function( $ ) {
$('.box').css('color','red');
});スクリプトをjQueryとして使用するための最初の記述部分「$(document).ready( function() { });」を「jQuery(document).ready( function( $ ) { });」へ置き換えると言う方法です。
この1行目の書き方は省略した書き方が出来ますので、私は以下のように記述しています。
jQuery(function($) {
$('.box').css('color','red');
});まとめ
いかがでしたか？
これまでに説明した内容がどれも該当しない場合は、作成したスクリプト内でケアレスミスをしているケースが殆んどかと思います。
半角が全角になっている部分がないかなど、よくチェックしてみましょう。