固定ページに投稿一覧を出す — ブロックテーマでの3つの方法

雪谷匡良のアバター

·

·

22〜33分
クエリーループブロックで投稿一覧を表示した固定ページのイメージ

トップページ以外の固定ページに、投稿の一覧を出したい。この要件への方法は 3 つあり、どれを選ぶかで「テーマを変えたときに残るか」「引き渡した後に本人が並び順を変えられるか」が変わります。この記事では 3 つを並べて判断軸を示し、そのうえで「置いたのに何も出てこない」という最も多い詰まりの原因を解消します。仕様は 2026 年 9 月時点のものです。

固定ページに投稿一覧を出す 3 つの方法

「固定ページに記事の一覧を出す」という要件は、性質の違う 3 つの方法に分かれます。解説記事は 3 番目だけを扱うものが多いので、まず全体像から確認します。

選択肢はテーマの種類にも左右されます。WordPress 公式ドキュメントの Block themes は、クラシックテーマではフルサイト編集(サイトエディター)が動かないと明記しています(設定の置き場所がどう変わるかは、ブロックテーマとは何か — クラシックテーマとの違いを、乗り換える人の目線でで整理しています)。

方法 A — 「設定 > 表示設定」で投稿ページに指定する

WordPress にもとから備わっている仕組みを使う方法です。公式ドキュメントの Settings Reading screen によると、ホームページの表示を「固定ページ」にすると、ホームページ用の固定ページと、投稿を表示する固定ページ(投稿ページ)を別々に選べます。コードもブロックの配置も要りません。

ただし制約が 2 つあります。ひとつは、同ドキュメントが明記しているホームページと投稿ページに同じ固定ページは指定できないという点。もうひとつは、投稿ページに割り当てたテンプレートは無視され、テーマの index.php(home.php があればそちら)が投稿の表示を制御するという点です(同ドキュメントより)。

つまり、投稿ページに指定した固定ページに書いた本文は表示されません。「固定ページに説明文を書いて、その下に一覧を並べたい」という要件に方法 A は向きません。ここが方法 A と方法 B の分かれ目です。

方法 B — クエリーループブロックを置く

公式ドキュメントの Query Loop block は、クエリーループブロックを「指定したパラメーターにもとづいて投稿を表示する高度なブロック」と説明し、”like a PHP loop without the code”(コードなしの PHP ループのようなもの)と表現しています。固定ページの本文にもテンプレートにも置け、コードのかわりにブロックの設定で「何を・いくつ・どの順で」出すかを決めます。文章と一覧を同じ固定ページに混ぜられるのは、この方法だけです。

方法 C — PHP を書く

自分でループを組む方法です。クラシックテーマでは page-{slug}.php のような固定ページ専用のテンプレートファイルを作り、その中で投稿を取得するコードを書く進め方が長く使われてきました。検索結果に並ぶ解説記事の多くはこの方法です。

ブロックテーマでは書く場所が変わります。テンプレート階層のドキュメントは、ブロックテーマのテンプレートが .html ファイルであり、index.html だけが必須のテンプレートだと説明しています。テンプレートが HTML なので、PHP は functions.php や独自のブロック・ショートコードの側に移ります。

どれを選ぶべきか — 3 つの判断軸

3 つに優劣はありません。何を優先するかで答えが変わるので、軸を先に決めてください。

判断軸A:投稿ページに指定B:クエリーループブロックC:PHP を書く
テーマを変えたときに残るか残る(サイト側の設定)残る(固定ページに置いた場合は投稿データ側)置き場所しだい。テーマ内に書けば残らない
引き渡し後に本人が変えられるか件数は管理画面から変えられる並び順・件数・絞り込みをブロックの設定から変えられるコードの編集が必要
要件に届くか決まった形の一覧 1 つだけ設定項目の範囲まで設定項目に無い要件にも対応できる

立場に当てはめると、次のように分かれます。

  • 自分で運用する、ブログの一覧が 1 つあればいい:方法 A が最も短く終わります。細部を変えたくなった時点で、テンプレート側の編集(方法 B)に進めば足ります
  • 人に引き渡す:方法 B が向きます。並び順や件数の変更が、コードを触らずブロックの設定だけで済みます
  • 設定項目に無い要件がある:方法 C を検討します。ただし「本当に設定項目に無いのか」の確認が先です

