固定ページテンプレート（page.php）を作成する

固定ページを表示するためのテーマテンプレートファイル「page.php」を作成します。

page.phpのメインを作る

1.確認用のページを表示

まず、これからpage.phpの確認に使うためのページを見てみましょう。

WordPress管理画面から、固定ページ > 固定ページ一覧を開きます。
「園長からの挨拶」を表示してください。

まだ固定ページ用のファイルがないので、index.phpが使われます。
下図のように、「URLは固定ページのものだけれど、見た目はトップページ」の状態になるはずです。

このページは表示確認用に、開いたまま、次の作業に進んでください。

2.page.phpを作成する

デザインだと「園長からの挨拶（about1.html）」のレイアウトは、前回作った投稿ページとよく似ています。
ここまではhtmlを元にテンプレートファイルを作ってきましたが、今回はsingle.phpをベースに調整していきましょう。

page.phpを作成

single.phpを複製して、page.phpを作ります。
ファイルを直接コピーするか、エディタの“別名で保存や名前をつけて保存”を使ってpage.phpを作成してください。

固定ページに適用されるか確認

1で開いた「園長からの挨拶」の表示ページを、ブラウザで再読み込みしてください。

表示が切り替わったら、page.phpが適用されています。

3.固定ページのレイアウトに整える

メインカラムの方で、投稿ページ（single.php）とはレイアウト・配置が異なる部分を調整します。
調整箇所は以下の2つです。

• タイトル上のアイキャッチ画像は削除
• 最終更新日は本文の下に移動する

page.php

<?php while (have_posts()) : the_post(); ?>
  <h1 class="toptitle text-green">
    <?php the_title(); ?>
  </h1>
  <div class="post-body">
    <?php the_content(); ?> 
  </div>
  <div class="timestamp">
    最終更新日：<?php echo the_modified_date( ); ?>
  </div>
<?php endwhile; ?>

　　↓

about1.htmlと同じ順番でタイトルから表示されていれば、メインカラムは完成です。

3.管理画面からの設定

固定ページ作成時、画像をそのまま挿入していると、上図の様に男性の画像が大きく表示されます。

投稿内容にある画像は、投稿/固定ページの編集画面から調整できます。
編集画面で画像を選択した状態で、以下の設定を行ってください。

• 中央配置：トップツールバーの配置アイコンから“中央揃え”を選択
• 画像サイズ：ブロックメニューの“画像の寸法”を変更（50％にする or 数値入力で360px）

サイドバーの表示を作る

固定ページのサイドバーでは、“ズーロッパとは”の子ページとして設定した固定ページの一覧を表示させます。

1.サイドバーのHTML部分を調整

固定ページのサイドバーは、投稿（single.php）のサイドバーと少しデザインが違います。
「園長からの挨拶」のhtmlページを見ながら整えていきましょう。

講座素材をご利用の場合は、まず、以下2つを変えてください。

• h2タグ内のテキストを「ズーロッパとは」に変える
• ulタグのクラスをabout1.htmlと同じにする

そして、about1.htmlからli要素を１つ（<li> ~ </li>まで）コピー。
page.phpで、サイドバーのループ開始タグの直下に貼り付けてください。

2.テンプレートタグに置き換え

ループ開始タグ下に貼り付けたliタグの中身を、WordPressテンプレートタグに置き換えます。

• 投稿タイトル
• aタグのリンク先

元々あった、アイキャッチ付きの投稿表示は削除してください。
ここまでの調整で、page.phpのサイドバー部分は以下のようになっています。

page.php

<aside class="sidebar section-padding">
  <h2 class="text-center">
    ズーロッパとは
  </h2>
  <div class="text-center">
    <img src="<?php echo get_template_directory_uri();?>/images/line.png" width="400" height="6" alt="">
  </div>
  <ul class="pagelist">
    <?php
      $args = array(
        'post_type' => 'post',
        'category_name' => 'event',
        'posts_per_page' => 4,
      );
      $event_posts = new WP_Query($args);
      while ($event_posts->have_posts()): $event_posts->the_post();
    ?>
      <li class="flex-container flex-all-row">
        <a href="<?php the_permalink() ?>">
          <?php the_title(); ?>
        </a>
      </li>
    <?php endwhile; wp_reset_postdata(); ?>
  </ul>
