page.phpで会社案内ページを作る

トップページの次は、会社案内のような固定ページの担当——page.phpを作ります。ここで書くコードは、実はこの先のsingle.phpともほぼ共通。「1件の内容を表示する」テンプレートの基本形を、この回で手に入れます。

page.phpの基本形

<?php get_header(); ?>

<main class="section">
  <?php while (have_posts()) : the_post(); ?>
    <article>
      <h1 class="page-heading"><?php the_title(); ?></h1>
      <div class="entry-content">
        <?php the_content(); ?>
      </div>
    </article>
  <?php endwhile; ?>
</main>

<?php get_footer(); ?>

the_title()がページのタイトル、the_content()がブロックエディタで書いた本文まるごとを出力します。管理画面で編集した内容が、この2つの札から流れこんでくるわけです。

「1件なのにループ？」問題

固定ページは1件しか表示しないのに、whileのループで囲むのは変に見えますよね。これはWordPressの流儀で、表示対象が1件でも複数でも、記事は必ずループで受け取ることになっています。

• ループが準備運動（the_postがデータを使える状態にセットする）を兼ねているため、1件でも省略しない
• おかげで、一覧も詳細も同じ型で書ける——覚えることが減る

「1件でもループ。ループは準備運動」とだけ覚えれば十分です。

front-page.phpとの違いに注目

前回はWP_Queryで自分から注文しました。今回は注文書がありません。それでも動くのは、URLに応じてWordPressが最初から記事を用意してくれているからです。

• 会社案内のURLに来た→WordPressが「会社案内」の固定ページを準備→page.phpはループで受け取るだけ
• これをメインループと呼びます。注文書（WP_Query）は「メインとは別のものが欲しいとき」だけ使う

この区別がつくと、テーマのコードがぐっと読めるようになります。

見出しまわりのCSS

会社案内ページ用に、少しだけスタイルを足しておきます。

.page-heading {
  background: #eaf4f6;
  padding: 28px 5%;
  margin: 0 0 24px;
  font-size: 24px;
  color: #2a6f7c;
  text-align: center;
}
.entry-content {
  max-width: 700px;
  margin: 0 auto;
}

このレッスンのまとめ

1. 固定ページの担当page.phpは、ループ＋the_title＋the_contentが基本形——single.phpもほぼ同じ型
2. 1件でもループで受け取るのがWordPressの流儀（ループは準備運動を兼ねる）
3. URLが決めた記事を受け取るメインループと、自分で注文するサブループ（WP_Query）を区別する