スライドショー　vegas 背景画像が表示されない

実現したいこと

通常通り、画像スライドショーを実現したい。

前提

参考書通りにコードコピー貼り付けしました。

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

エラーメッセージ

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5	<meta charset="utf-8">
6	<title>LP ORIGINAL</title>
7	<meta name="description" content="">
8	<meta name="viewport" content="width=device-width,initial-scale=1.0">
9
10	<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/reset.css">
11	<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css">
12	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.css">
13	<?php wp_head(); ?>
14</head>
15
16<body>
17	<main>
18		<h2>アイキャッチ</h2>
19		<div id="slider"></div>
20
21	</main>
22
23	<footer id="footer">
24		<small>&copy; copyright.</small>
25	</footer>
26	<?php wp_footer(); ?>
27
28	<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
29	<script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.js"></script>
30	<!--自作のJS-->
31	<script src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>
32</body>
33
34</html>

css
1#slider {
2    width: 100%;
3    height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
4}

js
1var windowwidth = window.innerWidth || document.documentElement.clientWidth || 0;
2if (windowwidth > 768) {
3	var responsiveImage = [//PC用の画像
4		{ src: '../img/24389418_m-1280x960.jpg' },
5		{ src: '../img/24389418_m-1280x960.jpg' },
6		{ src: '../img/24389418_m-1280x960.jpg' }
7	];
8} else {
9	var responsiveImage = [//タブレットサイズ（768px）以下用の画像
10		{ src: './img/img_sp_01.jpg' },
11		{ src: './img/img_sp_02.jpg' },
12		{ src: './img/img_sp_03.jpg' }
13	];
14}
15
16//Vegas全体の設定
17
18$('#slider').vegas({
19	overlay: true,
20	transition: 'blur',
21	transitionDuration: 2000,
22	delay: 10000,//スライド間の遅延をミリ秒単位で。
23	animationDuration: 20000,
24	animation: 'kenburns',
25	slides: responsiveImage,//画像設定を読む
26	//timer:false,
27});

試したこと

画像パスが悪いと思い、下記してもダメでした。

js
1var windowwidth = window.innerWidth || document.documentElement.clientWidth || 0;
2if (windowwidth > 768) {
3	var responsiveImage = [//PC用の画像
4		{ src: '<?php echo get_template_directory_uri(); ?>/img/24389418_m-1280x960.jpg' },
5		{ src: '<?php echo get_template_directory_uri(); ?>/img/24389418_m-1280x960.jpg' },
6		{ src: '<?php echo get_template_directory_uri(); ?>//img/24389418_m-1280x960.jpg' }
7	];
8} else {
9	var responsiveImage = [//タブレットサイズ（768px）以下用の画像
10		{ src: './img/img_sp_01.jpg' },
11		{ src: './img/img_sp_02.jpg' },
12		{ src: './img/img_sp_03.jpg' }
13	];
14}
15
16
17### 補足情報（FW/ツールのバージョンなど）
18
19現在表示されてる画像　
20読み込まれてるっぽいですが、画像だけ出ないです。
21![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-06-16/6383f273-40c8-436c-93f9-3f0fd8eda1ef.jpeg)
22
23フォルダ構成
24![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-06-16/5da869be-6782-4ac5-b35b-ce319ee88737.jpeg)
25
26コンソールエラー画像
27![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-06-16/d8306155-1c0e-40fc-bf02-8612e6c12fd3.jpeg)
28
2924389418_m-1280x960.jpg:1  Failed to load resource: the server responded with a status of 404 (Not Found)
3024389418_m-1280x960.jpg:1 Unchecked runtime.lastError: The message port closed before a response was received.
31
32js展開画像
33![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-06-16/7db7873e-f1e9-484e-b073-be2c9eb7a24f.jpeg)

hiroki-o

2024/06/16 02:20

responsiveImage変数のスコープの問題では？

roshinante

2024/06/16 02:33

コメントありがとうございます。responsiveImage変数のスコープについて存じておらず、調べましたがよく理解できませんでした。

Lhankor_Mhy

2024/06/16 02:44

