Tuoteruudukko WooCommercessa, joka lagaa mobiilissa. Portfolio, jota ei voi suodattaa kategorian mukaan. Katalogi, jossa haku toimii "Ctrl+F"-komennolla suodattimien sijaan. Tuttua tuskaa kenelle tahansa, joka rakentaa sisältösivustoa WordPressillä.

Vielä hiljattain ruudukkoasettelut fasettihaulla olivat kehittäjien aluetta: räätälöityjä WP_Query-kutsuja, käsin tehtyä CSS Grid -merkkausta, loputonta säätöä jokaiselle sisältötyypille. WP Grid Builder -lisäosa (GridBuilderWP) muuttaa pelin tarjoamalla visuaalisen ruudukko- ja suodatinrakentajan, joka toimii suoraan paketista ilman koodin koskemista.

Alla yksityiskohtainen erittely: mitä lisäosa osaa, miten se asennetaan, miten luot ensimmäisen ruudukkosi ja mihin käyttötapauksiin se sopii parhaiten.

💡 Pikaopas:

• Lataa ja asenna WP Grid Builder kuten mikä tahansa premium-WordPress-lisäosa
• Luo ensimmäinen ruudukko: valitse sisältötyyppi (artikkelit, mediatiedostot, tuotteet), määritä tyyli (Masonry, Metro, Justified) ja lisää kortit
• Määritä fasettihaku (suodattimet, haku, lajittelu) raahaa ja pudota -rakentajalla kirjoittamatta riviäkään koodia
• Julkaise ruudukko shortcodella tai Gutenberg-lohkolla millä tahansa sivulla
• Laajenna toiminnallisuutta tarvittaessa lisäosilla: kartat, välimuistitus, monikielisyystuki

Mikä WP Grid Builder on

WP Grid Builder on premium-WordPress-lisäosa muokattavien ruudukoiden luomiseen fasettisuodatuksella. Yksinkertaisesti sanottuna: valitset, mitä sisältöä näytetään (blogiartikkelit, WooCommerce-tuotteet, mediatiedostot, käyttäjät), määrittelet kortin ulkoasun ja lisäät suodattimet. Lisäosa kokoaa kaiken responsiiviseksi ruudukoksi, jonka voi upottaa mille tahansa sivulle.

Kehittäjä, Loïc Blascos, on ranskalainen WordPress-insinööri, joka tunnetaan myös Unblock-lisäosasta. Tuotetta on kehitetty aktiivisesti vuodesta 2019 lähtien. Kesäkuussa 2026 nykyinen versio on v2.3.3.

Lisäosa toimii minkä tahansa WordPress-standardeja noudattavan teeman kanssa ja integroituu Gutenbergiin, Elementoriin, Oxygeniin, Beaver Builderiin ja Bricksiin shortcodejen tai lohkojen kautta. Erilliset lisäosat kattavat integraation WooCommercen, Easy Digital Downloadsin, ACF:n, Meta Boxin, Podsin, WPML:n, Polylangin, SearchWP:n, Relevanssin ja LearnDashin kanssa.

Verkkokauppaskenaario: tuotekortit, joissa on hinta, arvostelut ja "Lisää ostoskoriin" -painike, sekä suodattimet hinnan, kategorian ja varastotilanteen mukaan.

Portfolioskenaario: WordPress-kirjaston mediatiedostot, jotka avautuvat lightboxissa, tagipohjaisella suodatuksella.

Keskeiset ominaisuudet

Lisäosa tarjoaa paljon toimintoja. Ryhmitellään ne kategorioittain, jotta lista ei huku.

Sisältö ja kyselyt. WP Grid Builder voi hakea sisältöä mukautetuista post-tyypeistä, taksonomioista ja WordPress-käyttäjistä. Lähteen määrittäminen vie muutaman klikkauksen: valitse post-tyyppi, julkaisun tila, kirjoittajat ja sisällytä tai sulje pois tietyt artikkelit. Konepellin alla mukautetut AJAX-päätepisteet ja indeksitaulu varmistavat nopean suodatuksen myös suurilla sisältömäärillä.

