いろいろ調べたがWordPressでjQueryが動かない

Question

解決したいこと

• WordPressでjQueryを動かしたい

起こっている問題

• WordPressでjQueryを動かす方法を一通り調べて適用させたつもりだがなぜか動かない
• JavaScriptのファイルやWordPress独自のjQueryファイルは読み込まれていて、jQueryも「jQuery(function($) {});」で囲ったが、なぜかコンソールに「TypeError: $ is not a function」とエラーがでる
• 上記のエラーは$をすべてjQueryに置き換えても発生する

現状

各ファイルの記述は以下のようになっていて、テンプレートファイルも１から作り始めた段階なのでこれ以外に関係している記述はないと思われます。
また、XAMPPでローカル環境で行っています。
また、header.phpには<?php wp_head(); ?>も記述しております。
以下は使っているファイル内容抜粋です。

// functions.php
<?php 
  // jQuery 読み込み
  function add_jQuery() {
    wp_enqueue_script( 'jquery' );
  }
  add_action( 'wp_enqueue_scripts', 'add_jQuery' );
  
  function add_css_js() {
    //css読み込み
    wp_enqueue_style('normalize', get_template_directory_uri().'/css/normalize.css');
    wp_enqueue_style('style', get_template_directory_uri().'/css/style.css');

    //javascript読み込み
    wp_enqueue_script('hamburger', get_template_directory_uri().'/js/hamburger.js', array( 'jquery' ));
  }
  add_action('wp_enqueue_scripts', 'add_css_js');
?>

// hamburger.js(ハンバーガメニュー用のファンクション)
jQuery(function($) {
  $(function () {
    $('#js-btn-hamburger').click(function () {
      $('body').toggleClass('is-drawer-active');
  
      if ($(this).attr('aria-expanded') == 'false') {
        $(this).attr('aria-expanded', true);
      } else {
        $(this).attr('aria-expanded', false);
      }
    });
  });
});

また、デベロッパーツールで確認したところ、headタグには以下のようにjQueryとJavaScriptが読み込まれています。

<script type="text/javascript" src="http://localhost/wordpress/wp-includes/js/jquery/jquery.min.js?ver=3.5.1" id="jquery-core-js"></script>
<script type="text/javascript" src="http://localhost/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2" id="jquery-migrate-js"></script>
<script type="text/javascript" src="http://localhost/wordpress/wp-content/themes/testtheme/js/hamburger.js?ver=5.7.1" id="hamburger-js"></script>

考え

• ローカル環境なのでhttpとなっておりそれが影響している？(試せていません)
• 書き出されたhamburger.jsのバージョンがwordpressのバージョンになっているのが関係している？(バージョンの指定方法などを後日調べて試してみます)

問題の原因っぽいものが分かりました

デベロッパーツールから

<script type="text/javascript" src="http://localhost/wordpress/wp-content/themes/concentcafe-original01/js/hamburger.js?ver=5.7.1" id="hamburger-js"></script>

を開いてみると、
行った変更が反映されておらず、

$(function () {
$('#js-btn-hamburger').click(function () {
$('body').toggleClass('is-drawer-active');

if ($(this).attr('aria-expanded') == 'false') {
$(this).attr('aria-expanded', true);
} else {
$(this).attr('aria-expanded', false);
}
});
});

となったままで、「jQuery(function($){});」で囲った変更が反映されていません。

• VS CODEで変更を保存して、ブラウザのリロードボタンを押しているのですが、変更されない理由が分かりません。

Comments

[Jon_do]

jqueryのファイルがローカル上に存在するのであればブラウザに下記urlを打ち込むと
大量の文字列が表示されるはずです。表示されないのであればローカル上に
jquery.min.jsは存在しません。試してみてください。
http://localhost/wordpress/wp-includes/js/jquery/jquery.min.js

[ry0xi]

上記URLから確認しましたが表示されました。
「/*! jQuery v3.5.1 | (c) JS Foundation and other contributors | jquery.org/license */
!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)・・・・・・・・・・・・・・・・」
こんな感じで100行以上表示されています。

[Jon_do]

function($)の$を消してコンソール見てみてください。

[ry0xi]

消してみましたが変わりませんでした。
ですが、別の原因が分かりました。
デベロッパーツールから
<script type="text/javascript" src="http://localhost/wordpress/wp-content/themes/concentcafe-original01/js/hamburger.js?ver=5.7.1" id="hamburger-js"></script>
を開いてみると、
行った変更が反映されておらず、
$(function () {
$('#js-btn-hamburger').click(function () {
$('body').toggleClass('is-drawer-active');

if ($(this).attr('aria-expanded') == 'false') {
$(this).attr('aria-expanded', true);
} else {
$(this).attr('aria-expanded', false);
}
});
});
となったままです。
VS CODEで変更を保存して、ブラウザのリロードボタンを押しているのですが、変更されない理由が分かりません。

[maisumakun]

スーパーリロードしてみたらどうなりますか？

[ry0xi]

スーパーリロードで無事に適用されました。
調べると、ファイルのバージョンに変更がなければ、変更後キャッシュが更新されないということなので、
wp_enqueue_scriptのバージョン指定を行うことにしました。
$ver = filemtime( get_theme_file_path( '/js/hamburger.js' ) )
の値を入力したところ、毎回変更が反映されることになりました。

これらのバージョンはcssやjsの読み込み時に指定すれば編集中は便利になりますが、Webを公開する際には消しておいた方がいいのでしょうか？

Answer 1

スーパーリロードで無事に適用されました。
調べると、ファイルのバージョンに変更がなければ、変更後キャッシュが更新されないということなので、
wp_enqueue_scriptのバージョン指定を行うことにしました。
$ver = filemtime( get_theme_file_path( '/js/hamburger.js' ) )
の値を入力したところ、毎回変更が反映されることになりました。