これまでの記事でメインループで投稿を一覧に表示させる仕組みを解説しました。
本記事では、メインループで表示させた投稿をクリックしたときに表示させる個別投稿ページの作成と解説をします。
WordPressを扱う上で、欠かせない仕組みになるので理解していきましょう。
個別投稿ページとは
個別投稿ページとは、投稿一覧ページの中の記事をクリックした際の遷移先のページになります。
つまり、記事の中身が書かれている詳細のページになります。
画像で言うところの青枠が「個別投稿ページ」です。
ページ例
投稿一覧ページ ZeroPlus Mediaの例
個別投稿ページ ZeroPlus Mediaの例
テンプレートファイル
個別投稿ページを作成するために使用するテンプレートファイルもWordPressのテンプレート階層で明言されています。
個別投稿ページで使用するファイルとして上から順に以下のように優先されて表示されます。
- single-post.php
- single.php
- singular.php
- index.php
single-post.phpがなければ、single.phpが表示され、さらに存在しなければ singular.phpが表示される、という仕組みになっています。
規模によって作成するファイルを決定しましょう。
個別投稿ページを作成
投稿一覧ページは作成している前提で、個別投稿ページの作成の解説をします。
メインループを使って投稿一覧ページを作る流れについては、「WordPressのメインループを使って投稿を表示しよう」の記事をご覧ください。
個別投稿内容を表示する
個別投稿ページのサンプルコードをもとに確認してみましょう。
サンプルコード
<article class="l_container-sm single">
<?php
if (have_posts()) :
while (have_posts()) :
the_post();
?>
<div class="single_main_thumb-wrapper">
<?php the_post_thumbnail(null, array('class' => 'single_main_thumb')); ?>
</div>
<div class="single_main_content">
<h1>
<?php the_title(); ?>
</h1>
<?php the_content(); ?>
</div>
<?php
endwhile;
else:
?>
<p>投稿データはありません</p>
<?php endif; ?>
</article>個別投稿内容を表示するために使用するWordPressの関数は、投稿一覧ページで使ったメインループの書き方と基本的に同じです。
WordPressのメインループは、表示しているファイル（ページの種類）に応じて自動で出力内容を判断する仕組みになっています。
投稿一覧ページ（home.phpなど）： 該当する投稿が存在する限り、繰り返し一覧で表示する
個別投稿ページ（single.php）：クリックされた特定の投稿（1件）の詳細内容を表示する
記述するコード自体はほぼ同じですが、WordPress側で「1件分だけを出力する」と自動判別してくれる点が大きなポイントです。
関数などの詳細は「WordPressのメインループを使って投稿を表示しよう」の「メインループを書く」セクションをご覧ください。
上記記事で解説していない関数を紹介します。
the_content();
その投稿の本文の内容を表示します。
<div class="post_content">
<?php the_content(); ?>
</div>
まとめ
個別投稿ページの作成方法について解説しました。
投稿一覧ページで使用する関数とあまり変わりませんが、メインループは呼び出されるファイルによって出力するデータが違うんだなと思ってもらえるといいかと思います。
