今回は固定ページ用のテンプレート「page.php」を作ります。
手順は、前回のWordPressのテーマ作成10で作った「single.php」をコピーして「page.php」って名前にし、記事を表示する部分のパーツテンプレート「content.php」もコピーして「content-page.php」に作り替える。

固定ページは、WordPressをCMSとして使うなら、おおいに活用するページ。

「投稿」は時系列で並ぶように設定され、カテゴリ分けやタグも付けられるブログ記事用。
「固定ページ」は投稿と違って、
・メニューでの表示順序を自由に変えられる
・親ページ子ページの階層設定ができる
・ページごとに独自のテンプレートを設定できる
などと編集の自由度が高い。

本サイトはブログ形式なので、投稿中心だが、「About」ページや、インデックスページに固定ページを利用した。
投稿とは若干レイアウトを変えたいので（カテゴリーが無い。アイキャッチ画像を使わないなど）、それに合うようにテンプレートを仕上げていった。

single.phpをコピーしてpage.phpを作る

前回作ったsingle.phpをコピーし、ファイル名をpage.phpに変更。
このpage.phpという名のファイルがあれば、WordPressは固定ページ用テンプレートとして使用する。

固定ページ用のテンプレートについて

WordPressは、固定ページはpage.phpで表示する。これが無ければindex.phpが使われる。

ちなみに、固定ページのスラッグやIDを指定したテンプレートを作れば、page.phpより優先され、ある固定ページに特定のテンプレートを使うことができる。
「page-スラッグ.php」「page-13.php（数字がID）」といった具合で「-（ハイフン）」でスラッグやIDをつないで指定。

例えば、page-about.php というテンプレートを作っておけば、スラッグを「about」と指定した固定ページは、page.phpがあってもこのテンプレートで表示される。
また、IDが13である固定ページなら、page-13.php というテンプレートを適用する。
スラッグのほうがIDより優先度は高い。

＊固定ページのIDとは（投稿も同じ）
　管理画面の各ページの編集画面のアドレスバーで、「post=」で確認できる。
　例えば、「http://○○○.com/wp-admin/post.php?post=13&action=edit」だったら、IDは13。

<?php
/*
Template Name: abcde //好きな名前をつける
*/
?>

テンプレートの種類と優先順位については、こちらで一覧になっててわかりやすいかも：
WordPress「テンプレート」の優先順位 | 超初心者のサーバー移転とドメイン移管＆ついでにWordPressも！

固定ページの表示部分を整える

page.phpを編集する。

記事本文の表示部分も投稿と同じパーツテンプレート（content.php）は使えないので、content-page.php を新たに作って読み込むことにした（9行目）。
固定ページも、投稿と同じく WordPresループで記事を書き出すことに注目。

また、single.phpと違って「関連記事」は必要ないので、それも削除した。

<?php get_header();?>
<!--------------MainContent--------------->
<article id="main-content">
<div class="grid"><!-- GRID MOTHER -->
<?php
if (have_posts()) : 
  while (have_posts()) :
    the_post();
    get_template_part('content-page');
  endwhile;
endif;
?>
</div><!-- ^ .grid = GRID MOTHER END-->
</article><!-- ^ main-content END-->
<?php get_sidebar();?>
<?php get_footer();?>

上記ソースの div.grid は、本ブログのグリッドシステムによるものです。

パーツテンプレートcontent-page.phpを作る

single.phpの中に仕込んであったパーツテンプレート「content.php」をコピーして、「content-page.php」と名前を変え、編集する。

<!--POST BOX-->
<div class="col-full">
  <div class="wrap-col">
    <article class="postBox">
     <div class="metaData clearfix">
     <p id="iconDate"><img src="<?php bloginfo('template_url');?>/images/icon_dat_wht.png"/><?php the_time('Y年n月j日'); ?></p>
     </div><!-- ^ .metaData END-->
     <div class="entry_heading clearfix">
     <h1><?php the_title();?></h1>
     </div><!-- ^ .entry_heading END-->
     <div class="entry_body">
     <?php the_content();?>
     </div><!-- ^ .entry_body END-->
     <div class="entry_body_bottom"></div>
    </article><!-- ^ .postBox END-->
  </div><!-- ^ .wrap-col END-->
</div><!-- ^ .col-full END-->
<!--POST BOX END-->

上記ソースの div.col-full, div.wrap-col は、本ブログのグリッドシステムによるものです。

投稿ページと違って、カテゴリやアイキャッチ画像を使わないので、
日付（6行目）、タイトル（9行目）、本文（12行目）のみを残し、他は削除した。
固定用の記事本文も、投稿と同じく テンプレートタグ the_content() で出力される。

さあこれで、固定ページ用のテンプレートはできた。
本ブログでは、固定ページで「About」を作り、そこにメールフォームを設置した。
次回はプラグイン「Contact Form 7」を使ってメールフォームを設置する件をメモ。

Facebook

Twitter