「ブログ投稿を追加したけど、ページに表示されない…」
「投稿の詳細ページや一覧ページって、どう作るの？」
今回は、WordPressテーマにブログ機能を実装するための基本中の基本、
投稿詳細ページ（single.php）と投稿一覧ページ（archive.php）の作成方法を解説します！
今回のゴール
single.phpで投稿の詳細ページを表示するarchive.phpで投稿一覧を表示するhome.phpが使われるケースについて理解する- 投稿記事に日付・アイキャッチ・抜粋などを出力する
投稿の表示には2つのテンプレートが必要
| テンプレートファイル | 用途 |
|---|---|
single.php | 各投稿（1件）の詳細表示に使われます。 |
archive.php | 投稿一覧やカテゴリー・タグなど、アーカイブページ全般に使われます。 |
home.php | 「投稿ページ」として設定されたページに使われます。 |
これらを使って、「ブログを書く → 自動でページが作られる」というWordPressらしさを実現できます。
💡 WordPressでは「テンプレート階層」というルールに従って、
single.phpやarchive.phpなどのテンプレートファイルが使い分けられます。存在しない場合は、最終的にindex.phpが使われます。意図した表示にするために、明示的なテンプレートファイルを用意しておくことが重要です。
1. 投稿詳細ページ：single.php の作成
ブログ記事の詳細ページを表示するには、single.php というテンプレートファイルが必要です。
これは1件の投稿にアクセスしたときに使われるテンプレートで、WordPressが自動的に呼び出してくれます。
このセクションでは、タイトル・投稿日・アイキャッチ画像・本文を表示する基本構成を解説します。
なお、このファイルが存在しない場合は index.php が使われてしまい、意図しないレイアウトになることもあるので注意しましょう。
✅ 基本の構成
<?php get_header(); ?> <!-- ヘッダーの共通パーツを読み込む -->
<main class="single-post">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article <?php post_class(); ?>>
<!-- 投稿タイトル -->
<h1><?php the_title(); ?></h1>
<!-- 投稿日時 -->
<time datetime="<?php the_time('Y-m-d'); ?>">
<?php the_time(get_option('date_format')); ?>
</time>
<!-- アイキャッチ画像がある場合のみ表示 -->
<?php if (has_post_thumbnail()) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail('large'); ?>
</div>
<?php endif; ?>
<!-- 本文 -->
<div class="post-content">
<?php the_content(); ?>
</div>
</article>
<?php endwhile; endif; ?>
</main>
<?php get_footer(); ?> <!-- フッターの共通パーツを読み込む -->💡 post_class() を使うと、WordPressが自動で記事に関連するクラス（投稿タイプなど）を付与してくれます。
💡 タイトルが長すぎる場合は、CSSの word-break: break-word; などで改行対応しましょう。
2. 投稿一覧ページ：archive.php の作成
WordPressでは、カテゴリーやタグ、カスタム投稿タイプなどの「一覧ページ（＝アーカイブ）」には archive.php が使われます。
💡 archive.php は、以下のようなアーカイブ系ページすべてに共通して使用されます。
- 投稿一覧（投稿タイプごとの一覧）
- カテゴリーページ
- タグページ
- カスタム投稿タイプの一覧ページ など
このファイルを用意しておけば、WordPressが自動的に適切な内容を一覧表示してくれます。
特定のカテゴリーだけデザインを変えたい場合は
category.phpやcategory-slug.phpを使えば、archive.phpよりも優先されます（応用編で紹介予定！）
✅ 基本の構成
<?php get_header(); ?> <!-- ヘッダーの共通パーツを読み込む -->
<main class="post-archive">
<!-- アーカイブタイトル（例：カテゴリー: ◯◯） -->
<h1 class="archive-title"><?php the_archive_title(); ?></h1>
<?php if (have_posts()) : ?>
<ul class="post-list">
<?php while (have_posts()) : the_post(); ?>
<li <?php post_class(); ?>>
<a href="<?php the_permalink(); ?>">
<!-- アイキャッチ表示 -->
<?php if (has_post_thumbnail()) : ?>
<div class="thumb"><?php the_post_thumbnail('medium'); ?></div>
<?php endif; ?>
<!-- タイトル -->
<h2><?php the_title(); ?></h2>
<!-- 投稿日時 -->
<time datetime="<?php the_time('Y-m-d'); ?>">
<?php the_time(get_option('date_format')); ?>
</time>
<!-- 抜粋文 -->
<p><?php the_excerpt(); ?></p>
</a>
</li>
<?php endwhile; ?>
</ul>
<?php else : ?>
<p>投稿が見つかりませんでした。</p>
<?php endif; ?>
</main>
<?php get_footer(); ?> <!-- フッターの共通パーツを読み込む -->the_archive_title() の表示内容に関する注意
💡 the_archive_title() は「カテゴリー: ◯◯」「タグ: ◯◯」など自動で補足語が付きます。不要な場合は get_the_archive_title() に置き換え、文字列を加工しましょう。
💡 カテゴリーごとの投稿一覧やタグアーカイブでも archive.php が使用されます。表示を切り替えたいときは is_category() などで条件分岐すると便利です。
💡 while ループの閉じ忘れや、endif を忘れると表示されなくなります。構文チェックは必ず行いましょう。
🔸 カテゴリーごとに見出しを出し分けたいときの例
<?php if (is_category('news')) : ?>
<h2>「お知らせ」カテゴリーの記事一覧</h2>
<?php endif; ?>💡 is_category() を使えば、カテゴリー名ごとに見出しやデザインを変えることができます。詳しくは応用回で紹介予定です！
3. 投稿一覧で使われるテンプレートファイルの全体像
WordPressは、ページの種類ごとに「どのテンプレートファイルを使うか」をルール（テンプレート階層）に沿って自動で判断します。以下は投稿一覧ページに使用されるテンプレートの優先順位を示したものです。
投稿一覧に使われるテンプレートと優先順位
| 種類 | 使用されるテンプレートファイル（上が優先） | 備考 |
|---|---|---|
| 投稿一覧ページ（ブログトップ） | home.php → index.php | 「表示設定」で投稿ページに指定されたページ |
| アーカイブ（カテゴリ・タグなど） | category.php, tag.php → archive.php → index.php | 特定の条件によって分岐 |
| カスタム投稿タイプ一覧 | archive-〇〇.php → archive.php → index.php | CPTのテンプレート分岐 |
💡「投稿ページ」用に WordPress 管理画面で固定ページを指定していると、home.php が優先されます。意外と見落とされがちですが重要です！
「フロントページ」として固定ページが指定されていて
front-page.phpが存在する場合は、home.phpよりもfront-page.phpが優先されます。
4. 抜粋（the_excerpt）を活用しよう
投稿一覧ページでは、記事全文よりも「抜粋（要約）」を表示するのが一般的です。the_excerpt() は、投稿内の冒頭テキストまたは抜粋欄に入力した内容を表示します。
🔹 自動生成の仕組み
- 抜粋欄が空の場合、本文冒頭から自動的に抜粋が生成されます。
- 自動生成される抜粋は、HTMLタグがすべて取り除かれるため、改行や太字などの装飾が反映されません。詰まって読みにくいと感じる場合は、抜粋欄に手動で文章を入力すると見た目を調整できます。
🔹 手動入力のメリット
- 改行されずに1行で詰まってしまう場合は、「抜粋欄」に手動で文章を入力しましょう。
- 改行や読みやすさを意識した文面にすることで一覧ページが見やすくなります。
🔹 抜粋の文字数を調整する
// functions.php に追記する例
// 抜粋の文字数を 100 文字に制限する
function custom_excerpt_length($length) {
return 100;
}
add_filter('excerpt_length', 'custom_excerpt_length');5. パーマリンク設定と表示トラブルの対処法
パーマリンク設定を確認しよう
- WordPress管理画面の「設定 → パーマリンク設定」へ移動します。
- 「投稿名」などを選ぶと、
/blog-title/のようなURLで表示されるようになります。
テンプレートが適用されないとき
single.phpやarchive.phpを作成しても、index.php が優先されることがあります。
→ これは WordPress の「テンプレート階層」によるもので、適用されるファイルの優先順位に沿って表示されます。
→ 対象のテンプレート名が正しいか確認しましょう。
抜粋がうまく表示されない場合
the_excerpt()の出力が短すぎたり、改行されずに詰まって見える場合があります。- 抜粋欄が空の場合、本文の冒頭が自動生成されますが、HTMLタグは除去されるため、装飾が失われます。
- 文章の先頭に画像やタグがあると、崩れて表示されることもあります。
投稿ページが表示されないときのチェックリスト
- 投稿が「公開」ステータスになっているか？
- 「パーマリンク設定」が「初期状態（?p=123 形式）」のままではないか？
- トップページの表示が「固定ページ」に設定されていないか？
single.phpなどのテンプレートが「テーマ直下」に配置されているか？single.phpではなく、single-<em>{post-type}</em>.phpが使用されている場合がある（カスタム投稿タイプの場合）
6. テンプレート階層の再確認とまとめ
WordPressでは、テンプレートファイルを特定の順番で探して適用する「テンプレート階層」という仕組みがあります。
【投稿詳細ページのテンプレート階層】
single-{post-type}.php
↓
single.php
↓
singular.php
↓
index.php ← 最終手段で使われる
【投稿一覧ページのテンプレート階層】
home.php（設定されていれば）
↓
archive-{post-type}.php（カテゴリやタグ、投稿タイプ）
↓
archive.php
↓
index.php ← 一覧ページでも使われることがある
💡 目的のテンプレートが存在しない場合、WordPressは自動的に index.php を適用します。
「意図と違うテンプレートが表示される」と感じたときは、まずテンプレートファイルが存在しているか確認しましょう。
💡テンプレートファイルはテーマフォルダの直下に置く必要があります。/parts/や/templates/のようなサブフォルダ内では適用されません。
まとめ：ブログ機能を実装するための大事な2ファイル
single.php→ 投稿の詳細ページを表示するテンプレートarchive.php→ 投稿やカテゴリーの一覧ページ用テンプレートhome.php… 投稿一覧ページ（※特定条件下）index.php… 最終手段（すべてのテンプレートのフォールバック）the_excerpt(),has_post_thumbnail(),the_permalink()などで、見た目を調整
これで、WordPressにおけるブログページの基本形が完成です！
次回予告：記事をもっと見やすく！パーツテンプレートとループの再利用
次回は、content.php などの共通パーツテンプレートの分割と、
WordPressループをよりシンプル・再利用しやすくする方法をご紹介します。
「どのテンプレートでも同じ書き方ばかり…」というモヤモヤを、まとめて解消していきましょう！
