WordPress

✅ 【WordPress初学者向け】お知らせ一覧ページを作成してカテゴリーごとに表示させる方法(コピペOK)

WordPressで「お知らせ一覧ページ(ニュース一覧)」を作ったあと、
**「カテゴリごとに絞り込んで表示したい」**というケースは多いですよね。

この記事では、必要なファイルとそのまま使えるPHPコード例付きで、
「カテゴリー別に表示されるお知らせ一覧ページ」を初心者でも簡単に実装できる方法をご紹介します!


✅ 1. 前提:お知らせをどこに投稿しているか確認

まずは、以下のどちらを使っているかを確認しましょう。

  • 通常の「投稿」から投稿している(post)
  • カスタム投稿タイプ(例:news)を使っている

今回は「カスタム投稿タイプ(news)」として解説しますが、通常の投稿(post)でもほぼ同じ構成で使えます。


✅ 2. 必要なテンプレートファイル

最低限必要なファイルは以下です:

ファイル名役割
archive-news.phpnews 投稿タイプの一覧ページ
taxonomy-news_category.phpnews_category カテゴリー別ページ(任意)

✅ 3. 一覧ページ(archive-news.php)のコード例

<?php get_header(); ?>

<main>
  <h1>お知らせ一覧</h1>

  <ul class="news-category-nav">
    <?php
    $terms = get_terms('news_category');
    foreach ($terms as $term) {
      echo '<li><a href="' . get_term_link($term) . '">' . esc_html($term->name) . '</a></li>';
    }
    ?>
  </ul>

  <ul class="news-list">
    <?php
    $args = array(
      'post_type' => 'news',
      'posts_per_page' => 10
    );
    $news_query = new WP_Query($args);
    if ($news_query->have_posts()) :
      while ($news_query->have_posts()) : $news_query->the_post();
    ?>
        <li>
          <a href="<?php the_permalink(); ?>">
            <span class="date"><?php echo get_the_date('Y.m.d'); ?></span>
            <span class="title"><?php the_title(); ?></span>
          </a>
        </li>
    <?php endwhile;
    endif;
    wp_reset_postdata(); ?>
  </ul>
</main>

<?php get_footer(); ?>

✅ 4. カテゴリーごとに表示するページ(taxonomy-news_category.php)

<?php get_header(); ?>

<main>
  <h1>「<?php single_term_title(); ?>」のお知らせ一覧</h1>

  <ul class="news-list">
    <?php
    if (have_posts()) :
      while (have_posts()) : the_post(); ?>
        <li>
          <a href="<?php the_permalink(); ?>">
            <span class="date"><?php echo get_the_date('Y.m.d'); ?></span>
            <span class="title"><?php the_title(); ?></span>
          </a>
        </li>
    <?php endwhile;
    endif; ?>
  </ul>
</main>

<?php get_footer(); ?>

✅ 5. カスタム投稿タイプとカスタムタクソノミーの登録(functions.php)

// 投稿タイプ「news」
function register_news_post_type() {
  register_post_type('news', array(
    'labels' => array(
      'name' => 'お知らせ',
      'singular_name' => 'お知らせ',
    ),
    'public' => true,
    'has_archive' => true,
    'menu_position' => 5,
    'supports' => array('title', 'editor', 'excerpt', 'thumbnail'),
    'rewrite' => array('slug' => 'news'),
    'taxonomies' => array('news_category'),
  ));
}
add_action('init', 'register_news_post_type');

// カテゴリー「news_category」
function register_news_taxonomy() {
  register_taxonomy('news_category', 'news', array(
    'labels' => array(
      'name' => 'カテゴリー',
      'singular_name' => 'カテゴリー',
    ),
    'hierarchical' => true,
    'rewrite' => array('slug' => 'news-category'),
  ));
}
add_action('init', 'register_news_taxonomy');

✅ 6. 管理画面でやること

  • 「お知らせ」投稿タイプに記事を投稿
  • 各投稿にカテゴリー(news_category)を設定
  • 必要なら、カスタムメニューで「カテゴリー一覧」や「お知らせ一覧」リンクを作成

✅ まとめ

やりたいこと必要なファイル・コード
一覧を表示したいarchive-news.php
カテゴリー別に表示したいtaxonomy-news_category.php
ナビゲーションを表示get_terms()でカテゴリ一覧
URLの構造を変えたいrewrite設定を変更+パーマリンク再保存

✉️ あなたのリクエスト教えてください!

「この記事わかりやすかった!」
「他にもこんな記事書いてほしい!」
そんな声を、ぜひXのDMで教えてください!😊📩

できるだけリクエストにお応えして、今後の記事作成に活かしていきます

▶️ Xもフォローしてもらえるとめちゃくちゃ嬉しいです!

hisa

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA