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

この記事にいっぱいおごってみる?

KOBE WINGのAmazonほしい物リスト

オススメ記事

eyecatch_567

WordPressで使用しているプラグイン一覧 ConoHa Wing 2021…

WordPressプラグインリスト 2021年2月現在、Co…

eyecatch_62

ConoHa WING Google Pagespeed Insights 速度…

今回は、このページの立ち上げの理由の1つの、今後を見据えたW…

eyecatch_865

PageSpeedInsightsがアップデートされました 2021/11/16…

アップデート内容 2021年11月16日にPageSpeed…


WordPressWordPress,jQuery

Posted by KobeWing