記事一覧ページ(index.php)ができたら、次は読者がじっくり記事を読むための**「記事詳細ページ(single.php)」**を作成しましょう。
基本的な構造は一覧ページと似ていますが、記事の全文を表示したり、前後の記事へのリンクを設置したりと、個別ページならではの工夫が必要になります。
single.php は、特定の投稿(記事)がクリックされた際に呼び出されるテンプレートファイルです。一覧ページが「見出しの羅列」なら、詳細ページは「内容の全貌」を見せる場所です。
1. single.php の基本構造(全体像)
一覧ページとの最大の違いは、the_excerpt()(抜粋)ではなく the_content()(全文) を使う点です。
PHP
<?php get_header(); ?>
<div class="container flex-layout">
<main class="main-content">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'entry-content' ); ?>>
<div class="entry-meta">
<time datetime="<?php echo get_the_date( 'c' ); ?>"><?php echo get_the_date(); ?></time>
<span class="cat-links"><?php the_category( ', ' ); ?></span>
</div>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php if ( has_post_thumbnail() ) : ?>
<div class="entry-thumbnail">
<?php the_post_thumbnail( 'large' ); ?>
</div>
<?php endif; ?>
<div class="entry-body">
<?php the_content(); ?>
</div>
<?php if ( has_tag() ) : ?>
<div class="entry-tags"><?php the_tags( '<ul><li>', '</li><li>', '</li></ul>' ); ?></div>
<?php endif; ?>
</article>
<nav 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>
</nav>
<?php endwhile; endif; ?>
</main>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
2. 詳細ページで欠かせないテンプレートタグ
single.php でよく使われる、個別ページ専用の便利なタグを紹介します。
| 関数名 | 役割 |
the_content() | 記事の本文をすべて出力します。 |
the_category() | その記事が属するカテゴリーをリンク付きで表示します。 |
the_tags() | その記事に設定されたタグを一覧表示します。 |
previous_post_link() | 前の記事(古い記事)へのリンクを生成します。 |
next_post_link() | 次の記事(新しい記事)へのリンクを生成します。 |
3. 一覧ページ(index.php)との決定的な違い
同じ「メインループ」を使いますが、以下の3点が大きく異なります。
- 表示する内容: 一覧は
the_excerpt()(抜粋)、詳細はthe_content()(全文)。 - タイトルのタグ: 一覧は
<h2>などで複数並べますが、詳細はそのページの主役なので<h1>を使います。 - ナビゲーション: 一覧は「次のページ(2枚目)」へのリンクですが、詳細は「次の記事」へのリンクになります。
4. 記事をより読みやすくする工夫
- ページ分割(wp_link_pages):長い記事を “ で分割している場合、本文の直後に <?php wp_link_pages(); ?> を書かないと、2ページ目以降が表示されません。
- コメント欄の設置:読者からのコメントを受け付けたい場合は、<?php comments_template(); ?> をループ内に記述します。
自作テーマ制作の「山場」を越えました!
これで、**「ヘッダー・フッター・サイドバー・記事一覧・記事詳細」**という、ブログ型サイトに必要なすべての基本パーツが揃いました!おめでとうございます。
ここから先は、さらにデザインを磨き上げたり、特定の機能を追加したりする「こだわり」のフェーズです。
次のステップ:固定ページの作成
ブログ記事ではない「お問い合わせ」や「このサイトについて」といったページには、page.php というテンプレートを使います。
基本は single.php とほぼ同じですが、日付やカテゴリーを表示させないなど、少しだけスッキリした構成にするのが一般的です。



