Q&A
「モーダルウィンドウにページネーションを設置」はJavaScriptの問題では？
###質問
親カテゴリー毎にページを振り分け、子カテゴリー毎に投稿を並べてアーカイブ表示しているページで、その投稿の要素をクリックするとコンテンツがモーダル上で表示されるように設定しています。モーダルにはjsでdataを渡し、表示するように設定しています。
そのモーダルウィンドウにページネーションを設置し、子カテゴリーの並び順に従ってページ送りされるようにしたいのです。・モーダルがループ外であること・親子カテゴリー設定にしていることなどからwpテンプレートタグを使うことが難しそうに思えますが、どのように設定したらいいのでしょうか？
PHP
1//category.php 2<?php get_header(); ?> 3 4<div> 5 <?php 6 $termparent = get_query_var('cat'); 7 $taxonomy = 'category'; 8 $termchildren = get_term_children( $termparent, $taxonomy ); 9 ?> 10 11 <div id="modal-content"> 12 <div id="modal-content-inner"> 13 <p><a id="modal-close" class="close"> 14 <svg></svg> 15 </a></p> 16 <div id="image"></div> 17 <div id="caption"> 18 <div id="title"></div> 19 <div id="disc"> 20 <p id="disc-top"></p> 21 <p id="disc-bottom"></p> 22 </div> 23 </div> 24 <div id="pager"> 25 <p><a id="prev"> 26 <svg></svg> //ここにprevボタン 27 </a></p> 28 <p><a id="next"> 29 <svg></svg> //ここにnextボタン 30 </a></p> 31 </div> 32 </div> 33 </div> 34 35 <div class="content"> 36 <article> 37 <div class="wrap"> 38 <section class="clearfix"> 39 <div class="works-section row"> 40 41 <?php 42 foreach( $termchildren as $termchild ): 43 $the_query = new WP_Query( array( 'category__and' => array( $termparent, $termchild ) ) ); 44 45 if ( $the_query->have_posts() ): 46 $term = get_term( $termchild, $taxonomy ); 47 ?> 48 49 <div class="year"> 50 <h3> 51 <?php echo $term->name ?> //子カテゴリー名を表示 52 </h3> 53 </div> 54 55 <div class="images"> 56 57 <?php 58 while ( $the_query->have_posts() ): 59 $the_query->the_post(); 60 ?> 61 62 <div 63 class="modal-open" 64 data-content='<?php echo get_the_content() ?>' 65 data-title="<?php echo get_the_title() ?>" 66 data-disc-top="<?php echo get_post_meta($post->ID , '一段目' ,true); ?>" 67 data-disc-bottom="<?php echo get_post_meta($post->ID , '二段目' ,true); ?>" 68 > 69 70 <?php the_content() ?> //サムネイル画像のようにして子カテゴリー毎に並べています 71 </div> 72 73 <?php endwhile ?> 74 75 </div> 76 77 <?php 78 endif; 79 wp_reset_postdata(); 80 endforeach; 81 ?> 82 83 </div> 84 </section> 85 </div> 86 </article> 87 </div> 88</div> 89 90<?php get_footer(); 91
JavaScript
1$(function(){ 2 3 $(".modal-open").click(function(){ 4 $( this ).blur(); 5 if( $( "#modal-overlay" )[0] ) return false; 6 $( "body" ).append( '<div id="modal-overlay"></div>' ); 7 $( "#modal-overlay" ).fadeIn() ; 8 centeringModalSyncer() ; 9 $( "#modal-content" ).fadeIn() ; 10 $('#image').append($(this).data('content')); 11 $('#title').text($(this).data('title')); 12 $('#disc-top').text($(this).data('disc-top')); 13 $('#disc-bottom').text($(this).data('disc-bottom')); 14 $( "#modal-overlay, #modal-close" ).unbind().click( function(){ 15 $( "#modal-content, #modal-overlay" ).fadeOut(function(){ 16 $('#modal-overlay').remove() ; 17 resetModal(); 18 }) ; 19 }) ; 20 }) ; 21 22 ( window ).resize( centeringModalSyncer ) ; 23 function centeringModalSyncer() { 24 var wid = $( window ).width() ; 25 var hei = $( window ).height() ; 26 var cw = $( "#modal-content" ).outerWidth( {margin:true} ); 27 var ch = $( "#modal-content" ).outerHeight( {margin:true} ); 28 var cw = $( "#modal-content" ).outerWidth(); 29 var ch = $( "#modal-content" ).outerHeight(); 30 $( "#modal-content" ).css( {"left": ((wid - cw)/2) + "px","top": ((hei - ch)/2) + "px"} ) ; 31 } 32 33 function resetModal(){ 34 $('#image').empty(); 35 $('#title').text(''); 36 $('#disc-top').text(''); 37 $('#disc-bottom').text(''); 38 }
HTML
1 2<body> 3 4 <div class="container"> 5 <div class="row"> 6 <header>ヘッダー</header> 7 </div> 8 9 <div class="row clearfix"> 10 <div class="content"> 11 12 <div id="modal-content"> 13 <div id="modal-content-inner"> 14 <p><a id="modal-close" class="close"> 15 <svg></svg> 16 </a></p> 17 <div id="image"> 18 <img src="" alt=""> //投稿コンテンツを表示 19 </div> 20 <div id="caption"> 21 <div id="title"> 22 <p>タイトル</p> //投稿タイトルを表示 23 </div> 24 <div id="disc"> 25 <p id="disc-top">値1</p> //投稿カスタムフィールド値を表示 26 <p id="disc-bottom">値2</p> //投稿カスタムフィールド値を表示 27 </div> 28 </div> 29 <div class="pager"> 30 <p><a class="prev"> 31 <svg viewbox="0 0 180 310" width="15" height="20"> 32 <path d="M170 10 L10 161 M10 150 L170 300"> 33 </svg> 34 </a></p> 35 <p><a class="next"> 36 <svg viewbox="0 0 180 310" width="15" height="20"> 37 <path d="M10 10 L170 161 M170 150 L10 300"> 38 </svg> 39 </a></p> 40 </div> 41 </div> 42 </div> 43 44 <article> 45 <div class="wrap"> 46 <section> 47 <div class="works-section"> 48 <div class="year"> 49 <h3>2016</h3> //子カテゴリーtitle 50 </div> 51 <div class="images"> 52 <div class="modal-open trim"><img src="" alt=""></div> 53 .... //投稿コンテンツ 54 </div> 55 </div> 56 </section> 57 58 <section> 59 <div class="works-section"> 60 <div class="year"> 61 <h3>2015</h3> //子カテゴリーtitle 62 </div> 63 <div class="images"> 64 <div class="modal-open trim"><img src="" alt=""></div> 65 .... //投稿コンテンツ 66 </div> 67 </div> 68 </section> 69 70 </div> 71 72 </article> 73 74 </div> 75 76 </div> 77 78 <footer>フッター</footer> 79 80 </div> 81 82<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 83<script type="text/javascript" src="js/script.js"></script> 84</body> 85</html>
###追記
JavaScript
1j(".modal-open").click(function(){ 2 3//モーダル表示部分 4..... 5 6//ページネーション 7var target = $(this); 8$('#next').click(function(){ 9 var next = target.next(); 10 if (next.length === 0) next = target.siblings().eq(0); 11 resetModal(); 12 $('#image').append(next.data('content')); 13 $('#title').text(next.data('title')); 14 $('#disc-top').text(next.data('disc-top')); 15 $('#disc-bottom').text(next.data('disc-bottom')); 16}); 17 18});
これで次のコンテンツが一度だけ表示されるようになりました。これを投稿数分回すためにfor文で囲ったりtargetの値を上書きする必要があるような気がするのですが、如何様にすべきでしょうか？スキルが追いつかず申し訳ありません。
確かにそうですね、質問タイトルを編集しました。ページネーションについてのJSをまだ何も記述していないためサンプルコードはありません。
現在の質問文ではモーダルやページネーションを表示するjsの仕様がわからないため、回答することが困難です。まずはWordPressのループやPHPの処理を抜きにして、最終的に表示したいHTMLのコードの例を記載していただけますか？
追記しました。wpのループで子カテゴリー毎に並べている投稿の並び順に従ってページ送りされるようにモーダル部のpagerクラス部分にページネーションを実装したいのです。
回答1件
0
ベストアンサー
できると思います。
HTMLの骨組みはこんな感じだと思います。
HTML
1<div class="year"> 2 <h3> 3 子カテゴリ1 4 </h3> 5</div> 6<div class="images"> 7 <div 8 class="modal-open" 9 > 10 <img src=""> 11 </div> 12 <div 13 class="modal-open" 14 > 15 <img src=""> 16 </div> 17 <div 18 class="modal-open" 19 > 20 <img src=""> 21 </div> 22</div> 23<div class="year"> 24 <h3> 25 子カテゴリ2 26 </h3> 27</div> 28<div class="images"> 29 <div 30 class="modal-open" 31 > 32 <img src=""> 33 </div> 34 <div 35 class="modal-open" 36 > 37 <img src=""> 38 </div> 39 <div 40 class="modal-open" 41 > 42 <img src=""> 43 </div> 44</div>
子カテゴリごとに親要素でラッピングされていますから、thisがクリックされた.modal-openの時の次の要素はこんな感じに書けます。
javascript
1 var target = $(this); 2 var next = target.next(); 3 if (next.length === 0) next = target.siblings().eq(0);
これのクリックイベントを叩いてもいいですし、要素を渡してモーダルを構築してもいいと思います。
コメントを受けて追記
色々なやり方があると思いますが、
javascript
1$('#next').click(function(){ 2 //... 3 next.click(); 4});
みたいなのはわかりやすいのでは。
投稿2017/03/24 01:55
編集2017/03/24 10:49
総合スコア37411
あなたの回答
tips
プレビュー
