テンプレートを理解しよう！ – WordPressテンプレートシステムの基本【前編】

前回の記事で、複数の固定ページを作成してナビゲーションを実装することができました。しかし、実際にサイトを見てみると、すべてのページが全く同じデザインで表示されています。

• 「お問い合わせページにはフォームを設置したい」
• 「会社概要ページには写真を多用したい」
• 「トップページには特別なレイアウトを作りたい」

このような、ページごとに異なるデザインを実現するのが、WordPressのテンプレートシステムです。現在は、すべてのページが同じindex.phpファイルで表示されているため、この問題が発生しています。

今回の目標

• WordPressのテンプレートシステムの基本理解
• 現在の状況（すべてがindex.phpで表示）の見直し
• 固定ページ用テンプレートの種類と優先順位
• 適切なテンプレートファイルの選択方法
• page.phpテンプレートの作成と適用

注意：今回は全ページが同じテンプレートになります。次回でページごとの使い分けを学習します。

重要： この記事では、WordPressのテンプレートシステムの基本概念を習得し、より良いWordPressサイト構築の基盤を作ります。

現在の状況を確認

これまでの学習で、index.phpファイル一つですべてのページを表示してきました。まずは、固定ページがWebサイトに表示されることを実感していただくことを優先したからです。実際のWordPressサイトではより効率的な方法があります。

現在の状況

作成済みのページ

ようこそページ（トップページ）
┣━ 会社概要
┃  ┣━ 沿革
┃  ┗━ アクセス
┣━ サービス
┗━ 問い合わせ

ようこそページ（トップページ）
┣━ 会社概要
┃  ┣━ 沿革
┃  ┗━ アクセス
┣━ サービス
┗━ 問い合わせ

現在のテンプレートファイル

• index.phpのみ

現在の制約

• すべてのページが同じレイアウト
• ページごとの個別デザインができない
• 特別な機能（フォーム、ギャラリーなど）の実装が困難

これらの制約を解決するために、WordPressのテンプレートシステムを理解し、適切なテンプレートファイルを作成していきます。

WordPressのテンプレートとは

WordPressにおける「テンプレート」について理解しましょう。

テンプレートの基本概念

WordPressの「テンプレート」とは、管理画面で作成したページを、実際のWebサイトで表示するための「型」のことです。例えば、固定ページは「この型」、投稿記事は「こっちの型」というように、コンテンツの種類に応じて異なる表示形式を使い分けます。

これまでの学習で使用したindex.php

これまでの学習で使用してきたindex.phpも、実はテンプレートファイルの一つです。すべてのページをindex.phpで表示してきましたが、これは学習目的で意図的に単一のテンプレートを使用していたためです。

なぜ複数のテンプレートが必要か？

ページごとの目的が異なる

• トップページ：訪問者を引きつける役割
• 会社概要ページ：企業情報を伝える役割
• お問い合わせページ：連絡手段を提供する役割

最適なレイアウトが異なる

• トップページ：大きな画像やキャッチコピーが効果的
• 会社概要ページ：写真と文章のバランスが重要
• お問い合わせページ：フォームが主役

機能が異なる

• 通常のページ：情報表示がメイン
• お問い合わせページ：フォーム機能が必要
• トップページ：特別なナビゲーションが必要

このように、ページごとに異なる目的やレイアウト、機能が必要になるため、WordPressでは複数のテンプレートを使い分ける仕組みが用意されています。

テンプレート階層システム

WordPressには、複数のテンプレートファイルから最適なものを自動的に選択する仕組みがあります。

テンプレート階層とは

基本的な仕組み

• WordPressが自動的にテンプレートファイルを選択する仕組み
• ページの種類やコンテンツに応じて最適なテンプレートを決定
• 複数のテンプレートファイルから優先順位に従って選択

どのように動作するか

1. WordPressがページの種類を判別
2. 優先順位に従ってテンプレートファイルを探索
3. 見つかったテンプレートファイルを使用してページを表示

主なページタイプ

1. トップページ

• サイトのメインページ
• 最初に訪問者が見るページ
• 特別なデザインが必要

2. 固定ページ

• 会社概要、お問い合わせなど
• 静的な内容を表示
• ページごとに異なるデザインが効果的

3. 投稿ページ

• ブログ記事など
• 動的な内容を表示

固定ページ用テンプレートの種類

