【Wordpress】入れ子ループ内でのカテゴリーページ

###質問

親カテゴリー1

-- 2016
-- 2015
-- 2014

親カテゴリー2

-- 2016
-- 2015
-- 2014

という複数のカテゴリーと子カテゴリーに年代を設定し、親カテゴリーごとにcategory.phpにてページ分けをし、子カテゴリーごとに投稿一覧を表示するいうアーカイブページを作りたいです。さらにそのコンテンツをクリックした場合、モーダルでその記事の内容を表示させたいです。HTML/CSSのローカル環境での実装はできているのですが、そこにループをどう組み込んだらいいのか分かりません。
###不明な点

子カテゴリーのnameを取得し、投稿一覧を取得する必要があるので入れ子ループにする必要があるか？どのように？
モーダルをループ内に組み込むにはどうすれば良いか？

構造の問題でもっと簡単に実装できる方法があれば教えていただきたいです。

HTML
1<!DOCTYPE html>
2<html lang=ja>
3<head>
4  <meta charset="utf-8">
5  <title>test</title>
6  <link href="css/bootstrap.min.css" rel="stylesheet">
7  <link rel="stylesheet" media="all" type="text/css" href="style.css">
8</head>
9<body>
10  <div class="container">
11
12    <div class="row">
13        <header>
14            ヘッダー
15        </header>
16    </div>
17
18    <div class="row clearfix">
19      <div class="content col-lg-10 col-lg-offset-1 col-sm-12 col-12">
20
21        <article>
22
23          <div class="wrap">
24
25            <section>
26              <div class="inner row">
27                <div class="year col-lg-2">
28                  <h3>2016</h3>
29                </div>
30                <div class="images col-lg-10">
31                  <div class="trim"><img src="" alt="投稿1"></div>
32                  <div class="trim"><img src="" alt="投稿2"></div>
33                </div>
34              </div>
35            </section>
36
37            <section>
38              <div class="inner row">
39                <div class="year col-lg-2">
40                  <h3>2015</h3>
41                </div>
42                <div class="images col-lg-10">
43                  <div class="trim"><img src="" alt="投稿3"></div>
44                  <div class="trim"><img src="" alt="投稿4"></div>
45                </div>
46              </div>
47            </section>
48
49          </div>
50
51        </article>
52        
53      </div>
54
55      <div id="modal-content">
56        <div id="modal-content-inner">
57          <p><a id="modal-close" class="close">
58            <svg></svg>
59          </a></p>
60          <div class="image">
61            <img src="" alt="投稿画像を表示">
62          </div>
63          <div class="caption">
64            <div class="title">
65              <p>投稿タイトル</p>
66            </div>
67            <div class="disc">
68              <p>カスタムフィールドテンプレート</p>
69            </div>
70          </div>
71          <div class="pager">
72            <p><a class="prev"><svg></svg></a></p>
73            <p><a class="next"><svg></svg></a></p>
74          </div>
75        </div>
76      </div>
77
78    </div>
79
80    <footer>
81     フッター
82    </footer>
83
84  </div>
85
86<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
87<script type="text/javascript" src="js/script.js"></script>
88</body>
89</html>

CSS
1.wrap{
2	max-width: 750px;   /*一覧を最大6個に揃える*/
3}
4
5.trim{
6	width: 75px;
7	height: 75px;
8	overflow: hidden;
9	display: inline-block;
10	margin: 10px;
11}

モーダルウィンドウの作成はこちらを参照しました。スタイリングは省略しました。
https://syncer.jp/jquery-modal-window
###詳細
使用データベース：MySQL
投稿: 投稿タイトルを「投稿タイトル」の部分に、投稿画像を「投稿画像を表示」の部分に、カスタムフィールドの値を「カスタムフィールドテンプレート」の部分に表示したい
FORMタグの使用予定はなく、現予定では年度を子カテゴリーとして手動で設定して、それに投稿をカテゴリー付けして割り振りを行いたい(投稿日時ではなくポートフォリオなので)
ローカル環境で作った上記のようなコードをcategory.php内でループと共に書きたいのだが、その方法が不明←質問

seastar3

2017/03/13 18:14 編集

使用データベース(MySQLやSQLiteなど)および投稿記事テーブルの構造(id,日付,投稿者id,タイトル,内容,画像ファイル名など)の情報が必要です。phpプログラムにおいては、header命令によるリダイレクト(画面移動)が一般的ですが、"category.php"のコードと提示されているHTMLコードとの関連性がよく分からないので、category.phpのコードも示してみてください。FORMタグおよびPOST属性の年度項目の受け渡しは使いますか。使うとしたら受け取った側のphpプログラムのSQL文作成部分が必要になります。

sssooo

2017/03/13 23:13

追記しました。

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

回答2件

ベストアンサー

基本的なPHPの構造はこんな感じです。

PHP
1$termparent = get_query_var('cat');
2$taxonomy = 'category';
3$termchildren = get_term_children( $termparent, $taxonomy );
4
5foreach( $termchildren as $termchild ) {
6	$the_query = new WP_Query( array( 'category__and' => array( $termparent, $termchild ) ) );
7
8	if ( $the_query->have_posts() ) {
9	
10		$term = get_term( $termchild, $taxonomy );
11		echo $term->name;
12		
13		while ( $the_query->have_posts() ) {
14			$the_query->the_post();
15			echo get_the_title();
16		}
17	} else {
18		echo "no posts found";
19	}
20
21	wp_reset_postdata();
22}