Ruudukot ja asettelut. Kolme asettelutyyppiä: Masonry (tiiliskivimäinen), Justified (leveyden mukaan tasattu) ja Metro (ruudukko vaihtelevan kokoisilla soluilla). Jokaisen voi kääriä responsiiviseen karuselliin, joka tukee kosketuseleitä. Sarakkeiden määrä ja rivin korkeus ovat säädettävissä eri näytönleveyksille: tabletti, puhelin ja työpöytä.

Kortit. Raahaa ja pudota -rakentaja: vedä lohkoja (otsikko, kuva, hinta, arvostelu, mukautetut kentät, HTML) ja kokoa kortti. Mukana on yli 20 valmista mallipohjaa, yli 900 Google Fonts -fonttia ja yli 250 SVG-kuvaketta. Kortteja voi määrittää eri sisältötyypeille: yksi tuotteille, toinen blogiartikkeleille.

Suodattimet (fasettihaku). Yli 20 tyyppiä: valintaruudut, radiopainikkeet, pudotusvalikot, painikkeet, hierarkkiset suodattimet, vaihteluvälit (hinta, arvostelu), liukusäätimet, päivämäärävalitsimet, haku, lajittelu, nollaus ja "Lataa lisää" -painike. Suodattimet toimivat AJAXilla ilman sivun uudelleenlatausta. Jokainen fasettihaku tuottaa yksilöllisen URL-osoitteen, ja selaimen Takaisin/Eteenpäin-painikkeet toimivat oikein.

Lightbox ja media. Sisäänrakennettu lightbox kuville, videolle (YouTube, Vimeo, Wistia), gallerioille ja äänelle. Lazy loading -tuki: kuvat latautuvat vierityksen mukana, mikä säästää kaistaa ja nopeuttaa sivun renderöintiä.

Animaatiot. Yli 20 latausanimaatiota (latausilmaisin suodatuksen aikana) ja yli 20 paljastusanimaatiota (kortit ilmestyvät vierityksen yhteydessä). Nämä vähentävät koettua odotusaikaa: käyttäjä näkee liikettä tyhjän ruudun sijaan.

Muut ominaisuudet. Tuo ja vie ruudukoita, kortteja ja fasetteja JSON-muodossa; RTL-kielituki; hakukoneystävällinen (W3C-yhteensopiva); perusvaatimukset kehittäjädokumentaation mukaan: PHP 7.0+ ja WordPress 6.0+ (PHP 8.x suositeltu).

Hinnoittelu ja paketit

WP Grid Builder myydään vain vuositilauksena; ilmaisversiota ei ole. Kolme tasoa:

Uusimisessa sovelletaan porrastettuja alennuksia: mitä korkeampi taso, sitä suurempi prosenttialennus. Kaikki tasot sisältävät täyden lisäosasarjan, joten mitään ylimääräistä ostettavaa ei ole. Ostoksella on 14 päivän rahat takaisin -takuu.

Lisäosa on saanut myönteisiä arvioita WordPress-yhteisön merkkihenkilöiltä. Jb Audras, WordPressin ydinkehittäjä ja Whodunitin teknologiajohtaja, mainitsee kätevyyden sekä käyttäjille että kehittäjille:

Sekä käyttäjä- että kehittäjäkokemus ovat erinomaisia. Loistava tuote ja uudenlainen toimintamalli tämän tyyppiselle toiminnallisuudelle. Hyvä integraatio WordPress-ytimeen, miellyttävä hallintakäyttöliittymä ja salamannopea julkinen puoli.

Chris Lema, tunnettu WordPress-asiantuntija ja konsultti, on myös julkisesti kehunut WP Grid Builderia; hänen arvostelunsa löytyy sosiaalisesta mediasta.

WP Grid Builderin asentaminen

Asennus on premium-WordPress-lisäosalle tavanomainen. Oston jälkeen saat ZIP-tiedoston ja lisenssiavaimen sähköpostitse tai tililtäsi osoitteessa wpgridbuilder.com.

Vaihe 1. Lataa ZIP-paketti. Siirry WordPressin hallintapaneelissa kohtaan Lisäosat → Lisää uusi:

Vaihe 2. Napsauta "Lisää lisäosa", valitse ZIP-tiedosto ja napsauta "Asenna nyt":

Vaihe 3. Aktivoi lisäosa:

Aktivoinnin jälkeen hallintavalikkoon ilmestyy Gridbuilder WP -kohta. Siirry kohtaan Gridbuilder WP → Kojelauta:

Vaihe 4. Syötä lisenssin sähköpostiosoite ja avain ja napsauta sitten "Aktivoi lisäosa":

Lisenssin aktivointi mahdollistaa automaattiset päivitykset suoraan WordPressin hallintapaneelista. Itse avain löytyy tilisi hallintapaneelista oston jälkeen:

Valmista. Lisäosa on asennettu, lisenssi on aktivoitu ja voit luoda ensimmäisen ruudukkosi.

Ensimmäisen ruudukon pystytys

Pystytys koostuu useasta osiosta yhdellä näytöllä. Käydään ne läpi järjestyksessä.

Ruudukon luominen ja nimeäminen

Mene kohtaan Gridbuilder WP → All Grids ja klikkaa "Create A Grid":

Tämä vie sinut "All Grids" -näyttöön, joka on tällä hetkellä tyhjä. Klikkaa "Create A Grid" -painiketta:

Vaihtoehtoinen reitti on demoruudukoiden tuonti WP Grid Builder -sivustolta. Demot määrittävät asettelun ja korttirakenteen, mutta sisältö on aina sinun: omat artikkelisi, mediatiedostosi tai tuotteesi.

Määritä tällä näytöllä: ruudukon nimi (sisäiseen käyttöön), mukautettu CSS-luokka (valinnainen, omia tyylejä varten) ja viestiteksti, jonka käyttäjät näkevät, jos tuloksia ei löydy.

Sisältölähteen valinta

Osio Grid Settings → Source Content:

Kolme lähdevaihtoehtoa:

• Post Type: artikkelit, sivut, mediatiedostot tai mikä tahansa mukautettu tyyppi
• Term: suodatus kategorioiden, avainsanojen tai mukautettujen taksonomioiden mukaan
• User: tiettyjen käyttäjien sisältö

Alempana voit asettaa kohteiden määrän sivua kohden. Arvo "-1" näyttää kaikki; 0 perii WordPressin asetukset.

"Requested Posts" -osiossa voit hienosäätää: julkaisutyyppi, tila (paras asettaa tilaan "Published"), kirjoittajat, median MIME-tyypit sekä tiettyjen artikkelien sisällyttäminen ja poissulkeminen.

Vinkki: klikkaa "Save Changes" -painiketta sitä mukaa, kun etenet asetuksissa. Ruudukon konfigurointi vie aikaa, ja edistymisen menettäminen kesken kaiken on turhauttavaa.

Mediaformaatit

Osio Grid Settings → Media Formats:

Valitse korteille formaatit: kuvat, galleriat, video (YouTube/Vimeo/Wistia) ja ääni. Tässä voit myös asettaa oletuspikkukuvan korteille, joilla ei ole omaa kuvaa. Hyödyllinen vaihtoehto: artikkelin ensimmäisen mediatiedoston automaattinen kaappaus, jos artikkelikuva puuttuu.

Ruudukon tyyli

Osio Grid Settings → Grid Style:

Kolme valittavaa tyyliä: Masonry, Metro ja Justified. Useimmissa tapauksissa Masonry on varma valinta: kortit asettuvat optimaalisesti kuvien kuvasuhteista riippumatta. Ruudukon käyttäytyminen, korttikoon ohitukset ja responsiivisuus määritetään alempana, mutta niitä ei tarvitse muokata ilman selkeää tarvetta.

Ruudukon asettelu

Kaksi vaihtoehtoa: tavallinen pystysuuntainen vieritys tai karuselli. "Full Width" -vaihtoehto levittää ruudukon koko näytön leveydelle.

Grid composer

Grid Composer on vedä ja pudota -alue, jossa järjestät fasetteja. Esimerkiksi: päivämääräsuodatin, haku ja "Lataa lisää" -painike:

