ローカル環境では正常に動くが、サーバー環境でWordPressの表示が崩れる

前提・実現したいこと

Webデザインの学校でWebについて学びましたが、
実務経験がなく、全く違う業種に携わっており相談相手がおらずお力添えをいただきたいです。

WordPressのオリジナルテーマをローカル環境（XAMPP）にて作成し、
表示や動作に問題がなく正常に表示されるのを確認しサーバー（ロリポップ）にアップロードしました。

ですがJSが正しく動いていないのか、ローカルとは異なる表示になりました。

発生している問題・エラーメッセージ

レスポンシブ対応で、ハンバーガーメニューを作成しましたが、
メニューをクリックするとその場所まで飛びますが、
ハンバーガーメニューが開いたままになってしまいます。

他に記述しているJSは正常に動いているため、読み込みはされているとは思うのですが、
どこを修正したらいいか見当もつかず…

デベロッパーツールのコンソールにはエラーが20個以上あり、どれが該当するか理解できず…
その中のひとつですが関係ありますでしょうか？？

エラーメッセージ
?v=2.0:6 WebSocket connection to 'wss://public-api.wordpress.com/pinghub/wpcom/me/newest-note-data' failed: Error during WebSocket handshake: Unexpected response code: 403

エラーメッセージ
jquery.scrollify.js:678 Scrollify warning: Section names can't match IDs - this will cause the browser to anchor.
(anonymous) @ jquery.scrollify.js:678
each @ jquery-3.5.1.min.js:2
each @ jquery-3.5.1.min.js:2
calculatePositions @ jquery.scrollify.js:656
scrollify @ jquery.scrollify.js:562
(anonymous) @ script.js:21
e @ jquery-3.5.1.min.js:2
t @ jquery-3.5.1.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.5.1.min.js:2
c @ jquery-3.5.1.min.js:2
fireWith @ jquery-3.5.1.min.js:2
fire @ jquery-3.5.1.min.js:2
c @ jquery-3.5.1.min.js:2
fireWith @ jquery-3.5.1.min.js:2
ready @ jquery-3.5.1.min.js:2
B @ jquery-3.5.1.min.js:2
jquery.scrollify.js:170 Scrollify warning: ID matches hash value - this will cause the page to anchor.
animateScroll @ jquery.scrollify.js:170
scrollify @ jquery.scrollify.js:566
(anonymous) @ script.js:21
e @ jquery-3.5.1.min.js:2
t @ jquery-3.5.1.min.js:2
setTimeout (async)
(anonymous) @ jquery-3.5.1.min.js:2
c @ jquery-3.5.1.min.js:2
fireWith @ jquery-3.5.1.min.js:2
fire @ jquery-3.5.1.min.js:2
c @ jquery-3.5.1.min.js:2
fireWith @ jquery-3.5.1.min.js:2
ready @ jquery-3.5.1.min.js:2
B @ jquery-3.5.1.min.js:2
jquery-3.4.1.min.js:2 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
send @ jquery-3.4.1.min.js:2
ajax @ jquery-3.4.1.min.js:2
init_l10n @ VM690 CarbonLib.js:28
getCurrentLocale @ VM690 CarbonLib.js:42
getLocaleResource @ VM690 CarbonLib.js:69
(anonymous) @ wtpOnUMSScriptLoaded.js:8
TISProUrlManualScannerLib.js:351 TMExt_$(document) in TISProUrlManualScannerLib.js ErrorReferenceError: TMExt_$ is not defined

該当のソースコード

HTML
1<a class="nav-button" href="#"> <span></span> <span></span> <span></span> </a>
2  <nav class="nav-wrap">
3    <ul class="navi_list nav">
4      <li class="navi_item nav"><a href="<?php echo home_urL(); ?>">HOME</a></li>
5      <li class="navi_item nav"><a href="<?php echo home_urL(); ?>#information">INFORMATION</a></li>
6      <li class="navi_item nav"><a href="<?php echo home_urL(); ?>#about">SHOP</a></li>
7      <li class="navi_item nav"><a href="<?php echo home_urL(); ?>#menu">MENU</a></li>
8      <li class="navi_item nav"><a href="<?php echo home_urL(); ?>#gallery">GALLERY</a></li>
9      <li class="navi_item nav"><a href="https://●●" target="_blank">STAFF</a></li>
10      <li class="navi_item nav"><a href="<?php echo home_urL(); ?>#company">COMPANY</a></li>
11      <li class="navi_item nav"><a href="<?php echo get_permalink(24); ?>">CONTACT</a></li>
12    </ul>
13  </nav>

