wordpressでswiperを反映させることができない

以下のコードでswiperを反映させようとしたのですが、反映されませんでした。
わかる方いたらよろしくお願いいたします。

php
1(header.php)
2<!DOCTYPE html>
3<html lang="ja" >
4
5<head>
6
7	<meta charset="UTF-8">
8	<meta name="viewport" content="width=device-width, initial-scale=1.0">
9	<meta name="format-detection" content="telephone=no">
10
11	<title>TF-30</title>
12	<meta name="description" content="">
13
14	<meta property="og:title" content="TF-30">
15	<meta property="og:type" content="website">
16	<meta property="og:url" content="https://example.com/">
17	<meta property="og:image" content="https://example.com/img/ogp.png">
18	<meta property="og:site_name" content="TF-30">
19	<meta property="og:description" content="">
20	<meta name="twitter:card" content="summary_large_image">
21
22	<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
23	<link rel="stylesheet" href="./css/style.css">
24
25	<?php wp_head(); ?>
26    <link rel="icon" href="./img/icon-home.png">
27	<link rel="stylesheet" href="styles/tomorrow-night-eighties.css">
28	
29	<meta name="google-site-verification" content="tcrFGJw6jSmmCwPR4YowDN7Yc2v8762l7V2V9GBPHnY" />
30	<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
31</head>
32

php
1(footer.php)
2<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
3	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
4	<script src="./js/script.js"></script>
5

php
1(index.php)
2<div class="swiper-container clear">
3    <!-- Sliderの内包コンテナ -->
4    <div class="swiper-wrapper">
5        <!-- Slideさせたいコンテンツ -->
6        <div class="swiper-slide">
7            <h1>一番伝えたいことを書く</h1>
8            <p>リードリードリード</p>
9            <a href="#contact" id="contact-btn"><button class="btn btn-register opacity" type="submit">お問い合わせ</button></a>
10        </div>
11        <div class="swiper-slide">
12            <div class="text-image">
13                <img src="img/chris-ried-ieic5Tq8YMk-unsplash.jpg" alt="文字の代替">
14                <h2 class="swiper-h round">フロントエンドエンジニア</h2>
15            </div>
16        </div>
17        <div class="swiper-slide">
18            <div class="text-image">
19                <img src="img/kevin-ku-w7ZyuGYNpRQ-unsplash.jpg" alt="文字の代替">
20                <h2 class="swiper-h">デイトラ</h2>
21            </div>
22        </div>
23    </div>
24    <!-- ページネーション（※省略可） -->
25    <div class="swiper-pagination"></div>
26    <!-- ナビゲーションボタン（※省略可） -->
27    <div class="swiper-button-prev"></div>
28    <div class="swiper-button-next"></div>
29
30    
31</div>
32

js
1var mySwiper = new Swiper ('.swiper-container', {
2	// ここからオプション
3	loop: true,
4	pagination: {
5	  el: '.swiper-pagination',
6	},
7	navigation: {
8	  nextEl: '.swiper-button-next',
9	  prevEl: '.swiper-button-prev',
10	},
11	scrollbar: {
12	  el: '.swiper-scrollbar',
13	},
14  })

jsに書いてあるものはscriptで囲ってfooterに書き込みたかったのですが、なぜか反映されてないようなハイライトが表示されたのでjsに記入しました。
わかる方いたらよろしくお願いいたします。

m.ts10806

2021/01/13 19:41

>phpでswiperをどちらも単体で動くもので、関連性はありません。 PHPはフロント（ブラウザ）のことは考える必要はないです。ひとまず全てのファイルの関連図（構成図）とアクセスしているURLを提示してください。

kenta-wata

2021/01/13 23:08 編集

tf30→css,img,js,template-parts,highlight,その他wordpress関係のファイル上記が構成図ですアクセスしているサイトというのはweb制作を行っているところところでしょうか？それでしたらlocalで開発しています。以下のコードが使っているurlです。 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="format-detection" content="telephone=no"> <title>TF-30</title> <meta name="description" content=""> <meta property="og:title" content="TF-30"> <meta property="og:type" content="website"> <meta property="og:url" content="https://example.com/"> <meta property="og:image" content="https://example.com/img/ogp.png"> <meta property="og:site_name" content="TF-30"> <meta property="og:description" content=""> <meta name="twitter:card" content="summary_large_image"> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> <link rel="stylesheet" href="./css/style.css"> <?php wp_head(); ?> <link rel="icon" href="./img/icon-home.png"> <link rel="stylesheet" href="styles/tomorrow-night-eighties.css"> <meta name="google-site-verification" content="tcrFGJw6jSmmCwPR4YowDN7Yc2v8762l7V2V9GBPHnY" /> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> </head> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="./js/script.js"></script> <img src="https://neby.co.jp/wp_nby_2020/wp-content/uploads/2020/12/philosophy.svg" alt="" > <img src="https://neby.co.jp/wp_nby_2020/wp-content/uploads/2020/12/service_title.svg" alt=""> <img src="https://neby.co.jp/wp_nby_2020/wp-content/uploads/2020/12/service_img1.png" alt="" > <img src="https://neby.co.jp/wp_nby_2020/wp-content/uploads/2020/12/service_img2.png" alt="" > <img src="https://neby.co.jp/wp_nby_2020/wp-content/uploads/2020/12/service_img3.png" alt="" > <img src="https://neby.co.jp/wp_nby_2020/wp-content/uploads/2020/12/column.svg" alt=""> <svg class="top-news-lpg-main" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 349 127.377"> 画像をurlで読み込んでいるのが原因でしょうか？

m.ts10806

2021/01/13 23:30

>その他wordpress関係のファイル WordPressでしたか。テーマでも作ってるということでしょうか。いずれにしてもタグ追加してください

kenta-wata

2021/01/13 23:33

タグ追加というのは記事に追加するということでしょうか理解力なくて申し訳ありません。

m.ts10806

2021/01/13 23:44

質問タグのことです。現在は「PHP」のみしかありません。回答者の多くは得意タグで質問を確認します。 WordpressにはWordpressの知識技術が必要で、PHPできる人が必ずWordpressもできるとは限りません（むしろタグはWordpressだけでいいくらい）質問は編集できますので、コードも含めてご提示ください。あと私は「アクセスしているURL」と言いました。「サイト」ではないです。単にPHPであれば、ファイル同士の位置関係とURLでパスのミスを探れましたが、Wordpressのテンプレートならまた話は違います。そもそもWordpressのテンプレートとしての組み方できてないのでは。

kenta-wata

2021/01/13 23:51

wordpressのテンプレートは機能しているものを使っているのでそこに問題はないかと。