WordPressのメインループとサブループの基本

WordPressで投稿一覧や記事詳細を表示するとき、よく出てくるのが「ループ」という考え方です。ループとは、取得された投稿データを1件ずつ取り出して表示する処理のことです。

ただし、ループには大きく分けてメインループとサブループがあります。どちらも投稿を表示できますが、役割が違います。この違いを理解しておくと、カスタム投稿タイプやページネーションで迷いにくくなります。

メインループは現在のページ条件につながる

メインループは、WordPressがそのページを表示するために最初から用意している投稿データの流れです。たとえば通常の投稿一覧、カテゴリー一覧、検索結果、カスタム投稿タイプのアーカイブなどは、URLや管理画面の設定に応じてメインループが作られます。

管理画面の「表示設定」にある1ページに表示する投稿数や、アーカイブページで現在何ページ目を見ているかという情報も、基本的にはこのメインループ側に関係します。つまり、ページそのものの一覧表示を作るなら、まずメインループを整えるのが自然です。

サブループは任意の場所に別の一覧を出す

サブループは、テンプレート内でWP_Queryなどを使って、自分で追加する別の投稿一覧です。トップページに最新のWordPress記事を3件だけ出す、記事詳細の下に関連記事を出す、固定ページの途中に制作実績を出す、というような場面で使います。

サブループは自由度が高く、メインループの条件に縛られにくいのがメリットです。一方で、ページネーションやカテゴリー絞り込みまで含めると、自分で扱う条件が増えるため実装が複雑になりやすいです。

どちらを使うかはページの役割で決める

考え方としては、そのページの主役となる一覧はメインループ、ページの一部に補助的に表示する一覧はサブループ、と分けると理解しやすくなります。

たとえば/wordpress/のようなカスタム投稿タイプの一覧ページであれば、そのページの主役はWordPress記事の一覧です。この場合は、サブループで無理に一覧を作るより、メインループをカスタム投稿タイプ向けに調整した方がシンプルです。

カスタム投稿タイプでメインループを使う理由

カスタム投稿タイプを作ると、通常の投稿とは別に「WordPress記事」「制作実績」「お知らせ」のような管理単位を作れます。ただし、一覧ページの表示では、WordPressがどの投稿タイプを対象にメインループを作っているかを意識する必要があります。

特にページネーションでは、この違いが表に出やすくなります。投稿数、現在ページ、1ページあたりの件数がメインループと合っていないと、「2ページ目が404になる」「ページ送りは出るのに記事が表示されない」といった状態が起こります。

メインループを変えないとページネーションがずれる

ページネーションは、基本的に現在のメインクエリをもとに「何ページ分あるか」を判断します。ところが、テンプレートの中でサブループだけを作ってカスタム投稿タイプを表示している場合、WordPress本体が考えているページ数と、画面に出している投稿一覧の条件が一致しないことがあります。

たとえば、メインループは通常投稿の条件のままなのに、画面上ではサブループでカスタム投稿タイプwordpressを表示しているとします。この場合、ページネーションはメインループ基準で動くため、カスタム投稿タイプの件数とは合わなくなりやすいです。

そのため、カスタム投稿タイプのアーカイブページを主役の一覧として作るなら、メインループ自体をそのカスタム投稿タイプの条件に合わせることが重要です。

pre_get_postsで対象ページだけ変更する

メインループを調整するときによく使うのがpre_get_postsです。これは、WordPressが投稿を取得する直前に条件を変更できるフックです。コードを書く前に大切なのは、「管理画面ではなくフロント側」「メインクエリだけ」「対象の投稿タイプアーカイブだけ」に絞ることです。

<?php
function my_wordpress_archive_main_query( $query ) {
  if ( is_admin() || ! $query->is_main_query() ) {
    return;
  }

  if ( $query->is_post_type_archive( 'wordpress' ) ) {
    $query->set( 'post_type', 'wordpress' );
    $query->set( 'posts_per_page', 10 );
  }
}
add_action( 'pre_get_posts', 'my_wordpress_archive_main_query' );

このコードは、カスタム投稿タイプwordpressのアーカイブページだけを対象に、メインループの条件を調整しています。重要なのは、is_admin()とis_main_query()で、管理画面やサブループに影響しないようにしている点です。

このように対象を絞っておくと、他の固定ページ、通常投稿、検索結果、管理画面の一覧表示に余計な影響を与えにくくなります。

他のページに影響させない条件分岐が重要

pre_get_postsは強力ですが、条件分岐がゆるいとサイト全体の表示に影響します。たとえば、すべてのメインクエリにpost_typeを指定してしまうと、通常投稿の一覧や検索結果までカスタム投稿タイプ中心の表示に変わる可能性があります。

カスタム投稿タイプの一覧だけを変更したいなら、is_post_type_archive()を使うなど、対象ページを明確にします。カテゴリー一覧も対象にしたい場合は、どの投稿タイプを含めるのか、どの分類ページで有効にするのかを整理してから条件を追加しましょう。

テンプレートファイルの優先順位も合わせて理解すると、どのページでどの処理を書くべきか判断しやすくなります。WordPressオリジナルテーマのテンプレートファイルについてはこちらを参照ください。
WordPressオリジナルテーマはテンプレートファイルの理解が重要

サブループの使いどころと注意点

サブループは悪いものではありません。むしろ、WordPress制作ではかなりよく使います。大切なのは、メインループと同じ役割を無理にサブループで作ろうとしないことです。

ページの中に別の一覧を差し込むだけなら、サブループはとても便利です。テンプレートの好きな場所で必要な投稿タイプ、件数、並び順を指定できるため、トップページや関連記事の表示に向いています。

トップページや関連記事など自由な表示に向いている