Julkaisun jälkeen tämä kokoonpano tuottaa ruudukon, jossa on kolme toimivaa suodatinta:

Kortin tyyli

"Kortin tyyli" -osio on kortin ulkoasun rakennustyökalu. Voit tuoda valmiita kortteja demopaketista (yli 20 mallipohjaa) tai luoda alusta alkaen. Jokainen sisältötyyppi saa oman korttinsa: yksi tuotteille, toinen artikkeleille. Valmis ruudukko Beryl-kortilla näyttää tältä:

Animaatiot

Kaksi animaatiotyyppiä: kortin paljastuminen vieritettäessä ja tehosteet "Lataa lisää" -painiketta napsautettaessa. Helppo määrittää, ja ne tarjoavat huomattavan visuaalisen parannuksen pienellä vaivalla.

Lataaminen

Ota käyttöön laiska lataus, jolloin kuvat latautuvat vasta, kun ne tulevat näkyville. Tämä on kriittistä ruudukoille, joissa on kymmeniä kortteja yhdellä sivulla. Latausilmaisin (loader) tulee näkyviin suodatuksen aikana tai kun seuraavaa sisältöerää ladataan, antaen käyttäjälle visuaalista palautetta.

CSS-mukautus

Ruudukon asetukset → Mukautus -ikkunassa voit lisätä omia CSS-sääntöjäsi käyttäen ruudukon luonnin yhteydessä asetettua luokkaa. Jos CSS ei ole vahvuutesi, harkitse front-end-kehittäjän mukaan ottamista tai jätä oletustyylit voimaan.

Lisäosat

Lisäosat laajentavat perustoiminnallisuutta. Kaikki sisältyvät mihin tahansa lisenssitasoon. Kesäkuussa 2026 saatavilla ovat seuraavat:

• Kartta-fasetti: Google Maps-, Mapbox- tai Leaflet-kartat, joissa on merkinnät ja geotunnisteiden suodatus
• Välimuisti: sisällön ja fasettien välimuistitus toistuvien pyyntöjen nopeuttamiseksi
• LearnDash: LearnDash-kurssitietojen näyttäminen ruudukon korteissa
• Monikielinen: integraatio Polylangin ja WPML:n kanssa monikielisiä sivustoja varten
• Elementor: natiivi integraatio Elementor-rakentajan kanssa
• Oxygen: integraatio Oxygen Builderin kanssa
• Bricks: integraatio Bricks Builderin kanssa
• Beaver Builder: integraatio Beaver Builderin kanssa
• Meta Box: Meta Box -kentät korteissa ja suodattimissa
• Pods: Pods-kentät korteissa ja suodattimissa

Lisäosat asentuvat parilla napsautuksella kohdasta Gridbuilder WP → Lisäosat.

Muut asetukset

Gridbuilder WP → Asetukset sisältää yleiset parametrit:

• WP Grid Builder -lohkojen käyttöönotto Gutenbergissa
• Artikkeliformaattien tuki (kuva, video, ääni, galleria)
• Taksonomian ja artikkeliformaattien värien näyttäminen
• Välimuistin tyhjennys ja tyylitiedoston nollaus
• Yleiset korttien ja fasettien värit
• Lisäkuvakoot
• Sisäänrakennetun lightboxin asetukset
• Lisäosan yleisten asetusten täysi nollaus

Suurin osa näistä parametreista määritetään kerran, eikä niihin tarvitse palata.

Katso lisäosa toiminnassa. Tällä videolla WPTuts näyttää, miten monitasoiset suodattimet rakennetaan WP Grid Builderilla alusta toimivaksi ruudukoksi:

⁉️🤔 Usein kysytyt kysymykset

Tarvitseeko minun osata koodata käyttääkseni WP Grid Builderia?

Ei. Ruudukot, kortit ja fasetit määritetään kokonaan visuaalisen hallintakäyttöliittymän kautta. Lisäosa vaatii PHP 7.0+ ja WordPress 6.0+, mutta sinun ei tarvitse kirjoittaa koodia. Kehittäjillä on käytössään PHP-koukkuja ja suodattimia räätälöintiä varten, mutta tämä on valinnainen lisäetu, ei vaatimus.

