Kas olete kunagi tahtnud teha postitustest kena veeruesitluse, mille kohal on kategooriafiltrid, mis segavad ja filtreerivad postitusi kena animatsiooniga? Siis on see õpetus teile.
Selles õpetuses koostame kõigi postituste loendi (eelistatavalt kohandatud postitustüübi, nt töötajad) veergudes ja nende esiletoodud piltidega. Postituste kohal genereerime ühendatud taksonoomia jaoks filtrid. Filtril klõpsamisel lähevad postitused kena animatsiooniga segamini ja peidavad postitused, mida valitud kategoorias pole.
Selleks kasutame filtreerimiseks Javascripti teeki. Saadaval on palju – mõned nõuavad jQueryt ja mõned mitte – mõned on avatud lähtekoodiga ja mõned nõuavad kommertslitsentsi. Kõige populaarsemad on MixItUp ja Isotope. Kuid mõlemad need nõuavad ärilitsentsi. Oma projekti jaoks vajasin raamatukogu, mis teeb selle triki ära, olles samal ajal täiesti tasuta kasutamiseks kommertsprojektides. Olen proovinud mitut ja parim, mis siiani leidnud olen, on FilterizR. Alustame seda õpetust selle raamatukoguga tutvumisega!
FilterizR teek
Vaadake FilterizR-i kodulehel olevat demot, et näha, kas see teek on teie jaoks. Saate isegi reaalajas valikutega mängida. See teek toetab filtreerimist (mida me selles õpetuses teeme), segamist (juhusliku järjestuse muutmist), otsimist ja sortimist. See on tundlik ja mobiilseadmete jaoks optimeeritud. Seni, mida ma olen kogenud, õnnestub see ka iga üksuse konteineri automaatse kõrguse määramisega väga hästi.
FilterizR pakub kolme erinevat kasutusviisi:
- Vanilla Javascript: paljastab FilterizR-i globaalse funktsioonina standardse Javascripti väljakutsumiseks.
- jQuery: võimaldab teil seda kasutada
jQueryselle lähtestamiseks ja seadistamiseks. - Puhas Javascripti teek/npm: kasutamiseks ES6 importimisel (nt kui kirjutate Gutenbergi jaoks kohandatud plokid).
Teine võimalus on kõige lihtsam inimestele, kes ei tunne Javascripti. Enamik inimesi alustab jQueryga. Kuid pidage meeles, et jQuery on teie projektis laadimiseks suur ja raske teek ning kui seda saab vältida, peaksite seda tegema. Selles õpetuses kasutame vanilje Javascripti meetodit. Kui rakendate seda kohandatud Gutenbergi plokis, peaksite kaaluma kolmanda võimaluse kasutamist. Seejärel saate selle lihtsalt installida npmja oma plokkkoodis raamatukogu importida.
Failide allalaadimine ja seadistamine
Otsime sobiva faili kätte! Allalaadimiseks minge FilterizR-i Githubisse. Kui te ei installi npm-i kaudu (kolmas valik), võite minna kausta " dist" ja laadida alla vajaliku minimeeritud teegi. Kuna ma kasutan seda selles õpetuses vanilje Javascriptiga, laadin vanilla.filterizr.min.jsfaili alla ja asetan selle oma theme-folder/assets/js/kausta. See, kuhu raamatukogu paigutate, on loomulikult teie enda otsustada, lihtsalt reguleerige teed allapoole.
Samuti vajame lähtestamiseks ja valikute otsustamiseks teist Javascripti faili. Ma loon faili theme-folder/assets/js/filtering-main.js. Tuleme selle faili juurde hiljem tagasi. See pole muidugi vajalik, kui rakendate seda kohandatud Gutenbergi plokis.
Selleks, et WordPress hõlmaks skripte, peame mõlemad skriptid wp_enqueue_scriptskonksu järjekorda panema. Selle saab lisada kuhugi teie teemasse functions.php. Nagu nii:
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);
});Kohandage failinimesid ja/või teid, et need sobiksid oma projekti/teemaga. Ülaltoodud kood seab järjekorda vanilla filterizR skripti ja teiseks filtering-main.jsskripti, mis sõltub filterizR skriptist. See tagab, et lähtestamisskript laaditakse pärast vajalikku teeki.
Malli renderdamine
Järgmine samm on koht, kuhu tahame selle postituste loendi renderdada. See on täielikult teie otsustada. Et see oleks selles õpetuses lihtne, kasutan oma teemas lehemalli. Kui rakendate seda Gutenbergi plokis, saate selle renderdada kas PHP-ga (dünaamiliste plokkide jaoks) või Javascriptiga ploki savemeetodil. Oluline osa on postitusi ja filtreid ümbritseva HTML-i korrektne renderdamine.
Filtrite renderdamine
Loon oma teemakausta lehemalli template-filters.phpja lisan oma PHP-koodi, et väljund seal renderdada.
Selles õpetuses eeldame, et tahame postitusi renderdada kohandatud postituse tüübis. Seda saab teha tavaliste postituste ja kategooriatega, kuid postitusi tuleb tavaliselt üsna palju – mida pole sellise kuvamise puhul otstarbekas kasutada. Oletame näiteks kohandatud postituse tüüpi töötajate jaoks, kellel on osakonna jaoks ühendatud kohandatud taksonoomia. Ma ei näita selles õpetuses, kuidas kohandatud postituse tüüpi lisada, vaid pidage meeles, et postituse tüübi nimi on employeesja kohandatud taksonoomia nimi on department. Lülitage oma postituse tüübi ja taksonoomia nimed välja. Kui te pole kindel, kuidas kohandatud postitustüüpi lisada, on mul õpetuspostitus kohandatud postitustüüpide ja taksonoomiate loomise kohta.
Oma mallis alustan filtrite genereerimisest. Toon kõik oma kohandatud taksonoomias olevad mittetühjad terminid [get_terms](https://developer.wordpress.org/reference/functions/get_terms/)()ja lisan need järjestamata loendisse.
Enne elementide genereerimist taksonoomias iga termini jaoks teen kindlasti ühe elemendi "Kõik" jaoks (rida #6). FilterizR-i filtreerimise toimimiseks peame andma data-filterigale filtrielemendile andmeatribuudi " ". Sisu peaks tähistab unikaalselt unikaalset filtreerimisväärtust, meie puhul termini slug (soovi korral võite kasutada terminit ID või midagi muud). See tähendab, et pean postitustele lisama ka termini slugs andmeatribuutidena (vt hiljem), nii et FilterizR saab teada, millised postitused millisesse filtrisse kuuluvad.
Ülaltoodud koodiga peaksite saama loendi "Kõik", millele järgneb kõik mittetühjad terminid. Suurepärane!
Nüüd, selle all, hakkan ma postitusi renderdama.
Postituste renderdamine
Postituste renderdamisel peate meeles pidama kahte asja. Üks on mähkida kõik postitused konteinerisse, millele ma annan klassi nime filter-container. Seda klassi peame Javascriptiga sihtima, et FilterizR töötaks. Teiseks peab igal üksusel olema andmeatribuut " data-category", mis loetleb kõik komadega eraldatud terminid. Siin olevad väärtused peavad vastama väärtustele, mille genereerisite filtrite data-filteratribuudis ” ".
Ma pärin kõiki postitusi kohandatud postituse tüübist [WP_Query](https://developer.wordpress.org/reference/classes/wp_query/)ja sirvin postitusi läbi. See, mida postituse kohta kuvate, on täielikult teie otsustada, kuid allolev näide renderdab esiletoodud pildi, postituse pealkirja ja ühe kohandatud postituse meta ametinimetuse jaoks. Kõik sees olevad lingid, mis lähevad ühele töötajale.
Rea päring #2-7tagab, et toon kõik postitustüüpi töötajate avaldatud postitused tähestikulises järjekorras. divEnne iga postituse ümbrise renderdamist #13kasutan real, [wp_get_object_terms](https://developer.wordpress.org/reference/functions/wp_get_object_terms/)()et tuua kõik sellele postitusele määratud terminid. Parameetrina küsin ainult terminite nälkjaid. Tagastus on mis tahes määratud termini nälkjate massiiv. Seejärel kasutan PHP funktsiooni [implode](https://www.php.net/manual/en/function.implode.php)(), et luua kõigist massiivi elementidest komadega eraldatud string. data-categorySeda kajastatakse juure nõutava atribuudina, divmis paneb filtrid tööle.
Iga postituse sisu osas on väljund üsna tavaline. Loome postituse esiletõstetud pildi, kasutades kohandatud pildi suurust (‘ employees-thumb‘), postituse pealkirja ja ühe kohandatud postituse meta väärtust (töönimetuse jaoks). Kõik on mähitud lingi sisse, mis läheb selle töötaja ühele vaatele. Lisasin ka mõned klassid ja ümbrised, et hõlbustada CSS-i sihtimist. Iga elemendi väljund on loomulikult täielikult teie enda otsustada.
Sel hetkel peaks PHP renderdus olema valmis. Olete teretulnud stiilima ja kenasti välja nägema, kuid ärge tülitage tulpade kujundamist. FilterizR loob teie jaoks veerud (flexbox). Järgmine samm on tegelikult filtreerimisskripti lähtestamine!
Filtri skripti lähtestamine
Viimane osa on filtering-main.jsskripti redigeerimine. Peame lihtsalt ütlema FilterizR-ile, et see käivitaks meie renderdatud sisu filtreerimise. Siin tuleb siiski meeles pidada mõnda asja:
FilterizR tagab, et kõigi postide pakkimismahuti suurus muudetakse automaatselt nii, et see sobiks vaatega. Näiteks kui aktiivne filter kuvab postitusi ühes reas ja me klõpsame teisel filtril, millel on neli rida, skaleeritakse konteiner automaatselt õigele kõrgusele. Nii veenduge, et pärast seda ilmuv sisu ei jääks peitu. Kuid selleks, et see automaatne suuruse muutmine töötaks, peavad kõik pildid olema esmalt laaditud. Mõnel juhul võidakse skript laadida ja käivitada enne iga pildi laadimise lõpetamist ning see põhjustab konteineri automaatse ahendamise kõrgusele 0. See pole hea. Seega peame asetama lähtestamiskoodi funktsiooni sisse, kus teame, et pildid on laaditud. Vanilje Javascripti jaoks on see window.onload. jQuery jaoks kasutaksite $(window).load().
Teiseks tahame veenduda, et meie skript initsialiseerib FilterizR-i ainult siis, kui seal on tõesti filtreeritav konteiner. Kui initsialiseerime FilterizR-i ja praegusel lehel pole vajalikku ümbrisklassi, põhjustab see Javascripti tõrke. Seda saame lahendada, kontrollides, kas konteineriklass on kõigepealt olemas. Vanilje Javascriptis saate kasutada document.getElementById()või document.getElementsByClassName(). Vaata näidet allpool. jQuery puhul peaksite jQuery('<selector>').lengthseda kontrollima.
FilterizR initsialiseerimiseks vanilje Javascriptiga on uue eksemplari loomine Filterizr, pakkudes esimese parameetrina konteineri valijat ja soovi korral teise parameetrina seadete objekti. See on näide kõige elementaarsemast:
Initsialiseerimine toimub real #4. Anname meie postituste ümber olevale konteinerile klassi nime, mille ees on punkt, mis tähistab klassi valijat. Ülaltoodud koodiga peaks FilterizR nüüd teie postitused üle võtma ja veergudesse paigutama. Kuna kasutasime sobivaid andmeatribuute, peaksid ka filtrid automaatselt töötama!
FilterizR-i valikute kohandamine
Mul on vaid mõned viimased näpunäited FilterizR-i optimeerimiseks, mida saame teha seadete objekti esitamisega. Soovitan vaadata FilterizR-i võimalikke valikuid, et näha, mida saate teha. Saate juhtida animatsiooni kiirust, animatsiooni tüüpi ja palju muud!
Veergude optimaalseks toimimiseks reageerivates suurustes leidsin, et kui määrate layoutväärtusele „ sameWidth“, töötab FilterizR paremini erineva kõrgusega postitustega. Selle tulemuseks on "müüritise" stiil. Meie näites kajastame pärast pilti täiendavat sisu ja see võib põhjustada erineva kõrguse (nimed võivad olla pikemad, sundides seda mitmele reale). See võib põhjustada kummalist käitumist.
Vaikimisi ei ole iga üksuse vahel tühikut. Kui soovite iga üksuse vahele jätta tühiku, saate määrata vahemiku suuruse pikslites gutterPixels. Ülaltoodud näites kasutasin vahe suurusena 10 pikslit. PS: mähkimisanumale lisatakse ka vahe suurus. See ei pruugi alati olla see, mida soovite. Selle tühistamiseks lisasin lihtsalt padding: 0!importantstiili .filter-container.
Siin on kohandatud kood FilterizR-i lähtestamiseks minu valikutega:
Mõne väiksema stiiliga on tulemus umbes selline:
Pidage meeles, et filtreerimine on vaid üks asi, mida FilterizR teha saab! Vaadake näiteid nende avalehe jaotises „Õpetused”. Saate lisada juhtelemente sortimiseks, segamiseks ja/või otsimiseks. Ja teil on ka paigutuse juhtimiseks rohkem võimalusi.