HOME > WordPress > ループで記事一覧を表示する(メインループとサブループ)

ループで記事一覧を表示する(メインループとサブループ)

記事一覧を表示するときに使われる「ループ」についてまとめました。

メインループとサブループ

ループで記事一覧を表示する。WordPressのテーマ作りで何度も使ってきたこの「ループ」。コピペだけで対応していると、幾通りかの書き方の違いや使いどころがわからないままだ。「メインループ」と「サブループ」という二つの「ループ」を知ったことがきっかけに、「ループ」について少し確認した。

メインループ

まず「メインループ」。通常の投稿を表示するために使うループのこと。1つのテンプレートで1回だけ使う。このループは、URLによるリクエストに基づくクエリがテンプレートの読み込みより前に実行されるとのこと。サブループと違ってリセットする必要はない(という表現はおかしいか?)。

<ul>
<?php while (have_posts()): the_post(); ?>
	<li>
	<h2><?php the_title(); ?></h2>
	<?php the_content(); ?>
	</li>
<?php endwhile; ?>
</ul>

投稿が無い場合もあるなら、投稿の有無で条件分岐してあげる。
<?php if (have_posts()): ?>【上記処理】<?php else: ?>【投稿が無い場合の処理】<?php endif; ?>

サブループ

サブループはメインループとは別にループを作りたい時に使う。カスタム投稿タイプの投稿を表示したい場合など。

サブループはクエリをリセットする(endwhile;のあとにwp_reset_postdata();と書く)必要がある。サブループはテーマのテンプレートやプラグインのファイルの中で実行されるので、メインクエリを上書きしており、クエリをリセットして上書きされたメインクエリを復元してやらないと、テンプレートタグが当該投稿のメインクエリを使えないままになってしまうから。
※メインクエリの挙動がおかしい?と思った時は、サブループのクエリのリセット忘れがないかチェックするとよいかも。

以下、WP_Queryを使ったサブループ。

<?php
$args = array( 
	'post_type' => 'カスタム投稿タイプname'
);
$the_query = new WP_Query($args); ?>
<?php while ($the_query->have_posts()): $the_query->the_post(); ?>
	<li>
	<h2><?php the_title(); ?></h2>
	<?php the_content(); ?>
	</li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>

投稿が無い場合もあるなら、投稿の有無で条件分岐してあげることになるのはメインループと同じだが、書き方がちょっと違うので要注意。
<?php if($the_query->have_posts()): ?>【上記処理】<?php else: ?>【投稿が無い場合の処理】<?php endif; ?>
当たり前だが、if~は$the_queryの後、whileの前に入れる。それとこの書き方の場合、wp_reset_postdata();はendwhile;の後、else:の前でOK。

実装ケース例

実装したケースの例をメモ。

  • カスタムタクソノミーのタームごとにカスタム投稿タイプの記事を一覧表示する場合で、タームごとのグループを(ターム名順でなく)任意の順で並べたい場合、タームで絞り込んだ記事一覧のループを、表示したいタームの数だけ繰り返し書いた。

表示する内容を制御するパラメーターの書き方

たとえば、1ページに含める投稿数を指定するパラメータposts_per_page

$the_query = new WP_Query( array( 'posts_per_page' => 3 ) );
<?php
$args = array( 
	'posts_per_page' => 3
);
$the_query = new WP_Query($args); ?>

より詳細なパラメーターは関数リファレンス/WP Query – WordPress Codex 日本語版を参照のこと。

参考サイト