Идея такая: вы один раз рисуете карточку записи/товара, а 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.
– Протестировали на стейджинге и сделали бэкап.
– Для каталога — учли наличие и сортировку.