Toimiiko lisäosa teemani kanssa?

Jos teema noudattaa WordPress-standardeja, kyllä. Käytännössä yhteensopivuusongelmat ovat harvinaisia, mutta jos niitä ilmenee, 14 päivän rahat takaisin -takuu on voimassa. Lisäosa tarjoaa myös integraatiot Elementoriin, Oxygeniin, Bricksiin ja Beaver Builderiin niille, jotka työskentelevät visuaalisilla rakentajilla.

Miten WP Grid Builder eroaa kilpailijoista?

Kolme asiaa: fasettisuodatuksen syvyys (yli 20 fasettityyppiä verrattuna 5-10:een vaihtoehdoissa), sisäänrakennettu korttirakentaja (teeman mallipohjia ei tarvitse muokata) ja indeksitaulu nopeaa suodatusta varten suurilla sisältömäärillä. Useimmat ruudukkolisäosat tarjoavat joko asettelun ilman suodattimia tai suodattimet ilman mukautettuja kortteja; tässä kaikki on yhdessä paketissa.

Onko ilmaista versiota?

Ei, WP Grid Builder on vain maksullinen. Edullisin taso on $49 vuodessa yhdelle sivustolle täydellä lisäosasarjalla. Tämä on verrattavissa monien muiden maksullisten WordPress-lisäosien vuositilaukseen.

Miten lisäosa vaikuttaa sivuston nopeuteen?

Se käyttää mukautettuja AJAX-päätepisteitä ja indeksitaulua tavallisen WP_Queryn sijaan, mikä vähentää tietokannan kuormitusta. Laiskalataus lykkää kuvien lataamista siihen asti, kunnes ne tulevat näkyviin vieritettäessä. Suurissa luetteloissa kannattaa harkita Caching-lisäosan käyttöönottoa, joka välimuistittaa myös suodatustulokset. Testiympäristössä 50 tuotteen ruudukko suodattimineen avautuu ilman havaittavaa viivettä.

Voinko käyttää lisäosaa testisivustolla?

Kyllä. Verkkotunnukset, joiden pääte on.dev,.test,.local, localhost ja staging-aliverkkotunnukset eivät kuluta aktivointimäärää. Voit kehittää ja testata staging-ympäristössä käyttämättä lisenssiäsi.

Mikä WP Grid Builder -lisenssi kannattaa valita omaan tarpeeseen

WP Grid Builder ei ole työkalu kaikille. Se on ylimitoitettu, jos tarvitset vain yksinkertaisen julkaisuruudukon ilman suodattimia: ilmaiset lisäosat tai teeman sisäänrakennetut lohkot hoitavat sen. Mutta jos tehtävänä on hakusuodattimilla varustettu katalogi, suodatettava portfolio tai WooCommerce-julkisivu älykkäällä lajittelulla, WordPress-lisäosien markkinoilla on vain vähän vastaavan syvyisiä vaihtoehtoja.

• Jos olet verkkokauppias WooCommercessa, hanki Basic 49 dollarilla vuodessa. Se kattaa julkisivun hinta-, arvostelu- ja varastosuodattimilla. Masonry-tyylinen tuotekorttiruudukko syntyy tunnissa.
• Jos olet freelancer tai toimisto, joka hallinnoi useita projekteja, harkitse Premiumia (99 $, enintään 3 sivustoa) tai Ultimatea (249 $, rajoittamaton). Elementor- ja Bricks-lisäosat säästävät aikaa, kun integroit asiakkaiden sivunrakentajiin.
• Jos tarvitset yksinkertaisen blogiruudukon ilman suodattimia, lisäosa on tehtävään liian raskas. Kokeile Gutenbergin sisäänrakennettuja Query Loop -lohkoja tai ilmaisia vaihtoehtoja.

Kokeile lisäosaa testisivustolla; 14 päivän rahat takaisin -takuu antaa mahdollisuuden arvioida sen riskittä. Ja jos olet jo työskennellyt WP Grid Builderin kanssa, jätä kommentti ja kerro, mihin käyttötarkoitukseen räätälöit sen.