Стандартная лента блога, вертикальная колонка постов, один под другим. Пока записей десять, это работает. Когда их сто, вертикальная прокрутка превращается в бесконечный свиток: читатель теряет интерес уже на третьем экране, а глубина просмотра падает в ноль.

Галерея записей, сетка из карточек в 2-4 колонки, решает проблему плотно. На одном экране помещается втрое больше постов, глазу есть за что зацепиться, а кликабельность вырастает за счёт крупных миниатюр. Для главной страницы, страницы категорий или кастомного лендинга это самый рабочий формат.

Ниже, три способа собрать галерею записей в WordPress. От полностью встроенного (ни одного плагина) до гибкого кода для разработчиков. Каждый, с конкретными шагами, без «в общем и целом».

💡 Быстрый обзор:

• Выберите способ: встроенный блок Query Loop (без плагинов), плагин Post Grid (максимум настроек) или кастомный код на WP_Query + лайтбокс (для разработчиков).
• Для Query Loop: откройте страницу в редакторе, добавьте блок Query Loop → Start Blank → выберите шаблон карточки → включите Grid View → настройте колонки.
• Для Post Grid: установите плагин из репозитория WordPress.org, создайте грид в Post Grid → Add New, настройте запрос и внешний вид, вставьте шорткод в любую страницу.
• Для кастомного кода: добавьте WP_Query с пагинацией в шаблон темы, оберните выдачу в div-сетку на CSS Grid, подключите GLightbox или Fancybox для всплывающих окон.

Способ 1: блок Query Loop, без плагинов

С версии 5.8 в ядре WordPress живёт блок Query Loop. Сейчас, в WordPress 7.0, это зрелый инструмент: конструктор, который выводит сетку записей прямо в редакторе блоков. Никаких плагинов, шорткодов и правок файлов темы.

Создайте новую страницу или откройте существующую, нажмите «+» в редакторе. Найдите «Query Loop» и добавьте блок. Он предложит несколько готовых раскладок, выберите Start Blank, чтобы собрать карточку с нуля.

Перед вами появится прототип: одна запись с миниатюрой, заголовком и датой. Теперь ключевой шаг: на панели инструментов блока нажмите иконку Grid View (сетка из квадратов). Список мгновенно превратится в сетку. Количество колонок настраивается в боковой панели, для большинства тем оптимально 3.

Настройте содержимое карточки под задачу. Нажмите на миниатюру и в боковой панели включите тумблер Link to Post, теперь клик по картинке ведёт на запись. То же самое сделайте для заголовка. Дату можно убрать: клик по ней → три точки → Remove Date.

Дополнительные настройки Query Loop в боковой панели блока: выбор категории, сортировка (по дате, по заголовку, случайная), количество записей на странице. Если нужно исключить определённые посты, используйте поле Exclude.

Плюс: полностью нативный, не замедляет сайт, работает с любой блочной темой. Минус: нет фильтрации по категориям без перезагрузки страницы и сложных анимаций, тут нужен плагин.

Способ 2: плагин The Post Grid, максимум гибкости

Когда встроенного Query Loop не хватает, нужна фильтрация, masonry-раскладка, слайдер или hover-эффекты, на сцену выходит The Post Grid от RadiusTheme. Плагин c более чем 250 оценок и 100 000+ активных установок на WordPress.org, протестирован вплоть до версии 6.9.4.

Установка стандартная: Plugins → Add New → поиск «The Post Grid» → Install → Activate. После активации в меню появится пункт Post Grid → Add New.

Процесс создания грида, четыре шага:

Шаг 1, Query Post. Выберите тип контента: записи, страницы или произвольный тип. Фильтруйте по категориям, тегам, авторам. Порядок сортировки, по дате, заголовку, случайный. Здесь же задаётся количество записей.

Шаг 2, Layouts. Нажмите Create Layout и соберите карточку визуально: доступны теги для миниатюры с линком и без, заголовка, даты, автора, excerpt. Перетащите нужные поля на холст и нажмите Publish. Вернитесь в настройки грида и выберите свежесозданный layout.

Шаг 3, Item Style. Настройте отступы, радиус скругления, тень, шрифты, цвета. Здесь же задаётся количество колонок для десктопа, планшета и мобильного.

Шаг 4, Shortcode. Скопируйте сгенерированный шорткод, откройте страницу в редакторе, добавьте блок Shortcode и вставьте код. Готово.

В Pro-версии добавляется AJAX-фильтрация, читатель переключает категории без перезагрузки страницы, плюс infinite scroll, masonry-сетка и поддержка произвольных типов записей. Цена стартует от $49 в год.

Плюс: полный контроль над внешним видом, работа с любыми темами и page builder-ами (Elementor, Divi). Минус: бесплатная версия не даёт AJAX-фильтрацию и masonry; плагин добавляет CSS и JS, на очень лёгких сайтах прирост в 50-80 КБ может быть заметен.

Способ 3: кастомный код на WP_Query, для разработчиков

Если вы пишете тему с нуля или правите дочернюю, галерею можно собрать полностью на коде. Это легче плагина, ни одного лишнего килобайта, и даёт абсолютный контроль над HTML-структурой.

Шаблон ниже, минимальная рабочая точка входа. Добавьте его в файл темы, например front-page.php дочерней темы, или через плагин Code Snippets с хуком на template_redirect:

1
<?php
2
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
3
$args  = array(
4
    'post_type'      => 'post',
5
    'posts_per_page' => 12,
6
    'paged'          => $paged,
7
    'orderby'        => 'date',
8
    'order'          => 'DESC',
9
);
10
$query = new WP_Query( $args );
11
if ( $query->have_posts() ) : ?>
12
    <div class="post-grid">
13
        <?php while ( $query->have_posts() ) : $query->the_post(); ?>
14
            <article class="post-card">
15
                <a href="<?php the_permalink(); ?>">
16
                    <?php the_post_thumbnail( 'medium_large' ); ?>
17
                    <h3><?php the_title(); ?></h3>
18
                </a>
19
                <time datetime="<?php echo get_the_date( 'c' ); ?>">
20
                    <?php echo get_the_date(); ?>
21
                </time>
22
            </article>
23
        <?php endwhile; ?>
24
    </div>
25
    <?php the_posts_pagination(); ?>
26
<?php endif; wp_reset_postdata(); ?>
27

CSS-сетка, нативный CSS Grid, без фреймворков:

1
.post-grid {
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr);
4
    gap: 24px;
5
}
6
@media (max-width: 768px) {
7
    .post-grid {
8
        grid-template-columns: repeat(2, 1fr);
9
    }
10
}
11
@media (max-width: 480px) {
12
    .post-grid {
13
        grid-template-columns: 1fr;
14
    }
15
}

Три колонки на десктопе → две на планшете → одна на телефоне. repeat(3, 1fr) означает «три колонки равной ширины», gap: 24px задаёт отступы между карточками.

Для случайной галереи замените 'orderby' => 'date' на 'orderby' => 'rand'. Запрос перемешивает посты при каждой загрузке страницы, ровно то, что описано в исходной идее этого туториала.

Лайтбокс подключается отдельно. Два проверенных варианта: GLightbox, бесплатный, около 5 КБ в gzip, без jQuery, и Fancybox 5, лицензия MIT, встроенная поддержка галерей. Добавьте data-атрибут к ссылке:

1
<a href="<?php the_post_thumbnail_url( 'full' ); ?>" class="glightbox" data-gallery="post-gallery">
2
    <?php the_post_thumbnail( 'medium_large' ); ?>
3
</a>

Инициализируйте GLightbox в своём main.js:

1
const lightbox = GLightbox({
2
    selector: '.glightbox',
3
    touchNavigation: true,
4
    loop: true,
5
});

Такой подход даёт полностью кастомную галерею записей с лайтбоксом, которая весит под 10 КБ сверх стандартной загрузки WordPress. Важно: перед правкой файлов темы сделайте полный бэкап, плагин Duplicator или хостинг-снапшот. Если кладёте код в functions.php, используйте дочернюю тему, чтобы не потерять изменения при обновлении.

Посмотрите короткое видео: установка The Post Grid за 8 минут, от поиска плагина в репозитории до живого грида на странице:

⁉️🤔 Частые вопросы

Какой способ выбрать для обычного блога?

Если у вас блочная тема, начните с Query Loop. Это встроенный блок, ноль плагинов, сайт не замедляется. Для трёх колонок с миниатюрами его хватает с запасом. Переходите к плагину, только когда понадобится masonry-раскладка или фильтрация без перезагрузки.

Зачем нужна галерея записей, если тема и так показывает посты?

Стандартная лента темы, вертикальный список. Галерея-сетка умещает в 3-4 раза больше постов на первом экране. Плотность → выше вовлечённость → ниже показатель отказов. Для главной страницы и кастомных лендингов это критично.

Работает ли Query Loop с классическими темами?

Да, если тема не заблокировала редактор блоков через remove_theme_support. Для совсем старых тем, построенных на шорткодах и виджетах, лучше взять The Post Grid, он работает с чем угодно через обычный шорткод.

Можно ли сделать грид записей с лайтбоксом бесплатно?

Да, способ 3 полностью бесплатный: WP_Query из ядра + CSS Grid из ядра + GLightbox под лицензией MIT. Ни копейки, чистая производительность. Минус, нужны базовые знания PHP и CSS.

Сломает ли Query Loop сайт при обновлении WordPress?

Нет. Query Loop, нативный блок ядра, он обновляется вместе с WordPress и проходит полное тестирование в каждом релизе. Параметр showposts (старый подход с get_posts) объявлен устаревшим ещё в версии 3.1, а современные методы не ломаются при мажорных обновлениях.

Как поменять количество колонок на мобильных?

В Query Loop, боковая панель блока, секция Grid Settings: для каждого брейкпоинта (desktop, tablet, mobile) выставляется своё число колонок. В The Post Grid, шаг Item Style, те же брейкпоинты. В кастомном коде, медиа-запросы в CSS (как в примере выше).

Какой способ поставить в 2026 году

Для девяти из десяти сайтов достаточно блока Query Loop. Он нативный, легковесный и собирается за две минуты без документации. Если нужна фильтрация по категориям без перезагрузки, masonry-сетка или интеграция с Elementor, ставьте The Post Grid: 100 000+ установок и более 250 оценок на WordPress.org говорят сами за себя.

Кастомный код на WP_Query, выбор тех, кто пишет тему с нуля или обслуживает высоконагруженный сайт, где каждый килобайт на счету. Он же, единственный способ получить случайную галерею записей без плагинов: 'orderby' => 'rand' в аргументах WP_Query делает ровно то, ради чего десять лет назад писали простыни кода с get_posts и самодельными лайтбоксами.

Выберите способ под свою задачу и сделайте первый экран сайта плотным, читатель скажет спасибо доскроллом.