PR

WordPressのループとは?ループの中にループって?入れ子の構造を分かりやすく解説

ワードプレス

 

はじめまして。当ブログ管理人の後藤です。

未経験者が「なぜブログで10万稼げたのか?」その秘密を暴露します。 「今年こそは絶対稼ぎたい!」という人は今すぐご覧ください。


あっさり10万稼ぐためのメルマガ

 

 

それでは始めます。

 

WordPressを触っていると、ループという言葉をよく見かけます。

ただ、意味を何となくつかめても、実際に一覧を作ったり、関連記事を出したりしようとすると急に難しく感じる方は少なくありません。

とくにループの中に別のループを入れる場面は、最初のつまずきポイントになりやすいところです。

【この記事で分かること】

  • WordPressループとは何かをやさしく理解できます
  • メインループとサブループの違いが分かります
  • ループの中にループを書く考え方が身につきます
  • WP_Queryの役割と使いどころが分かります
  • wp_reset_postdataが必要な理由を理解できます
  • よくある失敗を避けながら実装するコツが分かります

 

  ブログ収益化の教科書プレゼント

↓ ↓ ↓

ba15a

 

WordPressループとは何か|まずは全体像をつかむ

ループは投稿を順番に表示するための仕組み

WordPressループとは、投稿や固定ページなどのデータを順番に取り出して表示する仕組みのことです。

たとえばブログの一覧ページでは、記事が一件ずつ並んでいます。

あれはWordPressが投稿データを順番に見にいき、タイトルや本文、投稿日などを一つずつ表示している状態です。

同じ流れを繰り返すので、ループと呼ばれています。

用語 役割 イメージ
ループ 投稿を順番に表示する流れ 箱からカードを一枚ずつ取り出す
投稿データ 記事のタイトルや本文などの情報 カードに書かれた内容
表示 画面に見せること 取り出したカードを並べる

私は最初、ループという言葉に身構えていました。

でも実際は、投稿を一つずつ見せるための仕組みだと分かってから、ぐっと理解しやすくなりました。

なぜWordPressでループが大事なのか

WordPressでは、記事一覧やカテゴリー一覧、検索結果など、複数の投稿を見せる場面がとても多くあります。

そのため、ループはテーマづくりやカスタマイズの土台になる考え方です。

  • 記事一覧ページを表示するため
  • カテゴリーページを作るため
  • 検索結果を見せるため
  • 関連記事や新着記事を並べるため
  • カスタム投稿タイプを一覧表示するため

つまり、複数の記事を見せたいと思ったら、ほとんどの場合でループが関わってきます。

まずは繰り返し表示の仕組みと覚えれば十分

最初から専門用語を完璧に覚えようとしなくても大丈夫です。

まずは、WordPressループとは投稿を順番に繰り返し表示する仕組みだと理解できれば十分です。

この土台があると、あとで出てくるメインループやサブループ、さらにループの中にループという考え方も自然につながります。

ループの基本構造をつかむ

まず押さえたい3つの流れ

ごとう
ごとう

WordPressループでは、いくつかの決まった流れがあります。コードを丸暗記するより、何をしているのかをつかむことが大切です。

流れ していること たとえ
投稿があるか確認する 表示できる記事が残っているかを見る 箱の中にカードがまだあるか確認する
1件取り出す 次に表示する投稿を選ぶ 次のカードを一枚手に取る
表示する タイトルや本文を出す カードの内容を読む

裏側ではこの小さな流れが繰り返されていて、それによって記事一覧が成り立っています。

have_postsとthe_postの役割

ループを調べると、have_postsとthe_postという言葉がよく出てきます。

名前だけ見ると難しそうですが、役割はシンプルです。

  • have_postsは、まだ表示できる投稿が残っているかを確認する役割です
  • the_postは、次に表示する投稿を現在の投稿としてセットする役割です

have_postsでまだあるかを確認し、the_postで次の一件を選ぶイメージで考えると分かりやすいです。

タイトルや本文を表示できる理由

ループの中でタイトルや本文を表示できるのは、the_postによって今の投稿が決まっているからです。

WordPressは、今どの記事を見ているのかが分かっているので、その記事のタイトルや本文を取り出せます。

