🎛 Loop Grid + Query ID в Elementor: динамические списки для блога, портфолио и каталога!

Идея такая: вы один раз рисуете карточку записи/товара, а Elementor сам заполняет сетку карточками из БД по заданным правилам (фильтрам).
Две ключевые вещи:

Loop Grid — виджет, который строит сетку из повторяющихся карточек.

Loop Item (шаблон) — оформление одной карточки (изображение, заголовок, метки, кнопка).

Query ID — «имя запроса». По этому имени можно точно управлять выборкой (встроенными настройками или кодом) и подключать фильтры сторонних аддонов.

Шаг 1. Создаём карточку (Loop Item)
В админке: Шаблоны → Loop item → Создать.

Соберите карточку: Картинка (Dynamic → Featured Image), Заголовок (Dynamic → Post Title), Метаданные (дата, рубрика), Кнопка «Читать/Смотреть».

Сохраните шаблон (например, Card — Blog Default).

Подсказка: сразу поставьте ограничение строк у заголовка (типографика → line clamp), добавьте «скелетон»-лоадер (если используете) и проверьте мобильную версию.

Шаг 2. Выводим сетку (Loop Grid)
Откройте нужную страницу → добавьте Loop Grid.

В настройках выберите ваш Loop Item.

Источник (Query): Posts / CPT / Products.

Настройте колонки/ряды, пагинацию, порядок (по дате, по популярности и т. п.).

В Advanced → Query ID укажите уникальное имя (например, blog_main, portfolio_featured, shop_instock). Это пригодится дальше.

В архивах (категории/метки) вместо «Posts» выбирайте Current Query — тогда виджет подхватит контекст рубрики сам.

Когда хватает встроенных фильтров (без кода)
Показать записи конкретных рубрик/меток или исключить «Без рубрики».

Отсортировать по дате, по заголовку, по меню-ордеру.

Ограничить количество карточек и включить пагинацию.

Этого уже достаточно для большинства блогов и простых портфолио.

Когда нужен Query ID и немного кода
Иногда надо фильтровать хитро: по пользовательскому полю, по наличию, по популярности, по GET-параметру в URL и т. п.
Для этого и существует Query ID: вы задаёте его в виджете, а затем «подкручиваете» запрос в PHP-хуке.

Где писать код: плагин Code Snippets (проще всего) или functions.php дочерней темы.

Общий шаблон:
Код
php
___
add_action(‘elementor/query/ИМЯ_ID’, function( $query ){
// тут $query->set(‘параметр’, значение);
});
___

Кейсы с примерами
1) Блог: исключить «Новости», выводить по 6 записей
В Loop Grid: Query ID → blog_main.

Код:
php
___
add_action(‘elementor/query/blog_main’, function( $query ){
$news = get_cat_ID(‘Новости’); // имя рубрики
if ( $news ) $query->set(‘category__not_in’, [ $news ]);
$query->set(‘posts_per_page’, 6);
});
___
Полезно: включите пагинацию в виджете и проверьте мобильную сетку (2 колонки → 1).

2) Портфолио (CPT projects): только «избранные», сортировка по рейтингу
В Loop Grid: Источник — Posts (или ваш CPT), Query ID → portfolio_featured.

Код:
php
___
add_action(‘elementor/query/portfolio_featured’, function( $query ){
$query->set(‘post_type’, ‘projects’); // ваш CPT
// только отмеченные как избранные (meta featured = 1)
$query->set(‘meta_query’, [[
‘key’ => ‘featured’,
‘value’ => ‘1’
]]);
// сортировка по числовому полю rating DESC
$query->set(‘meta_key’, ‘rating’);
$query->set(‘orderby’, ‘meta_value_num’);
$query->set(‘order’, ‘DESC’);
});
___
Подсказка: в карточке выводите бейдж «Избранное» (Dynamic → ACF/Meta).

3) Каталог (WooCommerce): только в наличии, по популярности
В Loop Grid: Query ID → shop_instock.

Код:
php
___
add_action(‘elementor/query/shop_instock’, function( $query ){
$query->set(‘post_type’, ‘product’);
// Только в наличии
$meta = (array) $query->get(‘meta_query’);
$meta[] = [‘key’ => ‘_stock_status’, ‘value’ => ‘instock’];
$query->set(‘meta_query’, $meta);
// По популярности (total_sales)
$query->set(‘meta_key’, ‘total_sales’);
$query->set(‘orderby’, ‘meta_value_num’);
$query->set(‘order’, ‘DESC’);
});
___
Лайфхак: добавьте переключатель «В наличии» как GET-параметр ?stock=1 и реагируйте на него в хуке (если нужно).

Частые вопросы новичков:

Где взять Query ID?
В самом виджете Loop Grid → вкладка Advanced → Query ID. Напишите латиницей без пробелов.

Почему пагинация «едет»?
Не задавайте offset, оставьте posts_per_page и включите пагинацию в виджете. Проверьте, что тема/шаблон страницы не перехватывает главный запрос.

Хочу фильтры по брендам/цветам.
Многие аддоны фильтров (например, популярные «smart-filters») просят указать тот же Query ID в виджете фильтра, чтобы «прицепиться» к вашей сетке.

Нужно ли child-theme?
Для таких хуков не обязательно — удобнее через Code Snippets. Дочерняя тема пригодится, если ещё меняете шаблоны/части темы.

Мини-чек-лист перед публикацией:
– Уникальный Query ID у каждого виджета.
– Проверили мобильную сетку и обрезку заголовков.
– Включили пагинацию или lazy-load.
– Протестировали на стейджинге и сделали бэкап.
– Для каталога — учли наличие и сортировку.

Мы в соцсетях

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

О, привет 👋 Приятно познакомиться.

Подпишитесь, чтобы получать замечательный контент каждый месяц.

Мы не спамим! Прочтите нашу политику конфиденциальности, чтобы узнать больше.

На развитие школы

Любая сумма поможет нам развиваться

Хостинги