WordPressでjQueryが動かない原因＋解決策３つ
本記事では、jQueryで作ったプログラムがWordPressでは動かない（エラーが出る）原因と解決策について紹介していますので、WEB制作にお役立てください。
目次【本記事の内容】 [ click ]
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を適用させています。
チャンネル登録はこちら
うぇぶとまと
YouTubeチャンネルでは日々の暮らしをVlog形式で発信しています！ブログよりブログらしい内容になっていますので是非見てみて下さい！