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

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

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

2379閲覧

WordPress上のbxsliderで作成したカルーセルの、スマホ上でのコントロールの不具合について

yytop

総合スコア20

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/02/06 13:04

編集2018/02/19 14:35

WordPress上でJqueryのbxsliderをカスタマイズして、サムネイル付きのカルーセル型のスライドショーを作成しています。
PCでは問題ないのですが、Iphoneなどのスマホで左右にスライドさせるのコントロールがうまく動作せず、フリーズしてしまいます。。
Chromeのデベロッパーツールで下記のようなエラーが表示されます。

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

Uncaught TypeError: slider_smt1_1.goToSlide is not a function at Object.onSlideNext (slider.js:70) at n.fn.init.el.goToSlide (jquery.bxslider.js:1037) at n.fn.init.el.goToNextSlide (jquery.bxslider.js:1110) at HTMLAnchorElement.clickNextBind (jquery.bxslider.js:629) at HTMLAnchorElement.dispatch (jquery.min.js:3) at HTMLAnchorElement.r.handle (jquery.min.js:3) onSlideNext @ slider.js:70 el.goToSlide @ jquery.bxslider.js:1037 el.goToNextSlide @ jquery.bxslider.js:1110 clickNextBind @ jquery.bxslider.js:629 dispatch @ jquery.min.js:3 r.handle @ jquery.min.js:3

該当のソースコード

php

1 <div class="slide"> 2 <div class="sliderBox sliderBox1"> 3 <?php $args = array( 'posts_per_page' => 5, 'orderby' => 'date', 'order' => 'DESC', 'post_type' => 'post', 'category' => '4' ); ?> 4 <?php $myposts = get_posts( $args ); foreach ( $myposts as $key=> $post ) : setup_postdata( $post ); ?> 5 <div class="innerBox"> 6 <p class="img"><?php the_post_thumbnail('medium'); ?></p> 7 <div class="txtBox"> 8 <h4><?php the_title(); ?></h4> 9 <p class="txt"><?php the_excerpt(); ?></p> 10 <p class="btn"><a href="<?php the_permalink(); ?>">more</a></p> 11 </div> 12 </div> 13 <?php endforeach; wp_reset_postdata();?> 14 <!--/sliderBox--> 15 </div> 16 <div> 17 <ul class="thumbBox thumbBox1"> 18 <?php $myposts = get_posts( $args ); foreach ( $myposts as $key=> $post ) : setup_postdata( $post ); ?> 19 <li><a data-slide-index="<?php echo $key; ?>" href="#"><span><?php the_post_thumbnail('thumbnail'); ?></span></a></li> 20 <?php endforeach; wp_reset_postdata();?> 21 </ul> 22 </div> 23 <!--/slide--> 24 </div>

javascript

