Biblioteka FilterizR<\/h2>\n
Sprawd\u017a demo na stronie g\u0142\u00f3wnej FilterizR<\/a>, aby sprawdzi\u0107, czy ta biblioteka jest dla Ciebie. Mo\u017cesz nawet gra\u0107 z opcjami w czasie rzeczywistym. Ta biblioteka obs\u0142uguje filtrowanie (co zrobimy w tym samouczku), tasowanie (kolejno\u015b\u0107 losowa), wyszukiwanie i sortowanie. Jest responsywny i zoptymalizowany pod k\u0105tem urz\u0105dze\u0144 mobilnych. Do tej pory z tego, czego do\u015bwiadczy\u0142em, bardzo dobrze radzi sobie z ustawianiem automatycznej wysoko\u015bci na pojemniku na ka\u017cdym elemencie.<\/p>\n FilterizR oferuje trzy r\u00f3\u017cne typy u\u017cytkowania:<\/p>\n Druga opcja jest naj\u0142atwiejsza dla os\u00f3b niezaznajomionych z Javascriptem. Wi\u0119kszo\u015b\u0107 ludzi zaczyna od jQuery. Pami\u0119taj jednak, \u017ce jQuery to du\u017ca i ci\u0119\u017cka biblioteka do za\u0142adowania w twoim projekcie, a je\u015bli mo\u017cna tego unikn\u0105\u0107, powiniene\u015b. W tym samouczku u\u017cyjemy waniliowej metody JavaScript. Je\u015bli wdra\u017casz to w niestandardowym bloku Gutenberga, powiniene\u015b rozwa\u017cy\u0107 u\u017cycie trzeciej opcji. Nast\u0119pnie mo\u017cesz po prostu zainstalowa\u0107 go przez Zdob\u0105d\u017amy odpowiedni plik! Przejd\u017a do Github FilterizR,<\/a> aby pobra\u0107. Je\u015bli nie instalujesz przez npm (trzecia opcja), mo\u017cesz przej\u015b\u0107 do folderu \u201e B\u0119dziemy r\u00f3wnie\u017c potrzebowa\u0107 innego pliku JavaScript, aby zainicjowa\u0107 i zdecydowa\u0107 o opcjach. Stworz\u0119 plik Aby WordPress zawiera\u0142 skrypty, musimy zakolejkowa\u0107 oba skrypty w Dostosuj nazwy plik\u00f3w i\/lub \u015bcie\u017cki do swojego projektu\/motywu. Powy\u017cszy kod umieszcza w kolejce skrypt vanilla filterizR, a po drugie Nast\u0119pnym krokiem jest posiadanie miejsca, w kt\u00f3rym chcemy wyrenderowa\u0107 t\u0119 list\u0119 post\u00f3w. To zale\u017cy wy\u0142\u0105cznie od Ciebie. Aby upro\u015bci\u0107 ten samouczek, u\u017cyj\u0119 szablonu strony w moim motywie. Je\u015bli implementujesz to w bloku Gutenberga, mo\u017cesz renderowa\u0107 to za pomoc\u0105 PHP (dla blok\u00f3w dynamicznych) lub JavaScript w Utworz\u0119 szablon strony W tym samouczku zak\u0142adamy, \u017ce chcemy renderowa\u0107 posty w ramach niestandardowego typu posta. Mo\u017cesz to zrobi\u0107 za pomoc\u0105 standardowych post\u00f3w i kategorii, ale post\u00f3w zwykle b\u0119dzie do\u015b\u0107 du\u017co \u2013 co nie jest wykonalne w przypadku tego rodzaju wy\u015bwietlania. Za\u0142\u00f3\u017cmy na przyk\u0142ad niestandardowy typ wpisu dla pracownik\u00f3w z po\u0142\u0105czon\u0105 niestandardow\u0105 taksonomi\u0105 dla dzia\u0142u. W tym samouczku nie poka\u017c\u0119, jak doda\u0107 niestandardowy typ posta, pami\u0119taj tylko, \u017ce nazwa typu posta to W moim szablonie zaczynam od wygenerowania filtr\u00f3w. Pobior\u0119 wszystkie niepuste terminy w mojej niestandardowej taksonomii Przed wygenerowaniem element\u00f3w dla ka\u017cdego terminu w taksonomii upewni\u0119 si\u0119, \u017ce zrobi\u0119 jeden element dla \u201eWszystkich” (linia Z powy\u017cszym kodem powiniene\u015b otrzyma\u0107 list\u0119 z \u201eWszystko”, po kt\u00f3rej nast\u0119puj\u0105 wszystkie niepuste terminy. \u015awietny!<\/p>\n Teraz tu\u017c pod tym zaczn\u0119 renderowa\u0107 posty.<\/p>\n Podczas renderowania post\u00f3w musisz pami\u0119ta\u0107 o dw\u00f3ch rzeczach. Jednym z nich jest zawini\u0119cie wszystkich post\u00f3w do kontenera, kt\u00f3remu podam nazw\u0119 klasy Wysy\u0142am zapytania do wszystkich post\u00f3w z niestandardowego typu post\u00f3w Zapytanie w wierszu Je\u015bli chodzi o tre\u015b\u0107 ka\u017cdego posta, wyj\u015bcie jest do\u015b\u0107 standardowe. Polecany obraz posta generujemy przy u\u017cyciu niestandardowego rozmiaru obrazu (\u201e W tym momencie renderowanie PHP powinno by\u0107 kompletne. Mo\u017cesz stylizowa\u0107 i \u0142adnie wygl\u0105da\u0107, ale nie zawracaj sobie g\u0142owy stylizacj\u0105 kolumn. FilterizR wygeneruje dla Ciebie kolumny (flexbox). Nast\u0119pnym krokiem jest inicjalizacja skryptu filtruj\u0105cego!<\/p>\n Ostatnia cz\u0119\u015b\u0107 to edycja FilterizR upewni si\u0119, \u017ce opakowanie wszystkich post\u00f3w jest automatycznie dopasowywane do widoku. Na przyk\u0142ad, je\u015bli aktywny filtr wy\u015bwietla posty w jednym wierszu, a klikniemy inny filtr, kt\u00f3ry ma cztery wiersze, kontener przeskaluje si\u0119 automatycznie do odpowiedniej wysoko\u015bci. W ten spos\u00f3b upewniaj\u0105c si\u0119, \u017ce wszelkie tre\u015bci, kt\u00f3re pojawiaj\u0105 si\u0119 p\u00f3\u017aniej, nie zostan\u0105 ukryte. Ale aby ta automatyczna zmiana rozmiaru dzia\u0142a\u0142a, wszystkie obrazy musz\u0105 by\u0107 najpierw za\u0142adowane. W niekt\u00f3rych przypadkach skrypt mo\u017ce zosta\u0107 za\u0142adowany i uruchomiony przed zako\u0144czeniem \u0142adowania ka\u017cdego obrazu, co powoduje automatyczne zwijanie kontenera do wysoko\u015bci 0. To nie jest dobre. Musimy wi\u0119c umie\u015bci\u0107 kod inicjuj\u0105cy w funkcji, w kt\u00f3rej wiemy, \u017ce obrazy s\u0105 \u0142adowane. Dla waniliowego Javascriptu jest to Po drugie, chcemy si\u0119 upewni\u0107, \u017ce nasz skrypt inicjalizuje FilterizR tylko wtedy, gdy rzeczywi\u015bcie istnieje kontener, kt\u00f3ry mo\u017cna filtrowa\u0107. Je\u015bli zainicjujemy FilterizR, a bie\u017c\u0105ca strona nie ma wymaganej klasy wrappera, spowoduje to b\u0142\u0105d JavaScript. Mo\u017cemy to rozwi\u0105za\u0107, sprawdzaj\u0105c najpierw, czy klasa kontenera istnieje. W waniliowym JavaScript mo\u017cesz u\u017cy\u0107 Sposobem na zainicjowanie FilterizR przez waniliowy JavaScript jest utworzenie nowej instancji Inicjalizacja nast\u0119puje w linii Mam tylko kilka ko\u0144cowych wskaz\u00f3wek, jak zoptymalizowa\u0107 FilterizR, co mo\u017cemy zrobi\u0107, dostarczaj\u0105c obiekt ustawie\u0144. Polecam przyjrze\u0107 si\u0119 mo\u017cliwym opcjom<\/a> FilterizR, aby zobaczy\u0107, co mo\u017cesz zrobi\u0107. Mo\u017cesz kontrolowa\u0107 szybko\u015b\u0107 animacji, typ animacji i nie tylko!<\/p>\n Aby kolumny dzia\u0142a\u0142y optymalnie w responsywnych rozmiarach, odkry\u0142em, \u017ce ustawienie Domy\u015blnie ka\u017cdy element nie ma odst\u0119pu mi\u0119dzy sob\u0105. Je\u015bli chcesz mie\u0107 troch\u0119 odst\u0119p\u00f3w mi\u0119dzy poszczeg\u00f3lnymi elementami, mo\u017cesz ustawi\u0107 rozmiar odst\u0119pu w pikselach dla Oto dostosowany kod do inicjalizacji FilterizR z moimi opcjami:<\/p>\n Przy niewielkiej stylizacji wynik wygl\u0105da mniej wi\u0119cej tak:<\/p>\n Pami\u0119taj, \u017ce filtrowanie to tylko jedna rzecz, kt\u00f3r\u0105 mo\u017ce zrobi\u0107 FilterizR! Sprawd\u017a przyk\u0142ady w sekcji \u201eSamouczki” na ich stronie g\u0142\u00f3wnej<\/a>. Mo\u017cesz doda\u0107 elementy steruj\u0105ce do sortowania, mieszania i\/lub wyszukiwania. Masz te\u017c wi\u0119cej opcji kontrolowania uk\u0142adu.<\/p>\n\n
jQuery<\/code>do inicjowania i konfigurowania.<\/li>\nnpm<\/code>i zaimportowa\u0107 bibliotek\u0119 do swojego kodu blokowego.<\/p>\nPobieranie i konfigurowanie plik\u00f3w<\/h2>\n
dist<\/code>" i pobra\u0107 potrzebn\u0105 bibliotek\u0119 zminimalizowan\u0105. Poniewa\u017c u\u017cyj\u0119 go z waniliowym JavaScriptem w tym samouczku, pobior\u0119 vanilla.filterizr.min.js<\/code>plik i umieszcz\u0119 go w moim theme-folder\/assets\/js\/<\/code>folderze. To, gdzie umie\u015bcisz bibliotek\u0119, zale\u017cy oczywi\u015bcie od Ciebie, po prostu dostosuj \u015bcie\u017ck\u0119 dalej.<\/p>\ntheme-folder\/assets\/js\/filtering-main.js<\/code>. Wr\u00f3cimy do tego pliku p\u00f3\u017aniej. Nie jest to oczywi\u015bcie konieczne, je\u015bli wdra\u017casz to w niestandardowym bloku Gutenberga.<\/p>\nwp_enqueue_scripts<\/code>haczyku. Mo\u017cna to doda\u0107 gdzie\u015b w motywie functions.php<\/code>. Tak jak:<\/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>skrypt, kt\u00f3ry jest zale\u017cny od skryptu filterizR. Dzi\u0119ki temu skrypt inicjuj\u0105cy zostanie za\u0142adowany po wymaganej bibliotece.<\/p>\nRenderowanie szablonu<\/h2>\n
save<\/code>metodzie bloku. Wa\u017cn\u0105 cz\u0119\u015bci\u0105 jest poprawne renderowanie kodu HTML otaczaj\u0105cego posty i filtry.<\/p>\nRenderowanie filtr\u00f3w<\/h3>\n
template-filters.php<\/code>w moim folderze motywu i dodam m\u00f3j kod PHP, aby wyrenderowa\u0107 tam dane wyj\u015bciowe.<\/p>\nemployees<\/code>, a nazwa taksonomii niestandardowej to department<\/code>. Zamie\u0144 nazwy typu posta i taksonomii. Je\u015bli nie jeste\u015b pewien, jak doda\u0107 niestandardowy typ postu, mam post samouczka na temat tworzenia niestandardowych typ\u00f3w post\u00f3w i taksonomii<\/a>.<\/p>\n[get_terms](https:\/\/developer.wordpress.org\/reference\/functions\/get_terms\/)()<\/code>i dodam je do listy nieuporz\u0105dkowanej.<\/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>). Aby filtrowanie FilterizR zadzia\u0142a\u0142o musimy dostarczy\u0107 atrybut danych \u201e data-filter<\/code>” do ka\u017cdego elementu jednoznacznie oznaczaj\u0105 unikaln\u0105 warto\u015b\u0107 filtrowania, w naszym przypadku slug terminu (mo\u017cesz u\u017cy\u0107 identyfikatora terminu lub czego\u015b innego, je\u015bli chcesz).Oznacza to, \u017ce musz\u0119 doda\u0107 slug terminu jako atrybuty danych r\u00f3wnie\u017c do post\u00f3w (patrz dalej), wi\u0119c FilterizR mo\u017ce wiedzie\u0107, kt\u00f3re posty nale\u017c\u0105 do kt\u00f3rego filtra.<\/p>\nRenderowanie post\u00f3w<\/h3>\n
filter-container<\/code>. Ta klasa jest tym, czego potrzebujemy za pomoc\u0105 JavaScript, aby FilterizR dzia\u0142a\u0142. Po drugie, ka\u017cdy element musi mie\u0107 atrybut danych \u201e data-category<\/code>„, kt\u00f3ry zawiera wszystkie terminy oddzielone przecinkami. Warto\u015bci tutaj musz\u0105 odpowiada\u0107 warto\u015bciom wygenerowanym w data-filter<\/code>atrybucie \u201e ” filtr\u00f3w.<\/p>\n[WP_Query](https:\/\/developer.wordpress.org\/reference\/classes\/wp_query\/)<\/code>i zap\u0119tlam je. To, co wy\u015bwietlasz w po\u015bcie, zale\u017cy wy\u0142\u0105cznie od Ciebie, ale poni\u017cszy przyk\u0142ad renderuje wyr\u00f3\u017cniony obraz, tytu\u0142 posta i pojedyncz\u0105 niestandardow\u0105 meta postu dla tytu\u0142u stanowiska. Wszystkie zawini\u0119te wewn\u0105trz linki, kt\u00f3re trafiaj\u0105 do jednego pracownika.<\/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>zapewnia pobranie wszystkich opublikowanych post\u00f3w pracownik\u00f3w typu post, uporz\u0105dkowanych alfabetycznie. Przed renderowaniem opakowania div<\/code>dla ka\u017cdego posta, w linii #13<\/code>, [wp_get_object_terms](https:\/\/developer.wordpress.org\/reference\/functions\/wp_get_object_terms\/)()<\/code>pobieram wszystkie terminy przypisane do tego posta. Jako parametr prosz\u0119 tylko o \u015blimaki warunk\u00f3w. Zwracana jest tablica dowolnych przypisanych fragment\u00f3w termin\u00f3w. Nast\u0119pnie u\u017cywam funkcji PHP, [implode](https:\/\/www.php.net\/manual\/en\/function.implode.php)()<\/code>aby utworzy\u0107 ci\u0105g znak\u00f3w ze wszystkich element\u00f3w tablicy oddzielonych przecinkami. Jest to powtarzane jako wymagany data-category<\/code>atrybut do katalogu g\u0142\u00f3wnego div<\/code>\u2013 co sprawia, \u017ce \u200b\u200bfiltry dzia\u0142aj\u0105.<\/p>\nemployees-thumb<\/code>„), tytu\u0142u posta i warto\u015bci pojedynczej niestandardowej meta postu (dla tytu\u0142u stanowiska). Wszystko jest opakowane w link, kt\u00f3ry prowadzi do pojedynczego widoku dla tego pracownika. Doda\u0142em r\u00f3wnie\u017c kilka klas i wrapper\u00f3w, aby u\u0142atwi\u0107 kierowanie za pomoc\u0105 CSS. Wynik dla ka\u017cdego elementu zale\u017cy oczywi\u015bcie ca\u0142kowicie od Ciebie.<\/p>\nInicjowanie skryptu filtruj\u0105cego<\/h2>\n
filtering-main.js<\/code>skryptu. Musimy po prostu powiedzie\u0107 FilterizR, aby zainicjowa\u0142 filtrowanie na naszej renderowanej tre\u015bci. Nale\u017cy jednak pami\u0119ta\u0107 o kilku rzeczach:<\/p>\nwindow.onload<\/code>. W przypadku jQuery u\u017cyjesz $(window).load()<\/code>.<\/p>\ndocument.getElementById()<\/code>lub document.getElementsByClassName()<\/code>. Zobacz przyk\u0142ad poni\u017cej. W przypadku jQuery u\u017cy\u0142by\u015b jQuery('<selector>').length<\/code>do sprawdzenia tego.<\/p>\nFilterizr<\/code>, dostarczaj\u0105c selektor kontenera jako pierwszy parametr i opcjonalnie obiekt ustawie\u0144 jako drugi parametr. Oto przyk\u0142ad najbardziej podstawowego:<\/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>. Podajemy nazw\u0119 klasy do kontenera, kt\u00f3ry otacza nasze posty z kropk\u0105 z przodu, oznaczaj\u0105c\u0105 selektor klasy. Z powy\u017cszym kodem FilterizR powinien teraz przej\u0105\u0107 Twoje posty i umie\u015bci\u0107 je w kolumnach. Poniewa\u017c u\u017cyli\u015bmy odpowiednich atrybut\u00f3w danych, filtry r\u00f3wnie\u017c powinny dzia\u0142a\u0107 automatycznie!<\/p>\nDostosowywanie opcji FilterizR<\/h3>\n
layout<\/code>\u201e sameWidth<\/code>” sprawia, \u017ce \u200b\u200bFilterizR dzia\u0142a lepiej z postami o r\u00f3\u017cnej wysoko\u015bci. Daje to styl \u201emurarski”. W naszym przyk\u0142adzie wysy\u0142amy echo dodatkowej tre\u015bci po obrazie, co mo\u017ce skutkowa\u0107 r\u00f3\u017cnymi wysoko\u015bciami (nazwy mog\u0105 by\u0107 d\u0142u\u017csze, wymuszaj\u0105c wiele wierszy). Mo\u017ce to spowodowa\u0107 dziwne zachowanie.<\/p>\ngutterPixels<\/code>. W powy\u017cszym przyk\u0142adzie u\u017cy\u0142em 10px jako rozmiaru przerwy. PS: Rozmiar szczeliny jest r\u00f3wnie\u017c dodawany do pojemnika do pakowania. To mo\u017ce nie zawsze by\u0107 to, czego chcesz. Aby to zmieni\u0107, po prostu doda\u0142em stylizacj\u0119 padding: 0!important<\/code>do .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![\"Implementacja](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152296-61e4d54c4aa2b.png\")
<\/a><\/p>\n