固定ページを表示するためのテンプレートファイルには、以下の種類があります。

基本的なテンプレートファイル

page.php

• 役割：すべての固定ページのデフォルトテンプレート
• 対象：特別な指定がない固定ページ

page-スラッグ.php

• 役割：特定のページ専用テンプレート
• 例：page-about.php（会社概要ページ用）
• 対象：スラッグが一致するページのみ

page-ID.php

• 役割：特定のIDを持つページ専用テンプレート
• 例：page-123.php（ID=123のページ用）
• 対象：IDが一致するページのみ

カスタムテンプレート

• 役割：管理画面で選択できる独自テンプレート
• 例：contact-form.php（お問い合わせフォーム用）
• 対象：管理画面で指定したページ

特殊なテンプレートファイル

front-page.php

• 役割：トップページ専用テンプレート
• 対象：サイトのホームページ

singular.php

• 役割：単一のコンテンツ用テンプレート
• 対象：固定ページと投稿記事の両方

テンプレート適用の優先順位

WordPressは、複数のテンプレートファイルが存在する場合、以下の優先順位で選択します。

固定ページの優先順位

1. カスタムテンプレート

• 管理画面で指定されたテンプレート
• 最も高い優先度

2. page-スラッグ.php

• スラッグに基づく専用テンプレート
• 例：page-about.php（aboutページ用）

3. page-ID.php

• IDに基づく専用テンプレート
• 例：page-123.php（ID=123のページ用）

4. page.php

• 固定ページの標準テンプレート
• 最も基本的で重要なテンプレート

5. singular.php

• 単一コンテンツ用テンプレート
• 固定ページと投稿記事の両方で使用

6. index.php

• 最後の選択肢
• 他のテンプレートが存在しない場合の代替手段

index.phpからの脱却

これまでの学習では、意図的にindex.php一つですべてのページを表示してきました。これは学習の第一段階として正しいアプローチでした。しかし、WordPressの真の力を発揮するためには、次のステップに進む時が来ました。

index.phpの本来の役割

index.phpは、WordPressテンプレートの「最後の砦」のような存在です。他の適切なテンプレートが存在しない場合に使用される、いわば緊急時の代替手段です。

これまで学習で使用してきたのは、基本を理解するための手段だったのです。

現在の制約を振り返る

index.phpだけでは、以下のような制約がありました。

1. ページごとの個別最適化ができない

• お問い合わせページに専用のフォームレイアウトを作れない
• 会社概要ページに写真ギャラリーを配置できない
• トップページに特別なデザインを作れない

2. 管理の複雑さ

• すべてのページロジックが一つのファイルに集中
• どの部分がどのページに影響するか分かりにくい

3. 将来の拡張への対応

• 新しいページタイプの追加が困難
• サイトの成長に合わせた柔軟な対応が限定的

適切なテンプレート使用の価値

WordPress の本当の価値は、コンテンツ（固定ページや投稿）に合わせた最適なテンプレートを用意できることにあります。

1. 明確な役割分担

• 各テンプレートファイルが明確な役割を持つ
• どのファイルがどのページを表示するか一目瞭然

2. ページごとの最適化が可能

• 固定ページには固定ページに最適なデザイン
• 投稿記事には投稿記事に最適なレイアウト
• それぞれのコンテンツが最も効果的に表示される

3. 将来的な発展への対応

• 新しいページタイプの追加が簡単
• サイトの成長に合わせて柔軟にテンプレートを追加可能

これまでの学習は決して無駄ではありません。むしろ、これからより良いWordPressサイトを構築するための大切な基盤となります。

page.phpテンプレートを作成

それでは、実際に固定ページ用のpage.phpテンプレートを作成してみましょう。

page.phpファイルの作成

1. ファイルの作成

• VSCodeでsample-themeフォルダを開く
• 新しいファイルを作成し、page.phpとして保存

2. 基本的な作成手順

• 既存のindex.phpの内容をコピー
• 確認用のメッセージを追加して動作を確認