CSS
1.nav-wrap {
2    position: fixed;
3    left: 0;
4    top: 0;
5    display: none;
6    z-index: 10;
7    background-color: rgba(0, 0, 0, 0.7);
8    width: 100%;
9    height: 100%;
10  }
11  .nav-wrap .nav {
12    position: relative;
13    overflow-x: hidden;
14    overflow-y: auto;
15    margin: 20px auto;
16  }
17  .nav-wrap li {
18    display: block;
19  }
20  .nav-wrap a {
21    color: #fff;
22  }
23  /*--------------------------------------------------*/
24  /*メニューボタンのエフェクト*/
25  .nav-button, .nav-button span {
26    display: inline-block;
27    transition: all 0.4s;
28    box-sizing: border-box;
29  }
30  .nav-button {
31    display: block;
32    cursor: pointer;
33    z-index: 20;
34    position: fixed;
35    width: 40px;
36    height: 28px;
37    top: 2%;
38    right: 5%;
39  }
40  .nav-button span {
41    position: absolute;
42    left: 0;
43    width: 100%;
44    height: 2px;
45    background-color: #000;
46    border-radius: 4px;
47  }
48  .nav-button span:nth-of-type(1) {
49    top: 0;
50  }
51  .nav-button span:nth-of-type(2) {
52    top: 12px;
53  }
54  .nav-button span:nth-of-type(3) {
55    bottom: 0;
56  }
57  .nav-button.active span:nth-of-type(1) {
58    -webkit-transform: translateY(11px) rotate(-45deg);
59    transform: translateY(11px) rotate(-45deg);
60  }
61  .nav-button.active span:nth-of-type(2) {
62    opacity: 0;
63  }
64  .nav-button.active span:nth-of-type(3) {
65    -webkit-transform: translateY(-16px) rotate(45deg);
66    transform: translateY(-16px) rotate(45deg);
67  }

JS
1jQuery(function ($) {
2  $('.nav-button').on('click', function () {
3    if ($(this).hasClass('active')) {
4      $(this).removeClass('active');
5      $('.nav-wrap').addClass('close').removeClass('open');
6    } else {
7      $(this).addClass('active');
8      $('.nav-wrap').addClass('open').removeClass('close');
9    }
10  });
11});

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

初心者で質問も初めてな為、不足情報などございましたら、ご指摘いただきたくく存じます。

CHERRY

2021/02/15 09:17

Web ブラウザのデベロッパーツールのコンソールには、どのようなメッセージが表示されていますか？

chimu24

2021/02/15 09:28

早速のご返答ありがとうございます。追記しましたのでご確認のほどよろしくお願いします。

CHERRY

2021/02/15 20:22

質問に記載のエラーメッセージは、Jetpack を使っているのに wordpress.com にログインしていないと表示されるwordpress.com での認証失敗のメッセージと思います。 > JSが正しく動いていないのか、ローカルとは異なる表示になりました。 JavaScript でエラーが出ているのであれば、正常に表示されない可能性はありますので、エラーメッセージが大量に出ているのであれば、まずはエラーを解決する必要があると思います。具体的なエラーメッセージが不明なので解決方法は指摘できませんが、多くのエラーメッセージは、エラーメッセージをそのまま検索すると解決方法が見つかったりしますので調べてみてください。また、質問に記載するエラーメッセージは、ファイル名や行数もエラーを解決する重要な情報になるので省略せずに記載してください。 URL 等のドメイン名を隠したい場合は、消すのではなく example.com 等の例示用ドメイン名に置き換えてください。

chimu24

2021/02/16 02:53

プラグインが関係していたんですね！ご教示いただいた通りやってみたところ、Jetpackのエラーは消え、他何個かもエラーはなくなりました。ありがとうございます！現在残っているエラーはハンバーガーメニューに関係しているのでしょうか…？ JSの3.4.1とエラーの中に書いてありますが、3.5.1を読み込んでいるはずなのですが…