Siatka kart produktów WooCommerce, która zacina się na urządzeniach mobilnych. Portfolio, którego nie da się filtrować według kategorii. Katalog, w którym wyszukiwanie działa przez „Ctrl+F", a nie przez filtry. Znajomy ból każdego, kto buduje witrynę opartą na treści na WordPress.

Do niedawna układy siatkowe z wyszukiwaniem fasetowym były domeną programistów: niestandardowe zapytania WP_Query, ręczne kodowanie na CSS Grid, niekończące się poprawki pod każdy typ treści. Wtyczka WP Grid Builder (GridBuilderWP) zmienia zasady gry, daje wizualny kreator siatek i filtrów, który działa od razu po instalacji i nie wymaga dotykania kodu.

Poniżej szczegółowa analiza: co potrafi wtyczka, jak ją zainstalować, skonfigurować pierwszą siatkę i jakie scenariusze obsługuje najlepiej.

💡 Szybki przegląd:

• Proszę pobrać i zainstalować WP Grid Builder jak zwykłą wtyczkę premium WordPress
• Proszę utworzyć pierwszą siatkę: wybrać typ treści (wpisy, pliki multimedialne, produkty), skonfigurować styl (Masonry, Metro, Justified) i dodać karty
• Proszę skonfigurować fasety (filtry, wyszukiwanie, sortowanie) za pomocą kreatora drag-and-drop, bez ani jednej linii kodu
• Proszę opublikować siatkę za pomocą shortcode'u lub bloku Gutenberg na dowolnej stronie
• W razie potrzeby proszę rozszerzyć funkcjonalność za pomocą add-onów: mapy, cache, wielojęzyczność

Czym jest WP Grid Builder

WP Grid Builder, wtyczka premium WordPress do tworzenia konfigurowalnych siatek z filtracją fasetową. Mówiąc prościej: wybiera Pan/Pani, jakie treści pokazywać (wpisy na blogu, produkty WooCommerce, pliki multimedialne, użytkowników), określa wygląd kart i dodaje filtry, a wtyczka składa wszystko w responsywną siatkę, którą można wstawić na dowolną stronę.

Twórca, Loïc Blascos, francuski inżynier WordPress, znany również z wtyczki Unblock. Produkt jest aktywnie rozwijany od 2019 roku. Na czerwiec 2026 aktualna wersja to v2.3.3.

Wtyczka działa z każdym motywem zgodnym ze standardami WordPress i integruje się z Gutenberg, Elementor, Oxygen, Beaver Builder i Bricks za pośrednictwem shortcode'ów lub bloków. Osobne add-ony zapewniają integrację z WooCommerce, Easy Digital Downloads, ACF, Meta Box, Pods, WPML, Polylang, SearchWP, Relevanssi i LearnDash.

Scenariusz dla eCommerce: karty produktów z ceną, oceną i przyciskiem „Do koszyka", filtry według ceny, kategorii i statusu dostępności.

Scenariusz dla portfolio: pliki multimedialne z biblioteki WordPress otwierające się w lightboksie, z filtracją według tagów.

Kluczowe możliwości

Możliwości wtyczki jest wiele. Proszę pogrupować je według obszarów, aby nie utonąć w liście.

Treści i zapytania. WP Grid Builder potrafi pobierać treści z dowolnych typów wpisów, taksonomii i użytkowników WordPress. Konfiguracja źródła odbywa się w kilku kliknięciach: wybiera Pan/Pani typ wpisu, status publikacji, autorów, dołącza lub wyklucza konkretne wpisy. Pod maską znajdują się niestandardowe endpointy AJAX i tabela indeksowa, które zapewniają szybkość filtracji nawet przy dużych ilościach treści.

Siatki i układy. Trzy typy układu: Masonry (układ cegiełkowy), Justified (wyrównany do szerokości) i Metro (siatka z komórkami o różnych rozmiarach). Każdy można opakować w responsywną karuzelę z obsługą gestów dotykowych. Liczba kolumn i wysokość wierszy są konfigurowane dla różnych szerokości ekranu: tablet, telefon, desktop.

Karty. Kreator drag-and-drop: przeciąga Pan/Pani bloki (tytuł, obraz, cena, ocena, pola niestandardowe, HTML) i składa kartę. W zestawie 20+ gotowych szablonów, 900+ fontów Google Fonts i 250+ ikon SVG. Karty można przypisywać do różnych typów treści: jedna dla produktów, inna dla wpisów na blogu.

