FilterizR teek<\/h2>\n
Vaadake FilterizR-i kodulehel<\/a> olevat demot, et n\u00e4ha, kas see teek on teie jaoks. Saate isegi reaalajas valikutega m\u00e4ngida. See teek toetab filtreerimist (mida me selles \u00f5petuses teeme), segamist (juhusliku j\u00e4rjestuse muutmist), otsimist ja sortimist. See on tundlik ja mobiilseadmete jaoks optimeeritud. Seni, mida ma olen kogenud, \u00f5nnestub see ka iga \u00fcksuse konteineri automaatse k\u00f5rguse m\u00e4\u00e4ramisega v\u00e4ga h\u00e4sti.<\/p>\n FilterizR pakub kolme erinevat kasutusviisi:<\/p>\n Teine v\u00f5imalus on k\u00f5ige 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\u00e4ltida, peaksite seda tegema. Selles \u00f5petuses kasutame vanilje Javascripti meetodit. Kui rakendate seda kohandatud Gutenbergi plokis, peaksite kaaluma kolmanda v\u00f5imaluse kasutamist. Seej\u00e4rel saate selle lihtsalt installida Otsime sobiva faili k\u00e4tte! Allalaadimiseks minge FilterizR-i Githubisse<\/a>. Kui te ei installi npm-i kaudu (kolmas valik), v\u00f5ite minna kausta " Samuti vajame l\u00e4htestamiseks ja valikute otsustamiseks teist Javascripti faili. Ma loon faili Selleks, et WordPress h\u00f5lmaks skripte, peame m\u00f5lemad skriptid Kohandage failinimesid ja\/v\u00f5i teid, et need sobiksid oma projekti\/teemaga. \u00dclaltoodud kood seab j\u00e4rjekorda vanilla filterizR skripti ja teiseks J\u00e4rgmine samm on koht, kuhu tahame selle postituste loendi renderdada. See on t\u00e4ielikult teie otsustada. Et see oleks selles \u00f5petuses lihtne, kasutan oma teemas lehemalli. Kui rakendate seda Gutenbergi plokis, saate selle renderdada kas PHP-ga (d\u00fcnaamiliste plokkide jaoks) v\u00f5i Javascriptiga ploki Loon oma teemakausta lehemalli Selles \u00f5petuses eeldame, et tahame postitusi renderdada kohandatud postituse t\u00fc\u00fcbis. Seda saab teha tavaliste postituste ja kategooriatega, kuid postitusi tuleb tavaliselt \u00fcsna palju \u2013 mida pole sellise kuvamise puhul otstarbekas kasutada. Oletame n\u00e4iteks kohandatud postituse t\u00fc\u00fcpi t\u00f6\u00f6tajate jaoks, kellel on osakonna jaoks \u00fchendatud kohandatud taksonoomia. Ma ei n\u00e4ita selles \u00f5petuses, kuidas kohandatud postituse t\u00fc\u00fcpi lisada, vaid pidage meeles, et postituse t\u00fc\u00fcbi nimi on Oma mallis alustan filtrite genereerimisest. Toon k\u00f5ik oma kohandatud taksonoomias olevad mittet\u00fchjad terminid Enne elementide genereerimist taksonoomias iga termini jaoks teen kindlasti \u00fche elemendi "K\u00f5ik" jaoks (rida \u00dclaltoodud koodiga peaksite saama loendi "K\u00f5ik", millele j\u00e4rgneb k\u00f5ik mittet\u00fchjad terminid. Suurep\u00e4rane!<\/p>\n N\u00fc\u00fcd, selle all, hakkan ma postitusi renderdama.<\/p>\n Postituste renderdamisel peate meeles pidama kahte asja. \u00dcks on m\u00e4hkida k\u00f5ik postitused konteinerisse, millele ma annan klassi nime Ma p\u00e4rin k\u00f5iki postitusi kohandatud postituse t\u00fc\u00fcbist Rea p\u00e4ring Iga postituse sisu osas on v\u00e4ljund \u00fcsna tavaline. Loome postituse esilet\u00f5stetud pildi, kasutades kohandatud pildi suurust (‘ Sel hetkel peaks PHP renderdus olema valmis. Olete teretulnud stiilima ja kenasti v\u00e4lja n\u00e4gema, kuid \u00e4rge t\u00fclitage tulpade kujundamist. FilterizR loob teie jaoks veerud (flexbox). J\u00e4rgmine samm on tegelikult filtreerimisskripti l\u00e4htestamine!<\/p>\n Viimane osa on FilterizR tagab, et k\u00f5igi postide pakkimismahuti suurus muudetakse automaatselt nii, et see sobiks vaatega. N\u00e4iteks kui aktiivne filter kuvab postitusi \u00fches reas ja me kl\u00f5psame teisel filtril, millel on neli rida, skaleeritakse konteiner automaatselt \u00f5igele k\u00f5rgusele. Nii veenduge, et p\u00e4rast seda ilmuv sisu ei j\u00e4\u00e4ks peitu. Kuid selleks, et see automaatne suuruse muutmine t\u00f6\u00f6taks, peavad k\u00f5ik pildid olema esmalt laaditud. M\u00f5nel juhul v\u00f5idakse skript laadida ja k\u00e4ivitada enne iga pildi laadimise l\u00f5petamist ning see p\u00f5hjustab konteineri automaatse ahendamise k\u00f5rgusele 0. See pole hea. Seega peame asetama l\u00e4htestamiskoodi funktsiooni sisse, kus teame, et pildid on laaditud. Vanilje Javascripti jaoks on see Teiseks tahame veenduda, et meie skript initsialiseerib FilterizR-i ainult siis, kui seal on t\u00f5esti filtreeritav konteiner. Kui initsialiseerime FilterizR-i ja praegusel lehel pole vajalikku \u00fcmbrisklassi, p\u00f5hjustab see Javascripti t\u00f5rke. Seda saame lahendada, kontrollides, kas konteineriklass on k\u00f5igepealt olemas. Vanilje Javascriptis saate kasutada FilterizR initsialiseerimiseks vanilje Javascriptiga on uue eksemplari loomine Initsialiseerimine toimub real Mul on vaid m\u00f5ned viimased n\u00e4pun\u00e4ited FilterizR-i optimeerimiseks, mida saame teha seadete objekti esitamisega. Soovitan vaadata FilterizR-i v\u00f5imalikke valikuid<\/a>, et n\u00e4ha, mida saate teha. Saate juhtida animatsiooni kiirust, animatsiooni t\u00fc\u00fcpi ja palju muud!<\/p>\n Veergude optimaalseks toimimiseks reageerivates suurustes leidsin, et kui m\u00e4\u00e4rate Vaikimisi ei ole iga \u00fcksuse vahel t\u00fchikut. Kui soovite iga \u00fcksuse vahele j\u00e4tta t\u00fchiku, saate m\u00e4\u00e4rata vahemiku suuruse pikslites Siin on kohandatud kood FilterizR-i l\u00e4htestamiseks minu valikutega:<\/p>\n M\u00f5ne v\u00e4iksema stiiliga on tulemus umbes selline:<\/p>\n Pidage meeles, et filtreerimine on vaid \u00fcks asi, mida FilterizR teha saab! Vaadake n\u00e4iteid nende avalehe<\/a> jaotises \u201e\u00d5petused”. Saate lisada juhtelemente sortimiseks, segamiseks ja\/v\u00f5i otsimiseks. Ja teil on ka paigutuse juhtimiseks rohkem v\u00f5imalusi.<\/p>\n\n
jQuery<\/code>selle l\u00e4htestamiseks ja seadistamiseks.<\/li>\nnpm<\/code>ja oma plokkkoodis raamatukogu importida.<\/p>\nFailide allalaadimine ja seadistamine<\/h2>\n
dist<\/code>" ja laadida alla vajaliku minimeeritud teegi. Kuna ma kasutan seda selles \u00f5petuses vanilje Javascriptiga, laadin vanilla.filterizr.min.js<\/code>faili alla ja asetan selle oma theme-folder\/assets\/js\/<\/code>kausta. See, kuhu raamatukogu paigutate, on loomulikult teie enda otsustada, lihtsalt reguleerige teed allapoole.<\/p>\ntheme-folder\/assets\/js\/filtering-main.js<\/code>. Tuleme selle faili juurde hiljem tagasi. See pole muidugi vajalik, kui rakendate seda kohandatud Gutenbergi plokis.<\/p>\nwp_enqueue_scripts<\/code>konksu j\u00e4rjekorda panema. Selle saab lisada kuhugi teie teemasse functions.php<\/code>. Nagu nii:<\/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>skripti, mis s\u00f5ltub filterizR skriptist. See tagab, et l\u00e4htestamisskript laaditakse p\u00e4rast vajalikku teeki.<\/p>\nMalli renderdamine<\/h2>\n
save<\/code>meetodil. Oluline osa on postitusi ja filtreid \u00fcmbritseva HTML-i korrektne renderdamine.<\/p>\nFiltrite renderdamine<\/h3>\n
template-filters.php<\/code>ja lisan oma PHP-koodi, et v\u00e4ljund seal renderdada.<\/p>\nemployees<\/code>ja kohandatud taksonoomia nimi on department<\/code>. L\u00fclitage oma postituse t\u00fc\u00fcbi ja taksonoomia nimed v\u00e4lja. Kui te pole kindel, kuidas kohandatud postitust\u00fc\u00fcpi lisada, on mul \u00f5petuspostitus kohandatud postitust\u00fc\u00fcpide ja taksonoomiate loomise kohta<\/a>.<\/p>\n[get_terms](https:\/\/developer.wordpress.org\/reference\/functions\/get_terms\/)()<\/code>ja lisan need j\u00e4rjestamata loendisse.<\/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>). FilterizR-i filtreerimise toimimiseks peame andma data-filter<\/code>igale filtrielemendile andmeatribuudi " ". Sisu peaks t\u00e4histab unikaalselt unikaalset filtreerimisv\u00e4\u00e4rtust, meie puhul termini slug (soovi korral v\u00f5ite kasutada terminit ID v\u00f5i midagi muud). See t\u00e4hendab, et pean postitustele lisama ka termini slugs andmeatribuutidena (vt hiljem), nii et FilterizR saab teada, millised postitused millisesse filtrisse kuuluvad.<\/p>\nPostituste renderdamine<\/h3>\n
filter-container<\/code>. Seda klassi peame Javascriptiga sihtima, et FilterizR t\u00f6\u00f6taks. Teiseks peab igal \u00fcksusel olema andmeatribuut " data-category<\/code>", mis loetleb k\u00f5ik komadega eraldatud terminid. Siin olevad v\u00e4\u00e4rtused peavad vastama v\u00e4\u00e4rtustele, mille genereerisite filtrite data-filter<\/code>atribuudis ” ".<\/p>\n[WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)<\/code>ja sirvin postitusi l\u00e4bi. See, mida postituse kohta kuvate, on t\u00e4ielikult teie otsustada, kuid allolev n\u00e4ide renderdab esiletoodud pildi, postituse pealkirja ja \u00fche kohandatud postituse meta ametinimetuse jaoks. K\u00f5ik sees olevad lingid, mis l\u00e4hevad \u00fchele t\u00f6\u00f6tajale.<\/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>tagab, et toon k\u00f5ik postitust\u00fc\u00fcpi t\u00f6\u00f6tajate avaldatud postitused t\u00e4hestikulises j\u00e4rjekorras. div<\/code>Enne iga postituse \u00fcmbrise renderdamist #13<\/code>kasutan real, [wp_get_object_terms](https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_object_terms\/)()<\/code>et tuua k\u00f5ik sellele postitusele m\u00e4\u00e4ratud terminid. Parameetrina k\u00fcsin ainult terminite n\u00e4lkjaid. Tagastus on mis tahes m\u00e4\u00e4ratud termini n\u00e4lkjate massiiv. Seej\u00e4rel kasutan PHP funktsiooni [implode](https:\/\/www.php.net\/manual\/en\/function.implode.php)()<\/code>, et luua k\u00f5igist massiivi elementidest komadega eraldatud string. data-category<\/code>Seda kajastatakse juure n\u00f5utava atribuudina, div<\/code>mis paneb filtrid t\u00f6\u00f6le.<\/p>\nemployees-thumb<\/code>‘), postituse pealkirja ja \u00fche kohandatud postituse meta v\u00e4\u00e4rtust (t\u00f6\u00f6nimetuse jaoks). K\u00f5ik on m\u00e4hitud lingi sisse, mis l\u00e4heb selle t\u00f6\u00f6taja \u00fchele vaatele. Lisasin ka m\u00f5ned klassid ja \u00fcmbrised, et h\u00f5lbustada CSS-i sihtimist. Iga elemendi v\u00e4ljund on loomulikult t\u00e4ielikult teie enda otsustada.<\/p>\nFiltri skripti l\u00e4htestamine<\/h2>\n
filtering-main.js<\/code>skripti redigeerimine. Peame lihtsalt \u00fctlema FilterizR-ile, et see k\u00e4ivitaks meie renderdatud sisu filtreerimise. Siin tuleb siiski meeles pidada m\u00f5nda asja:<\/p>\nwindow.onload<\/code>. jQuery jaoks kasutaksite $(window).load()<\/code>.<\/p>\ndocument.getElementById()<\/code>v\u00f5i document.getElementsByClassName()<\/code>. Vaata n\u00e4idet allpool. jQuery puhul peaksite jQuery('<selector>').length<\/code>seda kontrollima.<\/p>\nFilterizr<\/code>, pakkudes esimese parameetrina konteineri valijat ja soovi korral teise parameetrina seadete objekti. See on n\u00e4ide k\u00f5ige elementaarsemast:<\/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>. Anname meie postituste \u00fcmber olevale konteinerile klassi nime, mille ees on punkt, mis t\u00e4histab klassi valijat. \u00dclaltoodud koodiga peaks FilterizR n\u00fc\u00fcd teie postitused \u00fcle v\u00f5tma ja veergudesse paigutama. Kuna kasutasime sobivaid andmeatribuute, peaksid ka filtrid automaatselt t\u00f6\u00f6tama!<\/p>\nFilterizR-i valikute kohandamine<\/h3>\n
layout<\/code>v\u00e4\u00e4rtusele \u201e sameWidth<\/code>“, t\u00f6\u00f6tab FilterizR paremini erineva k\u00f5rgusega postitustega. Selle tulemuseks on "m\u00fc\u00fcritise" stiil. Meie n\u00e4ites kajastame p\u00e4rast pilti t\u00e4iendavat sisu ja see v\u00f5ib p\u00f5hjustada erineva k\u00f5rguse (nimed v\u00f5ivad olla pikemad, sundides seda mitmele reale). See v\u00f5ib p\u00f5hjustada kummalist k\u00e4itumist.<\/p>\ngutterPixels<\/code>. \u00dclaltoodud n\u00e4ites kasutasin vahe suurusena 10 pikslit. PS: m\u00e4hkimisanumale lisatakse ka vahe suurus. See ei pruugi alati olla see, mida soovite. Selle t\u00fchistamiseks lisasin lihtsalt padding: 0!important<\/code>stiili .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![\"Postituste](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152296-61e4d54c4aa2b.png\")
<\/a><\/p>\n