Oletko koskaan halunnut tehdä mukavan sarakeesityksen viesteistä, joiden yläpuolella on luokkasuodattimet, jotka sekoittavat ja suodattavat viestit mukavalla animaatiolla? Sitten tämä on opetusohjelma sinulle.
Tässä opetusohjelmassa teemme luettelon kaikista viesteistä (mieluiten mukautetussa viestityypissä, kuten työntekijät) kauniisti sarakkeissa ja niiden esittelykuvien kanssa. Viestien yläpuolella luomme suodattimia yhdistetylle taksonomialle. Kun napsautat suodatinta, viestit sekoitetaan mukavalla animaatiolla ja piilotetaan viestit, joita ei ole valitussa kategoriassa.
Tätä varten käytämme suodatukseen Javascript-kirjastoa. Saatavilla on monia – jotkut vaativat jQueryn ja jotkut eivät – jotkut ovat avoimen lähdekoodin ja jotkut vaativat kaupallisen lisenssin. Suosituimmat ovat MixItUp ja Isotope. Molemmat vaativat kuitenkin kaupallisen lisenssin. Tarvitsin projektiani varten kirjaston, joka tekee tempun ja on täysin ilmainen käytettäväksi kaupallisissa projekteissa. Olen kokeillut useita ja paras tähän mennessä löytämäni on FilterizR. Aloitetaan tämä opetusohjelma tutustumalla tähän kirjastoon!
FilterizR-kirjasto
Katso esittely FilterizR:n kotisivulta nähdäksesi, onko tämä kirjasto sinua varten. Voit jopa pelata vaihtoehdoilla reaaliajassa. Tämä kirjasto tukee suodatusta (jota teemme tässä opetusohjelmassa), sekoitusta (satunnaistamista), hakua ja lajittelua. Se on responsiivinen ja optimoitu mobiililaitteille. Toistaiseksi siitä, mitä olen kokenut, se onnistuu myös määrittämään automaattisen korkeuden jokaiselle esineelle erittäin hyvin.
FilterizR tarjoaa kolme erilaista käyttötapaa:
- Vanilla Javascript: paljastaa FilterizR:n globaalina funktiona, joka kutsuu vakio Javascriptin.
- jQuery: Voit käyttää
jQuerysen alustamiseen ja määrittämiseen. - Puhdas Javascript-kirjasto/npm: Käytetään ES6-tuonnissa (esim. jos kirjoitat mukautettuja lohkoja Gutenbergille).
Toinen vaihtoehto on helpoin ihmisille, jotka eivät tunne Javascriptia. Useimmat ihmiset aloittavat jQueryllä. Mutta muista, että jQuery on suuri ja raskas kirjasto ladattavaksi projektiisi, ja jos se voidaan välttää, sinun pitäisi. Tässä opetusohjelmassa käytämme vanilja Javascript -menetelmää. Jos otat tämän käyttöön mukautetussa Gutenberg-lohkossa, sinun tulee harkita kolmannen vaihtoehdon käyttöä. Sitten voit yksinkertaisesti asentaa sen kautta npmja tuoda kirjaston lohkokoodissasi.
Tiedostojen lataaminen ja asettaminen
Haetaan sopiva tiedosto! Lataa FilterizR :n Githubista. Jos et asenna npm:n kautta (kolmas vaihtoehto), voit siirtyä kansioon ‘ dist‘ ja ladata tarvitsemasi pienennetyn kirjaston. Koska käytän sitä vanilja Javascriptin kanssa tässä opetusohjelmassa, lataan vanilla.filterizr.min.jstiedoston ja sijoitan sen theme-folder/assets/js/kansioon. Kirjaston sijoituspaikka on tietysti täysin sinun päätettävissäsi, säädä vain polkua alemmas.
Tarvitsemme myös toisen Javascript-tiedoston alustaaksemme ja päättääksemme vaihtoehdoista. Luon tiedoston theme-folder/assets/js/filtering-main.js. Palaamme tähän tiedostoon myöhemmin. Tämä ei tietenkään ole välttämätöntä, jos toteutat tämän mukautetussa Gutenberg-lohkossa.
Jotta WordPress sisällyttäisi skriptit, meidän on asetettava molemmat skriptit jonoon wp_enqueue_scripts. Tämä voidaan lisätä johonkin teemaasi functions.php. Niin kuin:
add_action('wp_enqueue_scripts', function() {
wp_enqueue_script('filterizr', get_template_directory_uri(). '/assets/js/vanilla.filterizr.min.js', [], false, true);
wp_enqueue_script('filtering-script', get_template_directory_uri(). '/assets/js/filtering-main.js', ['filterizr'], false, true);
});Säädä tiedostonimet ja/tai polut sopivaksi projektiisi/teemaasi. Yllä oleva koodi asettaa jonoon vanilla filterizR-skriptin ja toiseksi filtering-main.jsskriptin, joka on riippuvainen filterizR-skriptistä. Tämä varmistaa, että alustusskripti ladataan tarvittavan kirjaston jälkeen.
Mallin renderöiminen
Seuraava askel on paikka, johon haluamme näyttää tämän luettelon. Tämä on täysin sinun päätettävissäsi. Jotta se olisi yksinkertainen tässä opetusohjelmassa, käytän teemassani sivumallia. Jos toteutat tämän Gutenberg-lohkossa, voit tehdä sen joko PHP:llä (dynaamisille lohkoille) tai Javascriptillä lohkon savemenetelmässä. Tärkeää on tehdä viestejä ja suodattimia ympäröivä HTML-koodi oikein.
Suodattimien renderöiminen
Luon teemakansioon sivumallin template-filters.phpja lisään PHP-koodini tulosteen tuottamiseksi sinne.
Tässä opetusohjelmassa oletetaan, että haluamme hahmontaa viestit mukautetussa viestityypissä. Voit tehdä tämän tavallisilla postauksilla ja luokilla, mutta viestejä tulee yleensä melko paljon – mitä ei ole mahdollista käyttää tällaiseen näyttöön. Oletetaan esimerkiksi mukautettu postityyppi työntekijöille, joilla on yhdistetty mukautettu taksonomia osastolle. En näytä tässä opetusohjelmassa, kuinka mukautettua viestityyppiä lisätään. Muista vain, että viestityypin nimi on employeesja mukautetun taksonomian nimi on department. Vaihda viestityyppisi ja taksonomiasi nimet. Jos olet epävarma mukautetun viestityypin lisäämisestä, minulla on opetusopas, jossa käsitellään mukautettujen viestityyppien ja taksonomioiden luomista.
Mallissani aloitan luomalla suodattimet. Haen kaikki mukautetun taksonomian ei-tyhjät termit käyttämällä [get_terms](https://developer.wordpress.org/reference/functions/get_terms/)()ja lisään ne järjestämättömään luetteloon.
Ennen kuin luon elementit jokaiselle taksonomian termille, varmistan, että teen yhden elementin "Kaikille" (rivi #6). Jotta FilterizR-suodatus toimisi, meidän on annettava data-filterjokaiselle suodatinelementille data-attribuutti " ". Sisällön tulee merkitsevät yksilöllisesti ainutlaatuista suodatusarvoa, tässä tapauksessa termin slug (voit käyttää termiä ID tai jotain muuta, jos haluat). Tämä tarkoittaa, että minun on lisättävä myös termin slugs data-attribuutteina viesteihin (katso myöhemmin), joten FilterizR voi tietää, mitkä viestit kuuluvat mihinkin suodattimeen.
Yllä olevalla koodilla sinun pitäisi saada luettelo, jossa on "Kaikki" ja kaikki ei-tyhjät termit. Loistava!
Nyt, juuri tämän alapuolella, alan hahmontaa viestejä.
Viestien renderöiminen
Kun kirjoitat viestejä, sinun on muistettava kaksi asiaa. Yksi on kääriä kaikki viestit säilöön, jolle annan luokan nimen filter-container. Tämä luokka on se, mihin meidän on kohdistettava Javascriptillä, jotta FilterizR toimisi. Ja toiseksi jokaisessa kohteessa on oltava data-attribuutti " data-category", joka luettelee kaikki termit pilkuilla erotettuina. data-filterTässä olevien arvojen on vastattava suodattimien attribuutissa luotuja arvoja .
Kyselen kaikkia viestejä mukautetusta viestityypistä [WP_Query](https://developer.wordpress.org/reference/classes/wp_query/)ja selailen viestejä. Se, mitä näytät julkaisua kohti, on täysin sinun päätettävissäsi, mutta alla oleva esimerkki näyttää esitellyn kuvan, viestin otsikon ja yhden mukautetun viestin metan työnimikkeelle. Kaikki kääritty sisälinkkeihin, jotka menevät yhdelle työntekijälle.
Rivillä oleva kysely #2-7varmistaa, että haen kaikki viestityyppisten työntekijöiden julkaistut viestit aakkosjärjestyksessä. Ennen kuin teen divrivin jokaiselle viestille rivillä #13, [wp_get_object_terms](https://developer.wordpress.org/reference/functions/wp_get_object_terms/)()haen kaikki tälle viestille määritetyt termit. Parametriksi pyydän vain termien etanoita. Palautus on joukko mitä tahansa osoitettuja termejä etanoita. Luon sitten PHP-funktiolla [implode](https://www.php.net/manual/en/function.implode.php)()merkkijonon kaikista taulukon elementeistä pilkulla erotettuina. Tämä toistetaan data-categoryjuurille vaadittavana attribuuttina div– mikä saa suodattimet toimimaan.
Mitä tulee kunkin postauksen sisältöön, tulos on melko vakio. Luomme julkaisun esittelykuvan käyttämällä mukautettua kuvakokoa (‘ employees-thumb‘), julkaisun otsikkoa ja yksittäisen mukautetun viestin meta-arvoa (työnimikkeelle). Kaikki on kääritty linkin sisään, joka johtaa kyseisen työntekijän yhteen näkymään. Lisäsin myös joitain luokkia ja kääreitä helpottaakseni kohdistamista CSS:llä. Jokaisen elementin tulos on tietysti täysin sinun päätettävissäsi.
Tässä vaiheessa PHP-renderoinnin pitäisi olla valmis. Olet tervetullut muotoilemaan ja näyttämään kauniilta, mutta älä vaivaudu muotoilemaan sarakkeita. FilterizR luo sarakkeita (flexbox) puolestasi. Seuraava vaihe on itse asiassa suodatusohjelman alustaminen!
Suodatinkomentosarjaa alustetaan
Viimeinen osa on filtering-main.jskäsikirjoituksen muokkaaminen. Meidän täytyy vain käskeä FilterizR:ää käynnistämään renderoidun sisällön suodatus. Tässä on kuitenkin muutama asia, joka on pidettävä mielessä:
FilterizR varmistaa, että kaikkien pylväiden kääresäiliö on automaattisesti mitoitettu näkymään sopivaksi. Jos esimerkiksi aktiivinen suodatin näyttää viestit yhdellä rivillä ja napsautamme toista suodatinta, jossa on neljä riviä, säilö skaalautuu automaattisesti oikealle korkeudelle. Näin varmistat, että sen jälkeen tuleva sisältö ei jää piiloon. Mutta jotta tämä automaattinen koon muuttaminen toimisi, kaikkien kuvien on oltava ladattu ensin. Joissakin tapauksissa komentosarja voidaan ladata ja suorittaa ennen kuin jokainen kuva on latautunut, ja tämä saa säilön kutistumaan automaattisesti 0:n korkeuteen. Tämä ei ole hyvä. Joten meidän on asetettava alustuskoodi funktioon, jossa tiedämme, että kuvat on latautunut. Vanilla Javascriptille tämä on window.onload. jQuerylle käyttäisit $(window).load().
Toiseksi haluamme varmistaa, että skriptimme alustaa FilterizR:n vain, jos siellä todellakin on suodatettava säiliö. Jos alustamme FilterizR:n ja nykyisellä sivulla ei ole tarvittavaa kääreluokkaa, seurauksena on Javascript-virhe. Voimme ratkaista tämän tarkistamalla, onko konttiluokka ensin olemassa. Vanilla Javascriptissä voit käyttää document.getElementById()tai document.getElementsByClassName(). Katso esimerkki alla. Jos käytät jQueryä jQuery('<selector>').length, tarkistat tämän.
Tapa alustaa FilterizR vanilla Javascriptillä on luoda uusi esiintymä Filterizr, jossa säilön valitsin on ensimmäinen parametri ja vaihtoehtoisesti asetusobjekti toiseksi parametriksi. Tämä on esimerkki alkeellisimmista:
Alustus tapahtuu rivillä #4. Annamme luokan nimen säilölle, joka kiertyy viestiemme ympärille pisteellä edessä, mikä tarkoittaa luokan valitsinta. Yllä olevalla koodilla FilterizR:n pitäisi nyt ottaa viestisi haltuunsa ja sijoittaa ne sarakkeisiin. Koska käytimme asianmukaisia data-attribuutteja, suodattimien pitäisi toimia myös automaattisesti!
FilterizR:n asetusten mukauttaminen
Minulla on vain muutama viimeinen vinkki FilterizR:n optimoimiseksi, jonka voimme tehdä antamalla asetusobjektin. Suosittelen katsomaan FilterizR:n mahdollisia vaihtoehtoja nähdäksesi, mitä voit tehdä. Voit hallita animaation nopeutta, animaatiotyyppiä ja paljon muuta!
Jotta sarakkeet toimisivat optimaalisesti responsiivisissa koossa, olen huomannut, että layoutFilterizR sameWidthtoimii paremmin erikorkuisten viestien kanssa. Tämä johtaa "muuraus" -tyyliin. Esimerkissämme toistamme lisäsisältöä kuvan jälkeen, mikä voi johtaa vaihteleviin korkeuksiin (nimet voivat olla pidempiä, jolloin se pakotetaan useille riveille). Tästä voi seurata outoa käytöstä.
Oletusarvoisesti yksikään kohde ei saa väliä. Jos haluat jonkin kohteen väliin, voit määrittää aukon koon px:lle gutterPixels. Yllä olevassa esimerkissä olen käyttänyt välikokona 10 pikseliä. PS: Raon koko lisätään myös kääresäiliöön. Tämä ei välttämättä aina ole sitä, mitä haluat. Tämän ohittamiseksi olen vain lisännyt padding: 0!importanttyylin .filter-container.
Tässä on muokattu koodi FilterizR:n alustamiseksi vaihtoehdoillani:
Pienellä tyylillä lopputulos on jotain tämän kaltaista:
Muista, että suodatus on vain yksi asia, jonka FilterizR voi tehdä! Tutustu esimerkkeihin heidän kotisivunsa ‘Opetusohjelmat’ -kohdasta. Voit lisätä ohjaimia lajitteluun, satunnaistoistoon ja/tai hakuun. Ja sinulla on myös enemmän vaihtoehtoja asettelun ohjaamiseen.