Infinite Scrollを使ってカスタム投稿タイプにもっと読むボタンを実装したい

Question

実現したいこと

現在サイトをワードプレスサイトを製作中でして
その中で複数のブログに同一ページ内で追加記事を読み込む「もっと読む」ボタンを実装したいと考えています。

実装したいブログは下記の通りです。
・標準ブログ
・news（カスタム投稿タイプ）
・works（カスタム投稿タイプ）

色々調べた結果
Infinite Scroll
というjqueryプラグインがいいとわかりましてそちらを使って実装を試みています。

行ったこと

・Infinite ScrollをCDNでヘッダーから呼び出し

<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>

・archive-news.phpに追記（他にもありますがとりあえずこれから）

 <div class="archives-nav">
    <a href="" class="next">もっと読む</a>
  </div>
	  
<script>
jQuery(function($){
  $('.container').infinitescroll({
    loading: {
      finishedMsg: "<div class='list-finished-message'>一覧の最後に到達しました</div>", //最後まで到達した時のメッセージ
      msgText: "<div class='list-load-message'>ロード中です･･･</div>" //ロード中のメッセージ
    },
    navSelector : ".archives-nav", //ナビゲーションのクラスもしくはID
    nextSelector : ".archives-nav a.next", //ナビゲーションの「次へ」のクラスもしくはID
    itemSelector : ".article" //表示させる投稿のクラスもしくはID
  });
});
</script>

発生した問題

もっと読むボタンは表示されましたが
押してもページがリロードされるだけで何も変化が起きませんでした。

エラーを確認したところ下記のようなメッセージがありました。

Uncaught TypeError: $(...).infinitescroll is not a function
    at HTMLDocument.<anonymous> ((index):407)
    at j (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.J (jquery.min.js:2)
(anonymous) @ (index):407
j @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
J @ jquery.min.js:2

当方がスクリプトにおいて素人でして、何が問題で、どう解決できるかをご教示いただけないかと思います。

何卒よろしくお願いします。