WordPress5.4.2で作成したオリジナルワードプレステーマにおいてスライドショーをヘッダーに導入するためにslickを使いたい

前提・実現したいこと

皆様こんにちは。
WordPress5.4.2で作成したオリジナルワードプレステーマにおいて
headerにスライドショーを配置したくて、slickを使おうと思っています。
まず、検証のため、普通にindex.htmlとslick用のCSSとｊｓファイルをダウンロードしてローカル環境で動作するか検証しましたら
しっかりスライドショーを実現できました。
しかしWordPressのテーマディレクトリ内で実行すると全く動作しませんので、これを解決したいと思っています。

自分で調べて実行したもの

WordPressにｊｓとcssを読み込ませるにはfunction.phpに記述するとあったので以下のコードで試しました

// wp_head()のjQueryを書き換える方法
function load_js() {
	//管理画面を除外
	if ( !is_admin() ){
		//事前に読み込まれるjQueryを解除
		wp_deregister_script( 'jquery' );

		//Google CDNのjQueryを出力
		wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', array(), NULL, true );

		//自作スクリプトや、jQueryのライブラリも同様に読み込みます。
        // wp_enqueue_script( 'navbutton_script', get_template_directory_uri() .'/navbutton.js', array('jquery'), '', true );
        wp_enqueue_script( 'slick.min.js', get_template_directory_uri() .'js/slick.min.js', array('jquery'), '', true );
        wp_enqueue_script( 'main.js', get_template_directory_uri() .'js/main.js', array('jquery'), '', true );
	}
}
add_action( 'init', 'load_js' );

// CSSをfuctions.phpで読み込む
function add_files() {
// サイト共通のCSSの読み込み
wp_enqueue_style( 'mainslick-theme', get_template_directory_uri() . '/css/slick-theme.css', "", '' );
wp_enqueue_style( 'slick', get_template_directory_uri() . '/css/slick.css', "", '' );
wp_enqueue_style( 'style2', get_template_directory_uri() . '/css/style2.css', "", '' );
}
add_action( 'wp_enqueue_scripts', 'add_files' );

jsについては
main.jsとslick.min.jsを読み込ませています

CSSについては
slick-theme.cssとslick.cssとstyle2.cssを読み込ませています

そして、header.phpの<header></header>内に画像を配置しています。以下に示します

header.php
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <?php wp_head(); ?>
7</head>
8<body <?php body_class(); ?>>
9    <?php wp_body_open(); ?>
10
11    <!-- ヘッダー -->
12    <header>
13        <ul class="slider">
14            <li><img src="<?php echo get_template_directory_uri(); ?>/img/yama1.jpg" alt="slick-img"></li>
15            <li><img src="<?php echo get_template_directory_uri(); ?>/img/yama2.jpg" alt="slick-img"></li>
16            <li><img src="<?php echo get_template_directory_uri(); ?>/img/yama3.jpg" alt="slick-img"></li>
17            <li><img src="<?php echo get_template_directory_uri(); ?>/img/yama4.jpg" alt="slick-img"></li>
18        </ul>
19        <a href="<?php echo esc_url(home_url('/')); ?>">
20            <?php bloginfo('name'); ?>
21        </a>
22    </header>
23    <!-- ナビゲーションメニュー -->
24    <?php if (has_nav_menu( 'primary')): ?>
25        <nav>  
26            <?php wp_nav_menu( array(  'theme_location' => 'primary',  )); ?>  
27        </nav>  
28    <?php endif; ?>

最初にslick単体で検証してスライドショーが実現できた時のソースコードを以下に示します

index.html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>My Now Amazing Webpage</title>
7    <link rel="stylesheet" type="text/css" href="css/style2.css"/>
8    <link rel="stylesheet" type="text/css" href="css/slick.css"/>
9    <link rel="stylesheet" type="text/css" href="css/slick-theme.css"/>
10</head>
11<body>
12  <ul class="slider">
13    <li><img src="img/yama1.jpg" alt="slick-img"></li>
14    <li><img src="img/yama2.jpg" alt="slick-img"></li>
15    <li><img src="img/yama3.jpg" alt="slick-img"></li>
16    <li><img src="img/yama4.jpg" alt="slick-img"></li>
17  </ul>
18    
19      <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
20      <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
21      <script type="text/javascript" src="js/slick.min.js"></script>
22      <script type="text/javascript" src="js/main.js"></script>
23      <script type="text/javascript"></script>
24</body>
25</html>

