ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

ワードプレス クエリーループブロックで記事一覧を挿入する方法【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で新規追加されたブロック)

テーマカテゴリーの変更ブロック

クエリーループブロックに関連するブロックとその用途は以下の通り。

ブロック名機能概要
クエリーループクエリーループを導入
(結果として記事一覧を表示)
投稿タイトル投稿や固定ページのタイトルを表示
投稿コンテンツ投稿や固定ページの本文を表示
投稿日投稿日を表示
投稿の抜粋投稿や固定ページ本文の抜粋を表示
投稿のアイキャッチ画像アイキャッチ画像を表示
投稿者投稿者を表示
投稿カテゴリー投稿カテゴリーを表示
投稿タグ投稿タグを表示
投稿一覧最新記事の一覧を表示
(先頭固定表示を除く)

上記表に入っていないブロック(ナビゲーションやサイトロゴなど)は、フルサイト編集には使用しますがクエリーループとは関係ありません。

クエリーループ”ブロックは記事一覧表を表示することができますが、単独で使用されることはなく、テーマ”グループ内の他のブロックと組み合わせて使われます

例えば、記事一覧の中にアイキャッチ画像を表示させたければ、”クエリーループ”ブロックの中に”投稿のアイキャッチ画像”ブロックを配置する、といった感じです。

クエリーブロックの使用方法(非ブロックテーマ)

使用方法概要

使用方法は何通りかありますが、基本的な手順は以下の通りです。

  1. ”クエリーループ”ブロックを挿入する
  2. 記事一覧のレイアウトを選択して関連ブロックを配置する
  3. 一記事あたりの表示を整える
  4. 記事数を決める

従来の非ブロックテーマでは、ワードプレスversion5.8.3と5.9で使用方法に大きな違いはありません

詳細手順を以下に解説していきます。

使用方法詳細手順

ワードプレスversion5.9においてテーマ”Twenty Twenty-One”で解説していきますが、他の非ブロックテーマでも使い方は同じです。

事前準備(記事を投稿しておく)

クエリーループブロックは記事一覧を表示するので、あらかじめ記事を準備しておきます。

投稿記事一覧

カフェをイメージして、
・ケーキなどのカテゴリー:スウィーツの記事3つ
・はちみつ・コーヒー豆などのカテゴリー:食材の記事3つ

合計6記事を投稿しておきました。

各記事には簡単な本文とアイキャッチ画像も設定しています。

①”クエリーループ”ブロックを挿入する

ダッシュボードメニュー 投稿>新規追加、または、固定ページ>新規追加でGutenbergエディターを開けます。

画面左上の+マークをクリックして、”クエリーループ”ブロックを選択挿入します。

クエリーループブロックの挿入

クエリーループブロックを挿入するとエディター画面は次のようになります。
一見、記事の一覧が挿入されたかのように見えます(下記の写真で見えているのは投稿タイトルとアイキャッチ画像)。

クエリーループブロック挿入直後

リスト表示でブロックの配置を確認してみます。
画面左上の”リスト表示”をクリックすると画面左にリスト表示されます。

下のように、リストには当然ですが”クエリーループ”しかありません。

クエリーループブロックの挿入直後のリスト表示

この状態でプレビューしてみても、本文欄には何も表示されません。

クエリーループブロックの挿入直後のプレビュー

このように、エディター画面では何か一覧表があるように見えますが、クエリーループブロックだけでは何も表示されないのです。

”クエリーループ”ブロックは、記事一覧を表示する準備をするだけ。
中身を表示するには、”投稿タイトル”や”投稿の抜粋”などの関連ブロックが必要となる。

②記事一覧のレイアウトを選択して関連ブロックを配置する

記事一覧表示のレイアウトを選択します。
結果として、クエリーループブロックの中に関連ブロックが配置されます。

1.挿入したクエリーループブロックの”グリッド表示”をクリック

クエリーループブロックのグリッド表示をクリック

すると記事一覧レイアウトのパターンが複数表示されます。

記事レイアウトパターンの表示

2.記事一覧レイアウトを選択

