本記事はプロモーションを含みます

WordPressでjQueryが動かない原因と対策

2021年1月29日

1. 問題点
2. 原因に関して
3. 解決方法
4. その他

問題点

一般的にjQueryでは、下記のようにコードを記載して呼び出すのが、WordPressでjQueryが動かない。

$('セレクタ’).メソッド(引数);

原因に関して

WordPressは、PHPというプログラムで動いているのが、そのプログラムでユーザー定義関数が「$ユーザー定義関数」となっており、例えば「$testdata」みたいな宣言になっています。そのため、衝突が起きないように、PHPの記事内では、$がただの文字のようになり、動かせないようになります。もちろん、ユーザー定義関数以外でも使用する場合もあります。

解決方法

jQueryには、グローバル関数$が他と名前が衝突する競合を回避するため、「jQuery.noConflict」というメソッドを用意しています。簡単に言えば、$の文字をjQueryが置き換わります。

動かなかったコード（jQueryの一般的な呼び出し方）

<script type=”text/javascript”>
$(function() {
     $(‘#test’).text();
     $(‘.test’).remove(‘.sample’);
});
</script>

動いたコード（$をjQueryに置き換え）

<script type=”text/javascript”>
// jQueryの$関数を無効化
jQuery.noConflict();

// jQueryの機能は「jQuery～」でのみ呼び出せる
jQuery(function() {
     jQuery(‘#test’).text();
     jQuery(‘.test’).remove(‘.sample’);
});

</script>

その他

WordPressでは、基本設定でjquery.jsやjquery.min.jsなどが動いていることが多いのですが、テーマによっては、読み込まれていないときがあります。動作がうまくいかないときは、HTMLソースを確認し、jquery.jsかjquery.min.jsが読み込まれていることを確認してください。