Filtry (fasety). 20+ typów: checkboxy, przyciski radiowe, listy rozwijane, przyciski, filtry hierarchiczne, zakresy (cena, ocena), slidery, wybór daty, wyszukiwanie, sortowanie, resetowanie i przycisk „Załaduj więcej". Filtry działają przez AJAX bez przeładowania strony. Każde wyszukiwanie fasetowe tworzy unikalny adres URL, działają przyciski „Wstecz/Dalej" przeglądarki.

Lightbox i multimedia. Wbudowany lightbox dla obrazów, wideo (YouTube, Vimeo, Wistia), galerii i audio. Obsługa lazy loading: obrazy ładują się podczas przewijania, oszczędzając transfer danych i przyspieszając renderowanie strony.

Animacje. 20+ animacji ładowania (loader przy filtracji) i 20+ animacji ujawniania (karty pojawiają się podczas przewijania). Zmniejszają postrzegany czas oczekiwania, użytkownik widzi ruch, a nie pusty ekran.

Inne. Import/eksport siatek, kart i faset w formacie JSON; obsługa języków RTL; SEO-friendly (zgodność z W3C); podstawowe wymagania zgodnie z dokumentacją deweloperską: PHP 7.0+ i WordPress 6.0+ (zalecane PHP 8.x).

Ceny i plany taryfowe

WP Grid Builder jest sprzedawany wyłącznie w ramach rocznej subskrypcji, nie ma wersji bezpłatnej. Trzy plany taryfowe:

Przy przedłużeniu obowiązują progresywne zniżki: im wyższy plan, tym większy procent rabatu. Wszystkie plany zawierają pełny zestaw dodatków, nie trzeba niczego dokupować osobno. Przy zakupie obowiązuje 14-dniowa gwarancja zwrotu pieniędzy.

Wtyczka otrzymała pozytywne recenzje od znaczących postaci społeczności WordPressa. Jb Audras, główny deweloper WordPressa i CTO Whodunit, podkreśla wygodę zarówno dla użytkowników, jak i deweloperów:

Zarówno interfejs użytkownika, jak i interfejs deweloperski stoją na wysokim poziomie. Świetny produkt i nowy paradygmat dla tego rodzaju funkcji. Dobra integracja z rdzeniem WordPressa, przyjemny UX w panelu administracyjnym i błyskawiczny frontend.

Chris Lema, znany ekspert i konsultant WordPressa, również publicznie chwalił WP Grid Builder, jego opinię można znaleźć w mediach społecznościowych.

Instalacja WP Grid Builder

Instalacja jest standardowa dla premium wtyczki WordPress. Po zakupie otrzymują Państwo plik ZIP i klucz licencyjny na e-mail lub w panelu klienta na wpgridbuilder.com.

Krok 1. Proszę pobrać archiwum ZIP. W panelu administracyjnym WordPressa proszę przejść do Wtyczki → Dodaj nową:

Krok 2. Proszę kliknąć „Wyślij wtyczkę na serwer", wybrać plik ZIP i kliknąć „Zainstaluj teraz":

Krok 3. Proszę aktywować wtyczkę:

Po aktywacji w menu administracyjnym pojawi się pozycja Gridbuilder WP. Proszę przejść do Gridbuilder WP → Dashboard:

Krok 4. Proszę wprowadzić licencyjny adres e-mail i klucz, a następnie kliknąć „Aktywuj wtyczkę":

Aktywacja licencji włącza automatyczne aktualizacje z panelu administracyjnego WordPress. Sam klucz jest dostępny w koncie osobistym po zakupie:

Gotowe. Wtyczka jest zainstalowana, licencja aktywowana, można tworzyć pierwszą siatkę.

Konfiguracja pierwszej siatki

Konfiguracja składa się z kilku sekcji na jednym ekranie. Przejdźmy przez nie po kolei.

Tworzenie i nazywanie siatki

Proszę przejść do Gridbuilder WP → Wszystkie siatki i kliknąć „Create A Grid":

Spowoduje to przejście na ekran „All Grids", który na razie jest pusty. Proszę kliknąć przycisk „Create A Grid":

Alternatywna ścieżka to import siatek demonstracyjnych ze strony WP Grid Builder. Wersje demo definiują układ i strukturę kart, ale treść zawsze jest Państwa: Państwa wpisy, pliki multimedialne lub produkty.

Na tym ekranie proszę określić: nazwę siatki (do użytku wewnętrznego), własną klasę CSS (opcjonalnie, dla niestandardowych stylów) oraz tekst komunikatu, który zobaczą użytkownicy, gdy nie będzie wyników.

Wybór źródła treści

Sekcja Grid Settings → Source Content:

Trzy opcje źródła:

• Post Type, wpisy, strony, pliki multimedialne lub dowolny niestandardowy typ
• Term, filtrowanie według kategorii, tagów lub dowolnych taksonomii
• User, treści od określonych użytkowników

