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

eyecatch_432

問題点

一般的に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が読み込まれていることを確認してください。

オススメ記事

eyecatch_729

WordPress ログインアラートメールを送信する方法 プラグインなし…

問題点 プラグインを使用せずに、WordPressの「wp-…

eyecatch_432

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

問題点 一般的にjQueryでは、下記のようにコードを記載し…

eyecatch_650

WordPress プラグイン 英語で表示された場合の解決方法…

問題点 日本語対応のWordPressのプラグインでアップデ…