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

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オブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

5563閲覧

モーダルウィンドウ上でのページネーション

sssooo

総合スコア17

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オブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/03/23 18:27

編集2017/03/24 10:19

###質問
親カテゴリー毎にページを振り分け、子カテゴリー毎に投稿を並べてアーカイブ表示しているページで、その投稿の要素をクリックするとコンテンツがモーダル上で表示されるように設定しています。モーダルには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の値を上書きする必要があるような気がするのですが、如何様にすべきでしょうか?スキルが追いつかず申し訳ありません。

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

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

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

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

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

kei344

2017/03/23 18:56

「モーダルウィンドウにページネーションを設置」はJavaScriptの問題では?
sssooo

2017/03/23 19:19 編集

確かにそうですね、質問タイトルを編集しました。ページネーションについてのJSをまだ何も記述していないためサンプルコードはありません。
退会済みユーザー

退会済みユーザー

2017/03/23 22:15

現在の質問文ではモーダルやページネーションを表示するjsの仕様がわからないため、回答することが困難です。まずはWordPressのループやPHPの処理を抜きにして、最終的に表示したいHTMLのコードの例を記載していただけますか?
sssooo

2017/03/23 22:49

追記しました。wpのループで子カテゴリー毎に並べている投稿の並び順に従ってページ送りされるようにモーダル部のpagerクラス部分にページネーションを実装したいのです。
guest

回答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
Lhankor_Mhy

総合スコア35865

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

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

sssooo

2017/03/24 10:21

ご指摘通り試してみましたがスキルが足らずまだ分かりません。追記に書きましたのでよろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問