WordPressで投稿一覧を表示させる方法!メインループとサブループの違いについても解説!【オリジナルテーマ制作】

WordPressで投稿一覧を表示させる方法!メインループとサブループの違いについても解説!【オリジナルテーマ制作】
初心者きつね

トップページに記事一覧を出すためにphpに記述をしたんだけど、なぜか固定ページが1つだけ表示されてしまったんですけど。。

わい

それは使っているループが違う可能性があるよ!

オリジナルテーマ開発について自分で勉強 or 開発をしていたり、案件で対応する際に

アーカイブとして記事一覧を出したい場合と、トップページなどで表示したい場合などがあると思います。

ただ、投稿一覧ページをそれぞれ正しく表示させる場合には、メインループとサブループの違いを理解しておく必要があります。

メインループとサブループの違いをよく理解しておかないと、初心者きつねくんみたいに

表示したいものが適切に表示できない事態に陥ってしまう可能性があります。

わい

めちゃくちゃ複雑な概念というわけでもないので、ここでしっかりと認識しておき、開発や案件の時に判別できるようにしておこう!

目次

メインループとは?

メインループとは、WordPress側が標準で用意してくれているループのことです。

メインループを理解するには、メインクエリという概念の理解が必要です。

まず、WordPressの

  • 投稿記事情報
  • カテゴリーやタグ情報
  • 日付情報
  • 著者情報

などの情報は、データベースにデータとして保存されています。

あなたがWordPressでできたサイトのURLを打ち込むと、WordPress側でそのページに表示する内容をデータベースから取得してきて表示をしているわけです。

この、URLを打ち込むところからWordPressが正常にページとして出力するまでの流れをメインクエリと言いますが

メインループとは、メインクエリの繰り返しの処理のことです。

例えば、WordPressの記事の情報を1つ取ってくきて表示する際にも、今説明したメインクエリの流れで取得するわけですが

何個もの記事情報を繰り返し取ってくる場合には、1つの情報を取得するという行為を何回もやることになります。

この繰り返し行う処理のことをメインループと言うわけです。

サブループとは?

一方、サブループとはメインループでは処理できない内容に関して、繰り返して行う処理のことを言います。

サブループは

  • トップページに記事一覧を表示したい時
  • 記事一覧を、日付の古い順に並べたい時

などの、主に表示しているページと違うものを出力したいときに利用します。

記事一覧ページに投稿一覧を表示させる方法

具体的には、single.php内に記述をして投稿一覧を表示されるには、メインループを利用します。

なぜなら、先ほども言及した通り表示させたいページと表示させたい内容が一致しているから。

下のコードを記述すると、投稿ページで公開している記事の一覧が取得されます(1記事も公開していない場合は「記事が見つかりません」と表示される)。

PHP
<?php if(have_posts()): ?>
  <ul>
    <?php while(have_posts()): the_post(); ?>
      <li>繰り返し処理する内容</li>
    <?php endwhile; ?>
  </ul>
<?php else: ?>
  <p>記事が見つかりません</p>
<?php endif; ?>

記事一覧ページ以外に投稿一覧を表示させる方法

続いては、記事一覧ページ以外に投稿一覧を表示させる方法についてです。

代表的なのは、トップページに「News」という見出しで記事の一覧が並んでいる場合ですね。

記事一覧ページ以外に投稿一覧を表示させる、つまり表示させたいページと表示させたい内容が異なる場合はサブループを利用します。

トップページがどのphpで表示されるかは構成によって異なりますが、トップページ表示させているphpファイルの記事一覧を出力したい部分に以下のコードを貼り付けましょう。

PHP
<?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(); ?>

【結論】表示したい内容や場所によって、どちらを使うべきかを把握しよう!

ということで、今回はメインループとサブループの違いについて触れながら

WordPressで投稿一覧を表示させる方法について解説していきました!

最初は頭がこんがらがるかもしれませんが、自分でオリジナルテーマを開発する際や

オリジナルテーマを利用した新規サイト開発やサイト改修、リニューアルなどの際には今日話した内容をしっかりと理解しておく必要があります。

このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので

次回の記事もぜひ見てくださいね。

わい

記事をSNSで拡散すると、有益な投稿をするアカウントだと思われ
フォロー数やいいね数が増えるかもしれないよ!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

わい
Web制作未経験から、HTML/CSS(Sass)/JavaScript(JQuery)/WordPressを習得し、学習開始半年で月収10万円を達成。制作実績15件超。大手有名企業の提携会社のサイト制作も経験。
主にWeb制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しています。

コメント

コメントする

CAPTCHA


目次