選択可能な記事レイアウトは以下の5種類です(2022年2月現在)。

  • 標準
  • 左に画像
  • 小さな画像とタイトル
  • グリッド
  • 大きなタイトル
  • オフセット
レiイアウトパターン標準と左に画像
レイアウトパターン小さな画像とタイトル及びグリッド
レイアウトパターン大きなタイトルとオフセット

今回は一番オーソドックスな”標準”を選択します。

レイアウトパターン標準を選択

レイアウトパターン選択には別の方法もあります。

レイアウトパターンを複数同時表示させるのではなく、パターン切り替えボタンをクリックをしながら順番に見ていく方法です。

①パターンを順番に切り替え
②気に入ったパターンで”選択”をクリック

パターン切り替えボタンによるレイアウトパターンの選択

この方法のほうが各パターンが大きく表示されるので、イメージはつかみやすいでしょう。

3.リスト表示でブロックを確認する

再び画面左上の”リスト表示”をクリックしてリスト表示してみます。

レイアウト選択前と違って、クエリループブロックの下位階層にいろいろなブロックが入っているのが確認できます。

レイアウトパターン選択後のリスト表示

この標準レイアウトの場合は、”投稿テンプレート”の下に”投稿タイトル”、”投稿のアイキャッチ画像”、”投稿の抜粋”、”区切り”、”投稿日”といったブロックが配置されています。

実際にプレビュー表示させるとこの通りに表示されます(画面に入りきらないので縮小表示しています)。

レイアウトパターン選択後のプレビュー

クエリーループブロックのレイアウトを選択すると関連ブロックが自動的に配置され、web表示されるようになる。

4.グリッド表示に切り替える

現在のレイアウトは各記事が縦に並ぶ”リスト表示”レイアウトです。これを記事が横に並ぶグリッドレイアウトに変更してみましょう。

クエリーループブロック内ツールバーのグリッド表示をクリックすると切り替わります。

リスト表示とグリッド表示の切り替えボタン

グリッド表示とすると画面右の設定パネル内でカラム数が設定できるので、3カラムとしておきます。

グリッド表示として3カラムに設定

③一記事あたりの表示を整える

記事内のレイアウトを調整して見映えを整えていきます。

記事内の各ブロックを選択しながら作業をしていきますが、リスト表示させながら進めると効率がよいと思います。

1.ブロックの並び順を変更する

上から

  • 投稿タイトル⇒アイキャッチ画像⇒投稿の抜粋⇒投稿日

の順になっていますが、これを

  • アイキャッチ画像⇒投稿タイトル⇒投稿日⇒投稿の抜粋

に変更します。

リスト表示で各ブロックをドラッグ&ドロップするか、ブロック内ツールバーの上下移動ボタンで移動するのが簡単です。

ブロックの並び順を変更

ブロックの並び順変更後はこんな感じになります。

ブロックの並び順変更後

2.投稿タイトルの下に”投稿カテゴリー”ブロックを挿入

投稿カテゴリーを挿入します。挿入方法は通常のブロックと同様ですが、クエリーループブロックの構造は複雑に見えるので、リスト表示から挿入するのが確実です。

①リスト表示で投稿タイトル右の3点メニューを開く
②”後に挿入”をクリック

リスト表示からブロックの挿入

③挿入されたブロックの+マークをクリック
④すべて表示をクリック

挿入されたブロックの+マークをクリック

⑤”投稿カテゴリー”をクリック

投稿カテゴリーをクリック

以上で各記事にカテゴリーが挿入が完了です。

各記事に投稿カテゴリーが挿入される

3.文字サイズ・太さ、テキスト位置などを調整

あとは大きすぎる投稿タイトルの文字サイズを小さくしたり、表示位置を調整して見映えを仕上げます。

  • アイキャッチ画像を中央揃えに配置
  • 投稿タイトルの文字サイズ調整と太字化
  • 投稿カテゴリーを右揃えに配置
  • 投稿の抜粋の文字サイズを小サイズに変更

以上の調整後です。

文字サイズやテキスト位置などの調整後

④記事数を決める

一覧表に表示する記事数を決めます。

1ページに表示する記事数は、クエリーループ内ツールバーで設定します。

