WordPress jquery エラー「Uncaught TypeError: $ is not a function」が発生した場合の対処法

WordPress jquery エラー「Uncaught TypeError: $ is not a function」が発生した場合の対処法

WordPressで、jqueryエラー「Uncaught TypeError: $ is not a function」が発生した場合の対処法を記述してます。

環境

  • WORDPRESS 6.0
  • jquery 3.6.0
  • ブラウザ chrome 102.0.5005.115

エラー全文

以下のコードで発生

<script type='text/javascript' src='http://xxx/wp-includes/js/jquery/jquery.min.js?ver=3.6.0' id='jquery-core-js'></script>

<script>

$(document).ready(function(){
    console.log('sample')
});

</script>

エラー全文

Uncaught TypeError: $ is not a function

画像

firefox(101)とsafari(15.5)の場合も同じエラーが発生します。

Uncaught TypeError: $ is not a function

画像

原因

WORDPRESSでは、「$」での関数の指定ができないため

対処法

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

<script type='text/javascript' src='http://xxx/wp-includes/js/jquery/jquery.min.js?ver=3.6.0' id='jquery-core-js'></script>

<script>

jQuery(document).ready(function(){
    console.log('sample')
});

</script>