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

目次

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

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

優先順位テンプレートファイル名備考
1$custom.phpカスタムテンプレートが選択されている場合
2page-{スラッグ名}.php
3page-{ID}.php
4page.php ★今から作成
5singular.php
6index.php

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

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

index.phpをコピーしてpage.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が適用されていることがわかる

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

WordPressのページタイトルおよび本文中身を出力するには、以下の構文を使います。
ワードプレスのループ文
※h1,sectionタグはこちらで任意に決めたHTMLタグなので、h2でもdivでも構いません。
 

ここでは、そのまま固定ページ用のテンプレート「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関数の説明

項目内容
ループWordPressの投稿や固定ページなどの中身を表示するために使われる構文です。参考コード①のような形でセットで使われます。
The Loop – Theme Handbook | Developer.WordPress.org
have_posts() – Function | Developer.WordPress.org
the_post() – Function | Developer.WordPress.org
the_title()投稿や固定ページのタイトルを表示します。前述のwhileループの中で使用します。the_title() – Function | Developer.WordPress.org
the_content()投稿や固定ページの本文を出力します。 前述のwhileループの中で使用します。参考:the_content() – Function | Developer.WordPress.org

参考コード①

<?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の固定ページとして読み込む方法を説明します。
 
webst8フォルダ内にcontact.htmlとabout.htmlを用意する

contact.htmlとabout.htmlのデザイン

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

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

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

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

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

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

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

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

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

  • contact.html → page-contact.php
  • about.html → page-about.php
ファイル名をabout.html→page-about.php、contact.html→page-contact.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」を作成します。
page.phpをコピーして、pagetemplate-onecolumnを作成

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カラムテンプレート」が選択できるようになります。

「Template Name:」で設定したテンプレート名が選べるようになっている

なお、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カラムテンプレートを選択して固定ページを公開する

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

1カラムテンプレートで作成されたページ

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

チェックテスト

チェックテスト下記、コードにおいて、下記表示をするために必要なcssプロパティはどれかdiscordにて共有ください。

TOP