img フォルダが2つあるような書き方になっていますが、実際にもそうなっていますか？フォルダ構成などをご提示ください。

hiroki-o

2024/06/16 02:53 編集

roshinanteさんぱっと見でそう思ったけど、varだと関係無いみたいです。失礼しました。

roshinante

2024/06/16 02:48

imgフォルダは実際は一つになってます。768px以下ではなく、デスクトップ表示でまず試してたので、768px以下は参考書のままのコードになってます。補足にフォルダ構成画像添付します。

Lhankor_Mhy

2024/06/16 03:10

script.js の <?php echo get_template_directory_uri(); ?> は実際に展開されていますか？あまり詳しくないのですが、WordPress では Javascript ファイルは静的に提供されませんでしたっけ？

roshinante

2024/06/16 03:20

script.js の <?php echo get_template_directory_uri(); ?> は展開されてるようです。 script.js の <?php echo get_template_directory_uri(); ?>を消すと、補足欄掲載の画像　スライダー部分に表示されてるドットが消えてしまいます。コメントありがとうございます。

Lhankor_Mhy

2024/06/16 03:25

なるほど。展開されたURLをブラウザのアドレスバーにコピペして表示させると、どうなりますか？（なお、ドットのオーバーレイが消えるのは別の原因ではないか、と疑っています）

roshinante

2024/06/16 03:38

ローカルバイフライホイールでローカル環境で使用してます。展開されたURLをブラウザのアドレスバーにコピペして表示させると、どうなりますか？の質問の回答ですが、やってみましたが、補足に掲載した画像と同じ通りの、最初と同じドットのみ写ってる表示になってます。

Lhankor_Mhy

2024/06/16 03:47

試していただきたいことが伝わっていないように感じました。当方が申しあげているのは、以下のようなことです。 Q. script.js に書かれている、'<?php echo get_template_directory_uri(); ?>/img/24389418_m-1280x960.jpg' が展開されて `http://example.com/hoge/img/24389418_m-1280x960.jpg` に変わっているのか？ A. 展開されている。 Q. では展開されたURLである `http://example.com/hoge/img/24389418_m-1280x960.jpg` をブラウザのアドレスバーにコピペして直接画像ファイルだけを見るとどうなるのか？ということです。伝わりましたでしょうか？

roshinante

2024/06/16 04:01

http://localhost:10132//img/24389418_m-1280x960.jpgで開いてみると、index.phpのトップページと同じ画面になります。画像の画面にならないので、展開されてないってことですかね。 A.展開されてないに　訂正します。ありがとうございます。コンソール見てみるとエラーが出てましたので、補足に画像掲載します。

Lhankor_Mhy

2024/06/16 04:06

いえ、 <?php echo get_template_directory_uri(); ?>/img/24389418_m-1280x960.jpg が http://localhost:10132//img/24389418_m-1280x960.jpg に変わっていたのであれば、展開されているのだと思います。だとすると、 <?php echo get_template_directory_uri(); ?>/js/script.js は http://localhost:10132//js/script.js に展開されていて、しかもそちらはアドレスバーにコピペしても見ることができる、ということでいいでしょうか？

roshinante

2024/06/16 04:10

だとすると、 <?php echo get_template_directory_uri(); ?>/js/script.js は http://localhost:10132//js/script.js に展開されていて、しかもそちらはアドレスバーにコピペしても見ることができる、ということでいいでしょうか？ →やってみました。またindex.phpのトップページと同じ画面が表示されました。（アドレスバーにコピペしました）

Lhankor_Mhy

2024/06/16 04:15

しかし、script.js が動いているということは、正しいURLになっているはずで、本当にその http://localhost:10132//js/script.js に展開されていますか？（実際に展開されたURLではなくて、あなたが想像で書いたURLなのでは、と思っています）

roshinante

2024/06/16 04:24

画像添付補足にするので、こちらみて確認いただけますでしょうか。

roshinante

2024/06/16 04:25

補足欄に載せました。

Lhankor_Mhy

2024/06/16 04:27

すみません、どうにもお伝えしたいことが伝わらないようです。出直します。

Lhankor_Mhy

2024/06/16 04:29

