ワードプレス クエリーループブロックで記事一覧を挿入する方法【version5.9での変更点も解説】
ワードプレスversion5.8で導入されたクエリーループブロックについて紹介します。
クエリーループブロックによって、従来はPHPでテンプレートファイルを操作しないとできなかった記事一覧の挿入が、管理画面のエディター内で可能となりました。
ワードプレスversion5.9で導入されたフルサイト編集では、クエリーブロックを使ってメインクエリー（ページで指定される記事一覧）を表示させています。
ワードプレス5.9を使ってクエリーブロックの使い方を紹介していきますが、非ブロックテーマとブロックテーマで若干違いがあるのでそれぞれ説明します。
- 非ブロックテーマでのクエリーループブロックの基本的な使い方
（テーマTwenty Twenty-Oneを使って説明していきますが、非ブロックテーマでは他のテーマでも基本的には同じです） - ブロックテーマ（Twnety-Twenty-Two）でのクエリーループブロックの異なるポイント
・ページネーションの自動挿入
・メインクエリーを使用
※本記事は2022年1月25日ワードプレスversion5.9のリリースにより2022年2月にリライトしました。
クエリーブロックおよび関連ブロック
ブロックの”テーマ”カテゴリーの中にクエリーループとその関連ブロックが入っています。
ワードプレスのversion5.8.3と5.9とでの違いは以下の通りです。
（赤が5.9で新規追加されたブロック）
クエリーループブロックに関連するブロックとその用途は以下の通り。
| ブロック名 | 機能概要 |
|---|---|
| クエリーループ | クエリーループを導入 （結果として記事一覧を表示） |
| 投稿タイトル | 投稿や固定ページのタイトルを表示 |
| 投稿コンテンツ | 投稿や固定ページの本文を表示 |
| 投稿日 | 投稿日を表示 |
| 投稿の抜粋 | 投稿や固定ページ本文の抜粋を表示 |
| 投稿のアイキャッチ画像 | アイキャッチ画像を表示 |
| 投稿者 | 投稿者を表示 |
| 投稿カテゴリー | 投稿カテゴリーを表示 |
| 投稿タグ | 投稿タグを表示 |
| 投稿一覧 | 最新記事の一覧を表示 （先頭固定表示を除く） |
上記表に入っていないブロック（ナビゲーションやサイトロゴなど）は、フルサイト編集には使用しますがクエリーループとは関係ありません。
”クエリーループ”ブロックは記事一覧表を表示することができますが、単独で使用されることはなく、”テーマ”グループ内の他のブロックと組み合わせて使われます。
例えば、記事一覧の中にアイキャッチ画像を表示させたければ、”クエリーループ”ブロックの中に”投稿のアイキャッチ画像”ブロックを配置する、といった感じです。
クエリーブロックの使用方法（非ブロックテーマ）
使用方法概要
使用方法は何通りかありますが、基本的な手順は以下の通りです。
- ”クエリーループ”ブロックを挿入する
- 記事一覧のレイアウトを選択して関連ブロックを配置する
- 一記事あたりの表示を整える
- 記事数を決める
従来の非ブロックテーマでは、ワードプレスversion5.8.3と5.9で使用方法に大きな違いはありません。
詳細手順を以下に解説していきます。
使用方法詳細手順
ワードプレスversion5.9においてテーマ”Twenty Twenty-One”で解説していきますが、他の非ブロックテーマでも使い方は同じです。
事前準備（記事を投稿しておく）
クエリーループブロックは記事一覧を表示するので、あらかじめ記事を準備しておきます。
カフェをイメージして、
・ケーキなどのカテゴリー：スウィーツの記事３つ
・はちみつ・コーヒー豆などのカテゴリー：食材の記事３つ
合計６記事を投稿しておきました。
各記事には簡単な本文とアイキャッチ画像も設定しています。
①”クエリーループ”ブロックを挿入する
ダッシュボードメニュー 投稿＞新規追加、または、固定ページ＞新規追加でGutenbergエディターを開けます。
画面左上の+マークをクリックして、”クエリーループ”ブロックを選択挿入します。
クエリーループブロックを挿入するとエディター画面は次のようになります。
一見、記事の一覧が挿入されたかのように見えます（下記の写真で見えているのは投稿タイトルとアイキャッチ画像）。
リスト表示でブロックの配置を確認してみます。
画面左上の”リスト表示”をクリックすると画面左にリスト表示されます。
下のように、リストには当然ですが”クエリーループ”しかありません。
この状態でプレビューしてみても、本文欄には何も表示されません。
このように、エディター画面では何か一覧表があるように見えますが、クエリーループブロックだけでは何も表示されないのです。
”クエリーループ”ブロックは、記事一覧を表示する準備をするだけ。
中身を表示するには、”投稿タイトル”や”投稿の抜粋”などの関連ブロックが必要となる。
②記事一覧のレイアウトを選択して関連ブロックを配置する
記事一覧表示のレイアウトを選択します。
結果として、クエリーループブロックの中に関連ブロックが配置されます。
１．挿入したクエリーループブロックの”グリッド表示”をクリック
すると記事一覧レイアウトのパターンが複数表示されます。
２．記事一覧レイアウトを選択
選択可能な記事レイアウトは以下の5種類です（2022年2月現在）。
- 標準
- 左に画像
- 小さな画像とタイトル
- グリッド
- 大きなタイトル
- オフセット
今回は一番オーソドックスな”標準”を選択します。
レイアウトパターン選択には別の方法もあります。
レイアウトパターンを複数同時表示させるのではなく、パターン切り替えボタンをクリックをしながら順番に見ていく方法です。
①パターンを順番に切り替え
②気に入ったパターンで”選択”をクリック
この方法のほうが各パターンが大きく表示されるので、イメージはつかみやすいでしょう。
３．リスト表示でブロックを確認する
再び画面左上の”リスト表示”をクリックしてリスト表示してみます。
レイアウト選択前と違って、クエリループブロックの下位階層にいろいろなブロックが入っているのが確認できます。
この標準レイアウトの場合は、”投稿テンプレート”の下に”投稿タイトル”、”投稿のアイキャッチ画像”、”投稿の抜粋”、”区切り”、”投稿日”といったブロックが配置されています。
実際にプレビュー表示させるとこの通りに表示されます（画面に入りきらないので縮小表示しています）。
クエリーループブロックのレイアウトを選択すると関連ブロックが自動的に配置され、web表示されるようになる。
４．グリッド表示に切り替える
現在のレイアウトは各記事が縦に並ぶ”リスト表示”レイアウトです。これを記事が横に並ぶグリッドレイアウトに変更してみましょう。
クエリーループブロック内ツールバーのグリッド表示をクリックすると切り替わります。
グリッド表示とすると画面右の設定パネル内でカラム数が設定できるので、３カラムとしておきます。
③一記事あたりの表示を整える
記事内のレイアウトを調整して見映えを整えていきます。
記事内の各ブロックを選択しながら作業をしていきますが、リスト表示させながら進めると効率がよいと思います。
１．ブロックの並び順を変更する
上から
- 投稿タイトル⇒アイキャッチ画像⇒投稿の抜粋⇒投稿日
の順になっていますが、これを
- アイキャッチ画像⇒投稿タイトル⇒投稿日⇒投稿の抜粋
に変更します。
リスト表示で各ブロックをドラッグ＆ドロップするか、ブロック内ツールバーの上下移動ボタンで移動するのが簡単です。
ブロックの並び順変更後はこんな感じになります。
２．投稿タイトルの下に”投稿カテゴリー”ブロックを挿入
投稿カテゴリーを挿入します。挿入方法は通常のブロックと同様ですが、クエリーループブロックの構造は複雑に見えるので、リスト表示から挿入するのが確実です。
①リスト表示で投稿タイトル右の３点メニューを開く
②”後に挿入”をクリック
③挿入されたブロックの+マークをクリック
④すべて表示をクリック
⑤”投稿カテゴリー”をクリック
以上で各記事にカテゴリーが挿入が完了です。
３．文字サイズ・太さ、テキスト位置などを調整
あとは大きすぎる投稿タイトルの文字サイズを小さくしたり、表示位置を調整して見映えを仕上げます。
- アイキャッチ画像を中央揃えに配置
- 投稿タイトルの文字サイズ調整と太字化
- 投稿カテゴリーを右揃えに配置
- 投稿の抜粋の文字サイズを小サイズに変更
以上の調整後です。
④記事数を決める
一覧表に表示する記事数を決めます。
１ページに表示する記事数は、クエリーループ内ツールバーで設定します。
投稿済の記事数が６個あるので、表示記事数も６に設定してみます。
※このほか”表示する最大ページ数”については、ページネーション数の制御を参照ください。
プレビューすると以下の通りです。
（全体が見えるよう、縮小表示させています）
以上でクエリーループブロックの設定は完了ですが、もう少し大きく表示したければ、幅広設定にしてみるとよいでしょう。ツールバーで設定可能です。
幅広設定後のプレビューです。
クエリループブロックの各設定
このほか、クエリーブロックでできる細かい設定をいくつか紹介します。
ブロックの設定パネルでの設定
クエリーループブロック選択中に画面右に表示される設定パネルで主にできることは以下の通りです。
- 投稿タイプを”投稿”と”固定ページ”を選択切り換えできる
（サイト内にカスタム投稿を設定している場合は、カスタム投稿も選択可能） - 並び順を変更できる
- 先頭固定表示の記事がある場合、それを含むかどうか指定できる
- 投稿のカテゴリーで表示を絞ることができる
- 投稿者で表示を絞ることができる
”テンプレートからクエリーを継承”について
設定パネルの中に”テンプレートからクエリーを継承について”のON/OFFボタンがあります。初期値はOFFになっています。
フルサイト編集できるブロックテーマでない限り、クエリーループブロックを配置できるのは投稿や固定ページといった記事本文欄です。もしくはテーマによってはウィジェットに配置できるかもしれません。
こうした配置場所でのクエリーループブロックで”テンプレートからクエリーを継承”をONにすると、web表示はされなくなります（ブロックエディター内では見えていてもプレビューやweb表示すると表示されません）
ワードプレスはもともと、それぞれのページに応じたクエリーというものを持っています。例えば、
- ワードプレスのデフォルト状態ではトップページには投稿一覧が表示される
- カテゴリーページには各カテゴリーの記事一覧が表示される
- 月別アーカイブページには、その月の投稿記事一覧が表示される
のように、ページ種に応じて表示される記事一覧が自動的に選択されるのです。これをメインクエリーと呼んでいます。
これに対して、投稿や固定ページやウィジェットの中に、そのページ種に関係なく記事一覧を配置するしくみをサブクエリーと呼んでいます。
クエリーループブロックで ”テンプレートからクエリーを継承について”のボタンは
- ON状態・・・メインクエリーを表示
- OFF状態・・・サブクエリーを表示
となるわけです。
なので、投稿や固定ページの中でONにすると表示されなくなってしまうわけです。
（投稿や固定ページのメインクエリーは記事本文を表示することであって、記事一覧表を表示することではない）
メインクエリーを表示することがあるのは、トップページやアーカイブページを直接編集する、フルサイト編集に限られます。したがって、ブロックテーマでない従来の非ブロックテーマでは、OFF状態で使うことがないのです。
従来の非ブロックテーマでは、クエリーループブロックの”テンプレートからクエリーを継承”をONにする機会はない。
クエリーループブロック パターンからの挿入
実は、クエリーループブロックの挿入方法として、パターンから選択することもできます。
この方法だと、すでに紹介した手順の
- ”クエリーループ”ブロックを挿入する
- 記事一覧表示をレイアウトを選択して関連ブロックを配置する
- 一記事あたりの表示を整える
- 記事数を決める
のうち、②までを一気に進めることができます。あとは③から続きをすればよいわけです。
パターンによる挿入方法
①画面左上の+マークをクリック
②”パターン”タブを選択
③パターンカテゴリーをクリック
④”クエリー”を選択
すると、画面左にクエリーループブロックの５つのパターンが表示されます。
この中から選択クリックすれば挿入完了です。
ブロックテーマでのクエリーループブロック
ワードプレスversion5.9でブロックテーマを使うと少しクエリーループブロックに変化が生じます。Twenty Twenty-Twoを使って説明していきましょう。
ページネーションの表示
”ページ送り”ブロックの自動挿入
ブロックテーマでは次の点が大きく異なります。
クエリーループブロック内にページネーションが自動挿入される
Twenty Twenty-Twoで投稿または固定ページのブロックエディターを開けてクエリーループブロックを設置し、レイアウトパターンを選択します（すなわち②記事一覧のレイアウトを選択して関連ブロックを配置する まで進めた状態です）
すると自動的に”ページ送り”ブロックが挿入されます。
”ページ送り”ブロックは”前のページ”、”ページ番号”、”次のページ”といったブロックで構成されていますが、見ればわかる通りページネーションを表示しています。
記事数が６記事しかないので、ページあたりの記事数を２記事に設定してプレビューすると、次のようになります。
”ページ送りブロック”のツールバーでページネーションの配置も変更できます。
各配置は次の通りです。
”ページ送り”ブロックの挿入方法
なぜか”ページ送り”ブロックはブロック一覧の中には見当たりません。
では”ページ送り”ブロックを、手動で挿入するにはどうすればよいでしょうか？
例えば、自動挿入された”ページ送り”ブロックを邪魔だと思っていったん削除したけれど、やはりもう一度挿入しようと思ったとき、には手動での挿入が必要ですよね。
普段は見当たらない”ページ送り”ブロックですが、２つの方法で挿入が可能です。
（方法１）
クエリーループブロックの中で、”投稿テンプレート”ブロックと同階層にブロックを挿入する
具体的には、
①”投稿テンプレート”ブロックの３点メニューを開ける
②”ブロック挿入”をクリック
③挿入されたブロックの+マークをクリックしてブロック一覧を開ける
そうするとデザインカテゴリーの中に”ページ送り”が表示され、選択挿入できるようになります。ついでに普段表示されない”投稿テンプレート”も表示されます。
（方法２）
上の手順の③の代わりに
③挿入されたブロックの中で ”/ページ送り" と入力する
実は”ページ送り”ブロックはワードプレス5.9の新ブロックではなく、5.8.3以前でも存在していたのですが、普段ブロック一覧の中にないので気づかないのですね。恥ずかしながら私も知りませんでした。
ページネーション数の制御
ページネーションで表示するページ数は、クエリーループブロック内ツールバーにある表示設定ボタンの”表示する最大ページ数”で指定できます。
表示する最大ページj数が
- ０のときは、存在する記事分のページネーションが表示される
- １以上ならば、そのページ数分のみのページネーションとなる
メインクエリーが使われている
”テンプレートからクエリーを継承”について で説明したように、フルサイト編集ではメインクエリーが使用されています。
Twenty Twenty-Twoのトップページをフルサイト編集画面で見ると、クエリーループブロックの”テンプレートからのクエリーを継承”がONになっているのがわかります。
まとめ
クエリーループブロックによる記事一覧の挿入方法について紹介してきました。
”クエリーループ”ブロックは、記事一覧を表示する準備をするだけ。
中身を表示するには、”投稿タイトル”や”投稿の抜粋”などの関連ブロックが必要となる。
クエリーループブロックのレイアウトを選択すると関連ブロックが自動的に配置され、web表示されるようになる。
この２つの特徴を生かして、次の手順で進めればよいのですね。
- ”クエリーループ”ブロックを挿入する
- 記事一覧のレイアウトを選択して関連ブロックを配置する
- 一記事あたりの表示を整える
- 記事数を決める
ワードプレス5.9のブロックテーマでは以下の点が異なります。
- クエリーループブロック内にページネーションが自動挿入される
- トップページなどテンプレートに応じたメインクエリーが使用されている
このほかワードプレス5.9での変更点や注意点は以下の記事がおすすめです。
https://web-children.com/2022/01/29/block-editor-change-in-w...
