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

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

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

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

詳細はこちら

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

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

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

ワードプレス クエリーループブロックで記事一覧を挿入する方法【version5.8新機能】

ワードプレスversion5.8から、クエリーループブロックが使用可能となりました。

これにより、従来はPHPでテンプレートファイルを操作しないとできなかった記事一覧の挿入が、管理画面のエディター内で可能となりました

本記事では、そんなクエリーループブロックの使い方について紹介していきます。

目次

version5.8で追加されたクエリーブロックおよび関連ブロック

新しく”テーマ”というブロックグループが設定され、その中にクエリーループブロックなど8個の新しいブロックが追加されました。

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

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

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

クエリーブロックの使用方法

使用方法概要

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

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

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

使用方法詳細手順

テーマ”Twenty Twenty-One”で解説していきますが、他のテーマでも同じです。

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

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

事前準備(記事の投稿)

わかりやすいように、記事タイトルは”投稿記事1”~”投稿記事5”としました。
各記事には簡単な本文とアイキャッチ画像も設定しています。

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

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

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

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

クエリーループブロックを挿入するとエディター画面は次のようになります。
一見、記事の一覧が挿入されたかのように見えます。

クエリーループを挿入直後

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

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

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

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

クエリーループブロックのみのプレビュー

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

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

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

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

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

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

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

記事一覧表示レイアウトの選択画面

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

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

  • 標準
  • 左に画像
  • 小さな画像とタイトル
  • グリッド
  • 大きなタイトル
  • オフセット
記事レイアウト(標準と左に画像)
記事レイアウト(小さな画像とグリッド)
記事レイアウト(大きなタイトルとオフセット)

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

標準レイアウトを選択

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

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

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

標準レイアウトのリスト表示

この標準レイアウトの場合は、”投稿タイトル”、”投稿のアイキャッチ画像”、”投稿の抜粋”、”区切り”、”投稿日”の順にブロックがレイアウトされています。

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

標準レイアウト選択後のプレビュー

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

③一記事あたりの表示を整える(オリジナルレイアウトとする)

このままでもよいのですが、少しレイアウトをオリジナルに変更します。
(あくまで事例なのでこの手順は飛ばしても構いません)

リスト表示させながらブロックをいろいろと調整すると効率よく作業が進みます

1.投稿の抜粋を削除する

①リスト表示の中で”投稿の抜粋”をクリック
②ブロックのツールバーの3点メニューをクリック
③”ブロックを削除”をクリック

抜粋ブロックを削除

2.カラムブロックを使って画像下に投稿タイトルと投稿日を配置する

あとはGutenbergの編集機能を使って下記のように仕上げてみました。
(一旦”投稿タイトル”と”投稿日”および”区切り”を削除後、画像下にカラムブロックを挿入して”投稿タイトル”と”投稿日”を再配置)

一記事当たりのレイアウトを調整後

これで一記事あたりの表示調整は終了です。
アイキャッチ画像の下に投稿タイトルと投稿日だけを表示するシンプルなレイアウトとしました。

④記事数を決める

一覧表に表示する記事数を決めます。
現段階では記事数は1つだけの設定となっていますが、5つに増やします。

①リスト表示で”クエリーループ”をクリック
②ブロック内ツールバーの”表示設定”をクリック
③”ページごとの項目数”を5に変更

記事数を変更する

記事数を5つに増やしてプレビュー表示です。
画面に入りきらないため途中で切れていますが、記事数は5つ表示されるようになりました。

記事数変更後のプレビュー

以上で、クエリーループブロックの基本的な使用方法の説明は終了です。

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

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

グリッド表示にする

実は、これまで表示してきたレイアウトはブロックのツールバー内で”リスト表示”となっていました。
(アウトラインの”リスト表示”とは違います。ややこしいですね。)

リスト表示を選択中

これをグリッド表示に変更することができます。

グリッド表示に変更

プレビューすると次の通りです。
グリッド表示にするならば、投稿タイトルと投稿日は縦に並べた方がよいですね。
フォントサイズも見直す必要があります。

グリッド表示プレビュー

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

このほか、クエリーループブロック選択中に画面右に表示されるパネル内でできる設定もあります。
パネルは画面右上の歯車マークをクリックすると表示できます。

情報パネルの表示

主にできることは以下の通りです。

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

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

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

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

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

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

パターンによる挿入方法

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

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

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

クエリーループブロックのパターン

クエリーループブロックの将来性

このように、クエリーループブロックを使えば、固定ページや投稿の任意の場所に記事一覧表を表示することができます。カテゴリーごとの絞込みも可能です。

ただし残念ながら、同時にワードプレス5.8でリリースされたブロックベースのウィジェットでは、まだクエリーループブロックは使用できません。ウィジェットとしてはクエリループブロックは選択できない仕様になっています。

しかし、クエリーループブロックは、近い将来のサイトエディター導入への布石です。

サイトエディターならば固定ページや投稿のエディター内でなく、サイトそのものをダイレクトに編集できるので、サイドバーやフッターエリアなどにもクエリーループを配置できるようになるでしょう。

まとめ

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

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

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

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

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

このほか、ワードプレスversion5.8で導入された新機能はこちらです。

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

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

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