LESSON / WP LOAD

ループとテンプレート階層を使う

WordPressループで投稿を表示し、URLの種類に応じてテンプレートが選ばれる仕組みを学びます。

目安 75分 コース進捗 0 / 17

GOAL

このレッスンでできるようになること

  • WordPressループで投稿を表示できる
  • テンプレート階層から編集するファイルを判断できる

WordPressは、表示するURLに応じてテンプレートファイルを選びます。選ばれたテンプレートの中でループを使うと、対象の投稿データを順番に表示できます。

WordPressがテンプレートを選ぶ仕組み

WordPressはアクセスされたURLを判断し、テンプレート階層から最も具体的なファイルを選びます。

URLの種類に応じて固定ページ、投稿一覧、投稿詳細、検索、404のテンプレートを選ぶ流れ
URLの種類に応じて固定ページ、投稿一覧、投稿詳細、検索、404のテンプレートを選ぶ流れ

WordPressはアクセスされたURLが、投稿、固定ページ、一覧、検索結果、404ページなどのどれに当たるかを判断します。その種類に応じて、テンプレート階層の中から最も具体的なファイルを探します。

該当する具体的なテンプレートがなければ、より汎用的なテンプレートへ順番に戻り、最後はindex.phpを使用します。このフォールバックがあるため、最初から全種類のテンプレートを作る必要はありません。

よく使うテンプレートの役割

  • front-page.php:サイトのフロントページ
  • home.php:投稿一覧ページ
  • single.php:投稿の詳細ページ
  • page.php:固定ページ
  • archive.php:カテゴリーなどの一覧ページ
  • search.php:検索結果
  • 404.php:該当ページがない場合
  • index.php:ほかのテンプレートがない場合の最終候補

ファイルを増やす前に、どのURLへどのテンプレートが使われているか確認します。似たHTMLを複製するだけなら、共通パーツへ分けた方が管理しやすい場合があります。

次の図では、「よく使うテンプレートの役割」の仕組みや関係を確認できます。

「よく使うテンプレートの役割」の仕組みや関係を示す図
「よく使うテンプレートの役割」の仕組みと関係

編集するファイルを決める

表示中のページ種類を確認し、テンプレート階層の具体的なファイルから順に探します。ファイル名だけで判断せず、どのURLで使われるかを確認します。

次の図では、「編集するファイルを決める」の仕組みや関係を確認できます。

「編集するファイルを決める」の仕組みや関係を示す図
「編集するファイルを決める」の仕組みと関係

ループで投稿を1件ずつ表示する

ループは、WordPressがURLに合わせて準備した投稿を1件ずつ取り出して表示する仕組みです。投稿があるかを確認してから、タイトル、本文、日付、画像など必要な情報を出力します。

一覧ページでは複数件、詳細ページでは通常1件を処理します。同じループの形でも、ページの種類によって準備される投稿数や内容が変わります。

基本のループを書く

次の画像は、「基本のループを書く」で扱うコードや構成をブラウザで表示した結果です。

「基本のループを書く」で扱うコードや構成の表示結果
「基本のループを書く」で扱うコードや構成をブラウザで表示した結果
<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>
    <article>
      <h1><?php the_title(); ?></h1>
      <?php the_content(); ?>
    </article>
  <?php endwhile; ?>
<?php else : ?>
  <p>表示する内容がありません。</p>
<?php endif; ?>

メインクエリと追加の取得を区別する

WordPressが現在のURLのために準備した取得条件をメインクエリと呼びます。まずはメインクエリをそのままループで表示し、必要がある場合だけ別の投稿取得を追加します。

独自に投稿を取得した後は、グローバルな投稿情報を元へ戻します。戻し忘れると、後に続くタイトルや本文が別の投稿へ変わることがあります。

表示を確認するためのテストデータ

  1. 投稿を複数作り、一覧にすべて表示されるか確認する
  2. アイキャッチ画像がない投稿でも崩れないか確認する
  3. 長いタイトルと長い本文を登録して確認する
  4. カテゴリー一覧、検索結果、存在しないURLを開く
  5. ページ送りが必要な件数を用意して移動を確認する

公式資料で順番を確認する

テンプレートの候補が分からない場合は、WordPress公式のテンプレート階層で確認します。

CHECK POINT

完了条件