投稿詳細の作り方

今回は、WordPressで「投稿の詳細ページ」を作成する方法を解説します。
この方法を使えば、投稿詳細ページを表示するためのテンプレートファイル（single.php）ひとつで、複数の投稿記事を自動的に表示できます。

投稿詳細（single.php）とは

投稿詳細ページは、WordPressで作成した個別の記事を表示するページです。
このページを表示するために、single.php というテンプレートファイルが使用されます。

single.php の特徴

single.php を使うことで、投稿一覧の中でクリックされた記事の内容が自動的に表示されます。また、複数の投稿があっても、single.php ファイルひとつで共通のデザインや構成を使って表示できるため、個別のHTMLファイルを作成する必要はありません。

投稿詳細の作成手順

投稿詳細ページの作成手順は以下の通りです。
これから紹介する手順に従って進めていきましょう。

完成イメージ：完成図を見る

1. テンプレートの作成

投稿詳細ページを表示するためのテンプレートを作成し、ページのコンテンツのコーディングを行います。

single.php の作成
まず、テーマフォルダ内に single.php ファイルを作成します。

テンプレートのベースコーディング
以下のコードを single.php に追加します。

この時点ではまだ投稿記事は表示されません。表示されているのは、テンプレートに自分でコーディングしたデザインです。

HTML

<?php get_header(); ?>
<div class="l-main p-page">
  <!-- News Detail -->
  <section class="p-section p-newsDetail">
  <div class="l-container--800">
    <div class="p-section__head">
      <h3 class="p-title">
        <span class="p-title--en">News</span>
        お知らせ
      </h3>
    </div>
    <div class="p-section__body bg">
      <!-- 投稿内容 -->
      <div class="p-newsDetail__contents">
        <div class="p-newsDetail__contents--head p-list__item">
          <p class="date">投稿日を表示</p>
          <span class="c-category">カテゴリーを表示</span>
          <h2 class="title">投稿のタイトルを表示</h2>
        </div>
        <div class="p-newsDetail__contents--body">
          投稿内容を表示
        </div>
        <div class="c-btnWrap center">
          <a href="<?php echo home_url(); ?>/info" class="c-btn c-btn__line c-btn__sm c-btn__w160">一覧へ戻る</a>
        </div>
      </div>
    </div>
  </div>
  </section>
  <div class="p-bread">
    <div class="l-container--1080">
      <ul class="p-bread__list">
        <li><a href="<?php echo home_url(); ?>">Home</a></li>
        <li><a href="<?php echo home_url(); ?>/info">News</a></li>
        <li><span><?php the_title(); ?></span></li>
      </ul>
    </div>
  </div>
  <!-- Contact -->
  <?php get_template_part('component/_contact'); ?>
</div>
<?php get_footer(); ?>

CSS

/* ! ==================================================
- コンポーネント
================================================== */
/* ! --------------------------------------------------
- コンポーネント / ボタン
-------------------------------------------------- */
.c-btn__line {
  color: var(--base);
  border-color: var(--base);
  background-color: transparent;
}
.c-btn__line:hover {
  background-color: rgba(8,6,24,.2);
}

.c-btn__w160{ max-width: 160px; }

/* ! ==================================================
- オブジェクト
================================================== */
/* ! --------------------------------------------------
- オブジェクト / お知らせ
-------------------------------------------------- */
.p-newsDetail__contents {
  padding: 40px 16px;
  margin: 0 auto;
  max-width: 640px;
}
.p-newsDetail__contents--head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px 16px;
  padding: 0;
  margin-bottom: 16px;
  border: none;
}
.p-newsDetail__contents--head .title {
  font-size: 24px; 
  line-height: 1.5em;
}

/* ! --------------------------------------------------
- オブジェクト / エディター
-------------------------------------------------- */
.p-editer .wp-block-image {
  margin-block: 16px;
}
.p-editer p {
  margin-block: 16px;
}
.p-editer strong {
  font-weight: 700;
}
.p-editer *:last-of-type {
  margin-bottom: 0;
}

表示の確認
ブラウザで表示を確認し、表示崩れなどないか確認しましょう。

2. 投稿記事の表示

この時点ではまだ投稿記事は表示されていないので、投稿記事を表示させるためのコードを追加します。

投稿を取得する準備をする
まずは、WordPressのループ処理（メインループ）を使って、投稿を取得する準備をします。

そのために、<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php endwhile; endif; ?> というコードを、投稿の内容を表示するコードを囲むように追加します。

<?php
  // WordPressループの開始
  if ( have_posts() ) :
  while ( have_posts() ) : the_post();
?>
<div class="p-newsDetail__contents--head p-list__item">
  <p class="date">投稿日を表示</p>
  <span class="c-category">カテゴリーを表示</span>
  <p class="title">投稿のタイトルを表示</p>
</div>
<div class="p-newsDetail__contents--body">
  投稿内容を表示
</div>
<?php
  endwhile; // ループの終了
  endif;
?>

投稿の内容を表示する
実際に投稿の内容を表示するためには、the_title() でタイトル、the_content() で本文、the_time() で日付など、関数を使って表示させます。

<?php
  // WordPressループの開始
  if ( have_posts() ) :
  while ( have_posts() ) : the_post();
?>
<div class="p-newsDetail__contents--head p-list__item">
  <p class="date"><?php the_time('Y.m.d'); ?></p>
  <span class="c-category">カテゴリーを表示</span>
  <p class="title"><?php the_title(); ?></p>
</div>
<div class="p-newsDetail__contents--body p-editer">
  <?php the_content(); ?>
</div>
<?php
  endwhile; // ループの終了
  endif;
?>

表示の確認
ブラウザで表示を確認し、表示崩れなどがないか確認しましょう。
サイトが正しく表示されていれば完了です。

投稿詳細ページ作成のポイント

専用のテンプレートファイルを作成する
投稿の詳細ページには、single.php という専用のテンプレートファイルを用意します。
ループ処理を使用し、投稿の内容を表示させる
the_title() や the_content() といった関数を使う前に、have_posts() や the_post() を使ったループ処理で投稿を取得する必要があります。
一覧とループ処理が違うので注意する
投稿一覧（例えば index.php や archive.php）では複数の投稿をループで扱いますが、 single.php では基本的に1つの投稿を対象とします。同じループでも書き方や使い方に違いがあるので注意が必要です。