この記事の監修者
三谷 将大
フリーランスエンジニア/WEBデザイナー/WEBマーケター
1997年 愛知出身。
業界5年以上。実務経験後に独立し、30社以上のホームページ制作やマーケティング支援を行っている。
今回は記事一覧ページの作り方についての解説です。
テンプレートファイルの準備
まずはテンプレートファイルを作成します。
前回までの記事をfront-page-phpをトップページとして作成しているので、こちらで紹介する方法ではhome.phpを作成します。
管理画面での設定
ファイルを作成したら管理画面から固定ページとして「記事一覧」ページを作成します。
固定ページを作成後、表示設定へ進みます。
「ホームページの表示」より投稿ページで作成したページを選択します。
ホームページをTOPページ、投稿ページを記事一覧とすることで、テンプレートファイルは
TOPページがfront-page.php＞投稿ページがhome.phpとなります。
コードの中身について
基本的な書き方
記述例として以下になります。
<?php get_header(); ?>
<main class="main">
<article class="">
<ul class="">
<!-- 記事のループ処理開始 -->
<?php
if( wp_is_mobile() ){
$num = 3; // スマホの表示数(全件は-1)
} else {
$num = 5; // PCの表示数(全件は-1)
}
$args = [
'post_type' => 'post', // 投稿タイプのスラッグ(通常投稿では'post')
'posts_per_page' => $num, // 表示件数を設定
];
$wp_query = new WP_Query($args);
if (have_posts()): while (have_posts()): the_post();
?>
<li class="">
<!-- 記事へのリンク -->
<a href="<?php the_permalink(); ?>" class="">
<!-- アイキャッチ -->
<div class="">
<?php the_post_thumbnail('post-thumbnail', array('alt' => the_title_attribute('echo=0'))); ?>
</div>
<p class="">
<!-- 投稿日 -->
<time datetime="<?php the_time('Y.n.j'); ?>">
<?php the_time('Y.m.d'); ?>
</time>
</p>
<div class="">
<!-- カテゴリー1件表示(カテゴリー順の上にある方が表示される) -->
<?php
$category = get_the_category();
echo '<span class="'.$category->slug.'">'.$category[0]->name.'</span>';
?>
</div>
<h2 class="">
<!-- タイトル -->
<?php the_title(); ?>
</h2>
<div class="">
<!-- 本文の抜粋 -->
<?php the_excerpt(); ?>
</div>
</a>
</li>
<?php endwhile; else: ?>
<p>まだ記事がありません</p>
<?php endif ?>
<?php wp_reset_postdata(); ?>
<!-- 記事のループ処理終了 -->
</ul>
</article>
</main>
<?php get_footer(); ?>ポイントを解説していきます。
まず、こちらでもヘッダー、フッターを読み込む関数を忘れず記述しましょう。
そして記事一覧では、記事のタイトルや日付など同じ項目を記事ごとに連続して表示するので、ループ処理を使用します。ループ関数としてはwhile()を使用しているのですが、いくつか条件を加えています。
...
<!-- 記事のループ処理開始 -->
<?php
if( wp_is_mobile() ){
$num = 3; // スマホの表示数(全件は-1)
} else {
$num = 5; // PCの表示数(全件は-1)
}
...この箇所では表示件数をスマホとPCで設定し分けています。
...
$args = [
'post_type' => 'post', // 投稿タイプのスラッグ(通常投稿では'post')
'posts_per_page' => $num, // 表示件数を設定
];
...ここではどの投稿タイプかと取得する記事の数を決めています。
別記事で紹介するカスタム投稿（デフォルトの投稿とは別に投稿機能を追加したもの）を利用する際に、値が変わってきます。
...
if (have_posts()): while (have_posts()): the_post();
?>
//ここから
...
...
//ここまで
<?php endwhile; else: ?>
<p>まだ記事がありません</p>
<?php endif ?>
<?php wp_reset_postdata(); ?>
...上記のように<?php endwhile; else: ?>までで記述された内容がループ処理されていきます。
そのあとの<?php endif ?>までは、記事が取得できなかった場合の処理を記載しています。
そして<?php wp_reset_postdata(); ?>ですが、こちらも重要なので忘れないようにしましょう。
コード前半の$wp_query = new WP_Query($args);で取得した記事のデータをリセットする役割があります。
wp_reset_postdata()でリセットしなかった場合、その後で使用する記事情報などがWP_Query()の処理の影響を受けたままになってしまいます。
こういった意図しない挙動になるのを防ぐため、WP_Query()のループの後でwp_reset_postdata()を使ったリセットが必要になります。
ページネーションを設置
ページ送りするページネーションが必要な場合は加える記述を紹介します。
<?php
the_posts_pagination( array(
'mid_size' => 1,
'prev_text' => '前へ',
'next_text' => '次へ'
) );
?>こちらを設置した箇所にページ送りボタンを表示します。初めに紹介した記述例の</ul>の直後に置きましょう。
そして以下のように、ループの開始処理を記述している箇所に2行加えます。
<!-- 記事のループ処理開始 -->
<?php
if( wp_is_mobile() ){
$num = 3; // スマホの表示数(全件は-1)
} else {
$num = 5; // PCの表示数(全件は-1)
}
$paged = get_query_var('paged') ? get_query_var('paged') : 1; //ここ
$args = [
'post_type' => 'post',
'paged' => $paged, // ここ
'posts_per_page' => $num,
];
$wp_query = new WP_Query($args);
if (have_posts()): while (have_posts()): the_post();
?>以上でページネーションの表示ができます。
見た目はCSSを触れば変更が可能です。
固定ページ内などに記事一覧を設置する場合
よくあるパターンとして、TOPページに4件だけ新着記事を出して、もっと見るボタンからページ一覧へ。という流れがあります。
その際の書き方ですが、ページネーションのない場合の記述と同じ書き方でOKです。
今回紹介したループ処理の記述はどの固定ページでも使用可能ですので、表示件数や、ループの中身で表示する項目を任意で変更して記述してください。
