【WordPressテーマの作り方 第4回】投稿ページと一覧ページを作って、ブログ機能を完成させよう

「ブログ投稿を追加したけど、ページに表示されない…」
「投稿の詳細ページや一覧ページって、どう作るの？」

今回は、WordPressテーマにブログ機能を実装するための基本中の基本、
投稿詳細ページ（single.php）と投稿一覧ページ（archive.php）の作成方法を解説します！

今回のゴール

• single.php で投稿の詳細ページを表示する
• archive.php で投稿一覧を表示する
• home.php が使われるケースについて理解する
• 投稿記事に日付・アイキャッチ・抜粋などを出力する

投稿の表示には2つのテンプレートが必要

これらを使って、「ブログを書く → 自動でページが作られる」という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は、ページの種類ごとに「どのテンプレートファイルを使うか」をルール（テンプレート階層）に沿って自動で判断します。以下は投稿一覧ページに使用されるテンプレートの優先順位を示したものです。

投稿一覧に使われるテンプレートと優先順位

💡「投稿ページ」用に 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ループをよりシンプル・再利用しやすくする方法をご紹介します。

「どのテンプレートでも同じ書き方ばかり…」というモヤモヤを、まとめて解消していきましょう！