Tootekaartide ruudustik WooCommerce lehel, mis mobiilis hangub. Portfoolio, mida ei saa kategooria järgi filtreerida. Kataloog, kus otsing toimub „Ctrl+F" abil, mitte filtrite kaudu. Tuttav valu igaühele, kes ehitab sisusaiti WordPress peal.

Kuni viimase ajani olid tahulise otsinguga ruudustiku paigutused arendaja pärusmaa: kohandatud WP_Query, käsitsi kirjutatud CSS Grid märgend, lõputu viimistlemine iga sisutüübi jaoks. WP Grid Builder plugin (GridBuilderWP) muudab mängu, pakkudes visuaalset ruudustiku ja filtri ehitajat, mis töötab karbist välja ilma koodi puutumata.

Allpool on üksikasjalik ülevaade: mida plugin teha suudab, kuidas seda paigaldada, kuidas seadistada oma esimene ruudustik ja milliste stsenaariumitega see kõige paremini hakkama saab.

💡 Kiirülevaade:

• Laadi alla ja paigalda WP Grid Builder nagu iga teine premium WordPressi plugin
• Loo oma esimene ruudustik: vali sisu tüüp (postitused, meediafailid, tooted), seadista stiil (Masonry, Metro, Justified) ja lisa kaardid
• Seadista tahud (filtrid, otsing, sortimine) pukseeri-ja-aseta ehitaja abil, kirjutamata ühtegi koodirida
• Avalda ruudustik lühikoodi või Gutenbergi ploki kaudu ükskõik millisel lehel
• Vajadusel laienda funktsionaalsust lisadega: kaardid, vahemälu, mitmekeelne tugi

Mis on WP Grid Builder

