STEP 5
📄 カスタムテンプレート
個別記事ページ（single.php）、固定ページ（page.php）、アーカイブページ（archive.php）など、用途別のテンプレートファイルを作成します。テンプレート階層を理解して、プロフェッショナルなテーマを完成させましょう。
テンプレート階層の詳細
WordPressは、表示するページの種類に応じて最適なテンプレートファイルを自動選択します。
📊 テンプレート階層の仕組み
WordPressは上位のテンプレートから順に探し、最初に見つかったファイルを使用します。見つからない場合は最終的にindex.phpにフォールバックします。
個別投稿ページの優先順位
1. single-{post-type}-{slug}.php
2. single-{post-type}.php
3. single.php
4. singular.php
5. index.php
固定ページの優先順位
1. page-{slug}.php
2. page-{id}.php
3. page.php
4. singular.php
5. index.php
アーカイブページの優先順位
1. category-{slug}.php
2. category-{id}.php
3. category.php
4. archive.php
5. index.php
single.php（個別記事ページ）の作成
ブログ記事の個別表示ページを作成します。
single.php（新規作成）<?php get_header(); ?>
<div class="content-wrapper">
<div class="container">
<main class="main-content">
<?php while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- アイキャッチ画像 -->
<?php if (has_post_thumbnail()) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail('large'); ?>
</div>
<?php endif; ?>
<!-- タイトル -->
<h1 class="entry-title"><?php the_title(); ?></h1>
<!-- メタ情報 -->
<div class="entry-meta">
<span class="posted-on">
<time datetime="<?php echo get_the_date('c'); ?>">
<?php echo get_the_date(); ?>
</time>
</span>
<span class="byline">
投稿者: <?php the_author(); ?>
</span>
<span class="cat-links">
カテゴリー: <?php the_category(', '); ?>
</span>
</div>
<!-- 本文 -->
<div class="entry-content">
<?php the_content(); ?>
</div>
<!-- タグ -->
<?php if (has_tag()) : ?>
<div class="entry-tags">
タグ: <?php the_tags('', ', ', ''); ?>
</div>
<?php endif; ?>
<!-- 前後の記事へのナビゲーション -->
<div class="post-navigation">
<div class="nav-previous">
<?php previous_post_link('%link', '« %title'); ?>
</div>
<div class="nav-next">
<?php next_post_link('%link', '%title »'); ?>
</div>
</div>
</article>
<!-- コメント -->
<?php
if (comments_open() || get_comments_number()) :
comments_template();
endif;
?>
<?php endwhile; ?>
</main>
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>
single.php用のスタイル
style.css に追加/* 個別記事ページ */
.single .entry-title {
font-size: 2.5rem;
margin-bottom: 1rem;
line-height: 1.3;
}
.entry-meta {
color: #999;
font-size: 0.9rem;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid #E0E0E0;
}
.entry-meta span {
margin-right: 1.5rem;
}
.entry-content {
font-size: 1.1rem;
line-height: 1.9;
}
.entry-content h2 {
font-size: 1.8rem;
margin: 2rem 0 1rem;
color: #333;
border-left: 4px solid #0073aa;
padding-left: 1rem;
}
.entry-content h3 {
font-size: 1.5rem;
margin: 1.5rem 0 1rem;
color: #333;
}
.entry-tags {
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid #E0E0E0;
}
.entry-tags a {
display: inline-block;
background: #E3F2FD;
color: #0073aa;
padding: 0.3rem 0.8rem;
border-radius: 4px;
text-decoration: none;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.entry-tags a:hover {
background: #0073aa;
color: #fff;
}
/* 記事ナビゲーション */
.post-navigation {
display: flex;
justify-content: space-between;
margin-top: 3rem;
padding-top: 2rem;
border-top: 2px solid #E0E0E0;
}
.post-navigation a {
color: #0073aa;
text-decoration: none;
max-width: 45%;
}
.post-navigation a:hover {
text-decoration: underline;
}
page.php（固定ページ）の作成
「会社概要」「お問い合わせ」などの固定ページ用テンプレートです。
page.php（新規作成）<?php get_header(); ?>
<div class="content-wrapper">
<div class="container">
<main class="main-content page-content">
<?php while (have_posts()) : the_post(); ?>
<article id="page-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- アイキャッチ画像 -->
<?php if (has_post_thumbnail()) : ?>
<div class="page-thumbnail">
<?php the_post_thumbnail('large'); ?>
</div>
<?php endif; ?>
<!-- タイトル -->
<h1 class="page-title"><?php the_title(); ?></h1>
<!-- 本文 -->
<div class="page-content">
<?php the_content(); ?>
</div>
</article>
<!-- 固定ページでもコメントを有効にする場合 -->
<?php
if (comments_open() || get_comments_number()) :
comments_template();
endif;
?>
<?php endwhile; ?>
</main>
</div>
</div>
<?php get_footer(); ?>
💡 single.phpとpage.phpの違い
- single.php: 投稿日、カテゴリー、タグなどのメタ情報を表示
- page.php: メタ情報は表示せず、シンプルな構成
- page.phpはサイドバーなし: 固定ページは通常フルワイド表示
page.php用のスタイル
style.css に追加/* 固定ページ */
.page-content {
max-width: 100%;
}
.page-content .main-content {
max-width: 900px;
margin: 0 auto;
}
.page-title {
font-size: 2.5rem;
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 3px solid #0073aa;
}
archive.php（アーカイブページ）の作成
カテゴリー、タグ、日付別アーカイブなどの一覧ページです。
archive.php（新規作成）<?php get_header(); ?>
<div class="content-wrapper">
<div class="container">
<main class="main-content">
<!-- アーカイブタイトル -->
<header class="archive-header">
<h1 class="archive-title">
<?php the_archive_title(); ?>
</h1>
<?php if (get_the_archive_description()) : ?>
<div class="archive-description">
<?php the_archive_description(); ?>
</div>
<?php endif; ?>
</header>
<!-- 記事一覧 -->
<?php if (have_posts()) : ?>
<div class="archive-posts">
<?php while (have_posts()) : the_post(); ?>
<article <?php post_class('archive-post'); ?>>
<?php if (has_post_thumbnail()) : ?>
<div class="archive-thumbnail">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('medium'); ?>
</a>
</div>
<?php endif; ?>
<div class="archive-content">
<h2 class="entry-title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h2>
<div class="entry-meta">
<time datetime="<?php echo get_the_date('c'); ?>">
<?php echo get_the_date(); ?>
</time>
</div>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div>
</div>
</article>
<?php endwhile; ?>
</div>
<!-- ページネーション -->
<div class="pagination">
<?php
the_posts_pagination(array(
'mid_size' => 2,
'prev_text' => '« 前へ',
'next_text' => '次へ »',
));
?>
</div>
<?php else : ?>
<p>投稿が見つかりませんでした。</p>
<?php endif; ?>
</main>
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>
archive.php用のスタイル
style.css に追加/* アーカイブページ */
.archive-header {
background: #fff;
padding: 2rem;
margin-bottom: 2rem;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.archive-title {
font-size: 2rem;
color: #0073aa;
margin-bottom: 1rem;
}
.archive-description {
color: #666;
}
.archive-posts {
display: grid;
gap: 2rem;
}
.archive-post {
display: grid;
grid-template-columns: 250px 1fr;
gap: 2rem;
background: #fff;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.archive-thumbnail {
overflow: hidden;
border-radius: 8px;
}
.archive-thumbnail img {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s;
}
.archive-thumbnail a:hover img {
transform: scale(1.05);
}
/* モバイル対応 */
@media (max-width: 768px) {
.archive-post {
grid-template-columns: 1fr;
}
}
search.php（検索結果ページ）の作成
サイト内検索の結果を表示するページです。
search.php（新規作成）<?php get_header(); ?>
<div class="content-wrapper">
<div class="container">
<main class="main-content">
<header class="search-header">
<h1 class="search-title">
「<?php echo get_search_query(); ?>」の検索結果
</h1>
<p><?php echo $wp_query->found_posts; ?>件見つかりました</p>
</header>
<?php if (have_posts()) : ?>
<div class="search-results">
<?php while (have_posts()) : the_post(); ?>
<article <?php post_class('search-result'); ?>>
<h2 class="entry-title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h2>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div>
</article>
<?php endwhile; ?>
</div>
<div class="pagination">
<?php
the_posts_pagination(array(
'prev_text' => '« 前へ',
'next_text' => '次へ »',
));
?>
</div>
<?php else : ?>
<p>検索結果が見つかりませんでした。別のキーワードで再度検索してください。</p>
<?php get_search_form(); ?>
<?php endif; ?>
</main>
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>
404.php（エラーページ）の作成
ページが見つからない場合に表示されるページです。
404.php（新規作成）<?php get_header(); ?>
<div class="content-wrapper">
<div class="container">
<main class="main-content error-404">
<div class="error-content">
<h1 class="error-title">404</h1>
<h2>お探しのページが見つかりません</h2>
<p>申し訳ございません。お探しのページは移動または削除された可能性があります。</p>
<div class="error-search">
<h3>サイト内検索</h3>
<?php get_search_form(); ?>
</div>
<div class="error-links">
<h3>おすすめのページ</h3>
<ul>
<li><a href="<?php echo home_url('/'); ?>">トップページ</a></li>
<li><a href="<?php echo home_url('/about/'); ?>">サイトについて</a></li>
</ul>
</div>
</div>
</main>
</div>
</div>
<?php get_footer(); ?>
404ページのスタイル
style.css に追加/* 404エラーページ */
.error-404 {
text-align: center;
padding: 4rem 2rem;
}
.error-content {
max-width: 600px;
margin: 0 auto;
}
.error-title {
font-size: 8rem;
color: #0073aa;
margin-bottom: 1rem;
}
.error-404 h2 {
font-size: 2rem;
margin-bottom: 1rem;
}
.error-search,
.error-links {
margin-top: 3rem;
text-align: left;
}
.error-links ul {
list-style: none;
margin-top: 1rem;
}
.error-links li {
margin: 0.5rem 0;
}
.error-links a {
color: #0073aa;
text-decoration: none;
}
.error-links a:hover {
text-decoration: underline;
}
完成したテーマファイル構成
これまでに作成したすべてのファイルを確認しましょう。
📁 mytheme/
📄 style.css （テーマ情報とスタイル）
📄 functions.php （機能追加）
📄 index.php （デフォルトテンプレート）
📄 header.php （ヘッダー）
📄 footer.php （フッター）
📄 sidebar.php （サイドバー）
📄 single.php （個別記事）
📄 page.php （固定ページ）
📄 archive.php （アーカイブ）
📄 search.php （検索結果）
📄 404.php （エラーページ）
📄 comments.php （コメント）
🎉 プロフェッショナルなテーマ構成に！
これで主要なテンプレートがすべて揃いました。様々なページタイプに対応できる、実用的なWordPressテーマが完成しました。
動作確認
作成したテンプレートが正しく動作するか確認しましょう。
-
個別記事ページの確認
投稿を作成して、個別記事ページを開いてください。single.phpが適用され、メタ情報やタグが表示されるはずです。
-
固定ページの確認
固定ページを作成して表示してください。page.phpが適用され、シンプルなレイアウトで表示されるはずです。
-
カテゴリーページの確認
カテゴリーページを開いてください。archive.phpが適用され、記事一覧が表示されるはずです。
-
検索機能の確認
サイト内検索を実行してください。search.phpが適用され、検索結果が表示されるはずです。
-
404ページの確認
存在しないURLにアクセスしてください。404.phpが適用され、エラーページが表示されるはずです。
まとめ
STEP 5では、以下のテンプレートを作成しました：
- ✅ single.php - 個別記事ページ
- ✅ page.php - 固定ページ
- ✅ archive.php - アーカイブページ
- ✅ search.php - 検索結果ページ
- ✅ 404.php - エラーページ
🚀 最終ステップへ！
テーマの機能実装が完了しました！次のSTEP 6では、テーマの公開準備として、screenshot.png、readme.txt、ライセンス情報の追加、そして本番環境への移行方法を学びます。
さらに学ぶ
カスタムテンプレートをマスターしたら、以下の応用編でさらに高度な機能を学びましょう。
- カスタムポストタイプ - 投稿以外の独自コンテンツタイプを作成
- カスタムフィールド - 記事に独自の情報を追加
- ブロックエディタ対応 - カスタムブロックの作成