固定ページ用テンプレ作成

ここでは、固定ページ(page.php)の作り方を説明します。

目次

• 固定ページ用テンプレート(page.php)を作成する
• 固定ページ用テンプレートpage.phpを作成する
• スラッグ付き固定ページ(page-{スラッグ名}.php)を作成する
• 別の固定ページテンプレートを作成する

固定ページ用テンプレート(page.php)を作成する

固定ページのテンプレートが適用される順番は下記です。page.phpを作成すればindex.phpよりも優先されるのでpage.phpを作成していきます。

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

固定ページ用テンプレートpage.phpを作成していきます。ここでは、index.phpを流用して作ります。

index.phpをコピーしてpage.phpにリネームします。

まずはこのpage.phpが固定ページに適用されるかを確認してみましょう。

<div id=”main” class=”col-md-9″>〜</div>の中を削除して代わりに以下のようにh1タグを追記します。

<?php get_header(); ?>
<section id="content">
  <div id="content-wrap" class="container row pt-3">
    <div id="main" class="col-md-9">
      <h1>固定ページpage.phpです。</h1>

    </div>
    <div id="sidebar" class="col-md-3">
      <?php get_sidebar(); ?>
    </div>
  </div>
</section>
<?php get_footer(); ?>

次にWordPressの管理画面から何か適当な固定ページを作成して、公開してみてください。

先ほど作成したpage.phpのテンプレートが適用されていることがわかります。

ただし管理画面で固定ページに記述したタイトルや本文が反映されていません。これを管理画面で入力したタイトルや本文の内容が反映されるようにpage.phpを編集して行きます。

WordPressのページタイトルおよび本文中身を出力するには、以下の構文を使います。

ここでは、そのまま固定ページ用のテンプレート「page.php」に以下のように追記すると、固定ページの中身を出力してくれます。

■page.phpのソースコード

<?php get_header(); ?>
<section id="content">
  <div id="content-wrap" class="container row pt-3">
    <div id="main" class="col-md-9">
      <?php // ループ開始
      if (have_posts()) :
        while (have_posts()) : the_post();
      ?>
          <h1><?php the_title(); ?></h1> <!-- タイトル取得 -->
          <section>
            <?php the_content(); ?> <!-- 本文取得 -->
          </section>
      <?php // ループ終了
        endwhile;
      endif;
      ?>
    </div>
    <div id="sidebar" class="col-md-3">
      <?php get_sidebar(); ?>
    </div>
  </div>
</section>
<?php get_footer(); ?>

これで、固定ページを表示してみると、管理画面で記述した内容が表示されていることを確認できます。

■上記のWordPress関数の説明

参考コード①

<?php 
if ( have_posts() ) :
while ( have_posts() ) : the_post();
?>
投稿・固定ページのタイトル、本文、カテゴリー、著者、投稿日時、アイキャッチなど情報を表示したりする各種処理を書くことができる
<?php 
endwhile;
endif;
?>

このように、HTMLで作成したテンプレートの中にWordPress用の関数を組み込むことでWordPressの管理画面で入力した設定値や文字列を出力できるようになります。

ここでは、タイトルと本文を出力していますが、他にも投稿日時やカテゴリーなど色々なものを出力できます。これらに関しては投稿(single.php)の作り方の解説の際に紹介します。
 

スラッグ付き固定ページ(page-{スラッグ名}.php)を作成する

独自のレイアウトの固定ページを作りたい場合は、ファイル名を「page-{該当ページのスラッグ名}.php」と変更することで、page.phpよりも優先させることができます。
 

下記のように静的サイトでもともと「contact.html」と「about.html」がある前提で、これをWordPressの固定ページとして読み込む方法を説明します。

STEP1. 固定ページを作成する

まず固定ページを作成していきます。

固定ページ＞新規作成より「お問い合わせ」と「会社情報」ページを作成します。本文は空で構いませんので、スラッグ名を「contact」と「about」と入力して公開します。

■固定ページ「お問い合わせ」を作成。スラッグを「contact」に変更して公開

■固定ページ「会社情報」を作成。スラッグを「about」に変更して公開

STEP2. htmltのファイル名を変更する

つぎに、テーマフォルダ内のhtmlファイルをリネームします。

ここでは下記のように変更します。

• contact.html → page-contact.php
• about.html → page-about.php

ただし、このままだとパスやそのほかWordPressの設定ができておらずレイアウト崩れなどが起きた状態です。

STEP3. WordPressの関数を組み込む

最初に実施したindex.phpのようにget_template_directory_uri();で画像のパスを合わせたり、ヘッダー、フッター、サイドバーもそれぞれ<?php get_header(); ?>、<?php get_footer(); ?>、<?php get_sidebar(); ?>に置き換えるようにしましょう。

以上で完了です。あとは、サイトを確認してページが反映されていることを確認しましょう。

 
お問い合わせフォームからのメール通知機能などの実装については、Contact Form 7などを利用すると良いでしょう。

別の固定ページテンプレートを作成する

固定ページ「page.php」を作成しましたが、1カラムのテンプレートを利用したい場合やヘッダー・フッターを変えたい場合など、複数のレイアウトがあった方が便利な場合があります。

WordPressでは、そういった要件にあわせて任意の固定ページ用のテンプレートを作成することができます。

ここで作成するファイル名は、「pagetemplate-onecolumn.php」にします。名前はなんでも構いません。管理しやすい名前がおすすめです。

元になるテンプレートファイルの「page.php」をコピーして、「pagetemplate-onecolumn.php」を作成します。

pagetemplate-onecolumn.phpの冒頭にコメントで「Template Name」を記載します。

<?php
/**
 * Template Name: 1カラムテンプレート
 */
?>

<?php get_header(); ?>
<section id="content">
  <div id="content-wrap" class="container row pt-3">
    <div id="main" class="col-md-9">
      <?php
      if (have_posts()) :
        while (have_posts()) : the_post();
      ?>
          <h1><?php the_title(); ?></h1>
          <section>
            <?php the_content(); ?>
          </section>
      <?php
        endwhile;
      endif;
      ?>
    </div>
    <div id="sidebar" class="col-md-3">
      <?php get_sidebar(); ?>
    </div>
  </div>
</section>
<?php get_footer(); ?>

こうすることで、固定ページの編集画面のテンプレート設定箇所で「1カラムテンプレート」が選択できるようになります。

なお、pagetemplate-onecolumn.phpはワンカラム用のテンプレートにするので、サイドバーの以下セクションを削除します。

<div id="sidebar" class="col-md-3">
  <?php get_sidebar(); ?>
</div>

また、メインカラムのdivのクラスcol-md-9をcol-md-12に変更します。

・・・
<div id="main" class="col-md-12">
  <?php
  if (have_posts()) :
    while (have_posts()) : the_post();
  ?>
・・・

これで、1カラムのテンプレートが作成できました。

管理画面の固定ページで1カラムテンプレートを選択できるようになったので、タイトルと文章を適当に記述してみましょう。

テンプレートに「1カラムテンプレート」を選択して、公開してみましょう。

1カラムのページができていることがわかります。

以上で、固定ページの別テンプレートの作成方法は完了です。このテンプレートは固定ページの中で最も高い優先順位になります。

チェックテスト

<?php get_header(); ?>
<section id="content">
 <div id="content-wrap" class="container row pt-3">
   <div id="main" class="col-md-9">
     <h1>こちらは会社概要ページです</h1>
   </div>
   <div id="sidebar" class="col-md-3">
     <?php get_sidebar(); ?>
   </div>
 </div>
</section>
<?php get_footer(); ?>