Monilla sivustoilla tarvitaan toiminto sisältöjen suodattamiseen eli filtteröintiin. Esimerkiksi alpakavillaisten neuletakkien etsiminen suosikkivärisi perusteella, tai digitoimiston etsiminen sen tarjoamien palveluiden perusteella.
Teknisestä näkökulmasta suodatus voidaan toteuttaa monin eri tavoin, esimerkiksi rakentamalla React-sovellus tai käyttämällä Vanilla JavaScriptia, joka yhdistyy WordPress REST API:hin.
Mutta entä jos voisimme käyttää suodatusta WordPressin omien API-rajapintojen ja lohkojen avulla?
WordPres-toimisto Human Made on jo ratkaissut ongelman! He ovat luoneet WordPress Query Loop Filter -lisäosan, joka toimii WordPressin Interactivity API:n avulla.
Yksinkertainen mutta tehokas tapa tuoda dynaaminen suodatus WordPress-sivustollesi.
Suosittelemme lukemaan Human Maden kirjoittaman artikkelin Introducing the WordPress Query Loop Filter ennen kuin jatkat lukemista. Samassa artikkelissa on myös yleiskatsausvideo.
Lisäosan koodi löytyy Human Maden GitHub-reposta.
Mitä ominaisuuksia Query Loop Filter -lisäosassa on?
Huomaa, että Query Loop Filter -lisäosan lohkot toimivat vain WordPressin Query Loop -lohkon sisäpuolella. Siinä on kaksi mukautettua lohkoa ja haku-toiminto, jotka tehostavat suodatusta:
- Taksonomia-suodatin: Voi olla mikä tahansa rekisteröity taksonomia.
- Sisältötyyppi-suodatin: Voi olla mikä tahansa rekisteröity sisältötyyppi.
- Haku: Kun lisäät WordPressin oman Haku-lohkon samaan Query Loop -lohkoon, haku suodattaa tulokset automaattisesti ilman sivun uudelleenlatausta.
Pelkästään näiden kolmen ominaisuuden avulla (taksonomia, sisältötyyppi, haku) voimme luoda tehokkaita suodatinyhdistelmiä, erityisesti kun käytetään useita taksonomia-suodattimia.
Mitkä ominaisuudet olisivat hyviä lisäyksiä?
Mainostoimistot.fi-sivustoa rakentaessamme huomattiin, että siitä puuttui muutamia yleisesti tarvittavia ominaisuuksia. Siksi forkkasimme alkuperäisen koodin ja lisäsimme muutaman ominaisuuden itse:
- Järjestys-lohko: Suodatustulokset voidaan lajitella esimerkiksi päivämäärän mukaan (uusimmat tai vanhimmat ensin). Tai aakkosjärjestyksessä.
- Poista suodattimet -lohko: Kaikki suodattimet on hyvä pystyä poistamaan klikkaamalla ”Nollaa suodattimet” -painiketta.
- Salli useita valintoja: Käyttämällä valintaruutuja pudotusvalikon (
<select>) sijaan käyttäjä voi valita useita vaihtoehtoja samasta taksonomia-suodattimesta. Esimerkiksi suodattaminen vihreän ja sinisen villapaidan mukaan.
Forkatun repon koodi löytyy GitHubista.
Interactivity API – miksi edes käyttää sitä?
Interactivity API:n päätavoitteena on tarjota standardoitu ja yksinkertainen tapa käsitellä lohkojen interaktiivisuutta.
Interaktiivisuus voi olla modaalin avaaminen, sisällön suodattaminen, energiankulutuslaskuri… Oikeastaan mitä tahansa, jonka kanssa käyttäjä voi olla vuorovaikutuksessa ilman sivun uudelleenlataamista.
Kaikki nämä ominaisuudet voidaan rakentaa Reactilla, Vue:lla tai Vanilla JS:llä.
Interactivity API toimii kuitenkin Preactin avulla. Aluksi olin hieman hämmentynyt siitä, miksi Preact valittiin ja miksi Interactivity API:tä kannattaisi käyttää.
Mutta kun luin usein kysyttyjä kysymyksiä Interactivity API:sta, kokonaisuus hahmottui paremmin:
- API tarvitsee ”DOM-diffing” ominaisuuden
- Se on tarpeeksi pieni kooltaan
- Se on laajennettavissa
- Se toimii PHP:n ja HTML:n kanssa
- Lohkot voivat kommunikoida keskenään helpommin, kun käytetään standardia.
- API on deklaratiivinen ja reaktiivinen
- Se käsittelee globaalia tilaa, paikallista kontekstia ja muuttunutta tilaa
- Monikielisyys onnistuu
WordPressin ydin käyttää jo Interactivity API:tä esimerkiksi Kuva- ja Navigaatio-lohkoissa.
Tulevaisuus näyttää, alkavatko digitoimistot tai lisäosien kehittäjät käyttää enemmän Interactivity API:tä.
Miten aloittaa Interactivity API:n käyttö
Nämä artikkelit ovat hyödyllisiä Interactivity API:n käytön aloittamisessa:
- Interactivity API Reference
- A first look at the Interactivity API
- Building a light/dark toggle with the Interactivity API
- Interactive API Gallery Slider
- Interactivity API showcases
Seuraavassa Interactivity API -artikkelissa tulemme kuvaamaan tarkemmin esimerkin avulla, miten Interactivity API toimii.
Ota meihin yhteyttä, jos sinulla on kysyttävää Interactivity API:stä tai jos sinulla on esimerkkejä Interactivity API:n käytöstä!