Q&A
responsiveImage変数のスコープの問題では？
実現したいこと
通常通り、画像スライドショーを実現したい。
前提
参考書通りにコードコピー貼り付けしました。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
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>© 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 22 23フォルダ構成 24 25 26コンソールエラー画像 27 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
コメントありがとうございます。responsiveImage変数のスコープについて存じておらず、調べましたがよく理解できませんでした。
img フォルダが2つあるような書き方になっていますが、実際にもそうなっていますか？
フォルダ構成などをご提示ください。
roshinanteさん
ぱっと見でそう思ったけど、varだと関係無いみたいです。失礼しました。
imgフォルダは実際は一つになってます。768px以下ではなく、デスクトップ表示でまず試してたので、768px以下は参考書のままのコードになってます。
補足にフォルダ構成画像添付します。
script.js の <?php echo get_template_directory_uri(); ?> は実際に展開されていますか？
あまり詳しくないのですが、WordPress では Javascript ファイルは静的に提供されませんでしたっけ？
script.js の <?php echo get_template_directory_uri(); ?> は展開されてるようです。
script.js の <?php echo get_template_directory_uri(); ?>を消すと、補足欄掲載の画像 スライダー部分に表示されてるドットが消えてしまいます。コメントありがとうございます。
なるほど。
展開されたURLをブラウザのアドレスバーにコピペして表示させると、どうなりますか？
（なお、ドットのオーバーレイが消えるのは別の原因ではないか、と疑っています）
ローカルバイフライホイールでローカル環境で使用してます。
展開されたURLをブラウザのアドレスバーにコピペして表示させると、どうなりますか？の質問の回答ですが、やってみましたが、補足に掲載した画像と同じ通りの、最初と同じドットのみ写ってる表示になってます。
試していただきたいことが伝わっていないように感じました。
当方が申しあげているのは、以下のようなことです。
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` をブラウザのアドレスバーにコピペして直接画像ファイルだけを見るとどうなるのか？
ということです。伝わりましたでしょうか？
http://localhost:10132//img/24389418_m-1280x960.jpgで開いてみると、index.phpのトップページと同じ画面になります。
画像の画面にならないので、展開されてないってことですかね。
A.展開されてないに 訂正します。ありがとうございます。
コンソール見てみるとエラーが出てましたので、補足に画像掲載します。
いえ、
<?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
に展開されていて、しかもそちらはアドレスバーにコピペしても見ることができる、ということでいいでしょうか？
だとすると、
<?php echo get_template_directory_uri(); ?>/js/script.js
は
http://localhost:10132//js/script.js
に展開されていて、しかもそちらはアドレスバーにコピペしても見ることができる、ということでいいでしょうか？
→やってみました。またindex.phpのトップページと同じ画面が表示されました。（アドレスバーにコピペしました）
しかし、script.js が動いているということは、正しいURLになっているはずで、本当にその http://localhost:10132//js/script.js に展開されていますか？
（実際に展開されたURLではなくて、あなたが想像で書いたURLなのでは、と思っています）
画像添付補足にするので、こちらみて確認いただけますでしょうか。
補足欄に載せました。
すみません、どうにもお伝えしたいことが伝わらないようです。出直します。
なんとなくの想像ですが、<?php echo get_template_directory_uri(); ?>を追加した script.js を HTMLのscriptタグに直接インラインで書けば動くんじゃないか、とあてずっぽうで思っています。
インラインで直接記入してみました。
特に変わらない感じでした。当てずっぽうでもご助言助かります。
回答1件
0
ベストアンサー
画像のパスが正しく指定されていないことが、表示されない原因かと思われます。
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>© 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}
wp_localize_script関数に渡した値（テーマディレクトリのURI）はwindow.my_theme_data.theme_directory_uriに格納されているので、画像のパスと結合してURLを組み立てる。
私の環境ではこれで動作しましたので、お試しください。
投稿2024/06/17 13:34
退会済みユーザー
総合スコア0
回答ありがとうございます。
ベストアンサーに選ばせていただきました。
正直諦めてましたが、無事画像パスがつながり、こちらの方法で無事スライドショーが動作できました。
3日ほど解決できなかったのを解決していただいて、本当にありがとうございます。
あなたの回答
tips
プレビュー