最終的なpage.phpファイル

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php the_title(); ?></title>
</head>
<body>
    <header>
        <h1><?php the_title(); ?></h1>
        <ul>
            <li><a href="<?php echo home_url(''); ?>">トップ</a></li>
            <li><a href="<?php echo home_url('about'); ?>">会社概要</a>
                <ul>
                    <li><a href="<?php echo home_url('about/history'); ?>">沿革</a></li>
                    <li><a href="<?php echo home_url('about/access'); ?>">アクセス</a></li>
                </ul>
            </li>
            <li><a href="<?php echo home_url('service'); ?>">サービス</a></li>
            <li><a href="<?php echo home_url('contact'); ?>">問い合わせ</a></li>
        </ul>
    </header>
    
    <main>
        <?php the_content(); ?>
        <p>※このページは page.php テンプレートで表示されています</p>
    </main>
    
    <footer>
        <p>© 2025 マイ・オリジナルテーマ</p>
    </footer>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php the_title(); ?></title>
</head>
<body>
    <header>
        <h1><?php the_title(); ?></h1>
        <ul>
            <li><a href="<?php echo home_url(''); ?>">トップ</a></li>
            <li><a href="<?php echo home_url('about'); ?>">会社概要</a>
                <ul>
                    <li><a href="<?php echo home_url('about/history'); ?>">沿革</a></li>
                    <li><a href="<?php echo home_url('about/access'); ?>">アクセス</a></li>
                </ul>
            </li>
            <li><a href="<?php echo home_url('service'); ?>">サービス</a></li>
            <li><a href="<?php echo home_url('contact'); ?>">問い合わせ</a></li>
        </ul>
    </header>
    
    <main>
        <?php the_content(); ?>
        <p>※このページは page.php テンプレートで表示されています</p>
    </main>
    
    <footer>
        <p>© 2025 マイ・オリジナルテーマ</p>
    </footer>
</body>
</html>

動作確認

1. ファイルの保存

• page.phpファイルを保存

2. サイトの確認

• 任意の固定ページにアクセス
• 「※このページは page.php テンプレートで表示されています」が表示されることを確認

3. 各ページで確認

• 会社概要ページ
• サービスページ
• お問い合わせページ
• 沿革ページ
• アクセスページ
• トップページ

結果の確認

成功した場合

• すべての固定ページで「page.php テンプレート」のメッセージが表示
• デザインは従来と同じだが、適切なテンプレートファイルが使用されている
• index.phpは使用されなくなる

テンプレート適用状況

• すべての固定ページ：page.phpで表示
• 適切なテンプレートシステムの第一歩が完了

まとめと次回予告

今回学習したこと

WordPressテンプレートシステムの基本理解

• テンプレートとは何かの基本概念
• テンプレート階層の仕組み
• 固定ページ用テンプレートの種類と特徴
• テンプレート適用の優先順位

実践的なスキル

• 固定ページ用テンプレートの作成方法
• index.phpからpage.phpへの移行
• テンプレートファイルの確認方法

現在の到達点

テンプレートファイルの構成

sample-theme
├── index.php
├── page.php
└── style.css

sample-theme
├── index.php
├── page.php
└── style.css

※ 現状index.phpは使われない

テンプレート適用状況

• すべての固定ページ：page.phpで表示
• index.php：使用されない（理想的な状態）

次回予告：page-スラッグ.phpとTemplate Nameで個別デザインを実装

前編ではpage.phpテンプレートを作成し、WordPressテンプレートシステムの基本を理解しました。後編では、各ページの個性を活かす具体的なカスタマイズを行います！

次回の内容

• page-contact.phpでお問い合わせページの専用デザイン
• Template Nameの実装と管理画面での設定
• front-page.phpでトップページの専用デザイン
• 実際のページ別カスタマイズの確認

実装する機能

• お問い合わせページに専用のレイアウト
• トップページに特別なデザイン
• 各ページの目的に応じたコンテンツ表示
• 実際のテンプレート使い分けの動作確認

お疲れさまでした！ WordPressのテンプレートシステムの基本を理解し、適切なpage.phpテンプレートを作成できました。

次回は、いよいよページごとの個別デザインを実装し、真のテンプレート使い分けを学習しましょう！

成果物

この記事で作成した成果物は、以下のページでまとめて確認することができます。

成果物をまとめて確認する

［成果物］テンプレートを理解しよう！ – WordPressテンプレートシステムの基本【前編】

【テンプレートを理解しよう！ – WordPressテンプレートシステムの基本【前編】】の成果物です。投稿の学びを終えた時点の構成を一覧でご確認いただけます。

この投稿をシェアする