WP Grid Builder on premium WordPressi plugin kohandatavate ruudustike loomiseks koos tahulise filtreerimisega. Lihtsustatult öeldes: valid, millist sisu kuvada (blogipostitused, WooCommerce'i tooted, meediafailid, kasutajad), määrad kaardi välimuse ja lisad filtrid. Plugin koostab kõik reageerivaks ruudustikuks, mida saab igale lehele manustada.

Arendaja, Loïc Blascos, on prantsuse WordPressi insener, kes on tuntud ka Unblock plugina poolest. Toodet on aktiivselt arendatud alates 2019. aastast. 2026. aasta juuni seisuga on praegune versioon v2.3.3.

Plugin töötab iga teemaga, mis järgib WordPressi standardeid, ja ühildub Gutenbergi, Elementori, Oxygeni, Beaver Builderi ja Bricksiga lühikoodide või plokkide kaudu. Eraldi lisad katavad integratsiooni WooCommerce'i, Easy Digital Downloadsi, ACF-i, Meta Box, Podsi, WPML-i, Polylangi, SearchWP, Relevanssi ja LearnDashiga.

E-poe stsenaarium: tootekaardid hinna, hinnangu ja „Lisa ostukorvi" nupuga, pluss filtrid hinna, kategooria ja laoseisu järgi.

Portfoolio stsenaarium: meediafailid WordPressi teegist, mis avanevad lightbox'is, koos sildipõhise filtreerimisega.

Peamised funktsioonid

Plugin pakub palju võimalusi. Rühmitame need kategooriate kaupa, et vältida loetelusse uppumist.

Sisu ja päringud. WP Grid Builder suudab sisu hankida kohandatud postitüüpidest, taksonoomiatest ja WordPressi kasutajatest. Allika seadistamine võtab paar klikki: vali postitüüp, avaldamise staatus, autorid ning kaasa või välista konkreetsed postitused. Kapoti all tagavad kohandatud AJAX lõpp-punktid ja indeksitabel kiire filtreerimise isegi suure sisuhulga korral.

Ruudustikud ja paigutused. Kolm paigutuse tüüpi: Masonry (telliskivistiilis), Justified (laiusega joondatud) ja Metro (muutuva suurusega lahtritega ruudustik). Igaüht neist saab mähkida reageerivasse karusselli, mis toetab puuteliigutusi. Veergude arv ja rea kõrgus on reguleeritavad erinevate ekraanilaiuste jaoks: tahvelarvuti, telefon ja lauaarvuti.

Kaardid. Pukseeri-ja-aseta ehitaja: lohista plokke (pealkiri, pilt, hind, hinnang, kohandatud väljad, HTML) ja pane kaart kokku. Kaasas on 20+ valmis malli, 900+ Google Fontsi fonti ja 250+ SVG ikooni. Kaarte saab määrata erinevatele sisutüüpidele: üks toodetele, teine blogipostitustele.

Filtrid (tahud). 20+ tüüpi: märkeruudud, raadionupud, rippmenüüd, nupud, hierarhilised filtrid, vahemikud (hind, hinnang), liugurid, kuupäevavalijad, otsing, sortimine, lähtestamine ja „Lae rohkem" nupp. Filtrid töötavad AJAX-i abil ilma lehe uuesti laadimiseta. Iga tahuline otsing genereerib kordumatu URL-i ja brauseri Tagasi/Edasi nupud töötavad korrektselt.

Lightbox ja meedia. Sisseehitatud lightbox piltide, video (YouTube, Vimeo, Wistia), galeriide ja heli jaoks. Laisa laadimise tugi: pildid laaditakse kerimisel, säästes ribalaiust ja kiirendades lehe renderdamist.

Animatsioonid. 20+ laadimisanimatsiooni (laadur filtreerimise ajal) ja 20+ ilmumisanimatsiooni (kaardid ilmuvad kerimisel). Need vähendavad tajutavat ooteaega: kasutaja näeb liikumist, mitte tühja ekraani.

Muud funktsioonid. Ruudustike, kaartide ja tahkude import/eksport JSON-vormingus; paremalt vasakule keele tugi; SEO-sõbralik (W3C-ühilduv); põhinõuded vastavalt arendaja dokumentatsioonile: PHP 7.0+ ja WordPress 6.0+ (soovitatav PHP 8.x).

Hinnakiri ja paketid

WP Grid Builderit müüakse ainult aastase tellimusena; tasuta versiooni pole. Kolm taset:

Uuendamisel kehtivad progresseeruvad allahindlused: mida kõrgem tase, seda suurem on protsentuaalne soodustus. Kõik tasemed sisaldavad täiskomplekti lisamooduleid, seega pole midagi juurde osta. Ostmisel kehtib 14-päevane raha tagastamise garantii.

Plugin on saanud positiivseid hinnanguid WordPressi kogukonna tuntud tegelastelt. Jb Audras, WordPressi tuumikarendaja ja Whodunit’ tehnoloogiajuht, märgib selle mugavust nii kasutajatele kui arendajatele:

Nii kasutaja- kui arendajakogemus on suurepärased. Suurepärane toode ja uus paradigma seda tüüpi funktsionaalsuse jaoks. Hea integratsioon WordPressi tuumikuga, meeldiv administraatori kasutajakogemus ja välkkiire esiosa.

Chris Lema, tuntud WordPressi ekspert ja konsultant, on samuti WP Grid Builderit avalikult kiitnud; tema arvustust võib leida sotsiaalmeediast.

WP Grid Builderi paigaldamine

Paigaldamine on standardne nagu iga premium WordPressi plugina puhul. Pärast ostu saad e-posti teel või oma kontol aadressil wpgridbuilder.com ZIP-faili ja litsentsivõtme.

1. samm. Laadi ZIP-arhiiv alla. WordPressi administraatoris mine Plugins → Add New:

2. samm. Klõpsa „Upload Plugin", vali ZIP-fail ja klõpsa „Install Now":

3. samm. Aktiveeri plugin:

Pärast aktiveerimist ilmub administraatori menüüsse Gridbuilder WP kirje. Mine Gridbuilder WP → Dashboard:

4. samm. Sisesta litsentsi e-post ja võti, seejärel klõpsa „Activate Plugin":

Litsentsi aktiveerimine võimaldab automaatseid uuendusi otse WordPressi administraatoriliidesest. Litsentsivõti ise on pärast ostmist saadaval teie konto juhtpaneelil:

Valmis. Plugin on paigaldatud, litsents on aktiveeritud ja saate luua oma esimese ruudustiku.

Esimese ruudustiku seadistamine

Seadistamine koosneb mitmest jaotisest ühel ekraanil. Vaatame need järjest läbi.

Ruudustiku loomine ja nimetamine

Mine Gridbuilder WP → All Grids ja klõpsa "Create A Grid":

See viib sind "All Grids" ekraanile, mis on praegu tühi. Klõpsa nuppu "Create A Grid":

Alternatiivne tee on demoruudustike importimine WP Grid Builderi saidilt. Demod määravad paigutuse ja kaardi struktuuri, kuid sisu on alati sinu oma: sinu postitused, meediafailid või tooted.

Sellel ekraanil määra: ruudustiku nimi (sisemiseks kasutuseks), kohandatud CSS klass (valikuline, kohandatud stiilide jaoks) ja teate tekst, mida kasutajad näevad, kui tulemusi pole.

Sisuallika valimine

Jaotis Grid Settings → Source Content:

Kolm allika valikut:

• Post Type: postitused, lehed, meediafailid või mis tahes kohandatud tüüp
• Term: filtreerimine kategooriate, siltide või kohandatud taksonoomiate järgi
• User: konkreetsete kasutajate sisu

Allpool määra üksuste arv lehe kohta. Väärtus "-1" näitab kõiki; 0 pärib WordPressi seaded.

Jaotises "Requested Posts" saad täpsustada: avaldamise tüüp, staatus (parim on määrata "Published"), autorid, MIME tüübid meedia jaoks ning konkreetsete postituste kaasamine ja välistamine.

Näpunäide: klõpsa seadistuste läbimise ajal "Save Changes". Ruudustiku seadistamine võtab aega ja poole pealt edusammude kaotamine on masendav.

Meediaformaadid

Jaotis Grid Settings → Media Formats:

Vali kaartide formaadid: pildid, galeriid, video (YouTube/Vimeo/Wistia) ja heli. Siin määrad ka vaikimisi pisipildi kaartidele, millel pole oma pilti. Kasulik valik: esimese meediafaili automaatne hõivamine postitusest, kui esiletõstetud pilt puudub.

Ruudustiku stiil

Jaotis Grid Settings → Grid Style:

Valida on kolme stiili vahel: Masonry, Metro ja Justified. Enamiku stsenaariumide puhul on Masonry turvaline valik: kaardid paigutuvad optimaalselt sõltumata piltide kuvasuhetest. Ruudustiku käitumine, kaardi suuruse ülekirjutused ja reageerivus on seadistatavad allpool, kuid ilma selge vajaduseta pole neid vaja muuta.

Ruudustiku paigutus

Kaks valikut: tavaline vertikaalne kerimine või karussell. Valik "Full Width" venitab ruudustiku kogu ekraani laiuseks.

Ruudustiku koostaja

Grid Composer on pukista-ja-lohista ala, kus saate tahke paigutada. Näiteks: kuupäevafilter, otsing ja nupp „Lae rohkem":

Pärast avaldamist loob see konfiguratsioon ruudustiku kolme töötava filtriga:

Kaardi stiil

Jaotis „Kaardi stiil" on kaardi välimuse ehitaja. Saate importida valmiskaarte demokomplektist (20+ malli) või luua nullist. Iga sisutüüp saab oma kaardi: üks toodetele, teine postitustele. Valmis ruudustik Beryli kaardiga näeb välja selline:

Animatsioonid

Kaks animatsioonitüüpi: kaardi ilmumine kerimisel ja efektid nupule „Lae rohkem" klõpsamisel. Neid on lihtne seadistada ja need annavad minimaalse vaevaga märgatava visuaalse täienduse.

Laadimine

Lubage laisklaadimine, nii et pildid laaditakse alles siis, kui need jõuavad vaatevälja. See on kriitilise tähtsusega ruudustike puhul, kus lehel on kümneid kaarte. Laadimisindikaator (loader) kuvatakse filtreerimise ajal või järgmise sisupaketi laadimisel, andes kasutajatele visuaalset tagasisidet.

CSS-i kohandamine

Aken Grid Settings → Customization võimaldab lisada oma CSS-reegleid, kasutades ruudustiku loomisel määratud klassi. Kui CSS pole teie tugevaim külg, kaaluge front-end arendaja kaasamist või jätke vaikestiilid alles.

Lisamoodulid

Lisamoodulid laiendavad põhifunktsionaalsust. Kõik on kaasatud igasse paketti. 2026. aasta juuni seisuga on saadaval järgmised:

• Map Facet: Google Maps, Mapbox või Leaflet kaardid markerite ja geosildi filtreerimisega
• Caching: sisu ja tahkude vahemällu salvestamine, et kiirendada korduvaid päringuid
• LearnDash: LearnDash kursuse andmete kuvamine ruudustiku kaartidel
• Multilingual: integratsioon Polylangi ja WPML-iga mitmekeelsete saitide jaoks
• Elementor: otseintegratsioon Elementori ehitajaga
• Oxygen: integratsioon Oxygen Builderiga
• Bricks: integratsioon Bricks Builderiga
• Beaver Builder: integratsioon Beaver Builderiga
• Meta Box: Meta Box väljad kaartidel ja filtrites
• Pods: Pods väljad kaartidel ja filtrites

Lisamoodulid paigaldatakse paari klõpsuga menüüst Gridbuilder WP → Add-Ons.

Muud seaded

Gridbuilder WP → Settings sisaldab globaalseid parameetreid:

• WP Grid Builderi plokkide lubamine Gutenbergis
• Postituse formaadi tugi (pilt, video, heli, galerii)
• Taksonoomia ja postituse formaadi värvide kuvamine
• Vahemälu tühjendamine ja stiililehe lähtestamine
• Globaalsed kaardi ja filtri värvid
• Täiendavad pildisuurused
• Sisseehitatud lightbox'i seaded
• Plugina globaalsete seadete täielik lähtestamine

Enamik neist parameetritest seadistatakse üks kord ega vaja hilisemat ülevaatamist.

Vaata pluginat töös. Selles videos näitab WPTuts, kuidas seadistada mitmetasandilisi filtreid WP Grid Builderiga nullist töötava ruudustikuni:

⁉️🤔 Korduma kippuvad küsimused

Kas ma pean oskama kodeerida, et WP Grid Builderit kasutada?

Ei. Ruudustikud, kaardid ja filtrid seadistatakse täielikult visuaalse administraatoriliidese kaudu. Plugin nõuab PHP 7.0+ ja WordPress 6.0+, kuid sa ei pea koodi kirjutama. Arendajatel on kohandamiseks juurdepääs PHP konksudele ja filtritele, kuid see on valikuline boonus, mitte nõue.

Kas plugin töötab minu teemaga?

Kui teema järgib WordPressi standardeid, siis jah. Praktikas on ühilduvusprobleemid harvad, kuid nende ilmnemisel kehtib 14-päevane raha tagastamise garantii. Plugin pakub ka integratsioone Elementori, Oxygeni, Bricksi ja Beaver Builderiga neile, kes töötavad visuaalsete leheehitajatega.

Mille poolest WP Grid Builder konkurentidest erineb?

Kolm asja: filtreerimise sügavus (20+ filtri tüüpi võrreldes 5-10 alternatiividega), sisseehitatud kaardiehitaja (pole vaja teema malle muuta) ja indekstabel kiireks filtreerimiseks suurte sisumahtude korral. Enamik ruudustiku pluginaid pakub kas paigutust ilma filtriteta või filtreid ilma kohandatud kaartideta; siin on kõik ühes paketis.

Kas on olemas tasuta versioon?

Ei, WP Grid Builder on ainult tasuline. Minimaalne tase on 49 dollarit aastas ühe saidi kohta koos täieliku lisamoodulite komplektiga. See on võrreldav paljude teiste tasuliste WordPressi pluginatega aastase tellimuse hinnaga.

Kuidas plugin saidi kiirust mõjutab?

See kasutab kohandatud AJAX-i lõpp-punkte ja indekstabelit standardse WP_Query asemel, mis vähendab andmebaasi koormust. Laisklaadimine lükkab piltide laadimise kerimiseni edasi. Suurte kataloogide puhul kaalu vahemällu salvestamise lisamooduli lubamist, mis salvestab filtreerimistulemused täiendavalt vahemällu. Testseadistuses avaneb 50 tootega ruudustik koos filtritega märgatava viivituseta.

Kas ma saan pluginat testisaidil kasutada?

Jah. Domeenid laienditega.dev,.test,.local, localhost ja staging alamdomeenid ei lähe aktiveeringuna arvesse. Saad arendada ja testida staging-keskkonnas ilma litsentsi kulutamata.

Milline WP Grid Builderi pakett oma ülesande jaoks valida

WP Grid Builder ei ole tööriist kõigile. See on ülepingutus, kui vajad lihtsat postituste ruudustikku ilma filtriteta: tasuta pluginad või teemasse sisseehitatud plokid saavad sellega hakkama. Kuid kui ülesanne hõlmab kataloogi tahkotsinguga, filtreeritavat portfooliot või WooCommerce'i esindust nutika sorteerimisega, on WordPressi pluginaturul vähe võrreldava sügavusega alternatiive.

• Kui oled WooCommerce'il põhineva veebipoe omanik, võta Basic pakett hinnaga $49 aastas. See katab esinduse hinna-, hinnangu- ja laoseisufiltritega. Masonry ruudustiku tootekaardid saab valmis ehitada tunniga.
• Kui oled mitut projekti haldav vabakutseline või agentuur, kaalu Premium ($99, kuni 3 saiti) või Ultimate ($249, piiramatult) paketti. Elementori ja Bricksi lisamoodulid säästavad aega kliendi leheehitajatega integreerimisel.
• Kui vajad lihtsat blogi ruudustikku ilma filtriteta, on plugin selle ülesande jaoks liiga võimas. Proovi Gutenbergi sisseehitatud Query Loop plokke või tasuta alternatiive.

Proovi pluginat testsaidil; 14-päevane raha tagastamise garantii võimaldab seda riskivabalt hinnata. Ja kui oled WP Grid Builderiga juba töötanud, jäta kommentaar, kirjeldades, millise stsenaariumi jaoks sa selle kohandasid.