お知らせの一覧と詳細を作る

企業サイトでいちばん更新されるのがお知らせです。今回は、その一覧ページと記事詳細ページを一気に作ります。テンプレートはhome.phpとsingle.php——ここまでの道具（ループ・the_title・the_content）だけで、もう両方組めます。

先に設定：「投稿ページ」を決める

WordPress特有のクセがひとつ。投稿の一覧をどのURLに置くかは、管理画面で指定します。

1. 「固定ページ」→「新規追加」でタイトル「お知らせ」の空の固定ページを作って公開（本文は空でOK）
2. 「設定」→「表示設定」を開く
3. 「ホームページの表示」を「固定ページ」にし、ホームページ＝トップ用の固定ページ（例：ホーム）、投稿ページ＝お知らせを指定

これで/お知らせ/のURLが「投稿の一覧」になり、担当テンプレートがhome.phpに決まります。「一覧の置き場所は設定、見た目はテンプレート」という分担です。

home.php——一覧ページ

front-page.phpのお知らせ欄とよく似ていますが、こちらはメインループ（自分でWP_Queryを書かない）で受け取ります。

<?php get_header(); ?>

<h1 class="page-heading">お知らせ</h1>

<main class="section">
  <ul class="news-list">
    <?php while (have_posts()) : the_post(); ?>
      <li>
        <time><?php the_time('Y.m.d'); ?></time>
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
      </li>
    <?php endwhile; ?>
  </ul>

  <div class="pagination">
    <?php the_posts_pagination(); ?>
  </div>
</main>

<?php get_footer(); ?>

新顔はthe_posts_pagination()。記事が増えたとき、「1 2 3 …」のページ送りを自動で出してくれます。1ページに何件出すかは「設定」→「表示設定」の「1ページに表示する最大投稿数」で決まります。

single.php——記事の詳細

一覧のリンクを押した先、記事本体のページです。page.phpとほぼ同じ型で、日付と戻り導線だけ足します。

<?php get_header(); ?>

<main class="section">
  <?php while (have_posts()) : the_post(); ?>
    <article>
      <h1 class="page-heading"><?php the_title(); ?></h1>
      <p class="entry-meta"><time><?php the_time('Y年n月j日'); ?></time></p>
      <div class="entry-content">
        <?php the_content(); ?>
      </div>
    </article>
  <?php endwhile; ?>

  <p><a href="<?php echo get_post_type_archive_link('post'); ?>">← お知らせ一覧へもどる</a></p>
</main>

<?php get_footer(); ?>

page.phpと見比べてください——型がまったく同じなのがわかるはず。「1件の内容を表示する基本形」が身についていれば、詳細ページはもうボーナスステージです。

.entry-meta {
  text-align: center;
  color: #2a6f7c;
  font-weight: bold;
  margin-top: -12px;
}
.pagination {
  text-align: center;
  margin-top: 24px;
}

このレッスンのまとめ

1. 投稿一覧の置き場所は「設定」→「表示設定」で決める（投稿ページの指定）。見た目の担当はhome.php
2. home.phpはメインループで一覧を回し、the_posts_pagination()でページ送りを自動化
3. single.phpはpage.phpと同じ基本形＋日付（the_time）と戻り導線