WordPressオリジナルテーマの作り方④（固定ページ編）

今回は、WordPressオリジナルテーマの作り方【第4回】固定ページ編となります。

WordPressオリジナルテーマの作り方は、当記事を含め以下の記事があります。

WordPressオリジナルテーマ制作の記事

今回は、固定ページの作り方について解説していきます。

また、記事の最後にはWordPressのおすすめ教材をご紹介させて頂きます。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

30日間でWeb制作を学べる
完全無料
現役エンジニアへの質問無制限
オンラインの動画学習なので時間場所を問わず勉強可能
最大4回の学習サポート面談
受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼完全無料／

ZeroPlus Gate公式サイト

先着1日25名まで！

WordPressオリジナルテーマ：固定ページの作り方は2つ

固定ページの作り方は2つあります。

テンプレートをページごとに作成（page-〇〇.php）
固定ページの編集画面でテキストエディタに直書き（page.php）

このどちらかになります。

管理画面の固定ページから各ページを新規追加するのは共通です。

テンプレートをページごとに作成

この場合は固定ページの数だけ『page-〇〇.php』というテンプレートを作る必要があります。

例えば『会社概要・お問い合わせ・採用情報』の3ページであれば、

page-company.php
page-contact.php
page-recruit.php

という感じになります（〇〇の部分は任意です）

コンテンツ（HTMLに書いたコード）は各テンプレートに書きます。

固定ページ → 新規追加で作成したページには何も書きません。

固定ページの編集画面でテキストエディタに直書き

この場合テンプレートは『page.php』の1つだけで大丈夫です。

こちらは『固定ページ → 新規追加』で作成したページに、それぞれのコンテンツを書きます。

HTMLのコードをそのままコピペに近いです。

どちらの方法で作るか？

ページごとにテンプレート作成

・テンプレート（phpファイル）にコードを書く
・固定ページの編集画面には何も書かない

固定ページの編集画面に直書き

・テンプレート（phpファイル）には書かない（※）
・固定ページの編集画面にコードを書く（HTMLをコピペ）

※ テンプレートには書かないと書きましたが、固定ページの編集画面に書いたコードを呼び出すコードやヘッダー、フッターなどの共通部分を読み込むコードは書きます（コンテンツは書かないという意味です）

どちらの方法で作るかは人によって違うと思いますが、前者のページごとにテンプレートを作成した方が修正がしやすいので、私は特に指定がない限りこの方法で作成しています（『こちらの方法で』など指定されたことはありません）

後者の場合、固定ページ編集画面のテキストエディタにコードをコピペするのですが、後から編集しようとすると非常に見にくいです（やってみると分かると思います）

という事で、ページごとにテンプレートを作成する方法を中心に解説していきます。

固定ページの作り方①：ページごとにテンプレートを作成

まずは管理画面左側の『固定ページ → 新規追加』をクリックします。

WordPress管理画面：固定ページ → 新規追加

すると次のような画面になるので、名前は何でも構いませんが今回は『HOME』とタイトルを付けて右の方にある『公開』ボタンをクリックします（プラグインのClassic Editorを適用しています）

WordPress固定ページ編集画面：タイトル入力

タイトルの下の方にある中身（ビジュアルエディタ、テキストエディタ）は何も書かなくて大丈夫です。

これがトップページになります。

ついでに記事一覧ページ用に『BLOG』という固定ページも同様に作っておきます。

これでこの状態になります。

WordPress管理画面：固定ページ2つ作成

そしてトップページを『HOME』、記事一覧ページを『BLOG』とするために、管理画面左側の『設定 → 表示設定』を開きます。

WordPress管理画面：設定 → 表示設定

次にホームページの表示を『最新の投稿』ではなく『固定ページ』を選択して、以下のように設定します。

ホームページ → HOME
投稿ページ → BLOG

WordPress管理画面：表示設定

ちなみに今回トップページである『HOME』はfront-page.phpで、記事一覧ページである『BLOG』はhome.phpとなります（home.phpがない場合はindex.phpが記事一覧となります）

あとは1ページに表示したい最大投稿数も設定しておきます。

最大投稿数はテンプレート側で設定することも可能で、その場合はページネーションの関係で1にしておいた方がいいです（ちょっと難しい話なので一旦後回しでOKです）

また、ローカル環境では検索エンジンは関係ありませんが、テストサーバーにアップした時は『検索エンジンがサイトをインデックスしないようにする』にチェックを入れた方がいいので、ここでチェックを入れてしまってもOKです。

本番サーバーに移行して公開する時にはチェックを外すのを忘れないようにしましょう！

注意ポイント

検索エンジンでの表示にチェックを入れないと、サーバーにアップした時点でサイトが公開されてしまいます。

ここまで設定が出来たら下の『変更を保存』をクリックします。

