Ett produktkortsrutnät i WooCommerce som laggar på mobilen. En portfölj som inte kan filtreras efter kategori. En katalog där sökning sker via "Ctrl+F" istället för genom filter. Välbekant smärta för alla som bygger en innehållssajt på WordPress.

Fram tills nyligen var rutnätslayouter med fasetterad sökning utvecklarterritorium: anpassad WP_Query, manuell CSS Grid-uppmärkning, oändliga justeringar för varje innehållstyp. Tillägget WP Grid Builder (GridBuilderWP) ändrar spelet genom att tillhandahålla en visuell rutnäts- och filterbyggare som fungerar direkt utan att du rör kod.

Här följer en detaljerad genomgång: vad tillägget kan göra, hur du installerar det, hur du sätter upp ditt första rutnät och vilka scenarier det hanterar bäst.

💡 Snabb överblick:

• Ladda ner och installera WP Grid Builder som vilket premiumtillägg för WordPress som helst
• Skapa ditt första rutnät: välj innehållstyp (inlägg, mediafiler, produkter), konfigurera stilen (Masonry, Metro, Justified) och lägg till kort
• Sätt upp fasetter (filter, sökning, sortering) via en dra-och-släpp-byggare utan att skriva en enda rad kod
• Publicera rutnätet via shortcode eller Gutenberg-block på valfri sida
• Om det behövs, utöka funktionaliteten med tillägg: kartor, cachning, flerspråksstöd

Vad är WP Grid Builder

WP Grid Builder är ett premiumtillägg för WordPress för att skapa anpassningsbara rutnät med fasetterad filtrering. Enkelt uttryckt: du väljer vilket innehåll som ska visas (blogginlägg, WooCommerce-produkter, mediafiler, användare), definierar kortets utseende och lägger till filter. Tillägget sätter ihop allt till ett responsivt rutnät som kan bäddas in på vilken sida som helst.

Utvecklaren, Loïc Blascos, är en fransk WordPress-ingenjör som också är känd för tillägget Unblock. Produkten har utvecklats aktivt sedan 2019. I juni 2026 är den aktuella versionen v2.3.3.

Tillägget fungerar med alla teman som följer WordPress-standarder och integreras med Gutenberg, Elementor, Oxygen, Beaver Builder och Bricks via shortcodes eller block. Separata tillägg täcker integration med WooCommerce, Easy Digital Downloads, ACF, Meta Box, Pods, WPML, Polylang, SearchWP, Relevanssi och LearnDash.

e-handelsscenario: produktkort med pris, betyg och "Lägg i varukorg"-knapp, plus filter efter pris, kategori och lagerstatus.

Portföljscenario: mediafiler från WordPress-biblioteket som öppnas i en lightbox, med taggbaserad filtrering.

Nyckelfunktioner

Tillägget erbjuder många funktioner. Låt oss gruppera dem efter kategori för att undvika att drunkna i en lista.

Innehåll och frågor. WP Grid Builder kan hämta innehåll från anpassade inläggstyper, taxonomier och WordPress-användare. Att konfigurera källan tar några klick: välj inläggstyp, publiceringsstatus, författare och inkludera eller exkludera specifika inlägg. Under huven säkerställer anpassade AJAX-slutpunkter och en indextabell snabb filtrering även med stora mängder innehåll.

Rutnät och layouter. Tre layouttyper: Masonry (tegelstensstil), Justified (breddjusterad) och Metro (rutnät med celler i variabel storlek). Var och en kan omslutas i en responsiv karusell med stöd för pekgester. Antal kolumner och radhöjd kan justeras för olika skärmbredder: surfplatta, telefon och dator.

Kort. En dra-och-släpp-byggare: dra block (titel, bild, pris, betyg, anpassade fält, HTML) och sätt ihop kortet. Inkluderat finns 20+ färdiga mallar, 900+ Google Fonts och 250+ SVG-ikoner. Kort kan tilldelas olika innehållstyper: ett för produkter, ett annat för blogginlägg.

