これまでの記事でメインループで投稿を一覧に表示させる仕組みを解説しました。
本記事では、メインループで表示させた投稿をクリックしたときに表示させる個別投稿ページの作成と解説をします。
WordPressを扱う上で、欠かせない仕組みになるので理解していきましょう。
- 個別投稿ページを作成する方法
案件が取れなくて悩んでいるあなたへ
プログラミング案件獲得のために必要なスキルは、単に技術力だけではありません。営業力、コミュニケーション力、人脈などの幅広いスキルや要素が求められてきます。
営業からライティング、SEOまで学べるフリーランス特化型プログラミングスクールZeroPlusで、フリーランスエンジニアに必要なすべてを手に入れませんか？
- またゼロからやり直さないといけないの？
- 本当にフリーランスになれるの？
といった不安にも、超フレンドリーな相談員が親切に相談にのります。スクール以外のご質問もOK！
＼お申し込みは30秒で終わります。／
新しい一歩を、今踏み出してみませんか？
個別投稿ページとは
個別投稿ページとは、投稿ページ一覧の中の記事をクリックした際の遷移先のページになります。つまり、記事の中身が書かれている詳細のページになります。
画像でいうところの青枠が「個別投稿ページ」です。
ページ例
投稿一覧ページ 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のメインループは、表示しようとしているファイル名によって出力する内容が変わるようになっています。
- 投稿一覧ページ： 投稿があるだけ繰り返し表示する
- 個別投稿ページ： 任意の投稿の内容を表示する
関数などの詳細は「WordPressのメインループを使って投稿を表示しよう」の「メインループを書く」セクションをご覧ください。
上記記事で解説していない関数を紹介します。
the_content();
その投稿の本文の内容を表示します。
<div class="post_content">
<?php the_content(); ?>
</div>
まとめ
個別投稿ページの作成方法について解説しました。
投稿一覧ページで使用する関数とあまり変わりませんが、メインループは呼び出されるファイルによって出力するデータが違うんだなと思ってもらえるといいかと思います。