表示記事数の設定

投稿済の記事数が6個あるので、表示記事数も6に設定してみます。
※このほか”表示する最大ページ数”については、ページネーション数の制御を参照ください。

プレビューすると以下の通りです。
(全体が見えるよう、縮小表示させています)

1ページ6記事に設定後のプレビュー

以上でクエリーループブロックの設定は完了ですが、もう少し大きく表示したければ、幅広設定にしてみるとよいでしょう。ツールバーで設定可能です。

ツールバーの幅広設定

幅広設定後のプレビューです。

幅広設定後のプレビュー

クエリループブロックの各設定

このほか、クエリーブロックでできる細かい設定をいくつか紹介します。

ブロックの設定パネルでの設定

クエリーループブロック選択中に画面右に表示される設定パネルで主にできることは以下の通りです。

  • 投稿タイプを”投稿”と”固定ページ”を選択切り換えできる
    (サイト内にカスタム投稿を設定している場合は、カスタム投稿も選択可能)
  • 並び順を変更できる
  • 先頭固定表示の記事がある場合、それを含むかどうか指定できる
  • 投稿のカテゴリーで表示を絞ることができる
  • 投稿者で表示を絞ることができる
情報パネルでできる設定

”テンプレートからクエリーを継承”について

設定パネルの中に”テンプレートからクエリーを継承について”のON/OFFボタンがあります。初期値はOFFになっています。

フルサイト編集できるブロックテーマでない限り、クエリーループブロックを配置できるのは投稿や固定ページといった記事本文欄です。もしくはテーマによってはウィジェットに配置できるかもしれません。

こうした配置場所でのクエリーループブロックで”テンプレートからクエリーを継承”をONにすると、web表示はされなくなります(ブロックエディター内では見えていてもプレビューやweb表示すると表示されません)

ワードプレスはもともと、それぞれのページに応じたクエリーというものを持っています。例えば、

  • ワードプレスのデフォルト状態ではトップページには投稿一覧が表示される
  • カテゴリーページには各カテゴリーの記事一覧が表示される
  • 月別アーカイブページには、その月の投稿記事一覧が表示される

のように、ページ種に応じて表示される記事一覧が自動的に選択されるのです。これをメインクエリーと呼んでいます。

これに対して、投稿や固定ページやウィジェットの中に、そのページ種に関係なく記事一覧を配置するしくみをサブクエリーと呼んでいます

クエリーループブロックで ”テンプレートからクエリーを継承について”のボタンは

  • ON状態・・・メインクエリーを表示
  • OFF状態・・・サブクエリーを表示

となるわけです。

なので、投稿や固定ページの中でONにすると表示されなくなってしまうわけです。
(投稿や固定ページのメインクエリーは記事本文を表示することであって、記事一覧表を表示することではない)

メインクエリーを表示することがあるのは、トップページやアーカイブページを直接編集する、フルサイト編集に限られます。したがって、ブロックテーマでない従来の非ブロックテーマでは、OFF状態で使うことがないのです。

従来の非ブロックテーマでは、クエリーループブロックの”テンプレートからクエリーを継承”をONにする機会はない。

クエリーループブロック パターンからの挿入

実は、クエリーループブロックの挿入方法として、パターンから選択することもできます。

この方法だと、すでに紹介した手順の

  1. ”クエリーループ”ブロックを挿入する
  2. 記事一覧表示をレイアウトを選択して関連ブロックを配置する
  3. 一記事あたりの表示を整える
  4. 記事数を決める

のうち、②までを一気に進めることができます。あとは③から続きをすればよいわけです。

パターンによる挿入方法

①画面左上の+マークをクリック
②”パターン”タブを選択
③パターンカテゴリーをクリック
④”クエリー”を選択

パターンからのクエリーを選ぶ

すると、画面左にクエリーループブロックの5つのパターンが表示されます。
この中から選択クリックすれば挿入完了です。

クエリーパターンの表示

ブロックテーマでのクエリーループブロック

ワードプレスversion5.9でブロックテーマを使うと少しクエリーループブロックに変化が生じます。Twenty Twenty-Twoを使って説明していきましょう。

