固定ページに特定カテゴリーの記事を表示する方法(WordPress)


この方法の目的


固定ページの本文に、特定のカテゴリーの記事一覧を埋め込みます。
例えば「お知らせカテゴリーの最新4件だけを表示したい」といったケースで便利です。
テーマを直接編集せず、安全に実装できます。

実装の流れ


① Code Snippets プラグインをインストール

WordPress公式のプラグインで、functions.php を直接編集せずに安全にカスタムコードを追加できます。

👉 Code Snippets

② スニペットを登録

管理画面 → スニペット → 新規追加 から、以下のコードを登録し、有効化します。

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でデザインをカスタマイズしやすい

こんな場面で活躍


  • 固定ページに「お知らせ」「コラム」「ブログ」などを埋め込みたいとき
  • 特定のカテゴリーだけ表示したいとき
  • ページビルダーを使わずシンプルに管理したいとき

以上です!
ぜひ活用してみてください。


Leave a Reply

Your email address will not be published. Required fields are marked *