Стандартна стрічка блогу, вертикальна колонка дописів, один під одним. Поки записів десять — це працює. Коли їх сто, вертикальне прокручування перетворюється на нескінченний сувій: читач втрачає інтерес уже на третьому екрані, а глибина перегляду падає в нуль.

Галерея записів, сітка з карток у 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. Плагін із понад 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 і саморобними лайтбоксами.

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