1 var replaceWidth = 768, 2 winW, 3 winH, 4 widthFlag; 5 6 //■ デバイス判定 7 $(window).on('load resize', function() { 8 9 winW = $(window).width(); 10 winH = $(window).height(); 11 12 if(winW <= replaceWidth && widthFlag !== 'smt') { 13 widthFlag = 'smt'; 14 } else if(winW > replaceWidth && widthFlag !== 'pc') { 15 widthFlag = 'pc'; 16 } 17 }); 18 19 20 //*******************************************************************// 21 var optionPC = { 22 auto:false, 23 speed:700, 24 captions: false, 25 controls: true, 26 nextText: '', 27 prevText: '', 28 useCSS: false, 29 } 30 var optionSMT1 = { 31 auto:false, 32 speed:700, 33 captions: false, 34 controls: true, 35 nextText: '', 36 prevText: '', 37 useCSS: false, 38 } 39 var optionSMT2 = { 40 pager: false, 41 minSlides: 3, 42 maxSlides: 3, 43 moveSlides: 1, 44 slideWidth: 110, 45 slideMargin: 0, 46 } 47 48 function sliderPC(){ 49 var slider_pc1 = $('.sliderBox1').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox1'})); 50 var slider_pc2 = $('.sliderBox2').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox2'})); 51 var slider_pc3 = $('.sliderBox3').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox3'})); 52 var slider_pc4 = $('.sliderBox4').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox4'})); 53 var slider_pc5 = $('.sliderBox5').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox5'})); 54 var slider_pc6 = $('.sliderBox6').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox6'})); 55 var slider_pc7 = $('.sliderBox7').bxSlider($.extend(optionPC,{pagerCustom: '.thumbBox7'})); 56 } 57 58 59 function sliderSMT(){ 60 //1 61 var slider_smt1_1 = $('.sliderBox1').bxSlider($.extend(optionSMT1,{ 62 pagerCustom: '.thumbBox1', 63 onSlideBefore: function($slideElement, oldIndex, newIndex) {slider_smt1_2.goToSlide(newIndex);} 64 })); 65 var slider_smt1_2 = $('.thumbBox1').bxSlider($.extend(optionSMT2,{ 66 onSlideNext: function($slideElement, oldIndex, newIndex) {slider_smt1_1.goToSlide(newIndex);}, 67 onSlidePrev: function($slideElement, oldIndex, newIndex) {slider_smt1_1.goToSlide(newIndex);} 68 })); 69 70 } 71 72 var timer = false; 73 $(window).load(function() { 74 75 if (timer !== false) { 76 clearTimeout(timer); 77 } 78 timer = setTimeout(function() { 79 if(widthFlag === 'smt') { 80 sliderSMT(); 81 } else if(widthFlag === 'pc') { 82 sliderPC(); 83 } 84 }, 500); 85 86 }); 87

試したこと

試しにベタなPHPをやめてベタなHTMLで動かしてみたところ、PC・スマホともうまく動作しました。
(デベロッパーツールでもエラーはありませんでした)
WordPress上ではうまくいかない理由が何かありそうでしょうか。。
どなたかお助けいただければ幸いです。m(__)m

<追記>
WordPressのjQueryが悪さしているかと思い、下記をheader.phpに記述してみましたがだめでした。。

<!-- WordPressのjQueryを読み込ませない --> <?php wp_deregister_script('jquery'); ?>

うまくいっているベタなHTMLとうまくいかないWPからのHTMLを追記します。
<ベタなHTML>

html

1 <div class="slide"> 2 <div class="sliderBox sliderBox1"> 3 <div class="innerBox"> 4 <p class="img"><img src="images/test.png"></p> 5 <div class="txtBox"> 6 <p class="txt">1-1.テスト</p> 7 <p class="btn"><a href="#">more</a></p> 8 </div> 9 </div> 10 <div class="innerBox"> 11 <p class="img"><img src="images/test.png"></p> 12 <div class="txtBox"> 13 <p class="txt">1-2.テスト</p> 14 <p class="btn"><a href="#">more</a></p> 15 </div> 16 </div> 17 <!--/sliderBox--> 18 </div> 19 <div> 20 <ul class="thumbBox thumbBox1"><!-- 21 --><li><a data-slide-index="0" href="#"><span><img src="images/test.png" /></span></a></li><!-- 22 --><li><a data-slide-index="1" href="#"><span><img src="images/test.png" /></span></a></li><!-- 23 --></ul> 24 </div> 25 <!--/slide--> 26 </div>

<WPで処理した際のHTML>

html

