WordPressで特定カテゴリの記事一覧ブロックを作る方法

WordPressで固定ページに特定カテゴリの記事リストを出力する方法を紹介します。
タイルギャラリーとして表示します。

私が実装したのは小説家になろうでスコップした小説紹介の記事リストを作りたかったからです

もともと私がサイト制作を始めたのは小説サイトを作るためでしたので。
実装SSはこちらです。
タブレットで２列表示、スマートフォンで１列表示となります。

WRITTEN BY 天満川鈴

実装方法

１　functions.php

// 特定カテゴリの記事一覧カード
function km_category_cards_shortcode($atts) {
$atts = shortcode_atts(array(
'slug' => '',
'count' => 6,
), $atts, 'km_category_cards');

if (empty($atts['slug'])) {
return '';
}

$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'category_name' => sanitize_text_field($atts['slug']),
'posts_per_page' => intval($atts['count']),
'ignore_sticky_posts' => true,
);

$query = new WP_Query($args);

if (!$query->have_posts()) {
return '';
}

ob_start();
?>
<div class="km-category-cards">
<?php while ($query->have_posts()) : $query->the_post(); ?>
<article class="km-category-card">
<a class="km-category-card-link" href="<?php the_permalink(); ?>">
<figure class="km-category-card-thumb">
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail('medium_large'); ?>
<?php else : ?>
<div class="km-category-card-noimage">No Image</div>
<?php endif; ?>
</figure>

<div class="km-category-card-body">
<h3 class="km-category-card-title"><?php the_title(); ?></h3>
<div class="km-category-card-meta">
<time datetime="<?php echo esc_attr(get_the_date('c')); ?>">
<?php echo esc_html(get_the_date()); ?>
</time>
</div>
<p class="km-category-card-excerpt">
<?php echo esc_html(wp_trim_words(get_the_excerpt(), 60, '…')); ?>
</p>
</div>
</a>
</article>
<?php endwhile; ?>
</div>
<?php
wp_reset_postdata();

return ob_get_clean();
}
add_shortcode('km_category_cards', 'km_category_cards_shortcode');

2　CSS

.km-category-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin: 32px 0;
}

.km-category-card {
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 10px;
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease;
}

.km-category-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.km-category-card-link {
display: block;
color: inherit;
text-decoration: none;
}

.km-category-card-thumb {
aspect-ratio: 16 / 9;
margin: 0;
background: #f5f5f5;
overflow: hidden;
}

.km-category-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.km-category-card-noimage {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: #999;
font-size: 14px;
}

.km-category-card-body {
padding: 16px;
}

.km-category-card-title {
margin: 0 0 8px;
font-size:15px !important;
line-height: 1.5;
}

.km-category-card-meta {
margin-bottom: 10px;
color: #777;
font-size: 13px;
}

.km-category-card-excerpt {
margin: 0;
color: #555;
font-size: 14px;
line-height: 1.7;
}

@media (max-width: 900px) {
.km-category-cards {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 600px) {
.km-category-cards {
grid-template-columns: 1fr;
}
}

使い方

実装したい場所に、次のショートコードを記述します。

［km_category_cards slug="hoge" count="6"］（［］は半角に変えて）

slugに表示したいカテゴリスラッグ（例ではhoge）を入れます。

countに表示数を入れます。
例だと新しい順に6個表示されます。

見映えは個人の環境によって異なります。
特にライトテーマ向けの配色となっている点に御注意ください。
必要に応じて文字の大きさなどを調整してください。

まとめ

他サイトで紹介している方法だとCSSまで扱ったものが少なかったため、記事にしてみました。
自分の書いた小説コーナーなら、そのリストを表示することもできます。
もちろん小説サイト以外にも色々な使い途があるでしょう。

使い所の多いコードなので、ぜひ試してみてください！

WRITTEN BY

天満川 鈴

未経験からWEB業界に入り、現在はWEBディレクターとして実務に従事。 要件整理・導線設計・コンテンツ構成などを学びながら、日々改善を重ねています。 AIを活用したコンテンツ制作・効率化を強みとし、プロンプト設計を含めた制作フローの最適化にも取り組んでいます。

詳しいプロフィールはこちら

X CodePen Amazon

RECOMMENDED INFRASTRUCTURE

私はConoHa以外を勧めない。

2016年からずっとConoHaを使い倒してきました。知人に「一番いいサーバーは？」と聞かれたら、迷わずここを教えます。

レンタルサーバーナンバーワンを誇る高速環境であることはもちろん。私が「黒い画面って何？」というド素人からサイト制作のプロになれたのは、傍らにずっとこのはちゃんがいてくれたから。
私がConoHaを使い続ける、嘘偽りない理由です。

※ConoHaに初めて入会の方限定。
本CTAの画像もしくはボタンを押してWINGパック12か月以上を契約すると、最大5000円割引してもらえます。

公式サイトで詳細を見る