Standardny feed bloga, pionowa kolumna wpisów, jeden pod drugim. Dopóki wpisów jest dziesięć, to działa. Kiedy jest ich sto, pionowe przewijanie zamienia się w nieskończony zwój: czytelnik traci zainteresowanie już na trzecim ekranie, a głębokość przeglądania spada do zera.

Galeria wpisów, siatka kart w 2-4 kolumnach, skutecznie rozwiązuje ten problem. Na jednym ekranie mieści się trzy razy więcej wpisów, oko ma się czego uchwycić, a klikalność rośnie dzięki dużym miniaturkom. Dla strony głównej, strony kategorii czy niestandardowego landing page’a to najbardziej efektywny format.

Poniżej trzy sposoby na zbudowanie galerii wpisów w WordPress. Od całkowicie wbudowanego (bez ani jednej wtyczki) po elastyczny kod dla deweloperów. Każdy z konkretnymi krokami, bez ogólników.

💡 Szybki przegląd:

• Wybierz sposób: wbudowany blok Query Loop (bez wtyczek), wtyczka Post Grid (maksimum ustawień) lub niestandardowy kod na WP_Query + lightbox (dla deweloperów).
• Dla Query Loop: otwórz stronę w edytorze, dodaj blok Query Loop → Start Blank → wybierz szablon karty → włącz Grid View → skonfiguruj kolumny.
• Dla Post Grid: zainstaluj wtyczkę z repozytorium WordPress.org, utwórz grid w Post Grid → Add New, skonfiguruj zapytanie i wygląd, wstaw shortcode na dowolną stronę.
• Dla niestandardowego kodu: dodaj WP_Query z paginacją do szablonu motywu, opakuj wyniki w div-siatkę na CSS Grid, podłącz GLightbox lub Fancybox do okien pop-up.

Sposób 1: blok Query Loop, bez wtyczek

Od wersji 5.8 w rdzeniu WordPressa znajduje się blok Query Loop. Obecnie, w WordPress 7.0, to dojrzałe narzędzie: konstruktor, który wyświetla siatkę wpisów bezpośrednio w edytorze bloków. Żadnych wtyczek, shortcode’ów ani edycji plików motywu.

Utwórz nową stronę lub otwórz istniejącą, kliknij „+" w edytorze. Znajdź „Query Loop" i dodaj blok. Zaproponuje on kilka gotowych układów, wybierz Start Blank, aby zbudować kartę od zera.

Pojawi się prototyp: jeden wpis z miniaturką, tytułem i datą. Teraz kluczowy krok: na pasku narzędzi bloku kliknij ikonę Grid View (siatka z kwadratów). Lista natychmiast zmieni się w siatkę. Liczbę kolumn konfiguruje się w panelu bocznym, dla większości motywów optymalnie 3.

Skonfiguruj zawartość karty pod kątem zadania. Kliknij miniaturkę i w panelu bocznym włącz przełącznik Link to Post, teraz kliknięcie obrazka prowadzi do wpisu. Zrób to samo dla tytułu. Datę można usunąć: kliknij ją → trzy kropki → Remove Date.

Dodatkowe ustawienia Query Loop w panelu bocznym bloku: wybór kategorii, sortowanie (według daty, tytułu, losowe), liczba wpisów na stronie. Jeśli trzeba wykluczyć określone posty, użyj pola Exclude.

Zaleta: całkowicie natywny, nie spowalnia strony, działa z każdym motywem blokowym. Wada: brak filtrowania według kategorii bez przeładowania strony i złożonych animacji, tutaj potrzebna jest wtyczka.

Sposób 2: wtyczka The Post Grid, maksimum elastyczności

Kiedy wbudowany Query Loop nie wystarcza, potrzebne jest filtrowanie, układ masonry, slider lub efekty hover, na scenę wkracza The Post Grid od RadiusTheme. Wtyczka z ponad 250 ocenami i 100 000+ aktywnych instalacji na WordPress.org, przetestowana aż do wersji 6.9.4.

Instalacja standardowa: Plugins → Add New → wyszukaj „The Post Grid" → Install → Activate. Po aktywacji w menu pojawi się pozycja Post Grid → Add New.

Proces tworzenia grida, cztery kroki:

Krok 1, Query Post. Wybierz typ treści: wpisy, strony lub dowolny typ. Filtruj według kategorii, tagów, autorów. Kolejność sortowania: według daty, tytułu, losowa. Tutaj również określa się liczbę wpisów.

Krok 2, Layouts. Kliknij Create Layout i zbuduj kartę wizualnie: dostępne są tagi dla miniatury z linkiem i bez, tytułu, daty, autora, zajawki. Przeciągnij potrzebne pola na płótno i kliknij Publish. Wróć do ustawień grida i wybierz właśnie utworzony layout.

Krok 3, Item Style. Skonfiguruj odstępy, promień zaokrąglenia, cień, czcionki, kolory. Tutaj również określa się liczbę kolumn dla desktopu, tabletu i urządzeń mobilnych.

Krok 4, Shortcode. Skopiuj wygenerowany shortcode, otwórz stronę w edytorze, dodaj blok Shortcode i wklej kod. Gotowe.

W wersji Pro dodawane jest filtrowanie AJAX, czytelnik przełącza kategorie bez przeładowania strony, plus infinite scroll, siatka masonry i obsługa niestandardowych typów wpisów. Cena zaczyna się od 49 USD rocznie.

