【WordPress】記事詳細ページを作成する【single.php】

こばゆた

普通のサイトやブログだと記事についているリンクをクリックすることで詳細ページに飛べたりしますが、自作テーマの場合は初期状態では記事をクリックしても詳細を見ることはできません。

今回はWordPressの投稿ページから記事を投稿し、見ることができるように設定します

今日のテーマ

WordPressの記事詳細ページが作れるようになる
Topページとの繋げ方と情報の取得ができる

こばゆた

手順は以下の通りです

記事詳細ページができるまで

Topページの記事に関する箇所を作成する
記事詳細ページを作成する

また今回はループを使いますのでまだの方はぜひこちらを↓

【WordPress】WordPressループの基本とテンプレートタグ

WordPressのテーマ制作に必須の「ループ」処理を初心者向けに解説。投稿を表示する基本的なPHPコードの書き方から、使い方までを具体例で紹介。この記事を読めば、自由な投稿表示が実現できます。

▶ 記事を読む 2025.07.03

1.記事一覧箇所の作成をする
2.記事の作成の仕方(参考)
3.記事単体ページ(single.php)を作る
4.まとめ

1.記事一覧箇所の作成をする

今回であればTopページになるのでTopページにループを作成します。

ループの作り方

STEP1

該当箇所をループで囲む

今回ループさせたいのは以下の箇所のdt(日付とアイコン)とdd(本文の部分)の部分ですのでループのコードで挟みます。

<dl class="new">
  <?php if(have_posts()) : ?> 
  <?php while(have_posts()) : the_post(); ?> 
    <dt>2024/06/XX<span>アイコン</span></dt>
    <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。 </dd>
  <?php endwhile; ?>
  <?php else : ?>
    <p>記事がありません</p>
  <?php endif; ?>
  <dt>20XX/00/00<span class="icon-bg1">アイコン１</span></dt>
  <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>
  <dt>20XX/00/00<span class="icon-bg2">アイコン２</span></dt>
  <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>
  <dt>20XX/00/00</dt>
  <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>
</dl>

STEP2

不要な部分を削除する

不要部分を削除します。

<dl class="new">
  <?php if(have_posts()) : ?> 
  <?php while(have_posts()) : the_post(); ?> 
    <dt>2024/06/XX<span>アイコン</span></dt>
    <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。 </dd>
  <?php endwhile; ?>
  <?php else : ?>
    <p>記事がありません</p>
  <?php endif; ?>
  <!--           ここから         -->
  <dt>20XX/00/00<span class="icon-bg1">アイコン１</span></dt>
  <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>
  <dt>20XX/00/00<span class="icon-bg2">アイコン２</span></dt>
  <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>
  <dt>20XX/00/00</dt>
  <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>
  <!--           ここまで削除      -->
</dl>

STEP3
完成
完成です。
```
<dl class="new">
 <?php if(have_posts()) : ?> 
 <?php while(have_posts()) : the_post(); ?> 
 <dt>2024/06/XXアイコン</dt>
 <dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。 </dd>
 <?php endwhile; ?>
 <?php else : ?>
 記事がありません
 <?php endif; ?>
</dl>
```
再読み込みして上の画像のようになっていれば完成です。
また今回作成した記事数が３つなので表示されている記事が３つということになります。

こちらはダッシュボードの「設定」→「表示設定」で1ページに表示する最大投稿数の数を変えることでトップページに表示される投稿の数を変えることができます。
STEP4
テンプレートタグを入れ替える
記事の情報を表示するためにテンプレートタグと入れ替えます。

またテンプレートタグについては以下の記事に解説がありますので詳細は割愛します。

【WordPress】WordPressループの基本とテンプレートタグ

WordPressのテーマ制作に必須の「ループ」処理を初心者向けに解説。投稿を表示する基本的なPHPコードの書き方から、使い方までを具体例で紹介。この記事を読めば、自由な投稿表示が実現できます。

▶ 記事を読む 2025.07.03