反対に、今の投稿が正しく切り替わっていないと、思っていたものと別のタイトルやリンクが出ることがあります。

あとで触れる入れ子構造では、この点がとても重要になります。

メインループとサブループの違いを整理する

メインループはそのページの主役

ごとう
ごとう

メインループとは、そのページにもともと用意されている本来のループのことです。たとえばトップページの記事一覧、カテゴリーページ、検索結果ページ、投稿の詳細ページなどでは、WordPressがそのページに合った投稿を自動で準備しています。これがメインループです。初心者の方は、そのページの主役を表示する標準の流れだと考えると分かりやすいです。

サブループは追加で自分で作るループ

サブループは、メインループとは別に自分で追加して作るループです。

たとえば記事の下に関連記事を出したいときや、人気記事を別に表示したいときには、追加で投稿を集める必要があります。

そのときに使うのがサブループです。

  • 関連記事を表示したいとき
  • 人気記事を表示したいとき
  • 特定カテゴリーの記事だけ出したいとき
  • カスタム投稿タイプを一覧表示したいとき
  • 別の条件の投稿を追加で見せたいとき

どちらを使っているか意識すると迷いにくい

WordPressで混乱しやすいのは、今メインループを見ているのか、それともサブループを作っているのかがあいまいになるときです。

比較項目 メインループ サブループ
用意する人 WordPressが自動で用意する 自分で追加して作る
目的 そのページの主役を表示する 別条件の投稿を追加表示する
よく使う場面 一覧ページや詳細ページ 関連記事や人気記事
注意点 本来の流れを壊さない 終わったら元に戻す

この違いが見えるようになると、入れ子構造の理解もかなり楽になります。

ループの中にループとは何をしているのか

親ループの中で別の投稿一覧を表示する考え方

ごとう
ごとう

ループの中にループとは、親になるループの中で、さらに別のループを動かすことです。たとえば記事一覧で一件ずつ記事を表示しながら、その記事ごとに関連する別の記事を数件ずつ出したい場合があります。このときは、親の記事を表示する流れの中で、関連投稿用の子ループを回すことになります。

どんな場面で使われるのか

実際によくある使い方は次のとおりです。

  • カテゴリー一覧の中で、そのカテゴリーのおすすめ記事を出す
  • スタッフ紹介の中で担当実績を並べる
  • 商品一覧の中で導入事例を表示する
  • 親ページの中で子ページを見せる
  • カスタム投稿タイプごとに関連する別の投稿を出す

ひとまとまりの情報の中に、さらに小さな一覧を入れたいときに向いています。

難しく感じる理由は今の投稿が入れ替わるから

この仕組みが難しく感じる一番の理由は、親ループと子ループの両方で今の投稿が切り替わるからです。

親ループでは親の記事が基準になりますが、子ループに入ると、今度は子ループ側の記事が基準になります。

そのまま戻さずに進むと、親の記事を表示したいのに子の記事を見てしまい、タイトルやリンクがずれることがあります。

私も最初はここで何度も混乱しましたが、原因が分かると急に見通しがよくなります。

ループの中にループを書く前に知っておきたい考え方

親と子を分けて考えると整理しやすい

ごとう
ごとう

二重ループを考えるときは、まず親ループと子ループを頭の中で分けることが大切です。

  • 親ループはページのメインとなる表示の流れです
  • 子ループは親ループの中で追加表示したい別の一覧です

この二つが混ざると、一気に分かりにくくなります。

今どちらを触っているのかが分かっていれば、コードも読みやすくなります。

子ループの条件を先に決める

子ループは、何となく作るのではなく、どんな条件で投稿を集めたいのかを先に決める必要があります。

  • 同じカテゴリーの記事を出す
  • 同じタグの記事を出す
  • 同じ投稿者の記事を出す
  • 同じカスタムフィールドを持つ記事を出す
  • 新しい順に数件だけ出す

ここがあいまいだと、子ループの目的もぼやけてしまいます。

深い入れ子はできるだけ避ける

