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

今回は2021年7月20日にリリースされたWordPress5.8から新しくブロックエディターに追加されたブロックである投稿一覧ブロック・クエリーループブロックの詳細や使い方についてを解説していきたいと思います。

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

なお、まだリリースされたばかりで情報も少なく、今後のWordPressバージョンで仕様
や操作も変わってくるかもしれませんので、執筆2021年9月時点の情報になります。

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

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

このブロックを利用することで固定ページや投稿ページなどに投稿記事の一覧やカスタム投稿の一覧を表示させることが出来るようになります。

従来であればトップページに投稿やカスタム投稿リスト一覧を表示させたいといった場合は、独自ブロックの用意されているテーマや、プラグインあるいは、テンプレートファイルに別途コードを記述して対応する必要があったのですが、WordPress標準ブロックで対応が可能になりました。

投稿一覧ブロック以外にも新たに「テーマ」という項目がブロックエディター内に追加されているのですが、ここにあるブロックは全て単独では使わず基本的にセットで使用していくといった形になります。

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

少し余談ですがWordPressでは現在開発を進められており近い将来実装される予定の「フルサイト編集」機能と呼ばれるものがあり、WordPress5.8からこれらの「テーマ」グループのブロックが追加されたのはフルサイト編集の足がかり的な機能でもあるようです。

フルサイト編集とは、これまでのようにコンテンツ(投稿や固定ページの本文)だけを操作するだけでなくヘッダーやサイドバー、フッターといったサイトの全ての箇所をブロックを使用してカスタマイズ出来るようにしようとする機能のことで、これと今回ご紹介する「投稿一覧」といったブロックを使用することでより自由度の高いサイトカスタマイズを実現しようとしているのではないかと考えられます。

なお、「フルサイト編集」機能を使用するにはそれ専用のブロックテーマと呼ばれるテーマを使用してあげる必要があるようです。詳しいことについてはまだ情報も少なく、今後明らかになっていくのではないかと思います。

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

それではここからは投稿一覧ブロックの具体的な使い方についてをご紹介していきます。
※クエリーループブロックもほぼ同じのため、投稿一覧ブロックを例に説明します。

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

投稿一覧ブロックを表示させる為に、あらかじめ以下のように投稿・カスタム投稿(メンバー)記事をいくつか準備しておきました。また今回はWordPressのデフォルトテーマ「Twenty Twenty-One」を使用しています。

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

まずは「投稿」→「新規追加」あるいは「固定ページ」→「新規追加」をクリックしてブロックエディターを開いて下さい。

ブロックエディターを開くことが出来たら次に左上、あるいは右側にある「+アイコン(ブロックを追加)」をクリックして、「投稿一覧」ブロックを追加します。

投稿一覧ブロックを追加すると以下のような画面が表示されますが、ここでどのようなパターン・レイアウトで投稿一覧を表示させたいかを選択することが出来ます。

始めは「カルーセル表示」になっていますが、これを「グリッド表示」に変更してあげるとパターン・レイアウトの一覧を見られるようになります。

ここでは試しに「標準」パターンを選択しておきます。

これで保存して公開すると、このように初期設定では投稿の最新記事が1件表示されるようになっており、「標準」パターンではその投稿の「タイトル」「アイキャッチ画像」「投稿の抜粋分」「投稿日」が表示されるようになります。

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

なお補足ですが投稿一覧ブロックで追加したパターンは、「ブロックパターン」画面からも追加することが可能です。

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

「パターン」タブをクリックするとタブのすぐ下にドロップダウンメニューがあるので、このドロップダウンメニューを「クエリ」に変更してあげます。

そうすると「投稿一覧」ブロックを追加した際に指定した6種類のパターンが表示されますので、ここから同じように選択して追加するといったような形になります。

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

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

これを変更したい場合は「クエリーループ」全体が選択されている状態で、右側に表示されている設定用サイドバーの「投稿タイプ」と書かれた項目のドロップダウンメニューを変更してあげれば良いです。

なお投稿タイプは「投稿」「固定ページ」「カスタム投稿」(※設定している場合は)の3つの中から選択出来るようになっています。

■(参考)投稿タイプをカスタム投稿「メンバー」に変更した例(「タイトル」「アイキャッチ画像」「投稿の抜粋分」「投稿日」の内容がカスタム投稿で設定している内容に変更されていることが分かります。)

さらに、右側のサイドバーからは選択した投稿タイプでの投稿の並び順を変えたり、投稿者やキーワードを使用して絞り込みを行なったりといったことも出来ます。(※投稿タイプが「投稿」になっている場合は「カテゴリー」での絞り込みも可能です。)

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

また「クエリーループ」全体が選択されている状態で、右側に表示されている設定用サイドバーの中に「テンプレートからクエリーを継承」という項目があることに気づかれた方もおられると思います。

これを「オン」にすると表示しているページ毎にWordPressが独自で定義しているメインクエリが発行されて、投稿ページであれば投稿ページ自身の情報、固定ページであれば固定ページ自身の情報が表示されるようになります。

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

 

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

 

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

一覧表示される投稿タイプの表示件数の変更方法ですが、こちらは上のツールバーから「表示設定」をクリックし「ページ毎の項目」の数を変更してあげることで増やしたり減らしたりすることが出来ます。

デフォルトではこの数値が「1」と設定されている為、最新の記事の1つだけが表示されているような形になっています。

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

各記事のパターンに含めたい情報の変更方法

今回は投稿一覧ブロックを追加した際「標準」というパターンを選択した為、投稿一覧の各記事に含まれている情報は上から「タイトル」「アイキャッチ画像」「投稿の抜粋分」「投稿日」というような形で並んでいます。

これを例えば「抜粋分」はやっぱり消したいといった場合は、「抜粋分」のブロックをクリックして削除してあげることで表示されている全ての記事のパターン内で「抜粋分」を削除することが可能です。

また逆に抜粋分を削除した箇所に新たに各記事のカテゴリーを表示させたいといった場合は、抜粋分があった箇所で「+アイコン(ブロックを追加)」を押してから「投稿カテゴリー」を追加してあげることで、全ての記事のパターン内でその記事に設定されているカテゴリー情報を表示させてあげることが出来ます。

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

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

最後に投稿一覧のカラム数の変更方法ですがデフォルトでは「リスト表示」が選択されている為、全ての投稿一覧は縦一列に1カラムの状態で並んでいます。

これを「グリッド表示」に変更してあげると複数カラムに変更してあげることが出来るようになり、右側のサイドバーから具体的なカラム数を選択することが出来るようになります。

またタイトルが少し大きすぎるといった場合はタイトルを選択した状態で同じく右側サイドバーから文字サイズや色などを細かく変更出来るようになっているのでお好みに合わせて変更してあげても良いかと思います。

■(参考) 完成例

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

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

最新の投稿ブロックは文字通り最新の投稿一覧を表示することが出来るのですが、カスタム投稿タイプは選択できず、基本的に標準の「投稿」の一覧を出す形になります。

「投稿一覧」では「投稿タイプ」を選択(例: 投稿、固定ページ、カスタム投稿など)ができます。

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

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

まとめ

まとめです。今回は2021年7月20日にリリースされたWordPress5.8から新しくブロックエディターに追加されたブロックである「投稿一覧」ブロックの詳細や使い方についてを解説しました。

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

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

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

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

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

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

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