Filter (fasetter). 20+ typer: kryssrutor, radioknappar, rullgardinsmenyer, knappar, hierarkiska filter, intervall (pris, betyg), reglage, datumväljare, sökning, sortering, återställning och en "Ladda fler"-knapp. Filter fungerar via AJAX utan sidomladdning. Varje fasetterad sökning genererar en unik URL, och webbläsarens Bakåt/Framåt-knappar fungerar korrekt.

Lightbox och media. En inbyggd lightbox för bilder, video (YouTube, Vimeo, Wistia), gallerier och ljud. Stöd för lazy loading: bilder laddas vid skrollning, vilket sparar bandbredd och snabbar upp sidrenderingen.

Animationer. 20+ laddningsanimationer (laddare under filtrering) och 20+ reveal-animationer (kort visas vid skrollning). Dessa minskar den upplevda väntetiden: användaren ser rörelse istället för en tom skärm.

Övriga funktioner. Importera/exportera rutnät, kort och fasetter i JSON; stöd för RTL-språk; SEO-vänlig (W3C-kompatibel); grundläggande krav enligt utvecklardokumentationen: PHP 7.0+ och WordPress 6.0+ (PHP 8.x rekommenderas).

Priser och abonnemang

WP Grid Builder säljs endast som en årlig prenumeration; det finns ingen gratisversion. Tre nivåer:

Progressiva rabatter gäller vid förnyelse: ju högre nivå, desto större procentuell rabatt. Alla nivåer inkluderar hela uppsättningen tillägg, så det finns inget extra att köpa. En 14-dagars pengarna-tillbaka-garanti gäller vid köp.

Pluginet har fått positiva recensioner från framstående personer i WordPress-communityn. Jb Audras, WordPress core-utvecklare och CTO på Whodunit, noterar bekvämligheten för både användare och utvecklare:

Både användar- och utvecklarupplevelsen är utmärkt. Bra produkt och ett nytt paradigm för den här typen av funktionalitet. God integration med WordPress core, trevlig admin-ux och blixtsnabb frontend.

Chris Lema, en välkänd WordPress-expert och konsult, har också offentligt berömt WP Grid Builder; hans recension finns på sociala medier.

Installera WP Grid Builder

Installationen är standard för ett premium-WordPress-plugin. Efter köp får du en ZIP-fil och licensnyckel via e-post eller på ditt konto på wpgridbuilder.com.

Steg 1. Ladda ner ZIP-arkivet. I WordPress admin, gå till Plugins → Lägg till nytt:

Steg 2. Klicka på "Ladda upp plugin", välj ZIP-filen och klicka på "Installera nu":

Steg 3. Aktivera pluginet:

Efter aktivering visas ett Gridbuilder WP-menyalternativ i adminmenyn. Gå till Gridbuilder WP → Dashboard:

Steg 4. Ange licens-e-post och nyckel, klicka sedan på "Aktivera plugin":

När du aktiverar licensen får du automatiska uppdateringar direkt i WordPress admin. Själva nyckeln hittar du i din kontopanel efter köpet:

Klart. Pluginet är installerat, licensen är aktiverad och du kan skapa ditt första rutnät.

Konfigurera ditt första rutnät

Konfigurationen består av flera sektioner på en och samma skärm. Låt oss gå igenom dem i tur och ordning.

Skapa och namnge rutnätet

Gå till Gridbuilder WP → Alla rutnät och klicka på "Skapa ett rutnät":

Detta tar dig till skärmen "Alla rutnät", som för närvarande är tom. Klicka på knappen "Skapa ett rutnät":

En alternativ väg är att importera demorutnät från WP Grid Builder-webbplatsen. Demos anger layout och kortstruktur, men innehållet är alltid ditt: dina inlägg, mediafiler eller produkter.

På den här skärmen anger du: rutnätsnamnet (för internt bruk), en anpassad CSS-klass (valfritt, för anpassade stilar) och meddelandetexten som användare ser om det inte finns några resultat.

Välja innehållskälla

Sektionen Rutnätsinställningar → Innehållskälla:

Tre källalternativ:

