front-page.phpでトップページを作る

骨組みがそろったので、サイトの顔——トップページを作ります。担当ファイルはテンプレート階層で学んだfront-page.php。ヒーロー（大きなキャッチコピー）と、お知らせの最新3件が自動で並ぶセクションを組みます。「記事を公開したらトップにも勝手に載る」——CMSらしさを最初に味わえる回です。

front-page.phpの土台

テーマフォルダにfront-page.phpを新規作成します。このファイルがあると、トップページだけindex.phpではなくこちらが担当になります。

<?php get_header(); ?>

<div class="hero">
  <h1>まいにちに、ふわっと。</h1>
  <p>北の雑貨店シマエナガ堂は、心があたたまる雑貨をお届けします</p>
</div>

<section class="section">
  <h2>お知らせ</h2>
  <!-- ここに最新3件を出す -->
</section>

<?php get_footer(); ?>

ヒーローは今のところ、ただのHTML。まずこれで保存して、トップページの担当が切り替わったことを確認しましょう。

WP_Queryで「最新3件」を取ってくる

お知らせの一覧は、WP_Queryという道具で取り出します。「こういう条件の記事をください」という注文書です。

<?php
$news = new WP_Query([
  'post_type'      => 'post', // 投稿の中から
  'posts_per_page' => 3,      // 3件だけ
]);
?>

注文書を出したら、届いた記事をループで並べます。php超入門で学んだループの「注文書つき」バージョンです。

<section class="section">
  <h2>お知らせ</h2>
  <?php
  $news = new WP_Query([
    'post_type'      => 'post',
    'posts_per_page' => 3,
  ]);
  ?>
  <ul class="news-list">
    <?php while ($news->have_posts()) : $news->the_post(); ?>
      <li>
        <time><?php the_time('Y.m.d'); ?></time>
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
      </li>
    <?php endwhile; wp_reset_postdata(); ?>
  </ul>
</section>

新しく登場した関数は3つだけです。

CSSも当てて「顔」にする

style.cssに、ヒーローとお知らせのスタイルを足します（テーマの名札コメントの下に追記）。

.hero {
  background: #eaf4f6;
  text-align: center;
  padding: 64px 5%;
}
.hero h1 {
  font-size: 32px;
  color: #2a6f7c;
  margin: 0 0 8px;
}
.section {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 5%;
}
.section h2 {
  border-left: 6px solid #2a6f7c;
  padding-left: 12px;
}
.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.news-list li {
  display: flex;
  gap: 16px;
  padding: 10px 4px;
  border-bottom: 1px solid #eee;
}
.news-list time {
  color: #2a6f7c;
  font-weight: bold;
  flex-shrink: 0;
}
.news-list a {
  color: #333;
  text-decoration: none;
}

ここまでできると（CSS配線後）、トップページはこの姿になります。

このレッスンのまとめ

1. トップページの担当はfront-page.php——作った瞬間、index.phpから担当が切り替わる
2. WP_Queryは記事の注文書——post_typeとposts_per_pageで「投稿を3件」のように注文し、ループで並べる
3. 自作の注文ループの最後はwp_reset_postdata()で片づける——セットで手に覚えさせる