Poniżej określa się liczbę elementów na stronie. Wartość „-1" pokazuje wszystko, 0 dziedziczy ustawienia WordPressa.

W sekcji „Requested Posts" znajduje się dostrajanie: typ publikacji, status (najlepiej „Opublikowane"), autorzy, typy MIME dla mediów, uwzględnianie i wykluczanie konkretnych wpisów.

Wskazówka: proszę klikać „Zapisz zmiany" w trakcie konfiguracji. Siatkę konfiguruje się długo, utrata postępu w połowie jest nieprzyjemna.

Formaty mediów

Sekcja Grid Settings → Media Formats:

Proszę wybrać formaty dla kart: obrazy, galerie, wideo (YouTube/Vimeo/Wistia), audio. Tutaj również ustawia się domyślną miniaturę dla kart bez własnego obrazu. Przydatna opcja: automatyczne przechwytywanie pierwszego pliku multimedialnego z wpisu, jeśli brakuje obrazka wyróżniającego.

Styl siatki

Sekcja Grid Settings → Grid Style:

Trzy style do wyboru: Masonry, Metro i Justified. Dla większości scenariuszy Masonry to bezpieczny wybór: karty układają się optymalnie przy dowolnych proporcjach obrazów. Zachowanie siatki, nadpisywanie rozmiarów kart i responsywność konfiguruje się poniżej, ale nie warto ich zmieniać bez wyraźnej potrzeby.

Układ siatki

Dwie opcje: standardowe przewijanie pionowe lub karuzela. Opcja „Full Width" sprawia, że siatka zajmuje całą szerokość ekranu.

Kompozytor siatki (Grid Composer)

Grid Composer to obszar drag-and-drop, w którym rozmieszczają Państwo fasety. Na przykład: filtr według daty, wyszukiwanie i przycisk „Załaduj więcej":

Po publikacji taka konfiguracja da siatkę z trzema działającymi filtrami:

Styl kart

Sekcja „Cards Style" to konstruktor wyglądu kart. Można zaimportować gotowe karty z zestawu demonstracyjnego (ponad 20 szablonów) lub stworzyć od zera. Każdemu typowi treści przypisuje się własną kartę: jedną dla produktów, inną dla wpisów. Gotowa siatka z kartą Beryl wygląda następująco:

Animacje

Dwa typy animacji: odkrywanie kart podczas przewijania oraz efekty przy kliknięciu „Załaduj więcej". Proste w konfiguracji, dają zauważalny wizualny upgrade bez wysiłku.

Ładowanie

Proszę włączyć leniwe ładowanie (lazy loading), obrazy ładują się tylko wtedy, gdy znajdą się w obszarze widoku. Jest to krytyczne dla siatek z dziesiątkami kart na stronie. Wskaźnik ładowania (loader) pojawia się podczas filtrowania lub doładowywania kolejnej porcji treści, dając użytkownikowi wizualną informację zwrotną.

Dostosowywanie CSS

Okno Grid Settings → Customization umożliwia dodanie własnych reguł CSS przy użyciu klasy zdefiniowanej podczas tworzenia siatki. Jeśli CSS nie jest Państwa mocną stroną, lepiej zaangażować specjalistę od układu graficznego lub pozostawić style domyślne.

Dodatki

Dodatki rozszerzają podstawową funkcjonalność. Wszystkie są zawarte w każdym planie taryfowym. Według stanu na czerwiec 2026 dostępne są:

• Map Facet, mapy Google Maps, Mapbox lub Leaflet ze znacznikami i filtrowaniem według geotagów
• Caching, buforowanie treści i faset w celu przyspieszenia powtarzających się zapytań
• LearnDash, wyświetlanie danych kursów LearnDash na kartach siatki
• Multilingual, integracja z Polylang i WPML dla stron wielojęzycznych
• Elementor, natywna integracja z kreatorem Elementor
• Oxygen, integracja z Oxygen Builder
• Bricks, integracja z Bricks Builder
• Beaver Builder, integracja z Beaver Builder
• Meta Box, pola Meta Box na kartach i w filtrach
• Pods, pola Pods na kartach i w filtrach

Dodatki instaluje się kilkoma kliknięciami przez Gridbuilder WP → Add-Ons.

Inne ustawienia

W Gridbuilder WP → Settings zebrano parametry globalne:

• Włączanie bloków WP Grid Builder w Gutenbergu
• Obsługa formatów wpisów (image, video, audio, gallery)
• Wyświetlanie kolorów taksonomii i formatów wpisów
• Czyszczenie pamięci podręcznej i resetowanie arkuszy stylów
• Globalne kolory kart i faset
• Dodatkowe rozmiary obrazów
• Ustawienia wbudowanego lightboksa
• Pełny reset ustawień globalnych wtyczki