タイトル部分に
```
<?php the_title(); ?>
```
日付部分に
```
<?php the_time('Y/m/d'); ?>
```
カテゴリー部分に
```
<?php
 $cat = get_the_category(); 
 $cat = $cat[0]; { echo $cat->cat_name; } 
?>
```
リンク部分に
```
<?php the_permalink(); ?>
```
最終的に以下のようになっていればOKです。
```
<dl class="new">
 <?php if(have_posts()) : ?> 
 <?php while(have_posts()) : the_post(); ?> 
 <dt><?php the_time('Y/m/d'); ?>
 
 <?php
 $cat = get_the_category(); 
 $cat = $cat[0]; { echo $cat->cat_name; } 
 ?>
 
 </dt>
 <dd><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></dd>
 <?php endwhile; ?>
 <?php else : ?>
 記事がありません
 <?php endif; ?>
</dl>
```

2.記事の作成の仕方(参考)

一応ここで記事の新規作成にも触れておきます。

「ダッシュボード」→「投稿」→「新規追加」をクリックします。

こばゆた

これだけで記事が作成できます！

テストですので一旦はこちらで大丈夫です

3.記事単体ページ(single.php)を作る

見た目はできましたがまだタイトルをクリックしてもページは移らないので、次はリンク先である記事単体のページを作ります。

記事単体ページはsingle.phpというものを作ることで表示することができるようになります。

single.phpの作り方

STEP1
single.phpを作成する

single.phpというファイル名で新規作成します。
STEP2
single.htmlからsingle.phpへコピーをする

single.htmlからsingle.phpへ全てコピーします。
STEP3
headerとfooter部分を入れ替える
index.phpを作成した時と同様にheader部分をget_headerと入れ替えます。
```
<?php get_header(); ?>
```
footer部分も同様ににget_footerと入れ替えます。
```
<?php get_footer(); ?>
```
上の画像のようになればOKです。

STEP4

single.phpでループを作成する

情報を表示するためにループを作成します

こばゆた

今回はarticle内にループを作成しました

<article>
  <?php if(have_posts()) : ?>
  <?php while(have_posts()) : the_post(); ?> 
    <span>アイコン</span>
    <h2 class="normal">記事タイトル</h2>
    <span>2024/06/XX</span>

    <figure class="c mb30">
      <img src="images/1.jpg" id="bukken_image" class="mb30" alt="">
    </figure>

    <div></div>
  <?php endwhile; ?>
  <?php else : ?>
    <p>記事がありません</p>
  <?php endif; ?>
</article>

ラベル

single.phpにテンプレートタグを埋め込む

今回は以下の箇所をテンプレートタグで入れ替えました。

タイトル
カテゴリー
投稿日
内容

入れ替え後のコードはこちら👇

<article>
  <?php if(have_posts()) : ?>
  <?php while(have_posts()) : the_post(); ?> 
    <span>
      <?php
        $cat = get_the_category(); 
        $cat = $cat[0]; { echo $cat->cat_name; }  
      ?>
    </span>
    <h2 class="normal"><?php the_title(); ?></h2>
    <span><?php the_date('Y/m/d'); ?></span>

    <figure class="c mb30">
      <img src="images/1.jpg" id="bukken_image" class="mb30" alt="">
    </figure>

    <div><?php the_content(); ?></div>
  <?php endwhile; ?>
  <?php else : ?>
    <p>記事がありません</p>
  <?php endif; ?>
</article>

このように記事の情報が表示されていれば完成です。

4.まとめ

1.Topページの記事に関する箇所を作成する

<?php if(have_posts()) : ?> <!--投稿があれば-->
<?php while(have_posts()) : the_post(); ?> <!--投稿がある分だけ処理を繰り返す-->

  <!--この中に処理を入れる-->

<?php endwhile; ?>
<?php else : ?> <!--投稿がなければ「記事がありません」と表示する-->
  <p>記事がありません</p>
<?php endif; ?>

2.テンプレートタグと入れ替える

3.single.phpを作成し、内容をコピー、headerとfooterを変える

4.記事ページにもループとテンプレートタグを埋め込む

こばゆた

とてもシンプルですが完成しました！

ここにページャーという「次の記事へ」のようなリンクを付けたり、コメント用の欄を付けたりなどデザインや必要に応じてカスタマイズしていきます

WordPressをもっと学びたい方はこちらもオススメです！

リンク

1.記事一覧箇所の作成をする

2.記事の作成の仕方(参考)

3.記事単体ページ(single.php)を作る

4.まとめ

広告

コメント