カテゴリー毎に記事投稿一覧を表示する

トップページ等に最上位のカテゴリーと、それぞれのカテゴリーに属する投稿を取得して一覧表示する場合の記述です。

WordPressの最上位のカテゴリーと、それぞれのカテゴリーに属する投稿の図

"query_posts"を使用して出力する方法を見かけますが、現在では"query_posts"は非推奨となるため、ここでは"WP_Query"を使用しています。

参考：WordPress Codex 日本語版　テンプレートタグ query posts

index.php等

<?php
$categories = get_categories(array('parent' => 0)); //最上位のカテゴリーのみを取得する
foreach ($categories as $category):
?>

<h2><a href="<?php echo esc_url(get_category_link($category->term_id)); ?>"><?php echo $category->name; ?></a></h2>
<?php
$my_query = new WP_Query(array('cat' => $category->term_id));
if ($my_query->have_posts()):
?>
<ul>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
	<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; ?>
</ul>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<p>投稿はありません。</p>
<?php endif; ?>

<?php endforeach; ?>

HTML出力

<h2><a href="カテゴリのURL">カテゴリーA</a></h2>
<ul>
	<li><a href="記事のURL">カテゴリーA-1</a></li>
	<li><a href="記事のURL">カテゴリーA-2</a></li>
	<li><a href="記事のURL">カテゴリーA-3</a></li>
</ul>

<h2><a href="カテゴリのURL">カテゴリーB</a></h2>
<ul>
	<li><a href="記事のURL">カテゴリーB-1</a></li>
	<li><a href="記事のURL">カテゴリーB-2</a></li>
	<li><a href="記事のURL">カテゴリーB-3</a></li>
</ul>

まず、get_categoriesのparentに値0を渡して最上位のカテゴリーのリンクと名前を出力します。
リンク部分はget_category_linkを使用します。

次に各カテゴリーに属する記事を出力するために、内側でWP_Queryオブジェクトを作成します。
catパラメータ―に先のget_categoriesで取得したカテゴリーID(term_id)を渡すことにより、各カテゴリーに属する記事を取得することができます。

get_categoriesでは下記のようなオブジェクト（配列）が取得できます。

【get_categories】の戻り値

$category->term_id
$category->name
$category->slug
$category->term_group
$category->term_taxonomy_id
$category->taxonomy
$category->description
$category->parent
$category->count
$category->cat_ID
$category->category_count
$category->category_description
$category->cat_name
$category->category_nicename
$category->category_parent

例えば、<h2>にカテゴリースラッグ名のclassを追加して、カテゴリー毎にCSSで色分けしてあげることなどができますね。
↓↓↓
<h2 class="<?php echo $category->slug; ?>">

ネットショップ向けWooCommerce対応WordPressテーマ「Japacart（ジャパカート）」

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。