Większość tych parametrów konfiguruje się raz i nie wymaga późniejszych zmian.

Proszę zobaczyć wtyczkę w działaniu, w tym filmie WPTuts pokazuje konfigurację filtrów wielopoziomowych z WP Grid Builder od początku aż do działającej siatki:

⁉️🤔 Często zadawane pytania

Czy do pracy z WP Grid Builder trzeba umieć programować?

Nie. Siatki, karty i fasety konfiguruje się w całości przez wizualny interfejs w panelu administracyjnym. Wtyczka wymaga PHP 7.0+ i WordPress 6.0+, ale nie trzeba pisać kodu. Deweloperzy mają do dyspozycji hooki i filtry PHP do dostosowywania, to opcjonalny bonus, a nie wymóg.

Czy wtyczka działa z moim motywem?

Jeśli motyw przestrzega standardów WordPressa, tak. W praktyce problemy ze zgodnością zdarzają się rzadko, ale gdyby wystąpiły, obowiązuje 14-dniowy zwrot środków. Wtyczka oferuje również integracje z Elementorem, Oxygen, Bricks i Beaver Builder dla osób pracujących w kreatorach wizualnych.

Czym WP Grid Builder różni się od konkurencji?

Trzema rzeczami: głębią filtracji fasetowej (ponad 20 typów faset wobec 5-10 u konkurentów), wbudowanym kreatorem kart (nie trzeba wchodzić w szablony motywu) oraz tabelą indeksową do szybkiej filtracji przy dużych ilościach treści. Większość wtyczek siatkowych oferuje albo układ bez filtrów, albo filtry bez niestandardowych kart, tutaj wszystko jest w jednym.

Czy jest wersja darmowa?

Nie, WP Grid Builder jest wyłącznie premium. Minimalny plan to 49 USD rocznie za jedną witrynę z pełnym zestawem dodatków. To porównywalne z roczną subskrypcją wielu innych wtyczek premium do WordPressa.

Jak wtyczka wpływa na szybkość strony?

Wykorzystuje niestandardowe endpointy AJAX i tabelę indeksową zamiast standardowego WP_Query, co zmniejsza obciążenie bazy danych. Lazy loading opóźnia ładowanie obrazów do momentu przewinięcia. Przy dużych katalogach warto włączyć dodatek Caching, dodatkowo buforuje on wyniki filtracji. Na środowisku testowym siatka z 50 produktami i filtrami otwiera się bez zauważalnego opóźnienia.

Czy można używać wtyczki na stronie testowej?

Tak. Domeny z TLD.dev,.test,.local, localhost i subdomeny staging nie są liczone jako aktywacje. Można spokojnie tworzyć i testować na stagingu, nie zużywając licencji.

Jaki plan WP Grid Builder wybrać do swojego zadania

WP Grid Builder to narzędzie nie dla każdego. Jest nadmiarowy, jeśli potrzebuje Pan/Pani prostej siatki wpisów bez filtrów: poradzą sobie z tym darmowe wtyczki lub wbudowane bloki motywu. Jeśli jednak zadaniem jest katalog z wyszukiwaniem fasetowym, filtrowane portfolio lub witryna WooCommerce z inteligentnym sortowaniem, to na rynku wtyczek WordPress niewiele jest rozwiązań o porównywalnej głębi.

• Jeśli jest Pan/Pani właścicielem sklepu internetowego na WooCommerce, proszę wybrać plan Basic za $49 rocznie. Obsłuży Pan/Pani witrynę z filtrami według ceny, oceny i dostępności. Siatkę Masonry z kartami produktów tworzy się w godzinę.
• Jeśli jest Pan/Pani freelancerem lub agencją obsługującą kilka projektów, proszę spojrzeć na Premium ($99, do 3 stron) lub Ultimate ($249, bez ograniczeń). Dodatki Elementor i Bricks zaoszczędzą czas na integracji z kreatorami klienta.
• Jeśli potrzebuje Pan/Pani prostej siatki bloga bez filtrów, wtyczka jest do tego zadania przeładowana. Proszę wypróbować wbudowane bloki Query Loop w Gutenbergu lub darmowe alternatywy.

Proszę przetestować wtyczkę na stronie testowej, 14-dniowa gwarancja zwrotu pieniędzy pozwala ocenić ją bez ryzyka. A jeśli miał Pan/Pani już doświadczenie z WP Grid Builder, proszę napisać w komentarzach, pod jaki scenariusz go Pan/Pani dostosował.