slick-theme.css

css
1@charset 'UTF-8';
2/* Slider */
3.slick-loading .slick-list
4{
5    background: #fff url('./ajax-loader.gif') center center no-repeat;
6}
7
8/* Icons */
9@font-face
10{
11    font-family: 'slick';
12    font-weight: normal;
13    font-style: normal;
14
15    src: url('./fonts/slick.eot');
16    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
17}
18/* Arrows */
19.slick-prev,
20.slick-next
21{
22    font-size: 0;
23    line-height: 0;
24
25    position: absolute;
26    top: 50%;
27
28    display: block;
29
30    width: 20px;
31    height: 20px;
32    padding: 0;
33    -webkit-transform: translate(0, -50%);
34    -ms-transform: translate(0, -50%);
35    transform: translate(0, -50%);
36
37    cursor: pointer;
38
39    color: transparent;
40    border: none;
41    outline: none;
42    background: transparent;
43}
44.slick-prev:hover,
45.slick-prev:focus,
46.slick-next:hover,
47.slick-next:focus
48{
49    color: transparent;
50    outline: none;
51    background: transparent;
52}
53.slick-prev:hover:before,
54.slick-prev:focus:before,
55.slick-next:hover:before,
56.slick-next:focus:before
57{
58    opacity: 1;
59}
60.slick-prev.slick-disabled:before,
61.slick-next.slick-disabled:before
62{
63    opacity: .25;
64}
65
66.slick-prev:before,
67.slick-next:before
68{
69    font-family: 'slick';
70    font-size: 20px;
71    line-height: 1;
72
73    opacity: .75;
74    color: white;
75
76    -webkit-font-smoothing: antialiased;
77    -moz-osx-font-smoothing: grayscale;
78}
79
80.slick-prev
81{
82    left: -25px;
83}
84[dir='rtl'] .slick-prev
85{
86    right: -25px;
87    left: auto;
88}
89.slick-prev:before
90{
91    content: '←';
92}
93[dir='rtl'] .slick-prev:before
94{
95    content: '→';
96}
97
98.slick-next
99{
100    right: -25px;
101}
102[dir='rtl'] .slick-next
103{
104    right: auto;
105    left: -25px;
106}
107.slick-next:before
108{
109    content: '→';
110}
111[dir='rtl'] .slick-next:before
112{
113    content: '←';
114}
115
116/* Dots */
117.slick-dotted.slick-slider
118{
119    margin-bottom: 30px;
120}
121
122.slick-dots
123{
124    position: absolute;
125    bottom: -25px;
126
127    display: block;
128
129    width: 100%;
130    padding: 0;
131    margin: 0;
132
133    list-style: none;
134
135    text-align: center;
136}
137.slick-dots li
138{
139    position: relative;
140
141    display: inline-block;
142
143    width: 20px;
144    height: 20px;
145    margin: 0 5px;
146    padding: 0;
147
148    cursor: pointer;
149}
150.slick-dots li button
151{
152    font-size: 0;
153    line-height: 0;
154
155    display: block;
156
157    width: 20px;
158    height: 20px;
159    padding: 5px;
160
161    cursor: pointer;
162
163    color: transparent;
164    border: 0;
165    outline: none;
166    background: transparent;
167}
168.slick-dots li button:hover,
169.slick-dots li button:focus
170{
171    outline: none;
172}
173.slick-dots li button:hover:before,
174.slick-dots li button:focus:before
175{
176    opacity: 1;
177}
178.slick-dots li button:before
179{
180    font-family: 'slick';
181    font-size: 6px;
182    line-height: 20px;
183
184    position: absolute;
185    top: 0;
186    left: 0;
187
188    width: 20px;
189    height: 20px;
190
191    content: '•';
192    text-align: center;
193
194    opacity: .25;
195    color: black;
196
197    -webkit-font-smoothing: antialiased;
198    -moz-osx-font-smoothing: grayscale;
199}
200.slick-dots li.slick-active button:before
201{
202    opacity: .75;
203    color: black;
204}
205

