FilterizR-kirjasto<\/h2>\n
Katso esittely FilterizR:n kotisivulta<\/a> n\u00e4hd\u00e4ksesi, onko t\u00e4m\u00e4 kirjasto sinua varten. Voit jopa pelata vaihtoehdoilla reaaliajassa. T\u00e4m\u00e4 kirjasto tukee suodatusta (jota teemme t\u00e4ss\u00e4 opetusohjelmassa), sekoitusta (satunnaistamista), hakua ja lajittelua. Se on responsiivinen ja optimoitu mobiililaitteille. Toistaiseksi siit\u00e4, mit\u00e4 olen kokenut, se onnistuu my\u00f6s m\u00e4\u00e4ritt\u00e4m\u00e4\u00e4n automaattisen korkeuden jokaiselle esineelle eritt\u00e4in hyvin.<\/p>\n FilterizR tarjoaa kolme erilaista k\u00e4ytt\u00f6tapaa:<\/p>\n Toinen vaihtoehto on helpoin ihmisille, jotka eiv\u00e4t tunne Javascriptia. Useimmat ihmiset aloittavat jQueryll\u00e4. Mutta muista, ett\u00e4 jQuery on suuri ja raskas kirjasto ladattavaksi projektiisi, ja jos se voidaan v\u00e4ltt\u00e4\u00e4, sinun pit\u00e4isi. T\u00e4ss\u00e4 opetusohjelmassa k\u00e4yt\u00e4mme vanilja Javascript -menetelm\u00e4\u00e4. Jos otat t\u00e4m\u00e4n k\u00e4ytt\u00f6\u00f6n mukautetussa Gutenberg-lohkossa, sinun tulee harkita kolmannen vaihtoehdon k\u00e4ytt\u00f6\u00e4. Sitten voit yksinkertaisesti asentaa sen kautta Haetaan sopiva tiedosto! Lataa FilterizR :n Githubista<\/a>. Jos et asenna npm:n kautta (kolmas vaihtoehto), voit siirty\u00e4 kansioon ’ Tarvitsemme my\u00f6s toisen Javascript-tiedoston alustaaksemme ja p\u00e4\u00e4tt\u00e4\u00e4ksemme vaihtoehdoista. Luon tiedoston Jotta WordPress sis\u00e4llytt\u00e4isi skriptit, meid\u00e4n on asetettava molemmat skriptit jonoon S\u00e4\u00e4d\u00e4 tiedostonimet ja\/tai polut sopivaksi projektiisi\/teemaasi. Yll\u00e4 oleva koodi asettaa jonoon vanilla filterizR-skriptin ja toiseksi Seuraava askel on paikka, johon haluamme n\u00e4ytt\u00e4\u00e4 t\u00e4m\u00e4n luettelon. T\u00e4m\u00e4 on t\u00e4ysin sinun p\u00e4\u00e4tett\u00e4viss\u00e4si. Jotta se olisi yksinkertainen t\u00e4ss\u00e4 opetusohjelmassa, k\u00e4yt\u00e4n teemassani sivumallia. Jos toteutat t\u00e4m\u00e4n Gutenberg-lohkossa, voit tehd\u00e4 sen joko PHP:ll\u00e4 (dynaamisille lohkoille) tai Javascriptill\u00e4 lohkon Luon teemakansioon sivumallin T\u00e4ss\u00e4 opetusohjelmassa oletetaan, ett\u00e4 haluamme hahmontaa viestit mukautetussa viestityypiss\u00e4. Voit tehd\u00e4 t\u00e4m\u00e4n tavallisilla postauksilla ja luokilla, mutta viestej\u00e4 tulee yleens\u00e4 melko paljon \u2013 mit\u00e4 ei ole mahdollista k\u00e4ytt\u00e4\u00e4 t\u00e4llaiseen n\u00e4ytt\u00f6\u00f6n. Oletetaan esimerkiksi mukautettu postityyppi ty\u00f6ntekij\u00f6ille, joilla on yhdistetty mukautettu taksonomia osastolle. En n\u00e4yt\u00e4 t\u00e4ss\u00e4 opetusohjelmassa, kuinka mukautettua viestityyppi\u00e4 lis\u00e4t\u00e4\u00e4n. Muista vain, ett\u00e4 viestityypin nimi on Mallissani aloitan luomalla suodattimet. Haen kaikki mukautetun taksonomian ei-tyhj\u00e4t termit k\u00e4ytt\u00e4m\u00e4ll\u00e4 Ennen kuin luon elementit jokaiselle taksonomian termille, varmistan, ett\u00e4 teen yhden elementin "Kaikille" (rivi Yll\u00e4 olevalla koodilla sinun pit\u00e4isi saada luettelo, jossa on "Kaikki" ja kaikki ei-tyhj\u00e4t termit. Loistava!<\/p>\n Nyt, juuri t\u00e4m\u00e4n alapuolella, alan hahmontaa viestej\u00e4.<\/p>\n Kun kirjoitat viestej\u00e4, sinun on muistettava kaksi asiaa. Yksi on k\u00e4\u00e4ri\u00e4 kaikki viestit s\u00e4il\u00f6\u00f6n, jolle annan luokan nimen Kyselen kaikkia viestej\u00e4 mukautetusta viestityypist\u00e4 Rivill\u00e4 oleva kysely Mit\u00e4 tulee kunkin postauksen sis\u00e4lt\u00f6\u00f6n, tulos on melko vakio. Luomme julkaisun esittelykuvan k\u00e4ytt\u00e4m\u00e4ll\u00e4 mukautettua kuvakokoa (’ T\u00e4ss\u00e4 vaiheessa PHP-renderoinnin pit\u00e4isi olla valmis. Olet tervetullut muotoilemaan ja n\u00e4ytt\u00e4m\u00e4\u00e4n kauniilta, mutta \u00e4l\u00e4 vaivaudu muotoilemaan sarakkeita. FilterizR luo sarakkeita (flexbox) puolestasi. Seuraava vaihe on itse asiassa suodatusohjelman alustaminen!<\/p>\n Viimeinen osa on FilterizR varmistaa, ett\u00e4 kaikkien pylv\u00e4iden k\u00e4\u00e4res\u00e4ili\u00f6 on automaattisesti mitoitettu n\u00e4kym\u00e4\u00e4n sopivaksi. Jos esimerkiksi aktiivinen suodatin n\u00e4ytt\u00e4\u00e4 viestit yhdell\u00e4 rivill\u00e4 ja napsautamme toista suodatinta, jossa on nelj\u00e4 rivi\u00e4, s\u00e4il\u00f6 skaalautuu automaattisesti oikealle korkeudelle. N\u00e4in varmistat, ett\u00e4 sen j\u00e4lkeen tuleva sis\u00e4lt\u00f6 ei j\u00e4\u00e4 piiloon. Mutta jotta t\u00e4m\u00e4 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\u00e4m\u00e4 saa s\u00e4il\u00f6n kutistumaan automaattisesti 0:n korkeuteen. T\u00e4m\u00e4 ei ole hyv\u00e4. Joten meid\u00e4n on asetettava alustuskoodi funktioon, jossa tied\u00e4mme, ett\u00e4 kuvat on latautunut. Vanilla Javascriptille t\u00e4m\u00e4 on Toiseksi haluamme varmistaa, ett\u00e4 skriptimme alustaa FilterizR:n vain, jos siell\u00e4 todellakin on suodatettava s\u00e4ili\u00f6. Jos alustamme FilterizR:n ja nykyisell\u00e4 sivulla ei ole tarvittavaa k\u00e4\u00e4reluokkaa, seurauksena on Javascript-virhe. Voimme ratkaista t\u00e4m\u00e4n tarkistamalla, onko konttiluokka ensin olemassa. Vanilla Javascriptiss\u00e4 voit k\u00e4ytt\u00e4\u00e4 Tapa alustaa FilterizR vanilla Javascriptill\u00e4 on luoda uusi esiintym\u00e4 Alustus tapahtuu rivill\u00e4 Minulla on vain muutama viimeinen vinkki FilterizR:n optimoimiseksi, jonka voimme tehd\u00e4 antamalla asetusobjektin. Suosittelen katsomaan FilterizR:n mahdollisia vaihtoehtoja<\/a> n\u00e4hd\u00e4ksesi, mit\u00e4 voit tehd\u00e4. Voit hallita animaation nopeutta, animaatiotyyppi\u00e4 ja paljon muuta!<\/p>\n Jotta sarakkeet toimisivat optimaalisesti responsiivisissa koossa, olen huomannut, ett\u00e4 Oletusarvoisesti yksik\u00e4\u00e4n kohde ei saa v\u00e4li\u00e4. Jos haluat jonkin kohteen v\u00e4liin, voit m\u00e4\u00e4ritt\u00e4\u00e4 aukon koon px:lle T\u00e4ss\u00e4 on muokattu koodi FilterizR:n alustamiseksi vaihtoehdoillani:<\/p>\n Pienell\u00e4 tyylill\u00e4 lopputulos on jotain t\u00e4m\u00e4n kaltaista:<\/p>\n Muista, ett\u00e4 suodatus on vain yksi asia, jonka FilterizR voi tehd\u00e4! Tutustu esimerkkeihin heid\u00e4n kotisivunsa<\/a> ’Opetusohjelmat’ -kohdasta. Voit lis\u00e4t\u00e4 ohjaimia lajitteluun, satunnaistoistoon ja\/tai hakuun. Ja sinulla on my\u00f6s enemm\u00e4n vaihtoehtoja asettelun ohjaamiseen.<\/p>\n\n
jQuery<\/code>sen alustamiseen ja m\u00e4\u00e4ritt\u00e4miseen.<\/li>\nnpm<\/code>ja tuoda kirjaston lohkokoodissasi.<\/p>\nTiedostojen lataaminen ja asettaminen<\/h2>\n
dist<\/code>’ ja ladata tarvitsemasi pienennetyn kirjaston. Koska k\u00e4yt\u00e4n sit\u00e4 vanilja Javascriptin kanssa t\u00e4ss\u00e4 opetusohjelmassa, lataan vanilla.filterizr.min.js<\/code>tiedoston ja sijoitan sen theme-folder\/assets\/js\/<\/code>kansioon. Kirjaston sijoituspaikka on tietysti t\u00e4ysin sinun p\u00e4\u00e4tett\u00e4viss\u00e4si, s\u00e4\u00e4d\u00e4 vain polkua alemmas.<\/p>\ntheme-folder\/assets\/js\/filtering-main.js<\/code>. Palaamme t\u00e4h\u00e4n tiedostoon my\u00f6hemmin. T\u00e4m\u00e4 ei tietenk\u00e4\u00e4n ole v\u00e4ltt\u00e4m\u00e4t\u00f6nt\u00e4, jos toteutat t\u00e4m\u00e4n mukautetussa Gutenberg-lohkossa.<\/p>\nwp_enqueue_scripts<\/code>. T\u00e4m\u00e4 voidaan lis\u00e4t\u00e4 johonkin teemaasi functions.php<\/code>. Niin kuin:<\/p>\nadd_action('wp_enqueue_scripts', function() {\n wp_enqueue_script('filterizr', get_template_directory_uri(). '\/assets\/js\/vanilla.filterizr.min.js', [], false, true);\n wp_enqueue_script('filtering-script', get_template_directory_uri(). '\/assets\/js\/filtering-main.js', ['filterizr'], false, true);\n});<\/code><\/pre>\nfiltering-main.js<\/code>skriptin, joka on riippuvainen filterizR-skriptist\u00e4. T\u00e4m\u00e4 varmistaa, ett\u00e4 alustusskripti ladataan tarvittavan kirjaston j\u00e4lkeen.<\/p>\nMallin render\u00f6iminen<\/h2>\n
save<\/code>menetelm\u00e4ss\u00e4. T\u00e4rke\u00e4\u00e4 on tehd\u00e4 viestej\u00e4 ja suodattimia ymp\u00e4r\u00f6iv\u00e4 HTML-koodi oikein.<\/p>\nSuodattimien render\u00f6iminen<\/h3>\n
template-filters.php<\/code>ja lis\u00e4\u00e4n PHP-koodini tulosteen tuottamiseksi sinne.<\/p>\nemployees<\/code>ja mukautetun taksonomian nimi on department<\/code>. Vaihda viestityyppisi ja taksonomiasi nimet. Jos olet ep\u00e4varma mukautetun viestityypin lis\u00e4\u00e4misest\u00e4, minulla on opetusopas, jossa k\u00e4sitell\u00e4\u00e4n mukautettujen viestityyppien ja taksonomioiden luomista<\/a>.<\/p>\n[get_terms](https:\/\/developer.wordpress.org\/reference\/functions\/get_terms\/)()<\/code>ja lis\u00e4\u00e4n ne j\u00e4rjest\u00e4m\u00e4tt\u00f6m\u00e4\u00e4n luetteloon.<\/p>\n<?php\n$departments = get_terms([\n 'taxonomy' => 'department'\n]);\n?><ul class=\"filter-controls\">\n <li data-filter=\"all\"><?php _e('All', 'txtdomain'); ?><\/li><?php\n foreach ($departments as $department) {\n ?><li data-filter=\"<?php echo $department->slug; ?>\"><?php echo $department->name; ?><\/li><?php\n }\n?><\/ul>\n\u00a0<\/code><\/pre>\n#6<\/code>). Jotta FilterizR-suodatus toimisi, meid\u00e4n on annettava data-filter<\/code>jokaiselle suodatinelementille data-attribuutti " ". Sis\u00e4ll\u00f6n tulee merkitsev\u00e4t yksil\u00f6llisesti ainutlaatuista suodatusarvoa, t\u00e4ss\u00e4 tapauksessa termin slug (voit k\u00e4ytt\u00e4\u00e4 termi\u00e4 ID tai jotain muuta, jos haluat). T\u00e4m\u00e4 tarkoittaa, ett\u00e4 minun on lis\u00e4tt\u00e4v\u00e4 my\u00f6s termin slugs data-attribuutteina viesteihin (katso my\u00f6hemmin), joten FilterizR voi tiet\u00e4\u00e4, mitk\u00e4 viestit kuuluvat mihinkin suodattimeen.<\/p>\nViestien render\u00f6iminen<\/h3>\n
filter-container<\/code>. T\u00e4m\u00e4 luokka on se, mihin meid\u00e4n on kohdistettava Javascriptill\u00e4, jotta FilterizR toimisi. Ja toiseksi jokaisessa kohteessa on oltava data-attribuutti " data-category<\/code>", joka luettelee kaikki termit pilkuilla erotettuina. data-filter<\/code>T\u00e4ss\u00e4 olevien arvojen on vastattava suodattimien attribuutissa luotuja arvoja .<\/p>\n[WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)<\/code>ja selailen viestej\u00e4. Se, mit\u00e4 n\u00e4yt\u00e4t julkaisua kohti, on t\u00e4ysin sinun p\u00e4\u00e4tett\u00e4viss\u00e4si, mutta alla oleva esimerkki n\u00e4ytt\u00e4\u00e4 esitellyn kuvan, viestin otsikon ja yhden mukautetun viestin metan ty\u00f6nimikkeelle. Kaikki k\u00e4\u00e4ritty sis\u00e4linkkeihin, jotka menev\u00e4t yhdelle ty\u00f6ntekij\u00e4lle.<\/p>\n<?php\n$employees = new WP_Query([\n 'post_type' => 'employees',\n 'posts_per_page' => -1,\n 'orderby' => 'name',\n 'order' => 'ASC'\n]);\nif ($employees->have_posts()) {\n ?><div class=\"filter-container\"><?php\n while ($employees->have_posts()) {\n $employees->the_post();\n\u00a0\n $dep = wp_get_object_terms(get_the_ID(), 'department', ['fields' => 'slugs']);\n ?><div class=\"filtr-item\" data-category=\"<?php echo implode(',', $dep); ?>\">\n <a href=\"<?php the_permalink(); ?>\" title=\"<?php the_title(); ?>\"><?php\n if (has_post_thumbnail()) {\n the_post_thumbnail('employees-thumb');\n }\n\u00a0\n $job_title = get_post_meta(get_the_ID(), 'job_title', true);\n ?><div class=\"employee-info\">\n <h2><?php the_title(); ?><\/h2>\n <span class=\"job-title\"><?php echo $job_title; ?><\/span>\n <\/div><?php\n\u00a0\n\u00a0\n ?><\/a><\/div><?php\n }\n wp_reset_postdata();\n ?><\/div><?php\n}\n?><\/code><\/pre>\n#2-7<\/code>varmistaa, ett\u00e4 haen kaikki viestityyppisten ty\u00f6ntekij\u00f6iden julkaistut viestit aakkosj\u00e4rjestyksess\u00e4. Ennen kuin teen div<\/code>rivin jokaiselle viestille rivill\u00e4 #13<\/code>, [wp_get_object_terms](https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_object_terms\/)()<\/code>haen kaikki t\u00e4lle viestille m\u00e4\u00e4ritetyt termit. Parametriksi pyyd\u00e4n vain termien etanoita. Palautus on joukko mit\u00e4 tahansa osoitettuja termej\u00e4 etanoita. Luon sitten PHP-funktiolla [implode](https:\/\/www.php.net\/manual\/en\/function.implode.php)()<\/code>merkkijonon kaikista taulukon elementeist\u00e4 pilkulla erotettuina. T\u00e4m\u00e4 toistetaan data-category<\/code>juurille vaadittavana attribuuttina div<\/code>\u2013 mik\u00e4 saa suodattimet toimimaan.<\/p>\nemployees-thumb<\/code>’), julkaisun otsikkoa ja yksitt\u00e4isen mukautetun viestin meta-arvoa (ty\u00f6nimikkeelle). Kaikki on k\u00e4\u00e4ritty linkin sis\u00e4\u00e4n, joka johtaa kyseisen ty\u00f6ntekij\u00e4n yhteen n\u00e4kym\u00e4\u00e4n. Lis\u00e4sin my\u00f6s joitain luokkia ja k\u00e4\u00e4reit\u00e4 helpottaakseni kohdistamista CSS:ll\u00e4. Jokaisen elementin tulos on tietysti t\u00e4ysin sinun p\u00e4\u00e4tett\u00e4viss\u00e4si.<\/p>\nSuodatinkomentosarjaa alustetaan<\/h2>\n
filtering-main.js<\/code>k\u00e4sikirjoituksen muokkaaminen. Meid\u00e4n t\u00e4ytyy vain k\u00e4ske\u00e4 FilterizR:\u00e4\u00e4 k\u00e4ynnist\u00e4m\u00e4\u00e4n renderoidun sis\u00e4ll\u00f6n suodatus. T\u00e4ss\u00e4 on kuitenkin muutama asia, joka on pidett\u00e4v\u00e4 mieless\u00e4:<\/p>\nwindow.onload<\/code>. jQuerylle k\u00e4ytt\u00e4isit $(window).load()<\/code>.<\/p>\ndocument.getElementById()<\/code>tai document.getElementsByClassName()<\/code>. Katso esimerkki alla. Jos k\u00e4yt\u00e4t jQuery\u00e4 jQuery('<selector>').length<\/code>, tarkistat t\u00e4m\u00e4n.<\/p>\nFilterizr<\/code>, jossa s\u00e4il\u00f6n valitsin on ensimm\u00e4inen parametri ja vaihtoehtoisesti asetusobjekti toiseksi parametriksi. T\u00e4m\u00e4 on esimerkki alkeellisimmista:<\/p>\nwindow.onload = function() {\n var filterContainer = document.getElementsByClassName('filter-container');\n if (filterContainer.length > 0) {\n filterizr = new Filterizr('.filter-container');\n }\n\u00a0\n}<\/code><\/pre>\n#4<\/code>. Annamme luokan nimen s\u00e4il\u00f6lle, joka kiertyy viestiemme ymp\u00e4rille pisteell\u00e4 edess\u00e4, mik\u00e4 tarkoittaa luokan valitsinta. Yll\u00e4 olevalla koodilla FilterizR:n pit\u00e4isi nyt ottaa viestisi haltuunsa ja sijoittaa ne sarakkeisiin. Koska k\u00e4ytimme asianmukaisia \u200b\u200bdata-attribuutteja, suodattimien pit\u00e4isi toimia my\u00f6s automaattisesti!<\/p>\nFilterizR:n asetusten mukauttaminen<\/h3>\n
layout<\/code>FilterizR sameWidth<\/code>toimii paremmin erikorkuisten viestien kanssa. T\u00e4m\u00e4 johtaa "muuraus" -tyyliin. Esimerkiss\u00e4mme toistamme lis\u00e4sis\u00e4lt\u00f6\u00e4 kuvan j\u00e4lkeen, mik\u00e4 voi johtaa vaihteleviin korkeuksiin (nimet voivat olla pidempi\u00e4, jolloin se pakotetaan useille riveille). T\u00e4st\u00e4 voi seurata outoa k\u00e4yt\u00f6st\u00e4.<\/p>\ngutterPixels<\/code>. Yll\u00e4 olevassa esimerkiss\u00e4 olen k\u00e4ytt\u00e4nyt v\u00e4likokona 10 pikseli\u00e4. PS: Raon koko lis\u00e4t\u00e4\u00e4n my\u00f6s k\u00e4\u00e4res\u00e4ili\u00f6\u00f6n. T\u00e4m\u00e4 ei v\u00e4ltt\u00e4m\u00e4tt\u00e4 aina ole sit\u00e4, mit\u00e4 haluat. T\u00e4m\u00e4n ohittamiseksi olen vain lis\u00e4nnyt padding: 0!important<\/code>tyylin .filter-container<\/code>.<\/p>\nwindow.onload = function() {\n var filterContainer = document.getElementsByClassName('filter-container');\n if (filterContainer.length > 0) {\n var options = {\n layout: 'sameWidth',\n gutterPixels: 10,\n }\n filterizr = new Filterizr('.filter-container', options);\n }\n\u00a0\n}<\/code><\/pre>\n![\"Viestien](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152296-61e4d54c4aa2b.png\")
<\/a><\/p>\n