クエリーループブロック

Go back to the list of Blocks

The Query Loop block is an advanced block that allows you to display posts based on specified parameters; like a PHP loop without the code. You can think of it as a more complex and powerful Latest Posts Block. With various block patterns integrated into the block setup, you can do things like create a portfolio or a page full of your favorite recipes.

Three posts shown side by side with featured images, post title, and date the posts were each published.

In order to add a Query Loop block, click on the add block button and select the Query Loop block. You can also type “/query loop” and hit enter in a new paragraph block to add one quickly.

Detailed instructions on adding blocks can be found here.

Block Configuration

After adding a Query Loop block, you’ll see various layout options in the form of block patterns to choose from. You can view all options either in a carousel format or a grid format. Each Query Loop block is made up of various nested blocks, like the Post Title block and Post Excerpt block. While you won’t be able to edit the content of these nested blocks, you can customize the appearance and layout.

How to choose a pattern

  1. Add a Query Loop block using your chosen method.
  2. From there, you’ll be presented with an option to either click through a carousel of options or to view all options in a grid. You can toggle which method you prefer at the top of the block.
  3. Select the option you want to use by using the “Choose” button when in the carousel view or by selecting the option you want when in grid view.

How to start blank

  1. Add a Query Loop block using your chosen method.
  2. Select the “Start Blank” option.
  3. From there, you’ll see four variations you can choose from. Select the one you want to use.

How to customize the appearance

There are numerous ways to customize the Query Loop block partially because it’s made up of nested blocks that you can rearrange, add to, and more. When you customize one block in the Query Loop block, the changes will apply to all blocks of the same type. While customizing this block, it might help to use the List View found in the top toolbar. Here are some ideas for customization to get you started:

  • You can change the width of various aspects of the Query Loop block.
  • You can change alignment of blocks within the Query Loop block.
  • You can add blocks into the Query Loop block, like Post Author or Post Excerpt.
  • You can rearrange the blocks to your liking, dragging and dropping or using the movers to do so.
  • You can change the number of posts listed by selecting the Query Loop block and adjusting the Display Settings option in the block toolbar.
  • You can set various color options using the Block Settings options.
  • You can add in featured images by adding the Featured Image block.

トップ ↑

Block Toolbar Options

Each block has its own block-specific controls that allow you to manipulate the block right in the editor.

Image showing the various settings in the Query Loop block toolbar.
The Query Loop block toolbar

The block toolbar for the Query Loop block has the following options:

Changing alignment

  • Wide width – Increase the width of the Query Loop block beyond the content size.
  • Full width – Extend the Query Loop block to cover the full width of the screen

Display Settings

This option allows you to control the following:

  • Items per Page – Choose how many posts you want to show within the Query Loop block.
  • Offset – Enable the Query Loop block to skip a certain number of WordPress posts before starting output.
  • Max page to show – Limits how many pieces of content to show.

List view (default)

Displays your post in a stacked list.

Image showing posts in a list using the List View option in the block toolbar settings.
List View

Grid view

Displays your posts in a grid view.

Image showing posts in a grid using the Grid View option in the block toolbar settings.
Grid View

トップ ↑

Query Loop Settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, simply click the ‘cog’ icon next to the Publish button.

Color

The color options for the Query Loop block impact the entire Query. Keep in mind that you can also customize the individual blocks that are within the Query Loop block too.

  • Text color – Controls the color of any text.
  • Background color – Controls the overall background of the block.
  • Link color – Controls the color of any links.

Inherit query from template

This is an option that you can toggle on and off, depending on whether you want to customize the query that the loop relies upon. WordPress will otherwise rely on the template being used to determine what posts appear. If you toggle it on, certain customization options will be hidden. If you toggle it off, more customization options will appear.

Order by

  • Newest to Oldest (default)
  • Oldest to Newest
  • Alphabetical A to Z
  • Alphabetical Z to A

Sticky posts

This option allows you to choose between three options:

  • Include (default) – Displays sticky posts.
  • Exclude – Removes sticky posts.
  • Only – Shows only sticky posts.

Filters

This option allows you to customize further what posts are being displayed. If you don’t see this section, it’s because you need to toggle off the “Inherit query from template” setting.

Image showing various filtering options for the Query Loop block, including Categories and Tags.
  • Categories – List any categories you want included separated by a comma.
  • Tags – List any tags you want included separated by a comma.
  • Author – Select from a list of all authors.
  • Keyword – Enter any keywords you want included.

トップ ↑

Advanced Settings

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit. It also allows you to assign an HTML element.

Image showing the option to assign an HTML element and add CSS classes to the Query Loop block.
The advanced section lets you add a CSS class to your block and assign an HTML element.

トップ ↑

Demonstration of the Query Loop block

Video showing how the Query Loop block works

トップ ↑

Resources

Changelog:

  • Added in resources section on 2021-07-14
  • Created 2021-07-08

この記事は役に立ちましたか ? どうすればさらに改善できますか ?