WordPress 投稿一覧/クエリーループブロックの使い方

今回は投稿一覧ブロック・クエリーループブロックの詳細や使い方を解説します。

投稿一覧ブロック・クエリーループブロックを使用すれば、投稿や固定ページなどに、投稿・カスタム投稿などの記事一覧をブロックとして設定・表示できます。

本記事は、2024年7月時点（WordPress6.6.1）で更新した記事になります。閲覧時期によって本手順と操作画面や内容が異なる場合があります。

投稿一覧ブロック/クエリーループブロックとは?

投稿一覧ブロック/クエリーループブロックは、2021年7月20日にリリースされたWordPress5.8から新たに追加されたブロックです。

任意の箇所に固定ページや投稿ページ、カスタム投稿の一覧を表示できます。

トップページに投稿やカスタム投稿リスト一覧を表示させたい場合、以前は独自ブロックの用意されているテーマ、プラグインまたは個別カスタマイズが必要でしたが、投稿一覧ブロック/クエリーループで対応可能になりました。

ここにあるブロックは全て単独では使わず基本的にセットで使用していくといった形になります。

なお、実際に試したところ、現時点では投稿一覧ブロックもクエリーループブロックもほぼ同じ機能のようでした。

WordPress5.9から新たに「フルサイトエディター」と呼ばれる新しい機能が登場し、ヘッダーからフッターまでの全てをブロックを使って編集できるようになりました。

「テーマ」グループのブロックは、そうしたフルサイトエディター使用時に、より柔軟なカスタマイズを実現するための足がかりとなる機能でもあります。

※フルサイトエディターでのみ使えるという訳ではありません。

なお、「フルサイトエディター」を使用するにはそれ専用のブロックテーマと呼ばれるテーマを使用してあげる必要があります。

ブロックテーマの概要やおすすめテーマについては以下の記事で解説しているので、こちらを参考にしてみて下さい。

投稿一覧ブロックの使い方

ここからは投稿一覧ブロックの具体的な使い方について解説していきます。

※クエリーループブロックもほぼ同じのため、投稿一覧ブロックを例に説明します。

◾️(参考)投稿一覧ブロックで作成した投稿リスト例

事前準備：投稿記事とカスタム投稿記事の作成

投稿一覧ブロックを表示させる為に、あらかじめ以下のように投稿記事をいくつか準備しておきました。

投稿一覧ブロックの追加方法

ブロックエディターの編集画面で左上、あるいは右側にある「+(ブロックを追加)」アイコンをクリックします。

「投稿一覧」ブロックを追加します。

投稿一覧ブロックを追加すると以下のような画面が表示されます。

ここで「選択」をクリックすると、あらかじめテーマ側で用意されているパターン・レイアウトの中から好きな形式で投稿一覧を表示させることができます。

一方、「新規」をクリックすると、「タイトルと日付」「タイトルと抜粋」「タイトル、日付、抜粋」「画像、日付、タイトル」の中から追加時の状態を選択できます。

「新規」では「選択」とは違い、すべての投稿が縦一列に並ぶだけのシンプルなレイアウトで表示されるため、自分で1からレイアウトを調整していきたい方向けのオプションになります。

本例では「選択」を選んで、「Post List Image Grid」という名前のパターンを選択しておきます。

これで保存して公開すると、初期設定では「アイキャッチ画像」「タイトル」「カテゴリー」を含んだ最新の投稿リストが3カラムで表示されるようになります。

補足：投稿一覧ブロックは「ブロックパターン」からも追加が可能

投稿一覧ブロックで「選択」をクリックした際に表示されたパターン・レイアウトは、「ブロックパターン」画面からも追加することが可能です。

左上の「+アイコン(ブロック挿入ツールを切り替え)」をクリックし、「パターン」タブをクリックします。

「投稿」を開くと、「投稿一覧」ブロックを追加して「選択」をクリックした際に表示されたパターン・レイアウトが追加できます。

表示する投稿タイプの変更方法

デフォルトでは「投稿一覧」ブロックを挿入した状態では「投稿」が投稿タイプとして選択されているようになっています。

