④投稿記事一覧を表示させる[ループ]
投稿日：2020年12月21日
前回はindex.phpテンプレートをheader.phpやfooter.phpテンプレートに分割するまでを行いました。今回は、下記イラストの構造における「記事」の部分を作成していきます。
まずテンプレートにコードを記述する前に、適当な記事を投稿して下さい。
次にフロントページ（index.php）に、投稿した記事の一覧を表示させます。index.phpテンプレートを以下のように記述してみます。
index.php
<?php get_header(); ?>
<main>
<?php if(have_posts()): while(have_posts()):the_post(); ?>
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>
<p><?php the_category(', '); ?></p>
<p><?php the_content('Read more'); ?></p>
<?php endwhile; endif; ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>5行目と13行目のループの部分は以下のような構成になっています。
記事（投稿）があるかを判定し、 if(have_posts())
記事がある間はループさせ while(have_posts())
記事を取得します。 the_post()
記事が無くなればループを終了し endwhile
完了となります。 endif
記事が表示されました。
次に表示件数を変更してみます。設定＞表示設定 画面の「1ページに表示する最大投稿数」はデフォルトでは10件に設定されているので、2件に設定してみて下さい。
フロント画面は最新の記事が2件だけ表示されます。以前の記事一覧を見るためには、「古い投稿ページへ」のような文言とそのリンクを用意しなくてはいけません。この場合、previous_posts_link とnext_posts_link タグを記事ループの外に記述します。
古い投稿ページのリンクをクリックすると2ページ目が開きます。
今回作成した最終のindex.phpです。
<?php get_header(); ?>
<main>
<?php if(have_posts()): while(have_posts()):the_post(); ?>
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>
<p><?php the_category(', '); ?></p>
<p><?php the_content('Read more'); ?></p>
<?php endwhile; endif; ?>
<?php previous_posts_link('新しい投稿ページへ'); ?>
<?php next_posts_link('古い投稿ページへ'); ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>previous_posts_link とnext_posts_link タグとは別に、個別記事ページ（single.php等）で利用するページ送りのための previous_post_link とnext_post_link タグがあることに注意して下さい。postの後にsがあるかないかの違いです。