ループの中にループは便利ですが、さらにその中にもう一つループを入れるような構造は、できるだけ避けたほうが無難です。

  • コードが読みにくくなる
  • 修正しにくくなる
  • 表示のズレが起きやすい
  • 処理が重くなりやすい
  • あとで見返したときに分かりにくい

まずは二重までに収められないか考えると、実装も保守もかなり楽になります。

WP_Queryでサブループを作る基本をつかむ

WP_Queryは別条件で投稿を集めるための仕組み

ごとう
ごとう

WP_Queryは、別の条件で投稿を集めたいときによく使う仕組みです。メインループとは別に、特定カテゴリーの記事だけ取りたい、数件だけ表示したい、カスタム投稿タイプだけ出したいといったときに役立ちます。

よく使う条件はこのあたり

WP_Queryでは細かな条件を設定できますが、最初はよく使うものだけ押さえれば大丈夫です。

条件の考え方 何を決めるか よくある使い道
投稿タイプ どの種類の投稿を集めるか ブログ記事や実績記事を出す
件数 何件表示するか 関連記事を3件だけ出す
並び順 新しい順か古い順か 新着記事一覧を作る
絞り込み条件 どの条件に当てはまるか 同じカテゴリーの記事だけ出す
除外条件 表示したくない記事を外す 今見ている記事を除外する

最初から全部覚える必要はありません。

まずは何を表示したいのかを日本語で整理し、その条件を一つずつ当てはめる感覚が大切です。

いきなり入れ子にせず単純なサブループから慣れる

 

 

 

【稼げるキーワード教えます】
▼  ▼  ▼
ba15a

 

 

 

最初から入れ子構造に挑戦するより、まずは単純なサブループを一つ作ってみるのがおすすめです。

たとえば本文の下に関連記事を数件出すだけでも、十分によい練習になります。

別の条件で投稿を集める、順番に表示する、終わったら元に戻すという流れに慣れておくと、そのあと入れ子に進んでも理解しやすくなります。

ループの中にループを書くときの流れ

まずは親ループを回す

ごとう
ごとう

二重ループでは、最初に親ループがあります。ここではページの主役になる投稿を順番に表示していきます。たとえば一覧ページなら、記事カードを一件ずつ並べていくイメージです。親ループの中でタイトルや抜粋、サムネイルなどを表示します。

親の情報をもとに子ループの条件を決める

次に大切なのが、親ループで見ている投稿の情報をもとに、子ループの条件を決めることです。

  • 親記事と同じカテゴリーの記事を出す
  • 親記事にひもづくカスタムフィールドを持つ記事を出す
  • 親記事の投稿者が書いた別記事を出す

このように、親ループがあるからこそ子ループの条件が決まります。

ここが、ただのサブループとの違いです。

子ループが終わったら必ず元に戻す

二重ループで最も大事なのがここです。

子ループが終わったら、親ループの状態へきちんと戻す必要があります。

  • 親ループのタイトルがずれる
  • リンク先が別の記事になる
  • 本文や抜粋が想定と違って見える
  • その後の表示が不安定になる

こうしたトラブルを防ぐためにも、子ループのあとで元に戻すという考え方は必ず押さえておきたいポイントです。

wp_reset_postdataが必要な理由をしっかり理解する

子ループのあとに基準が子のまま残ることがある

ごとう
ごとう

子ループでは、子側の投稿が今の投稿として扱われます。そのため、子ループのあとに何もせず次へ進むと、まだ子の投稿を見ている状態のままになることがあります。これでは親ループの表示に戻れません。wp_reset_postdataは、そのずれた状態を直し、元の投稿データに戻すための関数です。散らかった机を片づけて、元の作業場所に戻すような役割だと考えると分かりやすいです。

どんなときに忘れやすいのか

とくに忘れやすいのは、次のような場面です。

  • 関連記事を表示したあと
  • 条件分岐が増えているテンプレート
  • 入れ子構造を書いた直後
  • 見た目だけは一見うまく表示されているとき

やっかいなのは、忘れてもすぐに大きなエラーになるとは限らないことです。

一部だけおかしくなるので、気づきにくいまま進んでしまうことがあります。

リセットを習慣にすると安心

