通常の投稿一覧では、WordPressがURLに合わせて取得したメインクエリをループで表示します。一方、トップページの一部へ新着記事を3件だけ出す場合は、独自の取得処理が必要です。
WP_Queryを使うと、投稿タイプ、件数、カテゴリー、並び順などの条件を配列で指定できます。
取得条件を配列で用意する
WP_Queryでは、取得したい投稿の条件を配列へまとめてからループで表示します。
$news_query = new WP_Query(
array(
'post_type' => 'post',
'posts_per_page' => 3,
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'DESC',
)
);posts_per_pageは取得件数、orderbyとorderは並び順です。必要な投稿だけを取得し、表示後に使わない大量の投稿を読み込まないようにします。
独自クエリをループで表示する
<section class="latest-posts">
<h2>新着記事</h2>
<?php if ( $news_query->have_posts() ) : ?>
<ul>
<?php while ( $news_query->have_posts() ) : ?>
<?php $news_query->the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>">
<?php echo esc_html( get_the_title() ); ?>
</a>
<time datetime="<?php echo esc_attr( get_the_date( 'c' ) ); ?>">
<?php echo esc_html( get_the_date() ); ?>
</time>
</li>
<?php endwhile; ?>
</ul>
<?php else : ?>
<p>現在、公開されている記事はありません。</p>
<?php endif; ?>
</section>
<?php wp_reset_postdata(); ?>投稿が0件の状態も正常な状態です。空白にせず、利用者に状況が分かる文章を表示します。
次の画像は、「独自クエリをループで表示する」で扱うコードや構成をブラウザで表示した結果です。
ループ後に投稿データを戻す
the_post()は、テンプレートタグが参照する現在の投稿を切り替えます。独自ループの後にwp_reset_postdata()を実行しないと、その後のタイトルやURLが別の投稿になる場合があります。
次の図では、「ループ後に投稿データを戻す」の仕組みや関係を確認できます。
独自クエリを複数使う場合も、各ループの直後にリセットしてください。
条件を変更して確認する
- 件数を1件へ変え、表示数が変わるか
- 公開日を変え、降順に並ぶか
- 下書きが公開画面へ出ないか
- 投稿を0件にした場合の文章が出るか
- 独自ループの後にあるテンプレートタグが正しい投稿を参照するか
ユーザー入力をそのままクエリ条件へ入れないでください。検索語やURLの値を使う場合は、目的に合う検証と無害化を行います。
次の図では、「条件を変更して確認する」の仕組みや関係を確認できます。