</aside>

3.WP_Queryを変更する

最後に、WP_Queryで設定している取得条件を変更します。

今回の固定ページで取り出したいのは、固定ページ。
特定の親ページを持つ固定ページは、パタメーターpost_parentを使うと指定できます。

'post_parent' => '親ページのID',

固定ページのIDも、編集画面のURLから確認できます。
post.phpの後に続く「post=●」という表示。この●にあたる数字が、固定ページのIDです。

page.phpでWP_Queryの絞り込み条件を変更しましょう。
上図の場合はIDが 5 なので、「`'post_parent' => '5',`」としています。

page.php

<?php
  $args = array(
    'post_type' => 'page',// 取得したい情報の種類
    'post_parent' => '5',// 取得したいページの親ページID
  );
  $about_children = new WP_Query($args);
  while ($about_children->have_posts()): $about_children->the_post();
?>

page.phpを上書き保存して、表示を確認してみましょう。

4.並び順を指定する

サイドバーに「ズーロッパとは」の子ページ一覧は表示されました。
しかし、編集画面のページ属性で“順序”を使って作った順番（固定ページ一覧の表示順）と順序が違いますね。

設定した“順序”をサブループで使うためには、WP_Queryでパラメーターを使って「順序に従って並べてください」と指示する必要があります。以下の２つを追加しましょう。

• 投稿を取り出す順番の基準を設定するmenu_order
• 昇順（0,1,2...と数字を小さい順から並べる）を指定するorder

page.php

<?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();
?>

　　↓

サイドバーに表示される投稿タイトルの順番が変わりました。

wp_head( )とwp_footer( )を追加する

ここまでで、page.phpの表示もほぼ完成しました。
作成したテンプレートファイル部分は問題ないものの、編集画面で設定した“画像の位置（中央揃え）”が効いていません。

これは、今適用中のテーマではWordPressの基本設定が読み込めていないためです。
wp_head( )とwp_footer( )を使って、WordPress側が出力したいCSSなども反映できるようにしましょう。

wp_head( )

wp_head( )はテーマのhead要素内に、WordPress側で用意された情報を出力するために使う関数。
説明は難しそうですが、書くのはたった一行だけ。

<?php wp_head(); ?>

投稿画面で設定した“中央揃え”を表示時に適用するためのCSSも、wp_head( )を使うと出力されます。
今回は使っていませんが、プラグインのCSSやmeta設定などもwp_head( )で出力されるものが結構あります。逆から言えば、抜けていると上手く機能しない危険性もあるコードです。

page.phpにwp_head( )を入れてみましょう。
書く場所は、</head>タグの直前です。

page.php

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?php the_title( ); ?> | <?php bloginfo('name'); ?></title>
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
  <?php wp_head(); ?>
</head>

page.phpを上書き保存して、表示を確認してみましょう。

画像の“中央揃え”が、表示画面でも適用されました。
ヘッダーの上部、赤い点線で囲った空白が出来ていますが、これは次のwp_footer( )に繋がる部分なので、そのままでOKです。

wp_footer()

wp_footer( )も、テーマファイルへWordPressから情報を出力するための関数です。
スクリプトなど、ページの最後に読み込んで欲しいものは、wp_footer( )で出力する仕組みになっています。

<?php wp_footer(); ?>

コードも似ていますね。
先に読み込みたいか、最後に読み込んで欲しいかで、wp_head( )とwp_footer( )に２分しているイメージです。

page.phpにwp_footer( )も追加してみましょう。
こちらは最後に読み込みたいものなので、</body>タグの直前に書きます。

page.php

  <footer class="section-padding">
    <div class="container text-center">
      footer
    </div>
  </footer>
  <?php wp_footer(); ?>
</body>
</html>

page.phpを上書き保存して、表示ページを再読み込みしてください。
先程できたページ上部の空白に、WordPressの管理メニューが表示されたら上手くできています。

これでpage.phpは完成です。
index.phpとsingle.phpにも、同様にwp_head( )とwp_footer( )を挿入しておいてください。