1 <div class="slide"> 2 <div class="sliderBox sliderBox1"> 3 <div class="innerBox"> 4 <p class="img"><img width="213" height="300" src="http://my-domain.jp/wp-content/uploads/2018/01/test-213x300.png" class="attachment-medium size-medium wp-post-image" alt="" srcset="http://my-domain.jp/wp-content/uploads/2018/01/test-213x300.png 213w, http://my-domain.jp/wp-content/uploads/2018/01/test.png 690w" sizes="(max-width: 213px) 100vw, 213px" /></p> 5 <div class="txtBox"> 6 <h4>テスト5</h4> 7 <p class="txt">テスト本文5</p> 8 <p class="btn"><a href="http://my-domain.jp/test-2-2-2-2/">more</a></p> 9 </div> 10 </div> 11 <div class="innerBox"> 12 <p class="img"><img width="213" height="300" src="http://my-domain.jp/wp-content/uploads/2018/01/test-213x300.png" class="attachment-medium size-medium wp-post-image" alt="" srcset="http://my-domain.jp/wp-content/uploads/2018/01/test-213x300.png 213w, http://my-domain.jp/wp-content/uploads/2018/01/test.png 690w" sizes="(max-width: 213px) 100vw, 213px" /></p> 13 <div class="txtBox"> 14 <h4>テスト4</h4> 15 <p class="txt">テスト本文4</p> 16 <p class="btn"><a href="http://my-domain.jp/test-2-2-2/">more</a></p> 17 </div> 18 </div> 19 <!--/sliderBox--> 20 </div> 21 <div> 22 <ul class="thumbBox thumbBox1"> 23 <li><a data-slide-index="0" href="#"><span><img width="150" height="150" src="http://my-domain.jp/wp-content/uploads/2018/01/test-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /></span></a></li> 24 <li><a data-slide-index="1" href="#"><span><img width="150" height="150" src="http://my-domain.jp/wp-content/uploads/2018/01/test-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" /></span></a></li> 25 </ul> 26 </div> 27 <!--/slide--> 28 </div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kszk311

2018/02/06 15:16

ベタなHTMLと、WPで処理した際のHTML(PHPのソースでなく、出力後のHTML)をいただけると幸いです
yytop

2018/02/06 15:52

ありがとうございます。HTMLを追記しましたが、投稿文字数制限の関係で少し省略しています。
kszk311

2018/02/07 02:00

sliderPC()、sliderSMT()を実行している箇所はどこでしょうか?
yytop

2018/02/07 02:34

よく分かっていなくてすみません。。Javascriptの省略した前後を追記してみましたが、いかがでしょうか?m(__)m
kszk311

2018/02/07 03:36

ありがとうございます、だいたい分かってきましたが、ここ!と断言できるところはまだ見つからず…。widthFlagの判定部分もいただきたいです。
yytop

2018/02/07 03:43

ありがとうございます。widthFlagの判定部分と思われるところを追記しました。よろしくお願いいたします。m(__)m
yytop

2018/02/07 08:30

ありがとうございます。ご指摘の最後のコンマを消してみましたが、状況は変わらずでした。。
yytop

2018/02/07 14:15

スマホでの動作確認用のテストURLを作りました。真ん中くらいの「制作実績」の部分です。よろしくお願いいたします。m(__)m
guest

回答2

0

テストページ、ありがとうございます。

二点、気になったところがあります。

まず一つ目。

PHP

1<p class="txt"><?php the_excerpt(); ?></p>

ここの部分で、

HTML

1 <p class="txt"><p>メディカルライティング本文5</p> 2</p>

このように出力されています。

pタグの中にpタグがありますので、例えば以下のように、pタグ入れ子を回避するよう、HTMLを正す必要があリます。

PHP

1<div class="txt"><?php the_excerpt(); ?></div>

HTMLの構成がおかしいため、要素が正確に取得出来なかった、ということも考えられます。
一度、そこを修正して頂ければと思います。

ちなみに、Firefoxでソースを表示すると、HTML上おかしい箇所が赤く表示されますので、確認してみてください。

二つ目です。

javascript