なんとなくの想像ですが、<?php echo get_template_directory_uri(); ?>を追加した script.js を HTMLのscriptタグに直接インラインで書けば動くんじゃないか、とあてずっぽうで思っています。

roshinante

2024/06/16 04:41

インラインで直接記入してみました。特に変わらない感じでした。当てずっぽうでもご助言助かります。

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

回答1件

ベストアンサー

画像のパスが正しく指定されていないことが、表示されない原因かと思われます。

js
1var responsiveImage = [//PC用の画像
2		{ src: '../img/24389418_m-1280x960.jpg' },
3		{ src: '../img/24389418_m-1280x960.jpg' },
4		{ src: '../img/24389418_m-1280x960.jpg' }
5	];

この書き方ではhttp://localhost:10132/img/24389418_m-1280x960.jpgにある画像を読み込もうとするはずです。

しかし実際に画像がある場所は、http://localhost:10132/wp-content/themes/{テーマディレクトリ名}/img/24389418_m-1280x960.jpgだと思います。

なので、以下のようにすればひとまずは画像を表示できるかと思われます。

js:/js/script.js
1var responsiveImage = [//PC用の画像
2		{ src: 'http://localhost:10132/wp-content/themes/{テーマディレクトリ名}/img/24389418_m-1280x960.jpg' },
3		{ src: 'http://localhost:10132/wp-content/themes/{テーマディレクトリ名}/img/24389418_m-1280x960.jpg' },
4		{ src: 'http://localhost:10132/wp-content/themes/{テーマディレクトリ名}/img/24389418_m-1280x960.jpg' }
5	];

しかし、これだと本番サーバーにアップロードする時などにhttp://localhost:10132の部分を書き換えないといけません。

いくらか手順は踏みますが、以下のようにすることをおすすめします。

自作JSファイルの読み込み方法を変更する

index.phpにてscriptタグを使用して自作JSを読み込んでいますが、functions.phpにて読み込みの処理を記述するように変更します。

php:index.php
1<body>
2	<main>
3		<h2>アイキャッチ</h2>
4		<div id="slider"></div>
5
6	</main>
7
8	<footer id="footer">
9		<small>&copy; copyright.</small>
10	</footer>
11	<?php wp_footer(); ?>
12
13	<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
14	<script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.js"></script>
15	<!-- 自作JSを読み込んでいたscriptタグを削除する -->
16</body>

php:functions.php
1function my_theme_enqueue_scripts() {
2	// script.jsを読み込むためのコード
3	wp_enqueue_script(
4		'my_theme_main',
5		get_template_directory_uri() . '/js/script.js',
6		[],
7		filemtime( get_template_directory() . '/js/script.js' ),
8		[ 'strategy' => 'defer' ]
9	);
10
11	// テーマのディレクトリURIを変数としてscript.jsに渡すためのコード
12	wp_localize_script(
13		'my_theme_main',
14		'my_theme_data',
15		[
16			'theme_directory_uri' => get_template_directory_uri(),
17		]
18	);
19}
20add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

wp_enqueue_script関数にて、ページに読み込むJavaScriptファイルを指定します。
そして、そのJavaScriptファイルから使えるように、wp_localize_script関数にて値（テーマディレクトリのURI）を渡します。

script.jsでの画像パスの指定を書き換える

js:/js/script.js
1var themeDirectory = window.my_theme_data.theme_directory_uri;
2var windowwidth = window.innerWidth || document.documentElement.clientWidth || 0;
3if (windowwidth > 768) {
4	var responsiveImage = [//PC用の画像
5		{ src: themeDirectory + '/img/24389418_m-1280x960.jpg' },
6		{ src: themeDirectory + '/img/24389418_m-1280x960.jpg' },
7		{ src: themeDirectory + '/img/24389418_m-1280x960.jpg' }
8	];
9} else {
10	var responsiveImage = [//タブレットサイズ（768px）以下用の画像
11		{ src: themeDirectory + '/img/img_sp_01.jpg' },
12		{ src: themeDirectory + '/img/img_sp_02.jpg' },
13		{ src: themeDirectory + '/img/img_sp_03.jpg' }
14	];
15}