成果物をまとめて確認する
[成果物]テンプレートを理解しよう! – WordPressテンプレートシステムの基本【後編】
【テンプレートを理解しよう! – WordPressテンプレートシステムの基本【後編】】の成果物です。投稿の学びを終えた時点の構成を一覧でご確認いただけます。
前編では、WordPressのテンプレート階層システムを理解し、page.phpテンプレートを作成しました。これにより、固定ページが適切なテンプレートで表示されるようになりました。
後編では、さらに実践的なテンプレートカスタマイズを行い、ページごとに異なるデザインやレイアウトを実装していきます。
今回の目標
Template Name
機能の活用と管理画面での選択手順この記事では、実際の運用を想定した具体的なテンプレートカスタマイズ方法を習得します。
お問い合わせページは、他のページとは異なる役割を持つため、専用のデザインが必要です。page-contact.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(); ?>
<h2>お問い合わせフォーム</h2>
<form>
<!-- ここにフォームを作成 -->
</form>
<p>※このページは page-contact.php テンプレートで表示されています</p>
</main>
<footer>
<p>© 2025 マイ・オリジナルテーマ</p>
</footer>
</body>
</html>
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>
PHPkaisha.phpを作成しTemplate Name
を記述しただけでは、テンプレートとして機能しません。
管理画面でページとテンプレートを関連付けする必要があります。
ここで実験をしてみましょう。試しにpage-about.phpを作り、page-スラッグ.phpとTemplate Name
を使ったカスタムテンプレートのどちらが優先されるか確認してみます。
会社概要ページのスラッグがaboutになっていることの確認を忘れずに。
基本的には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>
PHPトップページは、Webサイトの顔となる重要なページです。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>
PHP成功! トップページが専用のデザインで表示されるようになりました。
複数のテンプレートファイルを作成したので、適切な運用方法について説明します。
作成済みのテンプレートファイル
sample-theme
├── front-page.php # トップページ専用
├── kaisha.php # 会社概要ページ専用 カスタムテンプレート
├── page.php # 固定ページ全般
├── page-about.php # 会社概要ページ専用 page-スラッグ 実際は未使用
├── page-contact.php # お問い合わせページ専用 page-スラッグ
├── index.php # 最後の砦 実際は未使用
└── style.css # スタイルシート
1. トップページ
2. 会社概要ページ
3. お問い合わせページ
4. その他の固定ページ
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を記述することが望ましいです。
もう1つ、page-ID.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 |
<?php
)の確認Template Name
の記述形式の確認sample-theme
├── front-page.php # トップページ専用
├── kaisha.php # 会社概要ページ専用 カスタムテンプレート
├── page.php # 固定ページ全般
├── page-contact.php # お問い合わせページ専用 page-スラッグ
├── index.php # 最後の砦 実際は未使用
└── style.css # スタイルシート
Template Name
による柔軟なテンプレート管理現在、複数のテンプレートファイルを作成しましたが、ヘッダーとフッターのコードが重複しているという問題があります。
get_header()
とget_footer()
関数の活用次回は、さらに効率的で保守性の高いテーマ開発の方法を学習します。
固定ページの場合:
1 - カスタムテンプレート(最優先)
2 - page-スラッグ.php
3 - page-ID.php(非推奨)
4 - page.php
5 - singular.php
6 - index.php(最後の砦、未使用が望ましい)
Template Name
の記述にミスがある今回の学習により、WordPressテンプレートシステムの実践的な活用方法を習得できました。次回は、さらに効率的なテンプレート管理方法を学習し、プロフェッショナルなテーマ開発スキルを向上させていきます。
この記事で作成した成果物は、以下のページでまとめて確認することができます。
すべての固定ページが同じレイアウトで表示されていませんか?本記事では、テンプレート階層の仕組みとその優先順位を理解しながら、ページの内容や目的に応じて適切なテンプレートを使い分けるための第一歩を丁寧に解説します。今後の柔軟なデザイン展開に向けた基盤を築きましょう。
WordPressテーマ開発における「部分テンプレート」の概念を実践的に学習。テンプレートファイルの共通部分を外部ファイル化することで、コードの重複を排除し、保守性の高いテーマ構造を構築する方法を解説します。効率的なテンプレート管理とメンテナンス性の向上を実現する、プロフェッショナルなテーマ開発に必須の技術を習得しましょう。
WordPressを効率よく確実に学ぶためには、学習の順序が大切です。知識が自然に積み上がるよう、学習ステップに沿って記事を順番に並べています。
学習ストーリー第40話まで掲載中