WordPressでjQueryが動かない原因＋解決策３つ

WordPressでjQueryが動かない原因

WordPress環境下ではjQueryを記述するとエラー（Uncaught TypeError: $ is not a function）が発生し動作しません、これはWordPress側で読み込んでいるjQueryがカスタマイズされている事が原因です。

これだと動作しない

$(window).on('scroll',function(){
	console.log('scroll');
});

例えば上のjQueryコードは動作しません、コードの頭にある「$」が原因です、WordPressでは少し書き方を工夫する必要があります。

WordPressでjQueryを使う方法３つ

①：「$」を「jQuery」に置き換える

jQuery(window).on('scroll',function(){
	console.log('scroll');
});

コードの頭にある$がjQueryに置き換わっている事に注目してください、WordPressでjQueryを動かない時は「$」ではなく「jQuery」と記述する事で動作するようになります。

②：「jQuery」でラップする

jQuery(function($){
  // この中であれば「$」使用可
});

①の方法だとコードを書くたびに「$」を「jQuery」に置き換える必要があるので少し面倒です、その場合はjQueryでラップしてその中に「$」付きの通常コードを書けばjQueryは正常に動作するようになります。

③：jQueryの読み込みを調整する

function custom_load_jquery() {
    // 管理画面以外に適用
    if ( !is_admin() ){
        // WPのjQueryを削除
        wp_deregister_script( 'jquery' );
        // Google CDN版のjQueryを再設定
        wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', array(), NULL, true );
    }
}
add_action( 'init', 'custom_load_jquery' );

上記コードをテーマフォルダ内のfunctions.phpにコピペする事でも対応は可能です。具体的に何をしているかというと、問題となるWordPress側のjQueryを削除し、CDN経由で新しくjQueryを適用させています。

他の人が読んでいる記事