はじめに
WordPressの独自テーマを作成した際、jQueryの読み込みでエラーが出たのでまとめます。
問題
functions.phpファイル内で「wp_enqueue_script」を使用して読み込むと、下記エラー文がコンソールに表示されました。
console
Uncaught TypeError: $ is not a function
エラー文を要約すると、「jQueryファイルに記述した$は関数ではない」というものです。
解決方法
解決方法は、読み込んだjQueryファイルに記述した「$」を「jQuery」と書き換えるだけでした。
jsファイル
/* エラー時のコード */
$(function() {
$('.selector').addClass('active');
});
/* 解決時のコード */
jQuery(function() {
jQuery('.selector').addClass('active');
});
ただし、これだと$(function() 内の「\$」も書き換える必要があります。
もっと簡単にすると下記のコードとなります。
jsファイル
jQuery(function($) {
$('.selector').addClass('active');
});
function()引数に\$を渡すことで、function内の\$は変更せずに済みます。
なぜ$を使用できないのか
WordPressはデフォルトでjQueryが読み込まれており、jQueryファイル内で「noConflict()」メソッドが実行されているようです。
noConflict()メソッドは、複数のライブラリで競合を起こさないよう「\$」の使用を禁止するためのものです。
そのため、「$」を使用していたことからエラーが発生してしまいました。
まとめ
wp_enqueue_script()内のどこかの記述を間違えたのかと思いずっと調べていたので、すごく時間が取られてしまいました。