この方法の目的
固定ページの本文に、特定のカテゴリーの記事一覧を埋め込みます。
例えば「お知らせカテゴリーの最新4件だけを表示したい」といったケースで便利です。
テーマを直接編集せず、安全に実装できます。
実装の流れ
① Code Snippets プラグインをインストール
WordPress公式のプラグインで、functions.php
を直接編集せずに安全にカスタムコードを追加できます。
② スニペットを登録
管理画面 → スニペット → 新規追加 から、以下のコードを登録し、有効化します。
php
function show_category_posts($atts) {
$atts = shortcode_atts([
'category' => '',
'number' => 5,
], $atts);
$query = new WP_Query([
'post_type' => 'post',
'category_name' => $atts['category'],
'posts_per_page' => $atts['number'],
]);
$output = '';
if ($query->have_posts()) {
$output .= '<div class="category-post-list">';
while ($query->have_posts()) {
$query->the_post();
$output .= '<div class="category-post-item">';
// アイキャッチ画像
if (has_post_thumbnail()) {
$output .= '<div class="post-thumbnail">';
$output .= '<a href="' . get_permalink() . '">' . get_the_post_thumbnail(null, 'medium') . '</a>';
$output .= '</div>';
}
$output .= '<div class="post-meta">';
$output .= '<h3><a href="' . get_permalink() . '">' . get_the_title() . '</a></h3>';
$output .= '<p class="post-date">' . get_the_date('Y年n月j日') . '</p>';
// 本文の冒頭20語を抜粋
$excerpt = wp_trim_words(strip_tags(get_the_content()), 20, '…');
$output .= '<p class="post-excerpt">' . $excerpt . '</p>';
$output .= '<a href="' . get_permalink() . '" class="read-more">続きを読む</a>';
$output .= '</div>'; // .post-meta
$output .= '</div>'; // .category-post-item
}
$output .= '</div>';
wp_reset_postdata();
} else {
$output .= '<p>投稿が見つかりませんでした。</p>';
}
return $output;
}
add_shortcode('category_posts', 'show_category_posts');
③ 固定ページでショートコードを記述
固定ページの本文に、以下のショートコードを書きます:
[category_posts category="カテゴリーのスラッグ" number="表示件数"]
例:
[category_posts category="noir-luna" number="4"]
これで、カテゴリー「noir-luna」に属する記事が最新から4件表示されます。
スタイルの調整
出力されるHTMLには、以下のクラスが付いています。
CSSで自由にデザインできます。
.category-post-list
.category-post-item
.post-thumbnail
.post-meta
.post-date
.post-excerpt
.read-more
この方法のメリット
✅ テーマの編集が不要で、安全
✅ テーマ更新の影響を受けない
✅ 固定ページごとにカテゴリーや件数を指定できる
✅ CSSでデザインをカスタマイズしやすい
こんな場面で活躍
- 固定ページに「お知らせ」「コラム」「ブログ」などを埋め込みたいとき
- 特定のカテゴリーだけ表示したいとき
- ページビルダーを使わずシンプルに管理したいとき
以上です!
ぜひ活用してみてください。