入れ子構造では、wp_reset_postdataを必要なときだけ思い出すものではなく、子ループとセットで考えるのがおすすめです。

  • 子ループを作る
  • 子ループを回す
  • 終わったら元に戻す

この流れを習慣にしておくと、表示のずれや混乱をかなり減らせます。

query_postsを安易に使わないほうがいい理由

便利そうに見えて本来の流れを崩しやすい

ごとう
ごとう

WordPressを調べていると、query_postsという言葉を見かけることがあります。ただ、追加の一覧を出したい場面で安易に使うのはおすすめできません。query_postsはメインクエリを変更するため、本来の表示の流れやページネーションに影響を与えやすいからです。

  • ページネーションが崩れる
  • 一覧件数がおかしくなる
  • 想定外の投稿が表示される
  • テーマの挙動とぶつかる

追加の一覧ならWP_Queryを考える

関連記事や別条件の投稿一覧を追加したいなら、基本的にはWP_Queryで別に作るほうが整理しやすいです。

そのほうが、メインループと追加のループの役割を分けやすくなります。

入れ子構造でも見通しがよく、あとから読み返したときにも理解しやすいです。

本体の一覧を変えたいなら別の考え方が必要

もしそのページの本体である一覧そのものを変えたいなら、追加のループを作るのではなく、メインクエリをどう調整するかという考え方が必要になります。

この場合はpre_get_postsが検討されることが多く、query_postsで無理に上書きするのとは役割が異なります。

やりたいこと 考え方
追加で別の一覧を出したい WP_Queryでサブループを作る
そのページの本体の一覧を変えたい メインクエリの調整を考える
目的があいまいなまま変更したい 先に要件を整理する

ループの中にループでよくある使い方

記事一覧の中で関連記事を出す

ごとう
ごとう

よくあるのが、親になる記事一覧の中で、それぞれの記事に関連する投稿を見せるパターンです。旅行記事の一覧の下に、各記事に対応するおすすめ記事を数件表示するようなイメージです。読者が次に読む記事を見つけやすくなるので、回遊しやすいサイトづくりにもつながります。ただし、親ループの件数も子ループの件数も多いと重くなりやすいので、表示数は絞ったほうが安心です。

カスタム投稿タイプ同士をつなぐ

実務では、別の種類の投稿を結びつけて見せる場面もよくあります。

  • スタッフ紹介の中で担当実績を出す
  • 商品紹介の中で導入事例を出す
  • 学校紹介の中で先生一覧を見せる

こうした構成では、入れ子の考え方がとても役立ちます。

親子関係のある情報を見せる

階層のある情報を整理して見せたいときにも向いています。

  • 親ページの中に子ページ一覧を出す
  • 地域一覧の中に店舗一覧を表示する
  • 大きな分類の中に小さな分類の情報を並べる

読者にとっても、情報のまとまりが分かりやすくなるのが利点です。

ループを組む前に決めたい設計ポイント

何を見せたいのかを先に言葉にする

実装に入る前に、どんな情報をどんな順番で見せたいのかを言葉にしておくことが大切です。

  • 記事一覧を表示する
  • 各記事の下に同じタグの記事を3件出す
  • 今見ている記事は関連一覧から外す
  • 関連投稿がないときは表示しない

このように先に整理しておくと、あとで条件がぶれにくくなります。

条件を増やしすぎない

初心者のうちは、最初から条件を盛り込みすぎないほうがうまくいきます。

  • 複数カテゴリーに対応したい
  • タグも同時に考慮したい
  • カスタムフィールドも使いたい
  • 優先順位も細かく決めたい

気持ちはよく分かりますが、まずはシンプルな条件で一度完成させるほうが結果的に早いです。

読者目線で本当に必要か考える

入れ子構造は便利ですが、できるからといって何でも詰め込めばよいわけではありません。

  • 情報が多すぎて読みにくくなっていないか
  • 主役の記事より目立っていないか
  • スマホで見たときに重くなっていないか
  • スクロールが長くなりすぎていないか

機能としてできることと、読者にとって見やすいことは別です。

この視点を持つだけでも、サイトの使いやすさはかなり変わります。

初心者がつまずきやすいポイントと対処法

タイトルやリンクが別の記事になる