• Inläggstyp: inlägg, sidor, mediafiler eller vilken anpassad typ som helst
• Term: filtrering efter kategorier, taggar eller anpassade taxonomier
• Användare: innehåll från specifika användare

Nedanför anger du antalet objekt per sida. Värdet "-1" visar alla; 0 ärver WordPress-inställningarna.

I sektionen "Begärda inlägg" finjusterar du: publiceringstyp, status (bäst att sätta till "Publicerad"), författare, MIME-typer för media samt specifik inkludering och exkludering av inlägg.

Tips: klicka på "Spara ändringar" medan du går igenom inställningarna. Rutnätskonfiguration tar tid, och att förlora framsteg halvvägs är frustrerande.

Mediaformat

Sektionen Rutnätsinställningar → Mediaformat:

Välj format för korten: bilder, gallerier, video (YouTube/Vimeo/Wistia) och ljud. Här anger du också en standardminiatyrbild för kort som saknar egen bild. Ett användbart alternativ: automatisk hämtning av den första mediafilen från ett inlägg om en utvald bild saknas.

Rutnätsstil

Sektionen Rutnätsinställningar → Rutnätsstil:

Tre stilar att välja mellan: Masonry, Metro och Justified. För de flesta scenarier är Masonry ett säkert val: korten justeras optimalt oavsett bildernas proportioner. Rutnätsbeteende, åsidosättande av kortstorlek och responsivitet konfigureras nedanför, men det finns inget behov av att ändra dem utan ett tydligt krav.

Rutnätslayout

Två alternativ: standard vertikal skrollning eller karusell. Alternativet "Full bredd" gör att rutnätet spänner över hela skärmbredden.

Rutnätskompositör

Grid Composer är en dra-och-släpp-yta där du arrangerar fasetter. Till exempel: ett datumfilter, sökning och en "Ladda fler"-knapp:

Efter publicering producerar denna konfiguration ett rutnät med tre fungerande filter:

Kortstil

Avsnittet "Kortstil" är byggaren för kortets utseende. Du kan importera färdiga kort från demo-uppsättningen (20+ mallar) eller skapa från grunden. Varje innehållstyp får sitt eget kort: ett för produkter, ett annat för inlägg. Ett färdigt rutnät med Beryl-kortet ser ut så här:

Animationer

Två animationstyper: kort som visas vid skrollning och effekter när man klickar på "Ladda fler". Enkla att konfigurera, de ger en märkbar visuell uppgradering med minimal ansträngning.

Laddning

Aktivera lazy loading så att bilder bara laddas när de kommer in i viewporten. Detta är avgörande för rutnät med dussintals kort på en sida. Laddningsindikatorn (loadern) visas under filtrering eller när nästa innehållsbatch laddas, vilket ger användarna visuell återkoppling.

CSS-anpassning

Fönstret Rutnätsinställningar → Anpassning låter dig lägga till egna CSS-regler med hjälp av den klass som sattes när rutnätet skapades. Om CSS inte är din starka sida, överväg att ta in en frontend-utvecklare eller behåll standardstilarna.

Tillägg

Tillägg utökar grundfunktionaliteten. Alla ingår i varje prisnivå. Från och med juni 2026 finns följande tillgängliga:

• Kartfasetter: Google Maps-, Mapbox- eller Leaflet-kartor med markörer och geo-tagg-filtrering
• Cachelagring: innehålls- och fasettcachelagring för att snabba upp upprepade förfrågningar
• LearnDash: visning av LearnDash-kursdata i rutnätskort
• Flerspråkighet: integration med Polylang och WPML för flerspråkiga webbplatser
• Elementor: inbyggd integration med Elementor-byggaren
• Oxygen: integration med Oxygen Builder
• Bricks: integration med Bricks Builder
• Beaver Builder: integration med Beaver Builder
• Meta Box: Meta Box-fält i kort och filter
• Pods: Pods-fält i kort och filter

Tillägg installeras med ett par klick via Gridbuilder WP → Tillägg.

Övriga inställningar

Gridbuilder WP → Inställningar innehåller globala parametrar:

• Aktivera WP Grid Builder-block i Gutenberg
• Stöd för inläggsformat (bild, video, ljud, galleri)
• Visning av taxonomi- och inläggsformatfärger
• Rensa cache och återställ stilmall
• Globala färger för kort och facets
• Extra bildstorlekar
• Inbyggda lightbox-inställningar
• Full återställning av pluginets globala inställningar

De flesta av dessa parametrar konfigureras en gång och behöver inte ses över igen.

Se pluginet i arbete. I den här videon visar WPTuts hur man sätter upp flernivåfilter med WP Grid Builder från start till ett fungerande rutnät:

⁉️🤔 Vanliga frågor

Behöver jag kunna koda för att arbeta med WP Grid Builder?

Nej. Rutnät, kort och facets konfigureras helt via det visuella admin-gränssnittet. Pluginet kräver PHP 7.0+ och WordPress 6.0+, men du behöver inte skriva kod. Utvecklare har tillgång till PHP hooks och filter för anpassning, men det är en valfri bonus, inte ett krav.

Fungerar pluginet med mitt tema?

Om temat följer WordPress standarder, ja. I praktiken är kompatibilitetsproblem sällsynta, men om de uppstår gäller den 14 dagars pengarna-tillbaka-garantin. Pluginet erbjuder också integrationer med Elementor, Oxygen, Bricks och Beaver Builder för dig som arbetar med visuella byggare.

Hur skiljer sig WP Grid Builder från konkurrenterna?

Tre saker: djupet i facetterad filtrering (20+ facettyper jämfört med 5-10 i alternativen), en inbyggd kortbyggare (inget behov av att redigera temamallar) och en indextabell för snabb filtrering på stora innehållsvolymer. De flesta rutnätsplugins erbjuder antingen layout utan filter eller filter utan anpassade kort; här finns allt i ett paket.

Finns det en gratisversion?

Nej, WP Grid Builder är endast premium. Den lägsta nivån är 49 USD per år för en webbplats med hela uppsättningen tillägg. Detta är jämförbart med årsprenumerationen för många andra premium WordPress-plugins.

Hur påverkar pluginet webbplatsens hastighet?

Det använder anpassade AJAX-slutpunkter och en indextabell istället för standard WP_Query, vilket minskar databasbelastningen. Lazy loading skjuter upp bildinläsning tills de rullas fram. För stora kataloger, överväg att aktivera Caching-tillägget, som dessutom cachar filtreringsresultat. I en testuppsättning öppnas ett rutnät med 50 produkter med filter utan märkbar fördröjning.

Kan jag använda pluginet på en testsajt?

Ja. Domäner med.dev,.test,.local-toppdomäner, localhost och staging-underdomäner räknas inte som aktiveringar. Du kan utveckla och testa på staging utan att förbruka din licens.

Vilken WP Grid Builder-plan ska du välja för din uppgift

WP Grid Builder är inte ett verktyg för alla. Det är overkill om du behöver ett enkelt inläggsgrid utan filter: gratis plugins eller inbyggda temablock kan hantera det. Men om uppgiften innebär en katalog med facetterad sökning, en filtrerbar portfölj eller en WooCommerce-butik med smart sortering, finns det få alternativ med jämförbart djup på WordPress-pluginmarknaden.

• Om du är en webbutiksägare på WooCommerce, skaffa Basic för $49 per år. Det täcker en butik med pris-, betygs- och lagerfilter. Ett Masonry-grid med produktkort kan byggas på en timme.
• Om du är en frilansare eller byrå som hanterar flera projekt, överväg Premium ($99, upp till 3 sajter) eller Ultimate ($249, obegränsat). Tilläggen för Elementor och Bricks sparar tid vid integration med klienters byggare.
• Om du behöver ett enkelt bloggrid utan filter är pluginet överdimensionerat för den uppgiften. Prova de inbyggda Query Loop-blocken i Gutenberg eller gratisalternativ.

Testa pluginet på en testsajt; den 14 dagars pengarna-tillbaka-garantin låter dig utvärdera det utan risk. Och om du redan har arbetat med WP Grid Builder, lämna en kommentar och beskriv vilket scenario du anpassade det för.