single.phpでJavaScriptが作動しません。誰か解決方法わかる方お願いします????

Wordpressを使っており、メインのページから投稿ページ（single.php）の方に飛べるようにしているのですが、スクロールした際のheaderのエフェクトがindex.phpでは作動するのですが、single.phpでは作動しません。

色々調べた見解ですが、funtions.phpの真ん中下あたりに
//if (is_single() ) wp_enqueue_script(
//'single-script',
//get_template_directory_uri() . '/js/single.js', true
//);
と仮に記述しているように、index.phpで実装しているscripts.js同様に、single.phpで作動できるように新たにsingle.js内にscripts.jsと同じコードを入れましたができませんでした。
勉強不足で無知なのは承知ですが、わかる方教えてくださりますと助かります。
（＊簡易的ではありますが、各コード貼ってます）

cssの内容（navigationだけ抽出するのが難しく当サイトのを載せてます）

###index.php

html
1<html lang="ja">
2    <head>
3<!-- wp_head pre -->
4     <?php wp_head(); ?>
5<!-- wp_head end -->
6    </head>
7
8    <body id="page-top">
9        <!-- Navigation-->
10        <nav>
11           <!-- nav内single.phpと同じ-->
12        </nav>
13
14        <!-- Masthead: タイトル-->
15        <header class="masthead">
16          　　
17        </header>
18
19        <!-- About-->
20        <section class="page-section bg-primary" id="about">
21            
22        </section>
23
24        <!-- Posted-->
25        <section class="page-section" id="posted">
26            
27        </section>
28
29        <!-- Portfolio-->
30        <section class="page-section bg-dark" id="portfolio">
31            
32        </section>
33
34        <!-- Instagram-->
35        <section class="page-section" id="instagram">
36            
37        </section>
38       
39        <!-- Contact-->
40        <section class="page-section" id="contact">
41            
42        </section>
43
44        <!-- Footer-->
45        <footer class="bg-light py-5">
46          
47        </footer>
48
49        <!-- core JS-->
50        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
51        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
52        <!-- Third party plugin JS-->
53        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
54        <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
55        <!-- Core theme JS-->
56        <script src="<?php echo get_template_directory_uri(); ?>/js/scripts.js"></script>
57        <!-- sub JS -->
58        <script src="<?php echo get_template_directory_uri(); ?>/js/common.js"></script>
59
60<!-- wp_footer pre -->
61        <?php wp_footer(); ?>
62<!-- wp_footer end -->
63    </body>
64</html>
65

###single.php

html
1<html lang="ja">
2    <head>
3<!-- wp_head pre -->
4        <?php wp_head(); ?>
5<!-- wp_head end -->
6    </head>
7
8  <body id="page-top">
9    <!-- Navigation-->
10    <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
11        <div class="container">
12            <a class="navbar-brand js-scroll-trigger" href="<?php echo home_url();?>"><?php bloginfo('name')?></a>
13            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
14            <div class="collapse navbar-collapse" id="navbarResponsive">
15                <ul class="navbar-nav ml-auto my-2 my-lg-0">
16                  <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">About</a></li>
17                  <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">Posted</a></li>
18                  <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">Portfolio</a></li>
19                  <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">Instagram</a></li>
20                  <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">Contact</a></li>
21                </ul>
22            </div>
23        </div>
24    </nav>
25
26    <!--  Header -->
27    <!-- Masthead タイトル-->
28    <header class="masthead">
29        
30    </header>
31
32    <!-- Posted-->
33    <section class="page-section" id="posted">
34        
35    </section>
36
37    <!-- Footer-->
38    <footer class="bg-light py-5">
39      
40    </footer>
41
42    <!-- core JS-->
43    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
44    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
45    <!-- Third party plugin JS-->
46    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
47    <script sr  c="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
48    <!-- Core theme JS-->
49    <script src="<?php echo get_template_directory_uri(); ?>js/scripts.js"></script>
50
51  <!-- wp_footer pre -->
52      <?php wp_footer(); ?>
53  <!-- wp_footer end -->
54  </body>
55</html>
56

###functions.php

php
1
2<?php
3function twpp_enqueue_scripts() {
4  wp_enqueue_script(
5    'scripts-script',
6    get_template_directory_uri() . '/js/scripts.js',
7  );
8  wp_enqueue_script(
9    'common-script',
10    get_template_directory_uri() . '/js/common.js',
11    array( 'scripts-script' )
12  );
13　
14
15 //if (is_single() ) wp_enqueue_script(
16    //'single-script',
17    //get_template_directory_uri() . '/js/single.js', true
18  //);
19
20}
21add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );
22?>

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

回答1件

index.php
1<script src="<?php echo get_template_directory_uri(); ?>/js/scripts.js"></script>

single.php
1<script src="<?php echo get_template_directory_uri(); ?>js/scripts.js"></script>

single.php で js/scripts.js の前のスラッシュが無く読み込めてないのが原因じゃないでしょうか？

他気になった点

scripts.js と common.js は functions.php で読み込んでいるので、テンプレート中に書くと重複して読み込まれてしまいますので良くないです
全てのJavaScriptファイル、functions.php で依存関係を整理しつつエンキューし、一元管理することをおすすめします。その際、どうしても head 要素内に置かなければならないもの以外は、body 閉じタグ直前に配置するよう設定した方が良いです。
可能であれば、さらに Webpack などで全てのjsファイルを統合すると高速化が望めます

投稿2021/01/02 02:53