方法 B と C は排他ではありません。一覧の大半はブロックで組み、足りない一箇所だけコードにする配分もできます。

クエリーループブロックで出す — 最小の手順と、出てこないときの原因

方法 B を、実際に表示される状態まで進めます。

クエリーループブロックを置く

公式ドキュメントは追加方法を 2 通り挙げています。ブロック挿入ツール(+)を開いて検索欄から探す方法と、段落ブロックに /query loop と入力して Enter を押す方法です。

追加すると、その場で 2 つの選択肢が出ます。Choose(テーマのパターンから選ぶ)と Start blank(空から始める)です。選んだパターンによって、最初から入っている入れ子のブロックが変わります。Start blank も、入れ子の組み合わせが異なるバリエーションから選ぶ形です。どちらでも、あとから中のブロックを足し引きできます。

クエリータイプを「デフォルト」から「カスタム」に変える

「ブロックを置いたのに何も出てこない」「投稿タイプや絞り込みの設定が見つからない」の原因は、ほぼここです。公式ドキュメントの Query type の節に、次のとおり書かれています。

The Query type is set to Default automatically which means WordPress will otherwise rely on the template being used to determine what posts appear. To view a list of posts on a page, change this query type to Custom.

(クエリータイプは自動的に「デフォルト」に設定されます。これは WordPress が、表示に使われているテンプレートにもとづいてどの投稿を出すかを決めるという意味です。固定ページで投稿の一覧を表示するには、このクエリータイプを「カスタム」に変えてください)

つまり既定の「デフォルト」は、そのブロックが置かれているテンプレートの文脈を引き継ぐ設定です。アーカイブのテンプレートに置けば期待どおりに動きますが、固定ページは本来 1 件の固定ページを表示する文脈なので、引き継ぐ相手がありません。

同ドキュメントは、カスタマイズの節にも同じ注意を重ねています。投稿タイプの選択肢やフィルターが見えないときはカスタムに変えるように、という案内です。設定が「無い」のではなく、デフォルトのままだと出てこないだけです。

「カスタム」にすると、次の 5 つの設定が現れます。

  • 投稿タイプ — 投稿・固定ページなど。サイトにカスタム投稿タイプがあれば、それも並びます
  • 並び順 — 新しい順(既定)/古い順/アルファベット順 A→Z/アルファベット順 Z→A
  • 上部固定投稿 — 含む(既定)/除外/無視/これのみ
  • 表示 — ページごとの項目数、オフセット(先頭から何件飛ばすか)、最大表示ページ数。一部は既定で隠れており、「表示」の横の三点メニューから出します
  • フィルター — 既定では何も追加されていない状態で、(+)から選んで追加します。タクソノミー(カテゴリー・タグ。除外もできます)、作成者、キーワード、フォーマット、現在の投稿を除外する設定があり、投稿タイプを固定ページにすると 作成者・キーワード・親ページ に変わります

中に入るブロックを整える

クエリーループは入れ子で構成されます。公式ドキュメントは、クエリーループ/投稿テンプレート/ページネーション(任意)/結果なし(任意)の 4 つに分けて説明しています。

  • 投稿テンプレートは、1 件ごとに繰り返される部分です。中に入れたタイトル・アイキャッチ画像・抜粋・日付などが、投稿の数だけ繰り返されます。ツールバーからリストビューとグリッドビューを切り替えられます
  • ページネーションは、結果が複数ページにわたるときの移動用です。不要なら外せて、あとから戻せます
  • 結果なしは、条件に合う投稿が 1 件も無いときに出るメッセージです。公式ドキュメントは、消してもよいが残すことを推奨としています

なお、投稿タイトルとアイキャッチ画像は、どのレイアウトでも自動でリンクになるわけではありません。それぞれのブロックでリンクの設定を有効にします。レイアウトの 「コンテント幅を使用するインナーブロック」をオフにすると、入れ子のブロックがクエリーループの幅いっぱいに広がります。

