固定ページ用テンプレートpage.phpを作る [WordPressテーマ作成の手順11]

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

本日のINDEX

固定ページは、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。

これらより優先される、最優先のテンプレートが「カスタムテンプレート」。
スラッグやIDなんて関係なく、好きな名前をつけられる。
ただし、テンプレートの冒頭に、以下書式で名前(Template Name)をコメントで宣言してあげる必要アリ。

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

テンプレート名はわかりやすいように、上のソースでつけた名前と同じ(例えば「abcde」という名前をつけたなら「abcde.php」)がいいけど、別の名前でもOK。テンプレート内の宣言のほうが大事。
こうすることで、固定ページの編集画面の「ページ属性」で、テンプレートが選べるようになる。

(本ブログでは、カスタムテンプレートを使った固定ページで「全記事一覧」を作っています。詳細は後日)

テンプレートの種類と優先順位については、こちらで一覧になっててわかりやすいかも:
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」を使ってメールフォームを設置する件をメモ。

Share on FacebookTweet about this on TwitterShare on Google+

関連記事

WordPressの Embedカードのリンクを別ウィンドウで開く(PCのみ。スマホ・タブレットはそのまま)

WordPressの Embedカード(ブログカード)のリンクは、デフォルトでは同ウィンドウで開くようになっていますが、これを別ウィンドウ(別タブ)で開くように [記事を読む]

WordPressの Embedカードのスタイルを編集する方法2つ

前回の記事で、WordPress 4.5 の Embedカード(ブログカード)の「テンプレートの構成」や「HTML要素のクラス名」などを調べました。これを元に、 [記事を読む]

WordPress4.5で Embedカードの PHPファイルの構造がだいぶ変わったみたい

前回から WordPressの Embedカード(ブログカード)について調べたことをメモっています。 今回は Embedカードの PHPファイルの構造について [記事を読む]

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

^