WordPressクエリループの使い方｜投稿一覧・カードを標準ブロックで作る

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

WordPressの投稿一覧は、クエリループで取得条件を決め、投稿テンプレートで1件の見た目を作ると整理できます。画像や見出しを並べるだけでは、投稿ごとの情報に切り替わらないためです。まず少数の投稿で条件とリンクを確認し、その後にカードの列数・余白・抜粋を整えましょう。

クエリループは「取得条件」と「1件の見た目」を分けて作る

クエリループは、投稿タイプ・カテゴリ・並び順などの条件に合う投稿を一覧にするブロックです。投稿テンプレートの中にタイトルやアイキャッチ画像を置くと、各投稿の情報へ切り替わって繰り返し表示されます。通常の見出しに記事名を手入力する方法とは異なります。

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

基本手順：条件を決め、投稿テンプレートを整え、リンクを確認

よく使うカスタマイズ

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

カード1件の中身は投稿テンプレートで整えます。投稿タイトル・抜粋・アイキャッチ画像などを置き、必要ならグループやカラムでまとめます。タイトルと画像を投稿へリンクする設定も確認し、カードを押した読者が本文へ進める状態にしましょう。

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

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

確認用の一覧は、投稿タイトル・画像・抜粋などの標準ブロックだけで作ります。たとえば3件を表示し、画像あり・画像なし・長いタイトルの記事がどう並ぶかを見れば、装飾前の問題を見つけやすくなります。対象記事とリンクが正しいことを確かめてから余白や背景色を調整してください。

まとめ

完成の確認は、目的の投稿が出ること、本文へ移動できること、スマホと次ページで使えることの3点です。表示が空なら先にカテゴリや投稿タイプなどの条件を見直し、デザイン調整はその後にします。小さな一覧で一巡してから条件を増やすと、意図しない記事が混ざった場合も原因を追えます。

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