ページネーションの表示

”ページ送り”ブロックの自動挿入

ブロックテーマでは次の点が大きく異なります。

クエリーループブロック内にページネーションが自動挿入される

Twenty Twenty-Twoで投稿または固定ページのブロックエディターを開けてクエリーループブロックを設置し、レイアウトパターンを選択します(すなわち②記事一覧のレイアウトを選択して関連ブロックを配置する まで進めた状態です)

すると自動的に”ページ送り”ブロックが挿入されます。

ページネーションが表示される

”ページ送り”ブロックは”前のページ”、”ページ番号”、”次のページ”といったブロックで構成されていますが、見ればわかる通りページネーションを表示しています。

記事数が6記事しかないので、ページあたりの記事数を2記事に設定してプレビューすると、次のようになります。

ページネーション表示のプレビュー
ページネーション2ページ目

”ページ送りブロック”のツールバーでページネーションの配置も変更できます。

ページネーションのレイアウト変更

各配置は次の通りです。

ページネーションの各配置の見映え

”ページ送り”ブロックの挿入方法

なぜか”ページ送り”ブロックはブロック一覧の中には見当たりません。

では”ページ送り”ブロックを、手動で挿入するにはどうすればよいでしょうか?

例えば、自動挿入された”ページ送り”ブロックを邪魔だと思っていったん削除したけれど、やはりもう一度挿入しようと思ったとき、には手動での挿入が必要ですよね。

普段は見当たらない”ページ送り”ブロックですが、2つの方法で挿入が可能です。

(方法1)
クエリーループブロックの中で、”投稿テンプレート”ブロックと同階層にブロックを挿入する

ページ送りブロックをブロック一覧の中に表示させる方法

具体的には、
①”投稿テンプレート”ブロックの3点メニューを開ける
②”ブロック挿入”をクリック
③挿入されたブロックの+マークをクリックしてブロック一覧を開ける

そうするとデザインカテゴリーの中に”ページ送り”が表示され、選択挿入できるようになります。ついでに普段表示されない”投稿テンプレート”も表示されます。

(方法2)

上の手順の③の代わりに
③挿入されたブロックの中で ”/ページ送り" と入力する

実は”ページ送り”ブロックはワードプレス5.9の新ブロックではなく、5.8.3以前でも存在していたのですが、普段ブロック一覧の中にないので気づかないのですね。恥ずかしながら私も知りませんでした。

ページネーション数の制御

ページネーションで表示するページ数は、クエリーループブロック内ツールバーにある表示設定ボタンの”表示する最大ページ数”で指定できます。

表示する最大ページj数が

  • 0のときは、存在する記事分のページネーションが表示される
  • 1以上ならば、そのページ数分のみのページネーションとなる
ページネーション数の制御方法

メインクエリーが使われている

”テンプレートからクエリーを継承”について で説明したように、フルサイト編集ではメインクエリーが使用されています。

Twenty Twenty-Twoのトップページをフルサイト編集画面で見ると、クエリーループブロックの”テンプレートからのクエリーを継承”がONになっているのがわかります。

TwentyTwenty-Twoのトップページフルサイト編集画面

まとめ

クエリーループブロックによる記事一覧の挿入方法について紹介してきました。

”クエリーループ”ブロックは、記事一覧を表示する準備をするだけ。
中身を表示するには、”投稿タイトル”や”投稿の抜粋”などの関連ブロックが必要となる。

クエリーループブロックのレイアウトを選択すると関連ブロックが自動的に配置され、web表示されるようになる。

この2つの特徴を生かして、次の手順で進めればよいのですね。

  1. ”クエリーループ”ブロックを挿入する
  2. 記事一覧のレイアウトを選択して関連ブロックを配置する
  3. 一記事あたりの表示を整える
  4. 記事数を決める

ワードプレス5.9のブロックテーマでは以下の点が異なります。

  • クエリーループブロック内にページネーションが自動挿入される
  • トップページなどテンプレートに応じたメインクエリーが使用されている

このほかワードプレス5.9での変更点や注意点は以下の記事がおすすめです。

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる