クエリーループブロック

ブロック一覧へ戻る

クエリーループブロックは、指定したパラメータに基づいて投稿を表示することができる高度なブロックで、コードのない PHP ループのようなものです。これは、より複雑でパワフルな「最新記事ブロック」のようなものと考えることができます。様々なブロックパターンがブロックの設定に統合されているので、ポートフォリオやお気に入りのレシピを満載したページなどを作成することができます。

クエリーループブロックを追加するには、ブロック追加ボタンをクリックして、このブロックを選択します。また、新しい段落ブロックに “/query loop” と入力して Enter キーを押すと、すぐに追加することができます。

ブロックの追加方法の詳細はこちらをご覧ください。

ブロック設定

クエリーループブロックを追加すると、ブロックパターンの方式で様々なレイアウトの選択肢が表示されます。すべてのオプションは、カルーセル形式またはグリッド形式で表示できます。各クエリーループブロックは、投稿タイトルブロックや投稿抜粋ブロックなど様々なブロックが入れ子状態で組み合わされて作られています。これらの入れ子状態のブロック内のコンテンツは編集することができませんが、外観やレイアウトをカスタマイズすることができます。

パターンの選択方法

クエリーループブロックをお好みの方法で追加します。
そこから、カルーセル状のオプションをクリックして表示するか、すべてのオプションをグリッドで表示するかのオプションが表示されます。ブロックの上部で、どちらの方式にするかを切り替えることができます。
カルーセル表示の場合は「選択」ボタンを使って、グリッド表示の場合は希望のオプションを選択して決定してください。

空の状態から始める方法

クエリーループブロックをお好みの方法で追加します。
「新規」オプションを選択します。
ここで、4つのバリエーションから選ぶことができます。使用したいものを選択してください。

外観のカスタマイズ方法

クエリーループブロックは、再配置や追加などが可能な入れ子状のブロックで構成されているため、数多くのカスタマイズ方法があります。クエリーループブロックで1つのブロックをカスタマイズすると、その変更は同じタイプのすべてのブロックに適用されます。このブロックをカスタマイズする際には、上部ツールバーのリスト表示を利用するとよいでしょう。ここでは、カスタマイズのためのアイデアをいくつかご紹介します。

クエリーループブロックの様々な部分の幅を変更できます。
クエリーループブロックの内の配置を変更できます。
クエリーループブロック内に例えば投稿者や投稿抜粋などのブロックを追加できます。
ドラッグ & ドロップまたはムーブツールを使ってお好みのままにブロックを再配置できます。
クエリーループブロックを選択し、ブロッツールバーの「表示設定」オプションを調整することで、表示される投稿数を変更することができます。
ブロック設定のオプションを使って、様々な色のオプションを設定できます。
アイキャッチ画像ブロックを追加してアイキャッチ画像を追加できます。

ブロックツールバーオプション

各ブロックには固有の制御ツールがあり、エディター上でブロックを操作することができます。

クエリーループブロックのツールバーでの各種設定をあらわす画像。 — クエリーループブロックのツールバー

クエリーループブロックのツールバーには以下のオプションがあります。

配置の変更

幅広 – クエリーループブロックの幅をコンテンツサイズよりも広く増加させます。
全幅 – 画面の全幅をカバーするまでクエリーループブロックを広くします。

表示設定

このオプションでは、以下の制御が可能です。

ページごとの項目数 – クエリーループブロック内に表示したい記事の数を選択します。
オフセット – 出力を開始する前に、クエリーループブロックが特定の数の WordPress 投稿をスキップできるようにします。
表示する最大ページ数 – 表示するコンテンツの数を制限します。

リストビュー (デフォルト)

投稿した内容をスタック一覧で表示します。

ブロックツールバーの設定で「リスト表示」を選択した際に投稿が一覧で表示されている画像。 — リスト表示

グリッドビュー

投稿をグリッド表示します。

ブロックツールバーの設定で「グリッド表示」を選択した際に投稿がグリット状に表示されている画像。 — グリッド表示

クエリーループ設定

すべてのブロックには、ブロックツールバーにあるオプションに加えて、エディターのサイドバーにも特定のオプションがあります。サイドバーが表示されていない場合は、「公開」ボタンの横にある「歯車」アイコンをクリックしてください。

色

クエリーループブロックの色オプションは、クエリー全体に影響します。なお、クエリーループブロックの中にある個々のブロックもカスタマイズできることも覚えておいてください。

テキスト色 – あらゆるテキストの色を制御します。
背景色 – ブロックの全体的な背景を制御します。
リンク色 – あらゆるリンクの色を制御します。

テンプレートからのクエリーを継承

これは、ループが依存するクエリーをカスタマイズするかどうかによって、有効化/無効化を切り替えることができるオプションです。それ以外の場合、WordPress は使用されているテンプレートに基づいて、どの記事を表示するかを決定します。このオプションを有効化すると、特定のカスタマイズオプションが非表示になります。無効化すると、より多くのカスタマイズオプションが表示されます。

並び順

投稿順 (最新から)
投稿順 (過去から)
アルファベット順: A から Z
アルファベット順: Z から A

上部固定投稿

このオプションでは、3つのオプションのいずれか選択できます。

含む (デフォルト) – 上部固定投稿を表示します。
除外 – 上部固定投稿を除外します。
限定 – 上部固定投稿のみを表示します。

フィルター

このオプションでは、表示される投稿をさらにカスタマイズすることができます。このセクションが表示されていないのは、「テンプレートからクエリーを継承」の設定をオフにする必要があるためです。

カテゴリー – 含めたいカテゴリーを半角カンマで区切って入力してください。
タグ – 含めたいタグを半角カンマで区切って入力してください。
投稿者 – 全投稿者のリストから選択してください。
キーワード – 含めたいキーワードを入力してください。

高度な設定

「高度な設定」タブでは、ブロックに CSS クラスを追加することができ、カスタム CSS を記述して、ブロックを自由にスタイリングすることができます。また、HTML 要素を割り当てることもできます。