wordpress本番環境でコードを修正したい

前提・実現したいこと

wordpress本番環境でコードを修正したいです。

local by Flywheelからwordpressを本番環境に移しました。
スマホブラウザがずれていたため、コードの修正をしたいのですが、ブラウザに反映されません。
FileZillaでファイルを移行したので、FileZillaのファイルを直接修正したのですが、反映されません。
保存はしています。

なお、直したいコードの一部です。
訂正したいコード

javascript
1{
2    const skillsPage = document.querySelectorAll('.skills--page__language');
3
4        function scrollAnimation () {
5            for(let i = 0; i < skillsPage.length; i++) {
6                let margin = 50;
7                if(window.innerHeight > skillsPage[i].getBoundingClientRect().top + margin) {
8                    skillsPage[i].classList.add('active');
9                }
10            }
11        }console.log
12        window.addEventListener('load',scrollAnimation);
13        window.addEventListener('scroll',scrollAnimation);
14    
15    
16}

訂正予定のコード

javascript
1{
2    window.addEventListener('DOMContentLoaded',() => {
3        
4        function scrollAnimation () {
5            let skillsPage = document.querySelectorAll('.skills--page__language');
6            for(let i = 0; i < skillsPage.length; i++) {
7                let margin = 50;
8                if(window.innerHeight > skillsPage[i].getBoundingClientRect().top + margin) {
9                    skillsPage[i].classList.add('active');
10                }
11            }
12        }
13        window.addEventListener('load',scrollAnimation());
14        window.addEventListener('scroll',scrollAnimation());
15    
16    
17    });
18    
19}
20
21

どうぞ、よろしくお願いいたします。

試したこと

キャッシュの削除

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

テキストエディタ：vscode
レンタルサーバー：Xserver

行動規範の内容に同意します

回答1件

ベストアンサー

考えられるの以下かと思います。

・キャッシュの削除（ブラウザ）
・キャッシュの削除（wordpress側。キャッシュ系プラグイン等使ってる場合）
・コード修正は反映されてるが、ズレが解消されてない（修正ミス）

以下2点提示いただけたら、より正確なアドバイスができると思います。
１、対応させたい修正
２、wordpressサイト

投稿2020/05/10 05:46

omori3

総合スコア274

kaaaarin

2020/05/10 05:57

早速の回答ありがとうございます。キャッシュの削除は何度もしているのですが.. もう一度削除方法を確認します。 wordpressのサイトは karins-portfolio.com です。スマホで確認すると、要素が出てこない、消えるエラーが出ます。

kaaaarin

2020/05/10 05:59

ちなみに、利用しているプラグインです。 Advanced Custom Fields PRO Breadcrumb NavXT Custom Post Type UI Duplicate Post Google Analytics Dashboard for WP (GADWP) Show Current Template WP-PageNavi

omori3

2020/05/10 06:32

http://karins-portfolio.com/skills/ 直したいコードの一部から拝見すると、上記のページのコンテンツが出てこないという認識で大丈夫でしょうか？ JavaScriptのミスかと思います。 ① 以下の行、条件文左　window.innerHeightとなってますが、こちら全体の上からスクロール量取らないといけないので、window.pageYOffsetに変えましょう。 if(window.innerHeight > skillsPage[i].getBoundingClientRect().top + margin) { ↓ if(window.pageYOffset > skillsPage[i].getBoundingClientRect().top + margin) { ② 以下、scrollAnimation()の()はいらないです。 window.addEventListener('load',scrollAnimation()); window.addEventListener('scroll',scrollAnimation()); ↓ window.addEventListener('load',scrollAnimation); window.addEventListener('scroll',scrollAnimation); とりあえず、上記2点対応すれば、スキルページ、四つ全部出ると思います。出なかったら言ってください！

kaaaarin

2020/05/10 08:04 編集

ご指摘ありがとうございます！早速直しました。しかし、 jsを変更してもSafariのブラウザには反映されましたが、chromeのブラウザに反映されていません．．また、スマホのSafariで確認すると、jsは機能していませんでした．．一度、再起動をしてみましたが、直りませんでした．．

omori3

2020/05/10 09:25

こちらのsafari, chrome, iphone safariでは、先ほどの箇所は表示できるのが確認できました。キャッシュだと思うんですが、どうでしょう。。キャッシュってどのよううに消してますか？

omori3

2020/05/10 10:14

先ほど、pageYOffsetと言いましたがgetBoudingClientRect()の動き勘違いしていたので、以下の方がよりいい感じに動くと思います。 if(window.innerHeight * 0.7 > skillsPage[i].getBoundingClientRect().top ) 0.7の箇所、0.1~ 1の間で変えてみると、画面のどれくらいの位置で表示されるか変化が見れると思います。

kaaaarin

2020/05/17 12:29

返信に気が付きませんでした.. ご丁寧に回答していただいたのに、遅くなってしまし大変申し訳ございません。ご指摘の通り、キャッシュに消し方に問題がありました。解決致しました。大変ありがとうございました。

行動規範の内容に同意します