そしてもう一度固定ページ一覧を見ると『HOME』がフロントページ、『BLOG』が投稿ページに設定されたのが分かります。

WordPress固定ページ：フロントページと投稿ページ設定完了

各固定ページのテンプレートを作成

次は固定ページのテンプレートを作成します。

これはページの数だけ必要になります。

最初の方でも書きましたが、例えば『会社概要・お問い合わせ・採用情報』の3ページあれば以下のようになります。

page-company.php
page-contact.php
page-recruit.php

前回トップページ編ではトップページはこのようになりました。

<?php get_header(); ?>
<main>
  <h1>大見出し</h1>
  <section>
    <h2>コンセプト</h2>
    <div>
       <img src="<?php echo get_theme_file_uri( '画像パス' ); ?>" alt="" />
    </div>
    <p>文章が入ります</p>
  </section>
</main>
<?php get_footer(); ?>

固定ページも同様にHTMLをまるっとコピペした後『header.php』と『footer.php』の部分は削除して、ヘッダーとフッターを読み込みます。

ただし、上記トップページ（front-page.php）とは異なる点があります。

固定ページ（page-◯◯.php）ではこのようになります（会社概要の場合）

<?php
/*
Template Name: 会社概要
*/
get_header();
?>
<main>
  <h1>大見出し</h1>
  <section>
    <h2>コンセプト</h2>
    <div>
      <img src="<?php echo get_theme_file_uri( '画像パス' ); ?>" alt="" />
    </div>
    <p>文章が入ります</p>
  </section>
</main>
<?php get_footer(); ?>

ヘッダーを読み込む所に『Template Name』があります。

これはテンプレートの名前を設定する所で、上記は会社概要ページなので『会社概要』と名付けました（これは『page-company.php』です）

これで管理画面の固定ページ編集画面から『会社概要』というテンプレートを選択できる様になりました。

同様に『お問い合わせ』『採用情報』を作ります。

また記事一覧は『home.php』で作りましたが、これは『Template Name』は書かなくてOKです（page-◯◯.phpではないので）

記事一覧ページの作り方は以下の記事を参照下さい。

あわせて読みたい

: WordPressオリジナルテーマの作り方⑥（記事一覧ページ編）
続きを見る

ヘッダーの読み込みは？

『Template Name』の下に『get_header』があるので、トップページの『front-page.php』で書いた<?php get_header(); ?>は不要です。

固定ページを新規追加する

次に先ほど作成したトップページ（HOME）や投稿ページ（BLOG）と同様に、他のページも新規追加します。

すると一覧はこのようになります。

WordPress管理画面：固定ページ一覧

そしてこれら新規追加したページとテンプレートを紐付ける作業をします。

例として会社概要の編集画面を開きます（タイトルか編集をクリック）

WordPress管理画面：固定ページ（会社概要を編集）

そして右の『ページ属性』にある『テンプレート』のメニューを開くと、これまで作成した固定ページのテンプレート名が表示されます。

WordPress固定ページ編集画面：テンプレート選択

これは先ほど『Template Name』で名付けたテンプレート名になります（テンプレート名は任意です）

ここで紐付けたいテンプレート名を選択すればいいので、ここでは『会社概要』を選択して右上の『更新』をクリックすれば完了です。

パーマリンク

また左上のパーマリンクが『会社概要』になっています。

WordPress固定ページ：パーマリンク

これはページタイトルがそのまま反映されているだけですが、ここは日本語にするのはあまりよろしくありません。

例えばパーマリンクが『会社概要』のままアドレスバーや外部サービスにコピペした場合、このようにURLが長くなります。

パーマリンクが日本語の場合

・WordPress編集画面上
→ http://test.local/会社概要/

・上記URLをアドレスバーなどにコピペ
→ http://test.local/%e4%bc%9a%e7%a4%be%e6%a6%82%e8%a6%81/

ぱっと見で何のページか分からないし、他にも色々とデメリットがあるのでここは英語にしましょう。

編集をクリックすれば変更可能です。

WordPress固定ページ：パーマリンク編集

WordPress固定ページ：パーマリンク入力

WordPress固定ページ：パーマリンク編集完了

これで『会社概要』から『company』に変更出来ました。

固定ページの中身

中身については先ほど『HTMLをまるっとコピペ』と書きましたが、そのままではダメな箇所があります。

これは案件によって様々なのですが、ここでは良くある2つについて解説します。

imgタグ

これは前回の記事にも書きましたが、以下のように変更します。

imgタグの書き換え

・変更前
→ <img src="画像パス" alt="" />

・変更後
→ <img src="<?php echo get_theme_file_uri( '画像パス' ); ?>" alt="" />

この<?php echo get_theme_file_uri(); ?>という関数が変更点になります。