Zaleta: pełna kontrola nad wyglądem, praca z dowolnymi motywami i page builderami (Elementor, Divi). Wada: darmowa wersja nie oferuje filtrowania AJAX i masonry; wtyczka dodaje CSS i JS, na bardzo lekkich stronach przyrost o 50-80 KB może być zauważalny.

Sposób 3: niestandardowy kod na WP_Query, dla deweloperów

Jeśli piszesz motyw od zera lub edytujesz motyw potomny, galerię można zbudować całkowicie na kodzie. Jest to lżejsze niż wtyczka, nie dodaje ani jednego zbędnego kilobajta i daje absolutną kontrolę nad strukturą HTML.

Poniższy szablon to minimalny, działający punkt wejścia. Dodaj go do pliku motywu, na przykład front-page.php motywu potomnego, lub przez wtyczkę Code Snippets z podpięciem do 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

Siatka CSS, natywny CSS Grid, bez frameworków:

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
}

Trzy kolumny na desktopie → dwie na tablecie → jedna na telefonie. repeat(3, 1fr) oznacza „trzy kolumny o równej szerokości", gap: 24px określa odstępy między kartami.

Dla losowej galerii zamień 'orderby' => 'date' na 'orderby' => 'rand'. Zapytanie miesza posty przy każdym załadowaniu strony, dokładnie to, co opisano w pierwotnym pomyśle tego samouczka.

Lightbox podłącza się osobno. Dwie sprawdzone opcje: GLightbox, darmowy, około 5 KB w gzip, bez jQuery, i Fancybox 5, licencja MIT, wbudowana obsługa galerii. Dodaj atrybut data do linku:

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

Zainicjuj GLightbox w swoim main.js:

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

Takie podejście daje w pełni niestandardową galerię wpisów z lightboxem, która waży około 10 KB ponad standardowe ładowanie WordPressa. Ważne: przed edycją plików motywu wykonaj pełny backup, wtyczka Duplicator lub migawka hostingowa. Jeśli umieszczasz kod w functions.php, użyj motywu potomnego, aby nie stracić zmian podczas aktualizacji.

Obejrzyj krótkie wideo: instalacja The Post Grid w 8 minut, od wyszukania wtyczki w repozytorium do działającego grida na stronie:

⁉️🤔 Często zadawane pytania

Jaki sposób wybrać dla zwykłego bloga?

Jeśli ma Pan/Pani motyw blokowy, proszę zacząć od Query Loop. To wbudowany blok, zero wtyczek, strona nie zwalnia. Dla trzech kolumn z miniaturami w zupełności wystarcza. Proszę przejść do wtyczki tylko wtedy, gdy potrzebny będzie układ masonry lub filtrowanie bez przeładowania.

Po co jest galeria wpisów, skoro motyw i tak pokazuje posty?

Standardowy feed motywu to pionowa lista. Galeria-siatka mieści 3-4 razy więcej postów na pierwszym ekranie. Większe zagęszczenie → wyższe zaangażowanie → niższy współczynnik odrzuceń. Dla strony głównej i niestandardowych landing page’y ma to krytyczne znaczenie.

Czy Query Loop działa z klasycznymi motywami?

Tak, jeśli motyw nie zablokował edytora bloków przez remove_theme_support. Dla całkiem starych motywów, zbudowanych na shortcode’ach i widgetach, lepiej wziąć The Post Grid, działa on ze wszystkim przez zwykły shortcode.

Czy można zrobić grid wpisów z lightboxem za darmo?

Tak, sposób 3 jest całkowicie darmowy: WP_Query z rdzenia + CSS Grid z rdzenia + GLightbox na licencji MIT. Ani grosza, czysta wydajność. Wadą jest konieczność posiadania podstawowej wiedzy z PHP i CSS.

Czy Query Loop uszkodzi stronę przy aktualizacji WordPressa?

Nie. Query Loop to natywny blok rdzenia, aktualizuje się razem z WordPressem i przechodzi pełne testy w każdym wydaniu. Parametr showposts (stare podejście z get_posts) został uznany za przestarzały już w wersji 3.1, a współczesne metody nie psują się przy dużych aktualizacjach.

Jak zmienić liczbę kolumn na urządzeniach mobilnych?

W Query Loop, panel boczny bloku, sekcja Grid Settings: dla każdego breakpointu (desktop, tablet, mobile) ustawia się własną liczbę kolumn. W The Post Grid, krok Item Style, te same breakpointy. W niestandardowym kodzie, media queries w CSS (jak w przykładzie powyżej).

Jaki sposób wybrać w 2026 roku

Dla dziewięciu na dziesięć stron wystarczy blok Query Loop. Jest natywny, lekki i składa się go w dwie minuty bez dokumentacji. Jeśli potrzebne jest filtrowanie według kategorii bez przeładowania, siatka masonry lub integracja z Elementor, proszę zainstalować The Post Grid: 100 000+ instalacji i ponad 250 ocen na WordPress.org mówią same za siebie.

Niestandardowy kod na WP_Query to wybór tych, którzy piszą motyw od zera lub obsługują witrynę o dużym obciążeniu, gdzie każdy kilobajt jest na wagę złota. Jest to również jedyny sposób na uzyskanie losowej galerii wpisów bez wtyczek: 'orderby' => 'rand' w argumentach WP_Query robi dokładnie to, dla czego dziesięć lat temu pisano długie fragmenty kodu z get_posts i własnoręcznymi lightboxami.

Proszę wybrać sposób odpowiedni do swojego zadania i sprawić, by pierwszy ekran strony był gęsty, a czytelnik podziękuje dalszym przewijaniem.