クエリーループで足りないとき — PHP に切り替える判断

方法 B には届かない範囲があります。「ブロックで全部できる」と書くと要件を詰めた後で引き返すことになるので、線を引いておきます。

判断は単純で、やりたいことがクエリータイプ「カスタム」の設定項目(投稿タイプ/並び順/上部固定投稿/表示/フィルター)に含まれているかを見ます。含まれていなければ、コードを書く側の話です。

公式ドキュメントに明記されている制約が 1 つあります。キーワードのフィルターです。同ドキュメントの Filters の節は、キーワードを複数入力した場合は結果がすべてのキーワードに一致する必要があり、いずれか 1 つに一致する結果を出す使い方はこのフィルターではできないと書いています。つまり「A または B を含む投稿」という条件は組めません。

並び順も選択肢は上の 4 つで、この一覧に無い基準(たとえば独自に持たせた値の順)で並べ替えたい場合は、設定だけでは届きません。

また、公式ドキュメントは使えるフィルターは選択した投稿タイプやテーマ、サイトに入っているプラグインによって変わると書いています。必要なフィルターの有無は、要件を固める前に実際の管理画面で確かめてください。

逆に言えば、設定項目に収まっているならコードを書く理由はとくにありません。まず「カスタム」に変えて 5 つの設定を見てから判断するほうが、手戻りが少なくて済みます。

一覧を作る前に — テンプレートで持つか、固定ページで持つか

最後に、ひとつ手前の設計の話です。一覧をどこで持つかを先に決めておくと、後の修正が軽くなります。

  • テンプレート側で持つ:フルサイト編集でテンプレートを編集し、そこにクエリーループを置きます。修正箇所が 1 か所で済みます。テンプレート階層のドキュメントによると、投稿ページ(「設定 > 表示設定」で指定した固定ページ)の表示には home.html、無ければ index.html が使われます。方法 A の見た目を調整する場所はここです
  • 固定ページ側で持つ:その固定ページの本文にクエリーループを置きます。そのページ限りの一覧で、前後に文章を挟みたい場合はこちらです。同じ構成を別のページにも作ると、修正箇所がページの数だけ増えます

目安は「同じ一覧を 2 つ目のページにも置く見込みがあるか」です。見込みがあるならテンプレート側、無ければ固定ページ側で十分です。

テーマがどこまでを持っているかも影響します。たとえば shitate は、index や page などのテンプレートをコアブロックだけで組み、色や文字サイズは theme.json のプリセットから選ぶ設計です。独自 CSS を書かせない方針なので、一覧の見た目を揃える作業もプリセットの選択に寄せられます。


固定ページに投稿一覧を出す方法は、既存の仕組みに任せる(A)、ブロックの設定で組む(B)、コードで組む(C)の 3 つです。テーマを変えても残るか、引き渡し後に本人が変えられるか、要件に届くか。この 3 つを当てはめれば選ぶべき方法は絞り込めます。そして「置いたのに何も出ない」場合は、クエリータイプを確認してください。

shitate は 100% GPL のブロックテーマで、WordPress 公式ディレクトリから無料で試せます。詳細は公式サイトをご覧ください。

タイポグラフィスケール

変更はこのページに即時反映され、あなたのブラウザ内にだけ記憶されます。サイト側には何も保存されません。

比率が大きいほど見出し間のコントラストが強くなります(typescale.com と同じ考え方)。

画面幅 375px で使う比率。1260px までにメイン比率へなめらかに変化し、メディアクエリなしでスマホでは文字も余白も引き締まります。

本文の文字サイズ。スケール全体はここから計算されます。

すべての文字段を偶数ピクセル(2px)にスナップします。

Small / X-Small / XX-Small を比率で割らず 0.95rem / 0.8rem / 0.75rem に固定します(比率で割ると小さすぎて読みにくくなる場合の対策)。

この画面幅での実サイズ
Display / H1 –
Huge / H2 –
Extra Large / H3 –
Large / H4 –
Medium / 本文 –
Small / H6 –
X-Small –
XX-Small –