WordPressの任意のループ（サブループ）を作る方法と覚えておきたい指定方法

2018年12月30日2021年11月26日

WordPressでサイト制作する上で絶対に押さえておくべき仕組みの1つに「任意のループを作る」があると思っています。

「ループ」とは管理画面から投稿した記事をまとめて一覧で表示させる仕組みとイメージしていただければいいと思います。これをテンプレートの好きな場所に好きな条件で表示させられうかどうかが、思い通りのサイトを作れるかどうかの分かれ道になるかもしれません。

よくあるのが、コーポレートサイトのトップページの一部に「新着ニュース」を部分的に表示されるみたいな書き方ですね。

この記事では、WordPressで好きな箇所に好きなループを作る方法を紹介していきます。

はにわまん

好きなようにループが書けるとWordPressが楽しくなってくるかもしれません！

WordPressの任意のループを作る方法

説明の順番としてメインループが一応いると思ったので、メインループ → サブループ（任意のループ）の順に説明していきます。

メインループを知る

通常のループは以下のような書き方をします。この何もカスタマイズしていないループをメインループと呼びます。一般的なテーマでこの記述がないテーマは存在しないはずです。

<?php if ( have_posts() ) : ?>
	<?php while ( have_posts() ) : ?>
		<?php the_post(); ?>
		<p>処理内容</p>
	<?php endwhile; ?>
<?php endif; ?>

ここでループする内容は呼び出されるテンプレートごとに異なるのですが、

page.phpから呼ばれたなら、固定ページの該当記事
category.phpから呼ばれたなら、該当カテゴリーの一覧

みたいな感じです。

category.phpやarchive.phpから呼ばれる時の表示件数は、管理画面の「表示設定」で決まっています。

この設定は全体のループに反映されることになるので、例えばカテゴリーが「news」の投稿の記事を部分的に5記事だけ表示させたいといったことはメインループを使うことでは実現ができません。

サブループを知る

サブループはメインループから一時的に外れたループという覚え方をするといいかと思います。一時的という表現を使ったのは、「サブループを使った後はメインループに戻しましょう」という意味をこめています。

先ほど例に出した、「カテゴリーが「news」の投稿の記事を部分的に5記事だけ」をサブループで表現すると以下のようになります。

<?php
$news_query = new WP_Query(
	array(
		'post_type'      => 'post',
		'category_name' => 'news',
		'posts_per_page' => 5,
	)
);
?>
<?php if ( $news_query->have_posts() ) : ?>
	<?php while ( $news_query->have_posts() ) : ?>
		<?php $news_query->the_post(); ?>
		<p>処理内容</p>
	<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

今回のサブループを使うことによって、例えば以下のようなページを作ることができます。
（参考）→ 静的HTMLサイトをWordPress化するときの具体的な移行手順

メインループから追加された内容を解説していきます。

１、WP_Queryでループ内容をカスタマイズ

任意のループを作る上で必須で覚えておくべきがWP_Queryです。ループの条件を指定するものと捉えていただければと思います。

$news_query = new WP_Query(
	array(
		'post_type'      => 'post',
		'category_name' => 'news',
		'posts_per_page' => 5,
	)
);

投稿タイプを「post」、カテゴリーのスラッグ名を「news」、1ページあたりに取得する記事数を「3」という条件を指定しています。ここで作った条件をループでループさせていきます。

ちなみに一昔前によく使われたquery_posts();はあまり推奨されない書き方なので、使わないようにしましょう。

２、ループに条件を反映

have_posts()とthe_post()の前に$news_query->が追加されているのが分かるかと思います。このようにWP_Queryで作成した条件をループ処理に反映させています。

<?php if ( $news_query->have_posts() ) : ?>
	<?php while ( $news_query->have_posts() ) : ?>
		<?php $news_query->the_post(); ?>

３、メインループに戻す

サブループが終わった後のお約束として、以下の記述を書いてあげます。

<?php wp_reset_postdata(); ?>

WP_Queryで書き換わったループをなかったことにするというイメージでいいかと思います。

書かないといつまでも、グローバル変数の$postなどが書き換えられていて正しく取得できない可能性があります。WP_Queryとwp_reset_postdata()はセットで書くことを覚えておきましょう！

サブループはいくつでも書ける

そしてWP_Queryで作るサブループはテンプレート内でいくつでも作成が可能です。

今回のサブループの例で出した、投稿のカテゴリースラッグ名を指定して新着3件を表示するというサブループをいくつかのカテゴリーで作れば、3件ごとにカテゴリーで分けられたページが作ることができたりします（ブログのトップページとかでよく見ますね）

テスト的にわたしの「wordpress」「css」「javascript」で作ってみました。これは、$news_queryと'category_name'の値だけを変えて、並べただけです（長さの関係上、3件ずつにしました。）
※ Gif動画

サブループのページャーは癖がある

サブループでページャーを設置したい場合は、少し癖があります。訳の分からない$bigなどがありますが、公式を参考に「こういうもんだ」と割り切って使うのがいいのかなと思っています・・・（わたしが理解できていないだけ）
公式の参考 → 関数リファレンス/paginate links – WordPress Codex 日本語版

'total'で指定している$news_queryだけは、WP_Queryで作成した時の変数に置き換えてあげる必要があります。

$big        = 999999999;
echo paginate_links( array(
	'base'      => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
	'current'   => max( 1, get_query_var( 'paged' ) ),
	'total'     => $news_query->max_num_pages,
	'mid_size'  => 1,
	'end_size'  => 1,
	'prev_text' => '前',
	'next_text' => '次',
	'type'      => 'plane',
) );

WP_Queryで覚えておきたいプロパティ

WP_Queryではありとあらゆるパターンでループをカスタマイズできます。めちゃくちゃ多いので覚えることはできないと思いますが、カスタマイズしたくなった際は以下のページのプロパティを参考に設定してみてください。
→ 関数リファレンス/WP Query – WordPress Codex 日本語版

この記事ではわたしが個人的によく使うWP_Queryのプロパティを紹介していきます。

プロパティ	意味
`posts_per_page`	1ページあたりにどれだけ表示させるか管理画面の表示設定に縛られずに表示させるには、この指定は書かせません。`-1`で指定すると、件数指定なして全件が表示させるようにできます。 → ページ送りパラメータ
`cat`	カテゴリーIDの指定カテゴリーIDを絞ってループを回したい場合に使います。 → カテゴリーのパラメータ
`post_type`	投稿タイプの指定カスタム投稿タイプを作成している場合に指定を書き換えたりします。「お知らせ」用の投稿タイプをトップページにちょっと出したいときとか。 → 投稿タイプのパラメータ
`paged`	ページ番号一覧ページなどを作る際は2ページ以降も必要です。このパラメーターは○ページを指定できます。 → ページ送りパラメータ
`s`	検索キーワードの指定 search.phpをカスタマイズしてループ処理を変更させるときに使ったりします。 → 検索パラメータ
`order` `orderby`	並び順の指定日付やタイトル、投稿ID、ランダムなど、並び順を制御できます。 → 順序づけパラメータ

記事をランダム表示する方法

'orderby' => 'rand'で並び順をランダムにしています。

<?php
$the_query = new WP_Query( array(
		'orderby' => 'rand',
		'posts_per_page' => '5',
		) );
if ( $the_query->have_posts() ) :
	while ( $the_query->have_posts() ) :
		$the_query->the_post();
?>
								
<a href="<?php the_permalink();?>"><?php the_title();?></a>
				
<?php
	endwhile;
else:
?>	
<span>記事はありません</span>
<?php
endif;
?>
<?php wp_reset_postdata(); ?>