テーマの jQuery が動作しない

　お世話になっております。最近 JavaScript について学び始めたものです。

　 WordPress 独自テーマで、jQuery を使ってモバイル用のハンバーガーメニューを実装したいと考えています。まず静的な HTML や CSS を作成し、jQuery を読み込んだうえで外部 JS ファイルに jQuery で記述すると、ハンバーガーメニューが動作しました。

　functions.php に jQuery の読み込みを記載しています。

function mytheme_enqueue_scripts() {
    // style.css
    wp_enqueue_style( 'main', get_stylesheet_uri() );
    // FontAwesome
    wp_enqueue_style( 'fontawesome', get_stylesheet_directory_uri() . '/fonts/fontawesome/css/all.min.css' );
    // jQuery
    wp_enqueue_script( 'jquery', get_stylesheet_directory_uri() . '/js/jquery.js' );
    // JavaScript
    wp_enqueue_script( 'main', get_stylesheet_directory_uri() . '/js/script.js' );
 }
add_action( 'wp_enqueue_scripts', 'aizome_enqueue_scripts' );

　一時$ is not a functionなどのエラーが Web ブラウザーのコンソールに表示されていましたが、この質問を書いている時点（2023年5月6日11時08分）では、「jquery-migrate.min.js?ver=3.4.0:2 JQMIGRATE: Migrate is installed, version 3.4.0」という情報と、Uncaught TypeError: $ is not a function at script.js?ver=6.2:22:1（エラーが表示されています。

nav.js（静的 HTML ファイルに組み込んだ JavaScript ファイル）:

$('#hamburger-icon').on('click', function(){
    console.log('メニューを開きます。');
    $('.nav-list').toggleClass('sp-menu-active');
    $('#hamburger-icon').toggleClass('fa-bars fa-xmark');
});

$('#hamburger-icon').on('click', function(){
    console.log('メニューを開きます。');
    $('.nav-list').toggleClass('sp-menu-active');
    $('#hamburger-icon').toggleClass('fa-bars fa-xmark');
});

$ をjQuery に書き換えると、コンソールに「Uncaught TypeError: $ is not a function at script.js?ver=6.2:22:1（」は表示されなくなりました。

jQuery('#hamburger-icon').on('click', function(){
    console.log('メニューを開きます。');
    jQuery('.nav-list').toggleClass('sp-menu-active');
    jQuery('#hamburger-icon').toggleClass('fa-bars fa-xmark');
});

　これらのコードを WordPress のテンプレートにコピーし、テーマ用に編集を加えると、同じ JavaScript コードでも WordPress ではアイコンをクリックしても動作しません。どうすれば良いでしょうか？ご教示いただければ幸いです。