たとえばトップページに「WordPress記事を3件だけ表示する」場合、そのページの主役が別にあるならサブループが使いやすいです。固定ページの本文、ヒーロー、サービス紹介の下に、補助的な新着記事を出すようなイメージです。

<?php
$wordpress_query = new WP_Query(
  array(
    'post_type'      => 'wordpress',
    'posts_per_page' => 3,
  )
);

if ( $wordpress_query->have_posts() ) :
  while ( $wordpress_query->have_posts() ) :
    $wordpress_query->the_post();
    the_title( '<h3>', '</h3>' );
  endwhile;
endif;

wp_reset_postdata();

このコードは、メインループとは別にwordpressの投稿を3件取得して表示しています。ページの一部に別の一覧を出すだけなら、このようにサブループで十分です。

ページネーションやカテゴリー連動は複雑になりやすい

サブループでもページネーションは作れます。ただし、現在ページを取得するpaged、サブループ側の最大ページ数、URLの構造、カテゴリーやタームの条件を自分でそろえる必要があります。

特に、カテゴリー一覧やターム一覧の中でサブループを使う場合は、「今見ているターム」と「サブループに渡すターム条件」を合わせる必要があります。ここがずれると、画面の見出しはAカテゴリーなのに、一覧には別条件の記事が出るような状態になります。

そのため、一覧ページそのものを作る場合は、サブループでがんばるよりも、メインループを正しく調整する方がコードが短くなり、ページネーションも扱いやすくなります。

wp_reset_postdataで元の表示に戻す

サブループを使った後は、wp_reset_postdata()を呼び出します。これは、サブループ内で変更された投稿データを、元のメインループの状態に戻すための処理です。

これを忘れると、サブループの後に表示するタイトルやカスタムフィールドが、意図しない投稿の情報になることがあります。小さなコードでも、サブループを使ったら最後にリセットする習慣をつけましょう。

CPT UIとカスタムタクソノミーの考え方

カスタム投稿タイプを作る方法はいくつかありますが、初心者から中級者の制作では、プラグインのCustom Post Type UIを使うと管理画面から設定しやすくなります。投稿タイプ名、表示名、アーカイブの有無、REST API対応、紐づけるタクソノミーなどを画面上で設定できます。

カスタム投稿タイプを作ったら、次に考えたいのが分類です。通常のカテゴリーやタグを使うこともできますが、コンテンツの種類に合わせてカスタムタクソノミーを作ると、管理画面やURL設計を整理しやすくなります。

CPT UIで投稿タイプとタクソノミーを整理する

CPT UIでは、たとえば「制作実績」という投稿タイプを作り、それに「業種」や「制作範囲」というカスタムタクソノミーを紐づけることができます。通常投稿のカテゴリーとは分けて管理できるため、ブログ記事と制作実績の分類が混ざりにくくなります。

今回のようにWordPress学習記事をカスタム投稿タイプとして管理する場合も、通常投稿とは別の一覧ページやテンプレートを用意しやすくなります。記事が増えてきたときに、管理画面の見通しが良くなるのもメリットです。

カスタムタクソノミーはスラッグを設計しやすい

カスタムタクソノミーの大きなメリットのひとつは、分類のスラッグを目的に合わせて設計しやすいことです。デフォルトのカテゴリーやタグも便利ですが、基本的にはcategoryやtagという考え方に乗ることになります。

一方で、カスタムタクソノミーならworks_cat、wordpress_cat、service_areaのように、コンテンツの意味に合わせた分類名を作れます。タームごとのスラッグも自由に設定できるため、URLや管理画面上の意味がわかりやすくなります。

たとえば「基礎」「実装」「プラグイン」という分類を作る場合でも、ブログ全体のカテゴリーではなく、WordPress記事専用の分類として扱えます。これにより、他の投稿タイプに影響しにくい分類設計ができます。

デフォルトカテゴリー・タグとの使い分け

デフォルトのカテゴリーやタグは、通常投稿を中心にサイト全体で使う分類として便利です。すでにブログ全体の分類として運用しているなら、そのまま使う方がわかりやすい場合もあります。

ただし、カスタム投稿タイプごとに意味の違う分類を持たせたい場合は、カスタムタクソノミーの方が向いています。たとえば「制作実績の業種」と「ブログ記事のカテゴリー」は、どちらも分類ですが意味が違います。ここを分けておくと、管理画面もテンプレートも整理しやすくなります。

カスタムフィールドやプラグインの考え方も合わせて理解すると、WordPressの管理画面をより設計しやすくなります。ACFの基本についてはこちらを参照ください。
カスタムフィールドを使用して、編集が容易なウェブサイトを構築しましょう。ACFプラグイン-基礎編

実装判断のまとめ

最後に、メインループとサブループをどう使い分けるかを整理します。迷ったときは、まず「その一覧はページの主役か、それとも補助表示か」を考えると判断しやすいです。

一覧ページはメインループ中心がシンプル

カスタム投稿タイプのアーカイブ、カテゴリー一覧、ターム一覧、検索結果のように、ページ全体が一覧として機能する場合は、メインループを中心に作るのがおすすめです。ページネーションや現在の条件がWordPress本体の流れと合いやすくなります。

特にページネーションを使う一覧では、メインループの条件と画面に表示する記事の条件を一致させることが大切です。ここが合っていれば、コードも読みやすくなり、後から件数や並び順を変えるときも管理しやすくなります。

補助表示はサブループで扱う

トップページの新着記事、記事下の関連記事、サイドバーのおすすめ記事など、ページの一部に別の投稿を表示する場合はサブループが向いています。自由に条件を指定できるため、デザインや導線に合わせた表示を作りやすいです。

ただし、サブループでページネーションやターム連動まで作る場合は複雑になります。実装前に、メインループで対応できないかを一度考えると、よりシンプルな設計にしやすくなります。