テンプレートを理解しよう！ – WordPressテンプレートシステムの基本【後編】
- 2025/07/09
- BASICS
- WordPressの基礎
- 0comments
- 57views
- 約13分で読めます
- 15
前編では、WordPressのテンプレート階層システムを理解し、page.phpテンプレートを作成しました。これにより、固定ページが適切なテンプレートで表示されるようになりました。
後編では、さらに実践的なテンプレートカスタマイズを行い、ページごとに異なるデザインやレイアウトを実装していきます。
今回の目標
- page-contact.php を用いたお問い合わせページ専用テンプレートの作成
Template Name機能の活用と管理画面での選択手順- front-page.php によるトップページ専用デザインの実装
- 各テンプレートの使い分けと運用ベストプラクティスの習得
この記事では、実際の運用を想定した具体的なテンプレートカスタマイズ方法を習得します。
お問い合わせページ専用テンプレートの作成
お問い合わせページは、他のページとは異なる役割を持つため、専用のデザインが必要です。page-contact.phpテンプレートを作成してみましょう。
ここではpage-スラッグ.phpがテンプレートとして適用されること体験します。
page-contact.phpファイルの作成
1. ファイルの作成
- 管理画面で「お問い合わせページ」のスラッグが
contactになっていることを確認 - sample-themeフォルダ内にpage-contact.phpファイルを作成
2. page-contact.phpの内容
基本的にはpage.phpを同じ内容です。お問い合わせでよく使われるformを追加しています。
※ このコードはテンプレートが切り替わることを確認するものであり、正しいformの動作を求めていません。
<!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(); ?>
<h2>お問い合わせフォーム</h2>
<form>
<!-- ここにフォームを作成 -->
</form>
<p>※このページは page-contact.php テンプレートで表示されています</p>
</main>
<footer>
<p>© 2025 マイ・オリジナルテーマ</p>
</footer>
</body>
</html>動作確認
1. ファイルの保存
- page-contact.phpファイルを保存
2. お問い合わせページの確認
- お問い合わせページにアクセス
- 「page-contact.php テンプレート」のメッセージが表示されることを確認
成功！ お問い合わせページが専用のデザインで表示されるようになりました。
カスタムテンプレートの実装
テンプレートファイルにテンプレートヘッダーを記述することで、管理画面からテンプレートを選択できるようになります。これにより、編集者でもテンプレートの変更が可能になります。
テンプレートヘッダーとは
- PHPファイルの先頭にコメントで記述
- WordPress管理画面の「ページ属性」に表示される
- 管理画面から任意のテンプレートを選択可能
- ファイル名に依存しない柔軟な運用が可能
会社概要用のカスタムテンプレートを作成
1.kaisha.phpファイルの作成
- sample-themeフォルダ内にkaisha.phpファイルを作成
2. kaisha.phpの内容
基本的にはpage.phpを同じ内容です。
ファイルの先頭にテンプレートヘッダーを記載します。
<?php
/*
Template Name: 会社概要専用テンプレート
*/
?>
<!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>※このページは kaisha.php テンプレートで表示されています</p>
</main>
<footer>
<p>© 2025 マイ・オリジナルテーマ</p>
</footer>
</body>
</html>管理画面でテンプレートの選択
kaisha.phpを作成しTemplate Nameを記述しただけでは、テンプレートとして機能しません。
管理画面でページとテンプレートを関連付けする必要があります。
- WordPress管理画面にログイン
- 「固定ページ」→「固定ページ一覧」
- 「会社概要」ページの「編集」をクリック
- 編集画面の右側にあるテンプレートのプルダウンメニューをクリック
- 「会社概要専用テンプレート」を選択
- 「更新」ボタンをクリック
動作確認
- 会社概要ページにアクセス
- 「このページは kaisha.php テンプレートで表示されています」のメッセージを確認
実験
ここで実験をしてみましょう。試しにpage-about.phpを作り、page-スラッグ.phpとTemplate Nameを使ったカスタムテンプレートのどちらが優先されるか確認してみます。
会社概要ページのスラッグがaboutになっていることの確認を忘れずに。
1. page-about.phpファイルの作成
- sample-themeフォルダ内にpage-about.phpファイルを作成
2. page-about.phpの内容
基本的にはkaisha.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-about.php テンプレートで表示されています</p>
</main>
<footer>
<p>© 2025 マイ・オリジナルテーマ</p>
</footer>
</body>
</html>再度、動作確認
- 会社概要ページにアクセス
- 「このページは kaisha.php テンプレートで表示されています」のメッセージを確認
- page-about.phpを作ってもカスタムテンプレートkaisha.phpの方が優先されていることがわかりました。
- 管理画面で会社概要のテンプレートをデフォルトに戻すと、page-about.phpが適用されることになります。
トップページ専用テンプレートの作成
トップページは、Webサイトの顔となる重要なページです。front-page.phpテンプレートを作成して、特別なデザインを適用しましょう。
管理画面の表示設定でトップページが固定ページ「サンプルページ」になっていることをお忘れなく。
front-page.phpファイルの作成
1. ファイルの作成
- sample-themeフォルダ内にfront-page.phpファイルを作成
2. front-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>※このページは front-page.php テンプレートで表示されています</p>
</main>
<footer>
<p>© 2025 マイ・オリジナルテーマ</p>
</footer>
</body>
</html>動作確認
1. ファイルの保存
- front-page.phpファイルを保存
2. トップページの確認
- トップページにアクセス
- 「front-page.php テンプレート」のメッセージが表示されることを確認
成功！ トップページが専用のデザインで表示されるようになりました。
テンプレートファイルの運用方法
複数のテンプレートファイルを作成したので、適切な運用方法について説明します。
現在のテンプレート構成
作成済みのテンプレートファイル
sample-theme/
├── front-page.php # トップページ専用
├── kaisha.php # 会社概要ページ専用 カスタムテンプレート
├── page.php # 固定ページ全般
├── page-about.php # 会社概要ページ専用 page-スラッグ 実際は未使用
├── page-contact.php # お問い合わせページ専用 page-スラッグ
├── index.php # 最後の砦 実際は未使用
└── style.css # スタイルシート各テンプレートの適用状況
1. トップページ
- 適用テンプレート：front-page.php
- 理由：トップページ専用テンプレートが最優先
2. 会社概要ページ
- 適用テンプレート：kaisha.php
- 理由：Template Nameのカスタムテンプレートが最優先
3. お問い合わせページ
- 適用テンプレート：page-contact.php
- 理由：スラッグ指定
4. その他の固定ページ
- 適用テンプレート：page.php
- 理由：固定ページの標準テンプレート
未使用のテンプレート
page-about.php
- カスタムテンプレート kaisha.php が優先的に適用される
- 未使用なので削除しても問題ない
index.php
- 固定ページのテンプレートが適切に設定されているため
- テンプレートとしては使用されないが、テーマとしてindex.phpは必要なので削除してはならない。
カスタムテンプレートとpage-スラッグ.phpの使い分け
カスタムテンプレートの利点
- 管理画面から簡単に変更可能
- 編集者でもテンプレートを変更できる
- ファイル名に依存しない
- 複数のページで同じテンプレートを使用可能
page-スラッグ.phpの利点
- 自動的に適用される
- 管理画面での設定が不要
- 編集者が誤って変更することがない
- スラッグとファイル名の関連が明確
運用のベストプラクティス
推奨する運用方法
基本構成
front-page.php # トップページ
page.php # 固定ページ全般
page-about.php # 会社概要
page-contact.php # お問い合わせページ編集者がいる場合の運用
- カスタムテンプレートを使用する
- 管理画面でテンプレートを選択してもらう
- 使用可能なテンプレートの一覧を共有する
- テンプレートの選択間違い、選択漏れに注意
開発者のみの場合の運用
page-スラッグ.phpを使用する- 自動的に適用されるため、設定不要
テンプレートファイルの名前
この記事では、カスタムテンプレートの有効性を確認するためにあえてファイル名をkaisha.phpとしました。
実際の現場においては「固定ページのテンプレート」が明確にわかるようpage-kaisha.phpとするべきです。
ベストな運用としてはカスタムテンプレートであってもpage-スラッグ.php、すなわちpage-about.phpとして、Template Nameを記述することが望ましいです。
page-ID.phpが非推奨な理由
もう１つ、page-ID.phpというテンプレートファイルも使用できますが、実際の運用では推奨されません。
page-ID.phpの問題点
1. 環境依存の問題
- 開発環境とサーバー環境でIDが異なる場合がある
- データベースのエクスポート/インポート時にIDが変わる
- 本番環境への移行時に問題が発生
2. 保守性の問題
- ファイル名からページの内容が推測できない
- page-123.phpでは何のページかわからない
- 複数の開発者での作業時に混乱の原因
3. 管理の困難さ
- ページの削除・再作成時にIDが変わる
- バックアップからの復元時にIDが変わる可能性
推奨される代替方法
- page-スラッグ.phpを使用
- カスタムテンプレートを使用
利点
- 環境に依存しない
- 内容が分かりやすい
- 保守性が高い
最終確認と動作テスト
作成したすべてのテンプレートファイルが正常に動作するか再度全体を確認しましょう。
各ページの動作確認
| ページ | URL | テンプレート |
|---|---|---|
| トップページ | http://sample.local/ | front-page.php |
| 会社概要 | http://sample.local/about | kaisha.php |
| 会社概要 － 沿革 | http://sample.local/about/history | page.php |
| 会社概要 － アクセス | http://sample.local/about/access | page.php |
| サービス | http://sample.local/service | page.php |
| お問い合わせ | http://sample.local/contact | page-contact.php |
問題が発生した場合の対処法
1. テンプレートが適用されない
- ファイル名の確認（スペルミス、全角半角、拡張子）
- スラッグとファイル名の確認
- ファイルの保存場所の確認（テーマフォルダ内）
- テンプレートヘッダーの記述
2. 管理画面にカスタムが表示されない
- PHPの開始タグ（
<?php）の確認 Template Nameの記述形式の確認
まとめと次回予告
現在の到達点
完成したテンプレート構成
sample-theme/
├── front-page.php # トップページ専用
├── kaisha.php # 会社概要ページ専用 カスタムテンプレート
├── page.php # 固定ページ全般
├── page-contact.php # お問い合わせページ専用 page-スラッグ
├── index.php # 最後の砦 実際は未使用
└── style.css # スタイルシート適用状況の確認
- トップページ：front-page.phpで表示
- 会社概要ページ：kaisha.phpで表示
- お問い合わせページ：page-contact.phpで表示
- その他の固定ページ：page.phpで表示
- index.phpが使用されていない状態
習得したスキル
実践的なテンプレートカスタマイズ
- ページの用途に応じた専用デザインの実装
Template Nameによる柔軟なテンプレート管理- 管理画面と連携したテンプレート選択機能
プロフェッショナルな運用方法
- 環境に依存しないテンプレート設計
- 編集者との連携を考慮した運用方法
- 保守性の高いファイル構成
WordPressテンプレートシステムの理解
- テンプレート階層の実践的な活用
- 適切なテンプレートファイルの選択基準
- 問題が発生した場合の対処法
次回予告
ヘッダーフッターの外部ファイル化で効率的なテンプレート管理を実現
現在、複数のテンプレートファイルを作成しましたが、ヘッダーとフッターのコードが重複しているという問題があります。
現在の問題点
- 各テンプレートファイルでヘッダーとフッターを個別に記述
- 修正時に複数のファイルを変更する必要がある
- コードの保守性が低い
- 修正漏れが発生しやすい
次回の目標
- header.phpとfooter.phpの作成
get_header()とget_footer()関数の活用- テンプレートファイルのコードを大幅に簡素化
- 効率的なテンプレート管理システムの構築
予定する内容
- ヘッダーとフッターの外部ファイル化
- WordPressの標準関数の活用
- 各テンプレートファイルの最適化
- 部分テンプレートの概念と活用方法
次回は、さらに効率的で保守性の高いテーマ開発の方法を学習します。
重要なポイントの再確認
index.phpが表示されるのはエラーだと思え！
正しいテンプレート階層の活用
固定ページの場合：
1. カスタムテンプレート（最優先）
2. page-スラッグ.php
3. page-ID.php（非推奨）
4. page.php
5. singular.php
6. index.php（最後の砦、未使用が望ましい）index.phpが使用される状況
- 適切なテンプレートファイルが存在しない
- ファイル名や
Template Nameの記述にミスがある - 何らかの設定エラーが発生している
プロフェッショナルな開発では
- 意図的に適切なテンプレートファイルを用意する
- index.phpの使用は最終手段として考える
- 問題発生時の診断材料として活用する
今回の学習により、WordPressテンプレートシステムの実践的な活用方法を習得できました。次回は、さらに効率的なテンプレート管理方法を学習し、プロフェッショナルなテーマ開発スキルを向上させていきます。
この投稿をシェアする
テンプレートを理解しよう！ – WordPressテンプレートシステムの基本【前編】
BASICS すべての固定ページが同じレイアウトで表示されていませんか？本記事では、テンプレート階層の仕組みとその優先順位を理解しながら、ページの内容や目的に応じて適切なテンプレートを使い分けるための第一歩を丁寧に解説します。今後の柔軟なデザイン展開に向けた基盤を築きましょう。
- 2025/07/09
- 0comments
- 86views
共通部の外部ファイル化で効率的なテンプレート管理を実現しよう！
BASICS WordPressテーマ開発における「部分テンプレート」の概念を実践的に学習。テンプレートファイルの共通部分を外部ファイル化することで、コードの重複を排除し、保守性の高いテーマ構造を構築する方法を解説します。効率的なテンプレート管理とメンテナンス性の向上を実現する、プロフェッショナルなテーマ開発に必須の技術を習得しましょう。
- 2025/07/08
- 0comments
- 354views
