クエリループ活用ガイド｜投稿一覧・カード表示をプラグインなしで作る

この記事は、当サイトの運営者がWordPress公式ドキュメントを精査した上で執筆しています。クエリループ自体はWordPress標準機能のため、動作確認はご自身の環境でも行いやすい内容です。

「投稿一覧をおしゃれなカードレイアウトで表示したい」「特定のカテゴリの記事だけを一覧表示したい」——こうした要望は、プラグインを追加しなくてもGutenberg標準の「クエリループ」ブロックだけで実現できます。この記事では、クエリループの基本構造から、よく使うカスタマイズ方法までを解説します。

クエリループブロックとは何か

クエリループは、指定した条件で投稿を取得して一覧表示できる、Gutenberg標準の高度なブロックです。従来の「最新の投稿」ブロックをより柔軟にしたイメージで、PHPのWP_Queryループに相当する処理を、コードを書かずに組み立てられます。

ブロックの内部は、大きく分けて次の要素で構成されています。

基本的な使い方

よく使うカスタマイズ

• 表示件数・オフセット：「表示オプション」から、1ページに表示する件数や、先頭から何件をスキップするかを設定できます
• カテゴリ・タグでの絞り込み：「フィルター」から特定のカテゴリ・タグの投稿だけを表示、または除外できます
• リスト表示・グリッド表示の切り替え：投稿テンプレートのツールバーから、縦一列のリスト表示と、複数列に並ぶグリッド表示を切り替えられます
• 見出し・アイキャッチ画像のリンク化：初期状態ではリンクが付かない場合があるため、それぞれのブロックの設定で「タイトルをリンクにする」「投稿にリンクする」をオンにします

投稿テンプレートの中には、見出し・抜粋・日付といった標準ブロックだけでなく、グループ・カラムなどのレイアウト用ブロックも配置できます。カラムブロックでアイキャッチ画像とテキストを横並びにする、といった構成もコードなしで組み立てられます。

Lazy Blocksと組み合わせる場合の考え方

クエリループの投稿テンプレート内には、見出しや抜粋といった標準ブロックに加えて、通常のブロックも配置できます。ただし、Lazy Blocksで自作したブロック（カスタムフィールド）をテンプレート内に置いても、そのままでは「表示中の投稿」のデータを自動的に参照してくれるわけではありません。投稿ごとに異なる値を表示したい場合は、Pro版のPosts/Taxonomy/Usersコントロールや、動的な値の参照方法について、個別に設計・検証が必要になります。この点は当サイトでも実装パターンを検証しきれていないため、断定はせず今後の検証事項としています。

まずは標準ブロック（見出し・抜粋・アイキャッチ画像・日付）の組み合わせだけで、多くの一覧ページは十分に作れます。装飾を加えたカード風レイアウトにしたい場合は、投稿テンプレート内でグループ・カラムブロックを使い、背景色や余白を調整するところから試してみてください。

まとめ

クエリループブロックは、プラグインを追加せずに投稿一覧・カテゴリ別一覧・カード型レイアウトなどを組み立てられる、Gutenberg標準の強力な機能です。まずは投稿タイプとフィルターの設定、投稿テンプレートの中身の組み立てという基本操作から慣れていくのがおすすめです。

投稿一覧とあわせて、独自の装飾ブロック（お知らせ・料金表・年表など）を組み合わせたい場合は、Lazy Blocks使い方完全ガイドもあわせてご覧ください。