1 function sliderSMT(){ 2 //1 3 var slider_smt1_1 = $('.sliderBox1').bxSlider($.extend(optionSMT1,{ 4 pagerCustom: '.thumbBox1', 5 onSlideBefore: function($slideElement, oldIndex, newIndex) {slider_smt1_2.goToSlide(newIndex);} 6 })); 7 var slider_smt1_2 = $('.thumbBox1').bxSlider($.extend(optionSMT2,{ 8 onSlideNext: function($slideElement, oldIndex, newIndex) {slider_smt1_1.goToSlide(newIndex);}, 9 onSlidePrev: function($slideElement, oldIndex, newIndex) {slider_smt1_1.goToSlide(newIndex);} 10 })); 11 12 } 13

ここで、slider_smt1_1のpagerCustomと、slider_smt1_2のbxSliderのセレクターが同じというところが、原因のような気がします。

slider_smt1_1のページャーに、更にbxSliderを動かしてしまっています。

恐らく、ここが一番怪しいですが、
まずは、一点目のHTMLを修正して、
「var slider_smt1_2 = 」...の部分をコメントアウトしてみてください。
すると、スワイプはできなくなりますが、タップしてスライドできるはずです。

それが確認出来たら、

javascript

1var slider_smt1_2 = ...

の箇所を、
・slider_smt1_1のbxSliderが動いたときに、ページャーも移動させる
・スワイプでも動かす
のような処理を、プラグインを使わず独自に記述していく必要がありますが…。

追記:slider_smt1_2 is not definedの対処

javascript

1onSlideBefore: function($slideElement, oldIndex, newIndex) {slider_smt1_2.goToSlide(newIndex);} 2

取り急ぎこのslider_smt1_2.goToSlide(newIndex);を消せばエラーは無くなります。
ここの部分を、slider_smt1_1のスライドに合わせて、独自に処理を書いていくのがいいと思います。

追記2回目

javascript

1 var slider_smt1_1 = $('.sliderBox1').bxSlider($.extend(optionSMT1,{ 2 pagerCustom: '.thumbBox1', 3 onSlideBefore: function($slideElement, oldIndex, newIndex) { 4 if(slider_smt1_2.getCurrentSlide() != newIndex){ 5 slider_smt1_2.goToSlide(newIndex); 6 } 7 } 8 })); 9 var slider_smt1_2 = $('.thumbBox1').bxSlider($.extend(optionSMT2,{ 10 pagerCustom: '.sliderBox1', 11 onSlideBefore: function($slideElement, oldIndex, newIndex) { 12 if(slider_smt1_1.getCurrentSlide() != newIndex){ 13 slider_smt1_1.goToSlide(newIndex); 14 } 15 } 16 }));

追記3:スライダ参考URLをみて

1.関数の外で、使う変数を作っておく。
2.オプションの形式を揃える(「extend」を使わない、「pager: false」を追加する、など)
3.クラスではなく、IDにする(関係ないかもしれません)
4.「.sliderBox1」と「.thumbBox1」の構成を同じ構成にする
現在、↓のような構成なので

div.sliderBox.sliderBox1 div.innerBox ... div .thumbBox.thumbBox1

↓としてみる

div.sliderBox.sliderBox1 div.innerBox ... ul.thumbBox.thumbBox1

下記、1と2を対応したJSです

javascript

1 var slider_smt1_1, slider_smt1_2; 2 function sliderSMT(){ 3 //1 4 slider_smt1_1 = $('.sliderBox1').bxSlider({ 5 pagerCustom: '.thumbBox1', 6 onSlideBefore: function($slideElement, oldIndex, newIndex) { 7 slider_smt1_2.goToSlide(newIndex); 8 } 9 }); 10 11 slider_smt1_2 = $('.thumbBox1').bxSlider({ 12 pager: false, 13 minSlides: 3, 14 maxSlides: 3, 15 moveSlides: 1, 16 onSlideNext: function($slideElement, oldIndex, newIndex) { 17 slider_smt1_1.goToSlide(newIndex); 18 }, 19 onSlidePrev: function($slideElement, oldIndex, newIndex) { 20 slider_smt1_1.goToSlide(newIndex); 21 } 22 }); 23 }

投稿2018/02/07 16:16

編集2018/02/09 02:13
kszk311

総合スコア3404

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yytop

2018/02/07 23:53 編集

ありがとうございます。 すみません、確かにPタグが入れ子になっていたので、修正いたしました。 それと2点目のvar slider_smt1_2、var slider_smt2_2・・・とあるところをコメントアウトしたのですが、状況は変わらずでした。。 //var slider_smt1_2 = $('.thumbBox1').bxSlider($.extend(optionSMT2,{ // onSlideNext: function($slideElement, oldIndex, newIndex) {slider_smt1_1.goToSlide(newIndex);}, // onSlidePrev: function($slideElement, oldIndex, newIndex) {slider_smt1_1.goToSlide(newIndex);} //})); 何か追加で対応が必要な箇所がありそうでしょうか?m(__)m デベロッパーツール上でのエラーメッセージが下記のように変化しています。 <前>slider_smt1_2.goToSlide is not a function ↓ <後>slider_smt1_2 is not defined
kszk311

2018/02/08 01:50

上記エラーの対処を追記しました。 やはり、スライドにスライドスライドを重ねて今回のエラーが起きているみたいなので、ページャー部分の動作は、独自に処理していくのがいいと思います。
yytop

2018/02/08 02:31

ありがとうございます、エラーは出なくなりました! あとは下のサムネイル部分のページャーが正しく動作すれば、、もう一息な感じですが。。
yytop

2018/02/08 06:04

ありがとうございます、下記のように書いていくことで、ほぼ思い通りに動くようになりました! var slider_smt1_1 = $('.sliderBox1').bxSlider($.extend(optionSMT1,{ pagerCustom: '.thumbBox1', onSlideBefore: function($slideElement, oldIndex, newIndex) {} })); var slider_smt1_2 = $('.thumbBox1').bxSlider($.extend(optionSMT2,{ onSlideNext: function($slideElement, oldIndex, newIndex) {}, onSlidePrev: function($slideElement, oldIndex, newIndex) {} })); ただ静的なHTMLだと上のスライドの動きに合わせて、下のサムネイルも該当箇所に移動していくのですが、それがうまく動きません。 あともう一息なのですが、お力お借りできませんでしょうか?m(__)m
kszk311

2018/02/08 06:34

相互動くような処理を、2回目追記しました。 こちらで動くかどうか、試してみていただけますか。
yytop

2018/02/08 07:04

ありがとうございます、前と同じ動かない状況に戻ってしまいました。。 onSlideBeforeの最後の{}に何か処理を入れると、不具合を生じてしまう感じでしょうか。。
kszk311

2018/02/09 02:15

参考URL、ありがとうございます。 確認する箇所4点ありましたので、ご確認いただけますか。
yytop

2018/02/09 04:40

ありがとうございます。 取り急ぎ、1と2を対応したJSを試してみましたが、やはり状況は変わらずで、onSlideBeforeなどの最後の{}の中の処理を外すと動く感じです。。 他のものも追って試してみたいと思います。
kszk311

2018/02/09 05:21

そうですか…。申し訳ございませんが、これ以上はどう対処したらいいか分かりません…。 もし解決方法が見つかったら、どうやって解決したかを教えていただけると幸いです。
yytop

2018/02/10 10:16

すみません、自己解決しました。 色々と親身にアドバイスいただきまして、ありがとうございました。m(__)m
kszk311

2018/02/12 08:44

ご連絡ありがとうございます、解決出来たようで何よりです。
guest

0

自己解決

自己解決しました!
今一度静的HTMLを確認してみたところ、下記のようにコメントアウトでつながれているところに気づきました。

html

1 <ul class="thumbBox thumbBox1"><!-- 2 --><li><a data-slide-index="0" href="#"><span><img src="images/test.png" /></span></a></li><!-- 3 --><li><a data-slide-index="1" href="#"><span><img src="images/test.png" /></span></a></li><!-- 4 --></ul>

だめもとで、WP側にも同じように入れてみたところ動きました!

php

1 <ul class="thumbBox thumbBox1"><!-- 2 <?php $myposts = get_posts( $args ); foreach ( $myposts as $key=> $post ) : setup_postdata( $post ); ?> 3 --><li><a data-slide-index="<?php echo $key; ?>" href="#"><span><?php the_post_thumbnail('thumbnail'); ?></span></a></li><!-- 4 <?php endforeach; wp_reset_postdata();?> 5 --></ul>

kszk311さんには、大変親身にお調べいただいたのに、こんなオチで申し訳ないです。。m(__)m

投稿2018/02/10 10:13

編集2018/02/10 10:18
yytop

総合スコア20

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問