これを「カスタム投稿」など他のものに変更したい場合は「クエリーループ」全体が選択されている状態で、右サイドバーの投稿タイプから変更できます。

◾️(参考)投稿タイプをカスタム投稿に変更している例

さらに、右サイドバーから投稿の並び順を変えたり、投稿者やキーワードを使用して絞り込みを行なったりできます。

(補足): 「テンプレートからクエリーを継承」項目について

右サイドバーの中に「テンプレートからクエリーを継承」項目を「オン」にすると、表示しているページ毎にWordPressが独自で定義しているメインクエリが発行され、投稿ページであれば投稿ページ自身の情報、固定ページであれば固定ページ自身の情報が表示されるようになります。

この辺りの内容(メインクエリ、サブクエリなど)はやや難しい内容になるので詳しくは解説しませんが、とりあえずはこの項目を「オン」にすると表示しているページの情報がそのまま反映されるようになるのだなと思っておけば問題ないかと思います。

 

個人的にはほとんどの方にとっては「オン」にする必要がない機能だと思います。

一覧表示される投稿タイプの表示件数の変更方法

一覧表示される投稿タイプの表示件数は、上ツールバー「表示設定」の中にある「ページごとの項目数」を変更してあげることで増やしたり減らしたりできます。

■(参考)「ページごとの項目数」を「3」に変更した結果(1番最新の記事から3つの記事が表示される。)

各投稿リストに含めたい情報の変更方法

本例では「Post List Image Grid」というレイアウトを選択したので、各投稿リストの情報は上から「アイキャッチ画像」「タイトル」「カテゴリー」というような形で並んでいます。

これに例えば「抜粋分」を追加したい場合は、挿入したい箇所で「+アイコン(ブロックを追加)」を押して「テーマ」グループにある「抜粋」をクリックします。

いずれか1つの投稿リストでブロックを追加すると、表示されている全ての記事リストにも追加されます。

同様に、いずれか1つの投稿リストからブロックを削除した場合、全ての投稿リストからブロックが削除されます。

このように基本的には「投稿一覧」ブロックを追加して、その中でその他の「投稿タイトル」「投稿コンテンツ」「投稿日」「投稿の抜粋」といったブロックを追加していくといったような使い方をします。

投稿一覧のカラム数の変更方法

投稿一覧のカラム数は「投稿テンプレート」が選択されている状態で、「グリッドビュー」が選択されていると変更できます。

一方「リストビュー」が選択されていると、ブロックが縦に並ぶシンプルなレイアウトになり、カラム数の変更ができなくなります。

「投稿一覧」ブロックと「最新の投稿」ブロックの違い

ブロックエディターには、従来から「最新の投稿」というブロックがあります。

最新の投稿ブロックは文字通り最新の投稿一覧を表示できるブロックですが、カスタム投稿タイプには対応しておらず、標準の「投稿」の一覧のみ表示させることができます。

一方、投稿一覧ブロックでは「投稿タイプ」(例: 投稿、固定ページ、カスタム投稿など)の選択が可能です。

また「最新の投稿」では「抜粋分」「投稿者名」「投稿日」「アイキャッチ画像」の表示・非表示が選択できますが、その他の情報(例: カテゴリーなど)を自由に追加する事ができないのに対し、「投稿一覧」ではより自由に投稿一覧レイアウト内に情報を追加したり、ブロックの配置や大きさなどのスタイルを設定できます。

「最新の投稿」ブロックを拡張したブロックが「投稿一覧」ブロックというイメージになるかもしれません。

まとめ

まとめです。今回は「投稿一覧」ブロックの詳細や使い方について解説しました。

投稿一覧ブロックは、やや設定項目が多く慣れるまで時間がかかるかもしれませんが、使えるようになるとサイトのトップページなどに投稿やカスタム投稿の記事一覧を追加できるようになる非常に便利なブロックですので、本記事を参考に是非使い方を覚えてみて下さい。

今回は以上になります。最後までご覧いただきありがとうございました。

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました！

最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。