Wordpressで子カテゴリ一覧 (サムネイル画像付き) で表示させたい

Question

前提・実現したいこと

wordpress歴、PHP歴ともに2週間程度の完全初心者です。
wordpress よりも PHP の方がフワッとしてます。
自分の力量で理想に追いつかない部分はあります。
かなり無茶な質問ですがお助けいただけるとありがたいです。

現在、wordpress でカテゴリーページを作ってるのですが
ホームの「親カテゴリ」をクリックするとその下の「子カテゴリ」一覧を作りたいと考えてます。

そして、それぞれに子カテゴリの最新記事のアイキャッチを使った子カテゴリ一覧を表示させたいです。

---

(カテゴリーページのイメージ)

カテゴリー：A(親)

<ul> <li><a>aaa(子)</a></li> ■■■■■ <li><a>bbb(子)</a></li> ■■■■■ <li><a>ccc(子)</a></li> ■■■■■ </ul> ※ ■はサムネイル画像

---

サムネイル画像をクリックするとその記事に飛び、
子カテゴリー名をクリックすると、その子カテゴリーに所属する記事の一覧が出るようにしたいです。

下記は stackoverflow や様々なブログを調べた結果のコードです。

該当のソースコード

<ul>
<?php
/* 現在のカテゴリ－の取得 */
$cat_now = get_the_category();
$cat_now = $cat_now[0];
/*親カテゴリーのID取得*/
$parent_id = $cat_now->category_parent;

?>	
<?php $childCats = get_categories("title_li=&child_of=$parent_id"); ?>


 <?php

foreach($childCats as $childCat) {
	
	echo '<li><a href="' . esc_url(get_term_link($childCat, $childCat->taxonomy)) . '">' . $childCat->name . '</a></li>';
	}
?>
</ul>

---

かなり愚かな質問をしてることを承知しております。
よろしくおねがいします！

補足情報

使用してるWPバージョンとテーマは
WordPress 4.9.8 (XeoryExtension テーマ)
です。

Comments

[kei344]

WordPressのカテゴリにはサムネイルがありませんが、その点はどう処理されるのでしょうか。

[ArSi]

説明不足ですみません！ それぞれの「子カテゴリー」が属する記事のアイキャッチを並べたいのです。 foreach内にそのコードを書くんじゃないかと踏んでるのですが…最初の変数の時点で躓いてるのかもしれません…

[kei344]

「子カテゴリ毎の記事一覧」ですか？「子カテゴリの最新記事のアイキャッチを使った子カテゴリ一覧」ですか？質問文は編集できますので、本文に追記することをお勧めします。

[ArSi]

ありがとうございます。

[ArSi]

すみません、「子カテゴリの最新記事のアイキャッチを使った子カテゴリ一覧」の方で考えております。ちょっとこういうの初めてで色々すみません。質問文を編集します。

Answer 1

カテゴリーアーカイブを表示しているときは、$cat に現在のカテゴリのIDが格納されているので、
それを利用して、get_term_children() で子カテゴリを取得できます。
子カテゴリが取得できれば、それは親カテゴリなので、取得できた子カテゴリの配列を利用して、foreachでループ開始、その中で、カテゴリ名やリンクを取得し、さらに、get_posts()で子カテゴリに属する記事を取得して、サムネイルなどを表示。
子カテゴリが取得できない場合、それはおそらく子カテゴリか子カテゴリを持たない親カテゴリなので、カテゴリーに属する記事の一覧を表示。
こんな感じの処理になるのかな、と思います。

書き方はあんまり上手くないので恐縮ですが、サンプルコードはこちらです。
（なんかもうちょっとシンプルな書き方があるのかもしれませんが・・・・）

2018.9.19 17時ごろ　コメントに指摘のあったコードの間違いを修正しました

<?php
//$catに現在のカテゴリのIDが格納されている
$this_cat_children = get_term_children( $cat, 'category' );//子カテゴリを取得する
//var_dump($this_cat_children);

if($this_cat_children):
//子カテゴリがある＝おそらく親カテゴリ の場合の処理
foreach($this_cat_children as $children)://子カテゴリのループ開始
$children_obj = get_category( $children );//子カテゴリの情報を取得
//var_dump($children_obj);
$name = $children_obj->cat_name;//カテゴリ名を取得
$category_link = get_category_link( $children );//カテゴリへのリンクを取得
//var_dump($category_link);
?>
<h3><a href="<?php echo $category_link;?>"><?php echo $name;?></a></h3>
<ul>
<?php
$args = array(
	'posts_per_page' => 5,//記事を表示する件数　全件の場合-1
	'category' => $children
	);
$myposts = get_posts( $args );//子カテゴリの記事を格納
foreach ( $myposts as $post ) : setup_postdata( $post );//記事のループ開始 ?>
	<li>
		<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?><?php the_title(); ?></a>
	</li>
<?php endforeach; //記事のループ終了
wp_reset_postdata();?>

</ul>

<?php
endforeach;//子カテゴリのループ終了

else:
//子カテゴリがない＝子カテゴリか、もしくは子カテゴリを「持たない」親カテゴリ

//記事があるかどうか
if ( have_posts() ) :

	echo '<ul>';
//ここからメインループ
while ( have_posts() ) :
the_post();

//記事を表示するコードなどなど
?>
	<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php
endwhile;
	echo '</ul>';

else :


//記事がないときの処理

endif;
endif;
?>

Comments

[ArSi]

本当にありがとうございます！
まさかこんな長くなると思ってなかったです汗

ちなみに
<a href="$category_link">
を
<a href="<?php echo $category_link;?>">
に変更したら完璧に理想の形になることができました。

コメントアウトの解説もとても丁寧で勉強の参考にもなりました！
感謝ですm(_ _)m
ありがとうございます！

[marlboro_tata]

あ、そうです、すみません、回答が間違いでした。

[marlboro_tata]

回答の内容を直しておきましたm(_ _)m

[ArSi]

すみません、大変恐縮なのですが、もう一つだけ質問があります。

<h3><a href="<?php echo $category_link;?>"><?php echo $name;?></a></h3>
をクリックすると子カテゴリーの記事一覧を出したいのです。

最後から2，3行目に2つの [ endif; ] の間に該当する記事一覧を並べるコードが必要だと思いまして、色々試行錯誤してるのですが、なかなかうまく行きません汗

【自分が試してみたこと】

//記事がないときの処理

endif;

$args=array(
'meta_query'=>
array(

'relation'=>'OR'
),
'showposts'=>10,
'order'=>'DESC'
);

$the_query = new WP_Query( $args );

// The Loop
if ( $the_query->have_posts() ) {
echo '<ul>';
while ( $the_query->have_posts() ) {
$the_query->the_post();
echo '<li>' . get_the_title() . '</li>';
}
echo '</ul>';
/* Restore original Post Data */
wp_reset_postdata();
} else {
// no posts found
}

?>      

<?php

endif;

?>

[marlboro_tata]

記述する場所が違うのと、
あとカテゴリアーカイブのページなので、new WP_Query()でクエリを作る必要はないです。

回答のコードの中で、
//ここからメインループ
とある部分の
while ( have_posts() ) :the_post();
から
endwhile;
が通常のカテゴリ一覧を出力できるループなので、
ここに記事一覧として出力したい内容を書けばOKです。

[marlboro_tata]

回答をまた少し直しておきました。差分は主に後半です。
（回答の日付の、編集の日付をクリックすると、過去の編集履歴が見られるんですね！すごーい！！）