入れ子構造で最もよくあるのが、親ループのつもりでタイトルやリンクを表示したのに、子ループ側の情報が出てしまうケースです。

  • 子ループ後に元へ戻していない
  • 親と子の役割が混ざっている
  • どのタイミングで何を表示しているか整理できていない

対処法はシンプルです。

  • 子ループの後で元に戻す
  • 親で使う情報と子で使う情報を分けて考える
  • 表示したい内容を先にメモする

思ったより重くなる

入れ子構造は便利な反面、処理が増えやすいのが難点です。

親ループが多く、その中で毎回子ループを回すと、表示件数によってはかなり負荷がかかります。

  • 親の件数が多い
  • 子の件数も多い
  • 条件が複雑
  • 画像の読み込みも多い

まずは表示件数をしぼるだけでも、かなり改善しやすくなります。

何をしているコードか分からなくなる

最初は理解して書いたつもりでも、時間がたつと、このループは何のためにあったのか分からなくなることがあります。

これは珍しいことではありません。

  • 親ループと子ループの目的を明確にする
  • 見た目のまとまりごとに考える
  • 複雑にしすぎない
  • あとで読んだ自分が分かる形にする

入れ子構造は、書けること以上に、あとで読めることが大切です。

ブロックテーマ時代でもループの考え方は役立つ

見た目が変わっても考え方は同じ

ブロックエディターやクエリーループブロックを使う場面が増えても、投稿を条件に合わせて順番に表示するという基本は変わりません。

つまり、ループの考え方を理解しておくと、テーマ編集でもブロック編集でも応用がききます。

クエリーループブロックでできることもある

単純な一覧表示であれば、PHPで細かく書かなくても、クエリーループブロックで対応しやすいことがあります。

  • 新着記事一覧
  • 特定カテゴリーの記事一覧
  • 固定ページの中での投稿一覧表示
  • 投稿カードの見た目調整

一方で、親ループごとに条件を変えるような複雑な入れ子では、やはり仕組みの理解が必要です。

仕組みを理解している人ほど応用がきく

便利な機能が増えるほど、知らなくても作れそうに見えます。

ただ、思った表示にならないときや、うまく動かないときに助けになるのは基本理解です。

ループを理解している人は、表面の操作だけでなく、裏側でどんな流れが起きているかを想像できます。

それが、カスタマイズで迷ったときの強みになります。

よくある質問

Q. WordPressループとは、初心者はどこまで理解すれば十分ですか

A. WordPressループとは、投稿を順番に表示する仕組みだと理解できれば、最初の一歩としては十分です。まずは、投稿があるか確認する、1件取り出す、表示するという基本の流れをつかみましょう。そのうえでメインループとサブループの違いに進むと、無理なく理解できます。

Q. ループの中にループは初心者には難しすぎますか

A. ループの中にループは最初こそ少し難しく感じますが、親ループと子ループを分けて考えれば理解しやすくなります。大切なのは、子ループが終わったあとに元の状態へ戻す意識を持つことです。いきなり複雑な構造にせず、関連記事を数件出すような形から慣れるのがおすすめです。

Q. ループの中にループではWP_Queryを使う場面が多いですか

A. はい、別条件の投稿を取り出したい場面が多いため、WP_Queryを使う考え方が基本になります。ただし、最初から条件を増やしすぎる必要はありません。何を表示したいのかを整理し、必要最小限の条件で組むことが大切です。

まとめ|迷ったら基本に戻る

  • WordPressループとは、投稿を順番に繰り返し表示する仕組みです
  • メインループはページの主役、サブループは追加で作る別の一覧です
  • ループの中にループは、親ループの中で子ループを回す考え方です
  • 入れ子構造では、子ループのあとに元へ戻す意識がとても大切です
  • 複雑にしすぎず、読者が見やすい形を優先すると失敗しにくくなります

今日から最初の一歩としておすすめしたいのは、自分のサイトで何を親ループにして、何を子ループにしたいのかをメモに書き出してみることです。それだけでも頭の中が整理され、実装で迷う時間をかなり減らせます。

 

 

記事を読んだらコチラ
▼  ▼  ▼
ba15a