この記事では、WordPressのメインループとサブループの違いと、記事を繰り返し表示する方法について、初心者向けに基本を交えて解説します。
実際のコードも紹介していますので、実務にも是非参考にしてみてください！
WordPressのループとは
WordPressにおける「ループ」とは、WordPressで記事として書いた「投稿」を実際の画面へ表示するために使う処理のことです。簡単に言えば、投稿を”取得”して”表示”するために使います。
「ループ＝繰り返し」と意味するように、取得した情報を繰り返し処理してくれます。
例えば、下記画像のような表示はループの処理を用いています。
投稿記事のアイキャッチ画像(サムネイル)や、公開日・更新日、タイトルなどの情報が繰り返し表示されていますね！
「記事の一覧ページ」であったり、記事のサイドバーにある「おすすめ記事」などでよく見かけることも多いのではないでしょうか？
これらの表示については、いちいち同じコードを3つ書いているわけではなく、1つのPHPコードを書いているだけです。
このループ処理はWordPressを利用している多くのサイト・場面で使われ、WordPress構築をするなら必ず使う基本となるコードです。
しかしこのループ処理には、「メインループ」と「サブループ」の2種類があり、それぞれの違いを理解していないと沼にハマることもしばしば。。。
以降、初心者の方にも分かるよう詳しく解説していきます！
メインループとサブループの違い
ループには、「メインループ」と「サブループ」の2種類がありますが、それぞれ「投稿の情報を繰り返し表示する」という目的は変わりません。
ただ、状況に応じてメインループとサブループを使い分ける必要があります。
主に下記のような時です。
- 取得したい情報での使い分け。（取得したい情報によってPHPコードの記述方法が異なる）
- 記述するPHPファイル（テンプレートファイル）での使い分け。（page.phpやsingle.phpなど）
メインループとは？
メインループとは、指定せずに自動で読み込む情報の繰り返しのことです。
ようは、WordPress側が事前に用意してくれているループです。
主に下記のような特徴があります。
- テンプレートファイル(〇〇.php)に応じた情報のみを取得する。
※記事ページ(single.php)であれば記事の情報、カテゴリーページ(category.php)であればカテゴリーの情報のみを自動取得。 - 細かい条件の指定ができない。
※指定は可能だが、functions.php内で記述したり、WordPressの管理画面にて指定する必要あり。 - 1ページ(テンプレートファイル)あたり1回まで利用可能。
特徴を見ていただくと、「融通が利かないな…」と思うかもしれません。。。
そんな時にサブループの出番です！
サブループとは？
サブループとは、読み込みたい情報をみずから記述することで初めて読み込んでくれる情報のことです。
ようは、自分で作れるループです。
主に下記のような特徴がります。
- メインループで自動取得される情報以外の情報も自由に取得可能。
- 投稿の取得数や並び順など、細かい条件の指定が可能。（WP_Queryかget_postsを使う）
- 1ページあたり何回でも利用可能。
特徴を見ていただくとわかるように、「メインループは使わずにサブループでよくない？」と思うかもしれませんね。。。
もちろんサブループだけ使用しても良いです。
が、メインループで自動取得してくれているのにサブループで取得するのは無駄な記述でもあります。
（細かいことを言えば、メインループで取得できるならメインループで表示させるほうが、WordPressの仕組みに則った方法となります。”おそらく”処理も早く、”おそらく”謎のバグに遭遇する確率も低いです。）
また、一覧ページでページネーションをつける場合はメインループでの処理が必要となっており、サブループを使うと機能しない（ひと癖ある）などの、メインループとサブループの違いを理解していないと思わぬ沼にハマることもあります。
メインループとサブループの違いまとめ
| メインループ | サブループ | |
|---|---|---|
| 取得の方法 | 自動で取得 | 自分で作成 |
| 条件の指定 | 細かい指定ができない | ループごとに細かく指定可能 |
| 処理できる数 | 1テンプレートファイルあたり1回まで | 1テンプレート内で何回でも利用可能 |
| 処理の記述 | pre_get_posts | WP_Queryとget_posts() |
メインループの記述方法
通常は下記のような書き方をします。
<?php if ( have_posts() ) : ?>
<?php while(have_posts()): the_post(); ?>
<!-- 繰り返し処理する内容 -->
<?php endwhile; ?>
<?php endif; ?>コードを見ていただくと、「どんな情報を取得するのか」といった記述が無く、「もし記事があったら（if分）」で始まっています。
これがメインループの特徴で、すでに自動で情報を取得しているために、「もし記事があったら」で記述を始めることができます。
メインループのコード解説
1行目（if）
<?php if(have_posts()): ?>このコードで、メインループとして自動取得する投稿の情報（データ）があるかどうか？をチェックします。情報（データ）があった場合、下記2行目の処理に進みます。
2行目（while）
<?php while(have_posts()): the_post(); ?>このコードによって、投稿の数だけ繰り返し処理が行われます。
そのため例えば、投稿データが8件あった場合、処理が8回自動的に行われます。
4行目（endwhile）
<?php endwhile; ?>繰り返し処理を終了します。
この記述が無いと永遠に繰り返しすることになるので注意！
5行目（endif）
<?php endif; ?>最後に、条件指定を終了します。
こちらの記述が無いとPHPから怒られます。
【参考例】実務でよく使うコード集
以降では、Web制作現場でよく見るコードをご紹介します。
省略した書き方
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- 繰り返し処理する内容 -->
<?php endwhile; endif; ?>条件指定(if、endif)と繰り返し指定(while、endwhile)を1行で書くことが可能です。
投稿データがない場合にも対応
<?php if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<!-- 繰り返し処理する内容 -->
<?php endwhile; ?>
<?php else: ?>
<!-- 投稿データがない場合表示される部分 -->
<?php endif; ?>if分の「else」を利用することで、「もしも投稿がない場合」の記述をすることが可能です。
「記事が見つかりません」などの文言を書いておくほうが、なにも表示しないよりは親切ですね！
投稿データが必ずある場合
<?php while(have_posts()): the_post(); ?>
<!-- 繰り返し処理する内容 -->
<?php endwhile; ?>投稿データが無い場合への対応とは逆に、必ず投稿がある場合も考えられます。
例えばブログサイトの場合、1つも記事が無いということは考えにくいですよね。
この場合は、if文の記述を省略してwhile文から始めることも可能です。
ただ、予期せぬエラー等にもなりかねないので、あまりこの書き方は見かけません。
リスト形式(ul,li)で出力する
<?php if(have_posts()): ?>
<ul>
<?php while(have_posts()): the_post(); ?>
<li>繰り返し処理する内容</li>
<?php endwhile; ?>
</ul>
<?php else: ?>
<p>記事が見つかりません</p>
<?php endif; ?>もし投稿データがあった場合は、<ul>を表示し、投稿データの数分<li>を繰り返すという記述です。
もし投稿データがない場合は、<ul> ～ </ul>は出力されず、<p>タグ内のみが出力されます。
SEOのことを考えると、繰り返しされる内容の場合はリスト形式でHTML出力されたほうが良いと言われています。コードも綺麗ですね。
サブループの記述方法
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => 12,
);
$the_query = new WP_Query($args);
?>
<?php if ($the_query->have_posts()): ?>
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
<!-- ここに投稿がある場合の記述 -->
<?php endwhile; ?>
<?php else: ?>
<!-- ここに投稿がない場合の記述 -->
<?php endif; wp_reset_postdata(); ?>コードを見ていただくと、メインループとは異なり、「どんな情報を取得するのか」といった記述が必要になっています。
上記のコードでは、$the_queryという箱にどんな情報を取得するかを格納している感じです。
サブループの記述方法には、「WP_Query()」と「get_posts()」の2つの記述方法が主にあります。
※以前は上記2つに加えて「query_posts」が使われることもありましたが、現在は非推奨となっています。
これらの大きな違いとなると、取得できる情報量が違うことと、記述が若干異なるくらいです。
| WP_Query() | 投稿データ以外にもページの情報も取得できる。 while文で処理。 |
| get_posts() | 投稿データに関する情報しか取得できない。 foreach文で処理。 |
2つあるものの、前者の「WP_Query()」の方がより複雑な処理を行うことができます。
実際、どちらの記述もよく見るのでどちらも覚えておいて損はないと思いまが、どちらかといえばWP_Query()のほうが実際に使われている場面が多い印象です。
なお、サブループについては、条件の指定などさまざまな記述があります。下記記事で詳しく紹介していますので是非！
