FilterizR-biblioteket<\/h2>\n
Kolla in demon p\u00e5 FilterizR hemsida<\/a> f\u00f6r att se om det h\u00e4r biblioteket \u00e4r n\u00e5got f\u00f6r dig. Du kan till och med spela med alternativen i realtid. Det h\u00e4r biblioteket st\u00f6der filtrering (vilket \u00e4r vad vi kommer att g\u00f6ra i den h\u00e4r handledningen), blandning (randomiserad ordning), s\u00f6kning och sortering. Den \u00e4r lyh\u00f6rd och optimerad f\u00f6r mobila enheter. S\u00e5 l\u00e5ngt fr\u00e5n vad jag har upplevt klarar den ocks\u00e5 av att st\u00e4lla in den automatiska h\u00f6jden p\u00e5 beh\u00e5llaren p\u00e5 varje f\u00f6rem\u00e5l v\u00e4ldigt bra.<\/p>\n FilterizR erbjuder tre olika typer av anv\u00e4ndning:<\/p>\n Det andra alternativet \u00e4r det enklaste f\u00f6r personer som inte \u00e4r bekanta med Javascript. De flesta b\u00f6rjar med jQuery. Men t\u00e4nk p\u00e5 att jQuery \u00e4r ett stort och tungt bibliotek att ladda i ditt projekt, och om det kan undvikas b\u00f6r du g\u00f6ra det. I den h\u00e4r handledningen kommer vi att anv\u00e4nda vanilla Javascript-metoden. Om du implementerar detta i ett anpassat Gutenberg-block b\u00f6r du \u00f6verv\u00e4ga att anv\u00e4nda det tredje alternativet. Sedan kan du helt enkelt installera den via L\u00e5t oss f\u00e5 tag p\u00e5 den l\u00e4mpliga filen! G\u00e5 till FilterizR:s Github<\/a> f\u00f6r att ladda ner. Om du inte installerar via npm (tredje alternativet), kan du g\u00e5 in i mappen ’ Vi kommer ocks\u00e5 att beh\u00f6va en annan Javascript-fil f\u00f6r att initiera och best\u00e4mma alternativen. Jag skapar en fil F\u00f6r att f\u00e5 WordPress att inkludera skripten m\u00e5ste vi st\u00e4lla b\u00e5da skripten i k\u00f6 i Justera filnamnen och\/eller s\u00f6kv\u00e4garna s\u00e5 att de passar ditt projekt\/tema. Ovanst\u00e5ende kod st\u00e4ller vanilla filterizR-skriptet i k\u00f6, och f\u00f6r det andra N\u00e4sta steg \u00e4r att ha en plats d\u00e4r vi vill rendera den h\u00e4r listan med inl\u00e4gg. Detta \u00e4r helt upp till dig. F\u00f6r att h\u00e5lla det enkelt i denna handledning anv\u00e4nder jag en sidmall i mitt tema. Om du implementerar detta i ett Gutenberg-block kan du rendera det antingen med PHP (f\u00f6r dynamiska block) eller med Javascript i blockets Jag skapar en sidmall I den h\u00e4r handledningen antar vi att vi vill rendera inl\u00e4gg inom en anpassad inl\u00e4ggstyp. Du kan g\u00f6ra detta med vanliga inl\u00e4gg och kategorier, men inl\u00e4gg brukar bli ganska m\u00e5nga \u2013 vilket inte \u00e4r m\u00f6jligt att anv\u00e4nda f\u00f6r den h\u00e4r typen av visning. Antag till exempel en anpassad posttyp f\u00f6r anst\u00e4llda med en ansluten anpassad taxonomi f\u00f6r avdelning. Jag kommer inte att visa hur man l\u00e4gger till den anpassade inl\u00e4ggstypen i denna handledning, t\u00e4nk bara p\u00e5 att inl\u00e4ggstypens namn \u00e4r I min mall b\u00f6rjar jag med att generera filtren. Jag h\u00e4mtar alla icke-tomma termer i min anpassade taxonomi med Innan jag genererar elementen f\u00f6r varje term i taxonomin ska jag se till att skapa ett element f\u00f6r "Alla" (rad Med ovanst\u00e5ende kod b\u00f6r du f\u00e5 en lista med "Alla" f\u00f6ljt av alla icke-tomma termer. Bra!<\/p>\n Nu, precis nedanf\u00f6r detta ska jag b\u00f6rja rendera inl\u00e4ggen.<\/p>\n N\u00e4r du renderar inl\u00e4ggen m\u00e5ste du komma ih\u00e5g tv\u00e5 saker. En \u00e4r att linda in alla inl\u00e4gg i en container, som jag ska ge klassnamnet Jag fr\u00e5gar alla inl\u00e4gg fr\u00e5n den anpassade posttypen med Fr\u00e5gan p\u00e5 raden N\u00e4r det g\u00e4ller inneh\u00e5llet f\u00f6r varje inl\u00e4gg \u00e4r resultatet ganska standard. Vi genererar inl\u00e4ggets utvalda bild med hj\u00e4lp av en anpassad bildstorlek (’ Vid denna tidpunkt b\u00f6r PHP-renderingen vara komplett. Du f\u00e5r g\u00e4rna styla och f\u00e5 det att se snyggt ut, men bry dig inte om att styla kolumner. FilterizR genererar kolumner (flexbox) \u00e5t dig. N\u00e4sta steg \u00e4r faktiskt att initiera filtreringsskriptet!<\/p>\n Den sista delen \u00e4r att redigera FilterizR kommer att se till att omslagsbeh\u00e5llaren f\u00f6r alla inl\u00e4gg har automatisk storlek f\u00f6r att passa vyn. Till exempel om det aktiva filtret visar inl\u00e4gg p\u00e5 en rad och vi klickar p\u00e5 ett annat filter som har fyra rader, kommer beh\u00e5llaren att automatiskt skala till r\u00e4tt h\u00f6jd. P\u00e5 s\u00e5 s\u00e4tt se till att allt inneh\u00e5ll som kommer efter inte g\u00f6mmer sig bakom. Men f\u00f6r att denna automatiska storleks\u00e4ndring ska fungera m\u00e5ste alla bilder ha laddats f\u00f6rst. I vissa fall kan skriptet laddas och k\u00f6ras innan varje bild har laddats klart, och detta g\u00f6r att beh\u00e5llaren automatiskt kollapsar till en h\u00f6jd av 0. Detta \u00e4r inte bra. S\u00e5 vi m\u00e5ste placera initialiseringskoden i en funktion d\u00e4r vi vet att bilder har laddats. F\u00f6r vanilla Javascript \u00e4r detta F\u00f6r det andra vill vi se till att v\u00e5rt skript bara initierar FilterizR om det verkligen finns en filtrerbar beh\u00e5llare. Om vi \u200b\u200binitierar FilterizR och den aktuella sidan inte har den n\u00f6dv\u00e4ndiga wrapperklassen kommer det att resultera i ett Javascript-fel. Vi kan l\u00f6sa detta genom att kontrollera om containerklassen finns f\u00f6rst. I vanilla Javascript kan du anv\u00e4nda S\u00e4ttet att initiera FilterizR av vanilla Javascript \u00e4r att skapa en ny instans av Initieringen sker vid raden Jag har bara n\u00e5gra sista tips f\u00f6r att optimera FilterizR, vilket vi kan g\u00f6ra genom att tillhandah\u00e5lla ett inst\u00e4llningsobjekt. Jag rekommenderar att du tar en titt p\u00e5 de m\u00f6jliga alternativen<\/a> f\u00f6r FilterizR f\u00f6r att se vad du kan g\u00f6ra. Du kan styra animeringshastigheten, animationstypen och mer!<\/p>\n F\u00f6r att f\u00e5 kolumnerna att fungera optimalt i responsiva storlekar har jag uppt\u00e4ckt att inst\u00e4llningen Som standard f\u00e5r varje objekt inget mellanslag mellan varandra. Om du vill ha lite avst\u00e5nd mellan varje objekt kan du st\u00e4lla in gapstorleken i px f\u00f6r H\u00e4r \u00e4r den justerade koden f\u00f6r att initiera FilterizR med mina alternativ:<\/p>\n Med lite mindre styling blir resultatet ungef\u00e4r s\u00e5 h\u00e4r:<\/p>\n T\u00e4nk p\u00e5 att filtrering bara \u00e4r en sak FilterizR kan g\u00f6ra! Kolla in exemplen under "Tutorials" p\u00e5 deras hemsida<\/a>. Du kan l\u00e4gga till kontroller f\u00f6r att sortera, blanda och\/eller s\u00f6ka. Och du har fler alternativ f\u00f6r att styra layouten ocks\u00e5.<\/p>\n\n
jQuery<\/code>f\u00f6r att initiera och st\u00e4lla in den.<\/li>\nnpm<\/code>och importera biblioteket i din blockkod.<\/p>\nLadda ner och st\u00e4lla in filerna<\/h2>\n
dist<\/code>’ och ladda ner det minifierade bibliotek du beh\u00f6ver. Eftersom jag kommer att anv\u00e4nda den med vanilla Javascript i den h\u00e4r handledningen laddar jag ner vanilla.filterizr.min.js<\/code>filen och placerar den i min theme-folder\/assets\/js\/<\/code>mapp. Var du placerar biblioteket \u00e4r s\u00e5klart helt upp till dig, det \u00e4r bara att justera v\u00e4gen l\u00e4ngre ner.<\/p>\ntheme-folder\/assets\/js\/filtering-main.js<\/code>. Vi \u00e5terkommer till den h\u00e4r filen senare. Detta \u00e4r naturligtvis inte n\u00f6dv\u00e4ndigt om du implementerar detta i ett anpassat Gutenberg-block.<\/p>\nwp_enqueue_scripts<\/code>kroken. Detta kan l\u00e4ggas till n\u00e5gonstans i ditt temas functions.php<\/code>. S\u00e5h\u00e4r:<\/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>skriptet som \u00e4r beroende av filterizR-skriptet. Detta s\u00e4kerst\u00e4ller att initialiseringsskriptet laddas efter det n\u00f6dv\u00e4ndiga biblioteket.<\/p>\nRendering av mallen<\/h2>\n
save<\/code>metod. Den viktiga delen \u00e4r att rendera HTML-koden som omger inl\u00e4ggen och filtren korrekt.<\/p>\nRendering av filtren<\/h3>\n
template-filters.php<\/code>i min temamapp och l\u00e4gger till min PHP-kod f\u00f6r att \u00e5terge resultatet d\u00e4r.<\/p>\nemployees<\/code>och det anpassade taxonominamnet \u00e4r department<\/code>. Byt ut namnen f\u00f6r din inl\u00e4ggstyp och klassificering. Om du \u00e4r os\u00e4ker p\u00e5 hur man l\u00e4gger till en anpassad inl\u00e4ggstyp har jag ett handledningsinl\u00e4gg om hur man skapar anpassade inl\u00e4ggstyper och taxonomier<\/a>.<\/p>\n[get_terms](https:\/\/developer.wordpress.org\/reference\/functions\/get_terms\/)()<\/code>och l\u00e4gger till dem i en oordnad lista.<\/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>). F\u00f6r att FilterizR-filtreringen ska fungera m\u00e5ste vi tillhandah\u00e5lla dataattributet " data-filter<\/code>" till varje filterelement. Inneh\u00e5llet b\u00f6r unikt betecknar ett unikt filtreringsv\u00e4rde, i v\u00e5rt fall termens slug (du kan anv\u00e4nda term-ID eller n\u00e5got annat om du vill). Det betyder att jag m\u00e5ste l\u00e4gga till termens slugs som dataattribut till inl\u00e4ggen ocks\u00e5 (se senare) s\u00e5 FilterizR kan veta vilka inl\u00e4gg som tillh\u00f6r vilket filter.<\/p>\nRendering av inl\u00e4ggen<\/h3>\n
filter-container<\/code>. Den h\u00e4r klassen \u00e4r vad vi beh\u00f6ver rikta in oss p\u00e5 med Javascript f\u00f6r att FilterizR ska fungera. Och f\u00f6r det andra m\u00e5ste varje artikel ha ett dataattribut " data-category<\/code>" som listar alla termer separerade med kommatecken. V\u00e4rdena h\u00e4r m\u00e5ste motsvara de v\u00e4rden du genererade i filtrens " data-filter<\/code>"-attribut.<\/p>\n[WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)<\/code>och g\u00e5r igenom inl\u00e4ggen. Vad du visar per inl\u00e4gg \u00e4r helt upp till dig, men exemplet nedan \u00e5terger den utvalda bilden, inl\u00e4ggstiteln och en enda anpassad inl\u00e4ggsmeta f\u00f6r jobbtitel. Alla inslagna l\u00e4nkar som g\u00e5r till den enskilde anst\u00e4llde.<\/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>ser till att jag h\u00e4mtar alla publicerade inl\u00e4gg av posttyp anst\u00e4llda, ordnade i alfabetisk ordning. Innan jag \u00e5terger omslutningen div<\/code>f\u00f6r varje inl\u00e4gg, p\u00e5 rad #13<\/code>, anv\u00e4nder jag [wp_get_object_terms](https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_object_terms\/)()<\/code>f\u00f6r att h\u00e4mta alla termer som tilldelats detta inl\u00e4gg. Som parameter ber jag om endast termernas sn\u00e4ckor. Returen \u00e4r en upps\u00e4ttning av alla tilldelade termsniglar. Jag anv\u00e4nder sedan PHP-funktionen [implode](https:\/\/www.php.net\/manual\/en\/function.implode.php)()<\/code>f\u00f6r att skapa en str\u00e4ng fr\u00e5n alla element i arrayen separerade med kommatecken. Detta \u00e5terges som det n\u00f6dv\u00e4ndiga data-category<\/code>attributet till roten div<\/code>\u2013 vilket g\u00f6r att filtren fungerar.<\/p>\nemployees-thumb<\/code>’), inl\u00e4ggets titel och v\u00e4rdet av en enskild anpassad inl\u00e4ggsmeta (f\u00f6r jobbtitel). Allt \u00e4r insvept i en l\u00e4nk som g\u00e5r till den enda vyn f\u00f6r den anst\u00e4llde. Jag har ocks\u00e5 lagt till n\u00e5gra klasser och omslag f\u00f6r att g\u00f6ra det l\u00e4ttare att rikta in sig p\u00e5 CSS. Utg\u00e5ngen f\u00f6r varje element \u00e4r naturligtvis helt upp till dig.<\/p>\nInitierar filterskriptet<\/h2>\n
filtering-main.js<\/code>manuset. Vi beh\u00f6ver helt enkelt tala om f\u00f6r FilterizR att initiera filtrering p\u00e5 v\u00e5rt renderade inneh\u00e5ll. Det finns dock n\u00e5gra saker att t\u00e4nka p\u00e5 h\u00e4r:<\/p>\nwindow.onload<\/code>. F\u00f6r jQuery skulle du anv\u00e4nda $(window).load()<\/code>.<\/p>\ndocument.getElementById()<\/code>eller document.getElementsByClassName()<\/code>. Se exempel nedan. F\u00f6r jQuery skulle du anv\u00e4nda jQuery('<selector>').length<\/code>f\u00f6r att kontrollera detta.<\/p>\nFilterizr<\/code>, som tillhandah\u00e5ller beh\u00e5llarv\u00e4ljaren som f\u00f6rsta parameter och eventuellt ett objekt med inst\u00e4llningar som andra parameter. Detta \u00e4r ett exempel p\u00e5 det mest grundl\u00e4ggande:<\/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>. Vi tillhandah\u00e5ller klassnamnet till beh\u00e5llaren som omsluter v\u00e5ra inl\u00e4gg med en prick framf\u00f6r, vilket betyder en klassv\u00e4ljare. Med ovanst\u00e5ende kod ska FilterizR nu ta \u00f6ver dina inl\u00e4gg och placera dem i kolumner. Eftersom vi anv\u00e4nde l\u00e4mpliga dataattribut borde filtren ocks\u00e5 fungera automatiskt!<\/p>\nAnpassa FilterizR:s alternativ<\/h3>\n
layout<\/code>till ’ sameWidth<\/code>’ g\u00f6r att FilterizR fungerar b\u00e4ttre med inl\u00e4gg som har olika h\u00f6jder. Detta resulterar i en "Masonry"-stil. I v\u00e5rt exempel ekar vi ut ytterligare inneh\u00e5ll efter bilden, och detta kan resultera i olika h\u00f6jder (namnen kan vara l\u00e4ngre och tvingar in den i flera rader). Detta kan resultera i n\u00e5got konstigt beteende.<\/p>\ngutterPixels<\/code>. I exemplet ovan har jag anv\u00e4nt 10px som gapstorlek. PS: Spaltstorleken l\u00e4ggs ocks\u00e5 till f\u00f6rpackningsbeh\u00e5llaren. Detta kanske inte alltid \u00e4r vad du vill. F\u00f6r att \u00e5sidos\u00e4tta detta har jag helt enkelt lagt till styling padding: 0!important<\/code>p\u00e5 .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![\"Implementera](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152296-61e4d54c4aa2b.png\")
<\/a><\/p>\n