ここで注意して欲しいのがuri()の中の『' '（シングルクォーテーション）』もしくは『 " "（ダブルクォーテーション）』です。

どちらでも大丈夫ですが、これがないと画像が反映されません。

サイト内リンク

これはサイト内の別のページに飛ぶためのリンクですね。

例えばWordPressではなく静的サイトの場合『会社概要（company.html）』に飛びたい場合はこのようになります。

<a href="company.html">会社概要</a>

これをWordPressではこのようにします。

<a href="<?php echo esc_url( home_url( '/' ) ); ?>company">会社概要</a>

この『company』の部分ですが、これは先ほど固定ページの編集で設定したパーマリンクになります。

WordPress固定ページ：パーマリンク

先ほど『会社概要』から『company』にパーマリンクを変更したところですね。

これでページごとにテンプレートを作成する固定ページの作り方は以上になります。

以降はもう1つの方法『固定ページの編集画面でテキストエディタに直書き（page.php）』についてご紹介します（こちらは必要になったら思い出せばいいので、見なくてもOKです）

固定ページの作り方②：編集画面のテキストエディタに書く方法

おさらいになりますが、固定ページを作る方法は以下の2つになります。

テンプレートをページごとに作成（page-〇〇.php）
固定ページの編集画面でテキストエディタに直書き（page.php）

先ほどは①でしたが、ここからは②の方法になります（①の方法で作るなら②の方法は覚えなくてもOKです🙆‍♂️）

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

まず固定ページ用のテンプレートである『page.php』というファイルを作成します。

この中身に何を書いていくかというと、基本的な構成はトップページである『front-page.php』と同じで、

<?php get_header(); ?>
コンテンツ
<?php get_footer(); ?>

となります。非常にシンプルですね。

そしてコンテンツを書くのですが、page.phpには会社概要やお問い合わせページのコードは直接書きません。

コンテンツはWordPressの固定ページにそれぞれ書いていきます（書き方はあとで解説します）

そしてそれぞれの固定ページに書いてあるコンテンツを『page.php』が読み込みに行き、page.phpファイル1つだけで複数の固定ページを表示出来るようになります。

なので『page.php』のコンテンツ部分には、WordPressの固定ページから情報を取りに行くテンプレートタグを書きます。

それがこちらです。

<?php get_header(); ?>
<?php if(have_posts()): while(have_posts()): the_post();?>
<?php the_content(); ?>
<?php endwhile; endif; ?>
<?php get_footer(); ?>

真ん中3行のコードですね。

<?php the_content(); ?>が固定ページのテキストエディタを読み込むテンプレートタグです。

これでpage.phpファイル1つで複数の固定ページを表示することが可能になりました。

ここでもしトップページにはないけど固定ページだけに共通するパーツがある場合は、以下のように書けば大丈夫です。

<?php get_header(); ?>
<h2>
  <?php the_title(); ?>
</h2>
<?php if (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endif; ?>
<?php get_footer(); ?>

このh2の部分ですね。

HTMLではh2の中身は会社概要などページタイトルを書いていましたが、それではどのページでも会社概要になってしまうので、ここは<?php the_title(); ?>という動的に出力するテンプレートタグに置き換えておきます。

これで固定ページごとに設定したタイトルが表示されます。

これで固定ページ用のテンプレートの作成は完了です。

固定ページにHTMLファイルのコードをコピペ

次はWordPressの管理画面からそれぞれの固定ページを作成していきます。

まずWordPressの管理画面から『固定ページ → 新規追加 → パーマリンク変更』は方法①と同じです。

ここでタイトルを会社概要とすれば、<?php the_title(); ?>と書いた箇所に『会社概要』と表示されます。

次に肝心の中身を書いていきますが、これは事前に作成しておいた『company.html』のヘッダーとフッター部分を除いたところをコピペします。

ここで注意して欲しいのが、張り付ける場所はビジュアルではなくテキストの方です。

WordPress固定ページ：テキストエディタ

この赤丸で囲った方ですね。

このテキストエディタの方でないとコードは反映されません。

そしてここに先ほど説明した『company.html』のヘッダーとフッター部分を除いたところをコピペすればOKです。

しかし、このままでは画像が表示されません。

例えば、

<img src="img/top1.png" alt="">

というコードがあれば、

<img src="/wordpress/wp-content/themes/（テーマ名）/img/top1.png" alt="">

といった感じに画像のパスを書き換える必要があります。

しかしこれは面倒なので、ここで便利なfunctions.phpの出番です。

// 固定ページの画像呼び出しパスの簡略化
function imagepassshort($arg) {
  $content = str_replace('"img/', '"' . get_bloginfo('template_directory') . '/img/', $arg);
  return $content;
}
add_action('the_content', 'imagepassshort');

このコードを『functions.php』に追記することで<img src="img/top1.png" alt="">のままで画像を表示することが出来ます。