専用の固定ページテンプレート（page-slug.php）作成

slug（スラッグ）を使って、固定ページを一覧表示するためのテーマテンプレートを作ります。

専用テンプレートを割り当てる

固定ページの「ズーロッパとは」を使って、子ページを一覧表示させます。
まずは「ズーロッパとは」を表示するときだけに適用される、テーマテンプレートファイルを作りましょう。

該当の固定ページを確認・表示する

WordPress管理画面、固定ページ一覧を開きます。
専用のテンプレートを使いたい固定ページ（ズーロッパとは）の、編集画面を開いてください。

固定ページの設定から、URLの末尾が「about」になっていることを確認します。
そのまま、固定ページを表示してみましょう。

前回のレッスンで作成したpage.phpを使って、ページが表示されているはずです。

このページで表示を確認していくので、ブラウザでそのまま開いていてください。

page-about.phpを追加

「ズーロッパとは」を表示するときだけに適用される、テーマテンプレートファイルを作ります。
ファイル名はpageの後にハイフンとslug（URLの末尾と同じ文言）を追加するので、page-about.phpになります。

page.phpを複製して、page-about.phpを作成してください。

作成したpage-about.phpを開いて、</header>の下から<footer>までを削除します。

page-about.php

ファイルを上書き保存。開いている「ズーロッパとは」のページを再読み込みします。

上図のように、コンテンツ部分が何も表示されなければpage-about.phpが適用されています。
これで専用テンプレートファイルの割り当てはできました。

page-about.phpの中身を書く

必要なHTMLを追加

about.htmlを開いて、mainタグから1つめの</article>までをコピー。
page-about.phpの</header>下に、コピーしたコードを貼り付けます。

page-about.phpで、以下の点を修正します。

• 閉じタグ（</div>と</main>）を書き足す
• h1下にあるline.pngのパスをWordPress仕様に変更

page-about.php上書き保存して、「ズーロッパとは」のページを再読み込み。
追加したHTMLが表示に反映されているか、確認してください。

WordPressのループを書く

書いてWordPressから情報を取得・表示できるようにします。
ループタグは、前回作ったpage.phpが使えますね。

page.phpのサイドバー部分で使っているサブループ（WP_Queryを使ったループ）の開始タグをコピーしてください。
それを、page-about.phpの<article>タグの上に貼り付けます。

次に、page-about.phpの</article>タグの下に、ループの終了タグを入れます。
ここまでのコードは、以下のようになります。

page-about.php

<main class="bg-base abouts">
  <div class="container">
    <section class="section-padding">
      <h1 class="text-green text-center">
        ズーロッパとは
      </h1>
      <div class="text-center">
        <img src="<?php echo get_template_directory_uri();?>/images/line.png" width="400" height="6" alt="">
      </div>
    </section>
    <?php
      $args = array(
        'post_type' => 'page',// 取得したい情報の種類
        'post_parent' => '5',// 取得したいページの親ページID
        'orderby' => 'menu_order', // 固定ページの「順序」を使う
        'order' => 'ASC', // 昇順で並べる
      );
      $about_children = new WP_Query($args);
      while ($about_children->have_posts()): $about_children->the_post();
    ?>
      <article class="section-padding">
        <div class="flex-container">
          <div class="about-image card">
            <a href="#">
              <img src="images/about.png" width="776" height="487" alt="パンダ">
            </a>
          </div>
          <div class="about-description">
            <a href="#">
              <h2 class="text-green">
                都心でいちばん動物とふれあえる場所
              </h2>
            </a>
            <p>
              動物園で、ありのままの動物たちの生活や行動、しぐさの中に「凄さ、美しさ、尊さ」を見つけ、「たくさんの命あふれる空間の居心地の良さ」を感じてほしい。家畜・ペット種との触れ合いを通じて「命の温もり、命の尊さ」を感じてほしい。そして、野生動物の保護や環境問題を考えるとき、動物たちは私たちと対等な生き物なんだと思うきっかけになれる、そのような動物園でありたいと思っています。
            </p>
          </div>
        </div>
      </article>
    <?php endwhile; wp_reset_postdata(); ?>
  </div>
</main>

この時点で「ズーロッパとは」のページを再読込すると、下図のようにarticle要素部分が複数表示されます。

ループ内をテンプレートタグに置き換える

ループタグ内のHTMLをWordPressのテンプレートタグに変更し、投稿の情報を出力しましょう。
変更するのは以下の５箇所です。

1. 画像を囲むaタグのリンク先
2. アイキャッチ画像
3. h2を囲むaタグのリンク先
4. 投稿タイトル（h2タグの中身）
5. 投稿の抜粋（h2下のpタグ）

page-about.php

固定ページの画像やタイトルが、それぞれ表示されていたらpage-about.php完成です。