slick.css

css
1/* Slider */
2.slick-slider
3{
4    position: relative;
5
6    display: block;
7    box-sizing: border-box;
8
9    -webkit-user-select: none;
10       -moz-user-select: none;
11        -ms-user-select: none;
12            user-select: none;
13
14    -webkit-touch-callout: none;
15    -khtml-user-select: none;
16    -ms-touch-action: pan-y;
17        touch-action: pan-y;
18    -webkit-tap-highlight-color: transparent;
19}
20
21.slick-list
22{
23    position: relative;
24
25    display: block;
26    overflow: hidden;
27
28    margin: 0;
29    padding: 0;
30}
31.slick-list:focus
32{
33    outline: none;
34}
35.slick-list.dragging
36{
37    cursor: pointer;
38    cursor: hand;
39}
40
41.slick-slider .slick-track,
42.slick-slider .slick-list
43{
44    -webkit-transform: translate3d(0, 0, 0);
45       -moz-transform: translate3d(0, 0, 0);
46        -ms-transform: translate3d(0, 0, 0);
47         -o-transform: translate3d(0, 0, 0);
48            transform: translate3d(0, 0, 0);
49}
50
51.slick-track
52{
53    position: relative;
54    top: 0;
55    left: 0;
56
57    display: block;
58    margin-left: auto;
59    margin-right: auto;
60}
61.slick-track:before,
62.slick-track:after
63{
64    display: table;
65
66    content: '';
67}
68.slick-track:after
69{
70    clear: both;
71}
72.slick-loading .slick-track
73{
74    visibility: hidden;
75}
76
77.slick-slide
78{
79    display: none;
80    float: left;
81
82    height: 100%;
83    min-height: 1px;
84}
85[dir='rtl'] .slick-slide
86{
87    float: right;
88}
89.slick-slide img
90{
91    display: block;
92}
93.slick-slide.slick-loading img
94{
95    display: none;
96}
97.slick-slide.dragging img
98{
99    pointer-events: none;
100}
101.slick-initialized .slick-slide
102{
103    display: block;
104}
105.slick-loading .slick-slide
106{
107    visibility: hidden;
108}
109.slick-vertical .slick-slide
110{
111    display: block;
112
113    height: auto;
114
115    border: 1px solid transparent;
116}
117.slick-arrow.slick-hidden {
118    display: none;
119}
120

style2.css

* {
    list-style: none;
    margin: 0;
    padding: 0;
}

img {
    width: 100%;
}

ul {
    width: 90%;
    margin: 0 auto;
}

.slick-prev::before,
.slick-next::before {
    color: black !important;
}

main.js

js
1$('.slider').slick({
2    dots: true
3});

slick.min.js
すごく長くなるのですみませんがslickからダウンロードしたものを使ったということにします。
http://kenwheeler.github.io/slick/
画像に関しましては、imgフォルダを用意してその中に配置しています。

エラーが出たので追加

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

WordPressをLocalbyFlywheelを使用した環境下で使っています。
ですので、検証環境は本番環境ではなくローカルです。

PC→マックブックプロ

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

yuki84web

2020/06/20 14:55

ブラウザの開発者ツールのコンソールに何かエラーは出ていませんか？

sugawa

2020/06/20 15:03

ありがとうございます！エラーが出ています質問に追加いたします

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

回答1件

ベストアンサー

get_template_directory_uri() の後に'/'が要るのでは。

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_template_directory_uri

注意: 末尾にスラッシュ（ / ）は含まれません。

投稿2020/06/20 15:21

yuki84web

総合スコア1857

sugawa

2020/06/20 15:37

スラッシュが抜けておりましたすごく助かりました。結構悩んでいたので本当に良かったです。ありがとうございました！！！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

WordPress5.4.2で作成したオリジナルワードプレステーマにおいてスライドショーをヘッダーに導入するためにslickを使いたい

前提・実現したいこと

自分で調べて実行したもの

最初にslick単体で検証してスライドショーが実現できた時のソースコードを以下に示します

エラーが出たので追加

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

関連した質問