WordPressのオリジナルテーマ　投稿ページを表示（single.php)

目的

• 投稿タイプ「投稿（Post）」の記事詳細ページを表示するテンプレート single.php を作成する
• 投稿のタイトル・本文・日付などを出力し、1件ずつの詳細ページを実現する
• 投稿タイプ「投稿」専用テンプレートとして、固定ページ（page.php）と区別する

投稿タイプ「投稿」と「固定ページ」の違い

single.php を作成する

single.php を新規作成し、以下のコードを記述します。

<?php get_header(); ?>
<!-- ===========================
 ヘッダーを読み込み（header.php）
=========================== -->

<main class="single-post"> <!-- 投稿詳細ページ用のメインクラス -->

  <!-- タイトルとメタ情報（投稿日時・カテゴリー） -->
  <div class="sub-title">
    <h1><?php the_title(); ?></h1> <!-- 投稿のタイトル -->

    <div class="post-meta">
      <!-- 投稿日時：datetime属性にフォーマット付きで -->
    <time datetime="<?php echo get_the_date('Y-m-d'); ?>">
     <?php echo get_the_date('Y年n月j日'); ?>
    </time>

      <!-- カテゴリー表示：複数ある場合はカンマ区切り -->
      <span class="post-category">
        <?php the_category(', '); ?>
      </span>
    </div>
  </div>

  <!-- メイン＋サイドバーの2カラムレイアウト -->
  <div class="container flex-area">

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
      <!-- 投稿1件分の内容を囲む -->
      <article class="main-area">

        <!-- アイキャッチ画像が設定されていれば表示 -->
        <?php if (has_post_thumbnail()) : ?>
          <div class="post-thumbnail">
            <?php the_post_thumbnail('large'); ?> <!-- サイズはlarge指定 -->
          </div>
        <?php endif; ?>

        <!-- 投稿本文 -->
        <div class="post-content">
          <?php the_content(); ?>
        </div>
      </article>
    <?php endwhile; endif; ?>

    <!-- サイドバー -->
    <aside class="sidebar">
      <?php get_sidebar(); ?>
    </aside>

  </div>
</main>

<!-- フッターを読み込み -->
<?php get_footer(); ?>