Czy kiedykolwiek chciałeś zrobić ładną prezentację kolumnową postów z filtrami kategorii powyżej, która tasuje i filtruje posty z ładną animacją? To jest samouczek dla Ciebie.
To, co zrobimy w tym samouczku, to lista wszystkich postów (najlepiej w ramach niestandardowego typu postu, takiego jak pracownicy) ładnie w kolumnach i z ich polecanymi obrazami. Nad postami generujemy filtry dla połączonej taksonomii. Po kliknięciu na filtr, posty zostaną z ładną animacją przetasowane i ukryją posty, których nie ma w wybranej kategorii.
W tym celu korzystamy z biblioteki Javascript do filtrowania. Dostępnych jest wiele — niektóre wymagają jQuery, a inne nie — niektóre są open source, a niektóre wymagają licencji komercyjnej. Najpopularniejsze z nich to MixItUp i Isotope. Jednak oba wymagają licencji komercyjnej. Do mojego projektu potrzebowałem biblioteki, która załatwia sprawę, a jednocześnie jest całkowicie darmowa do wykorzystania w projektach komercyjnych. Próbowałem kilku, a najlepszym, jaki do tej pory znalazłem, jest FilterizR. Zacznijmy ten samouczek od zdobycia tej biblioteki!
Biblioteka FilterizR
Sprawdź demo na stronie głównej FilterizR, aby sprawdzić, czy ta biblioteka jest dla Ciebie. Możesz nawet grać z opcjami w czasie rzeczywistym. Ta biblioteka obsługuje filtrowanie (co zrobimy w tym samouczku), tasowanie (kolejność losowa), wyszukiwanie i sortowanie. Jest responsywny i zoptymalizowany pod kątem urządzeń mobilnych. Do tej pory z tego, czego doświadczyłem, bardzo dobrze radzi sobie z ustawianiem automatycznej wysokości na pojemniku na każdym elemencie.
FilterizR oferuje trzy różne typy użytkowania:
- Waniliowy JavaScript: Udostępnia FilterizR jako globalną funkcję do wywołania w standardowym JavaScript.
- jQuery: pozwala używać
jQuerydo inicjowania i konfigurowania. - Biblioteka Pure Javascript/npm: Do użycia w importach ES6 (np. jeśli piszesz niestandardowe bloki dla Gutenberga).
Druga opcja jest najłatwiejsza dla osób niezaznajomionych z Javascriptem. Większość ludzi zaczyna od jQuery. Pamiętaj jednak, że jQuery to duża i ciężka biblioteka do załadowania w twoim projekcie, a jeśli można tego uniknąć, powinieneś. W tym samouczku użyjemy waniliowej metody JavaScript. Jeśli wdrażasz to w niestandardowym bloku Gutenberga, powinieneś rozważyć użycie trzeciej opcji. Następnie możesz po prostu zainstalować go przez npmi zaimportować bibliotekę do swojego kodu blokowego.
Pobieranie i konfigurowanie plików
Zdobądźmy odpowiedni plik! Przejdź do Github FilterizR, aby pobrać. Jeśli nie instalujesz przez npm (trzecia opcja), możesz przejść do folderu „ dist" i pobrać potrzebną bibliotekę zminimalizowaną. Ponieważ użyję go z waniliowym JavaScriptem w tym samouczku, pobiorę vanilla.filterizr.min.jsplik i umieszczę go w moim theme-folder/assets/js/folderze. To, gdzie umieścisz bibliotekę, zależy oczywiście od Ciebie, po prostu dostosuj ścieżkę dalej.
Będziemy również potrzebować innego pliku JavaScript, aby zainicjować i zdecydować o opcjach. Stworzę plik theme-folder/assets/js/filtering-main.js. Wrócimy do tego pliku później. Nie jest to oczywiście konieczne, jeśli wdrażasz to w niestandardowym bloku Gutenberga.
Aby WordPress zawierał skrypty, musimy zakolejkować oba skrypty w wp_enqueue_scriptshaczyku. Można to dodać gdzieś w motywie functions.php. Tak jak:
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);
});Dostosuj nazwy plików i/lub ścieżki do swojego projektu/motywu. Powyższy kod umieszcza w kolejce skrypt vanilla filterizR, a po drugie filtering-main.jsskrypt, który jest zależny od skryptu filterizR. Dzięki temu skrypt inicjujący zostanie załadowany po wymaganej bibliotece.
Renderowanie szablonu
Następnym krokiem jest posiadanie miejsca, w którym chcemy wyrenderować tę listę postów. To zależy wyłącznie od Ciebie. Aby uprościć ten samouczek, użyję szablonu strony w moim motywie. Jeśli implementujesz to w bloku Gutenberga, możesz renderować to za pomocą PHP (dla bloków dynamicznych) lub JavaScript w savemetodzie bloku. Ważną częścią jest poprawne renderowanie kodu HTML otaczającego posty i filtry.
Renderowanie filtrów
Utworzę szablon strony template-filters.phpw moim folderze motywu i dodam mój kod PHP, aby wyrenderować tam dane wyjściowe.
W tym samouczku zakładamy, że chcemy renderować posty w ramach niestandardowego typu posta. Możesz to zrobić za pomocą standardowych postów i kategorii, ale postów zwykle będzie dość dużo – co nie jest wykonalne w przypadku tego rodzaju wyświetlania. Załóżmy na przykład niestandardowy typ wpisu dla pracowników z połączoną niestandardową taksonomią dla działu. W tym samouczku nie pokażę, jak dodać niestandardowy typ posta, pamiętaj tylko, że nazwa typu posta to employees, a nazwa taksonomii niestandardowej to department. Zamień nazwy typu posta i taksonomii. Jeśli nie jesteś pewien, jak dodać niestandardowy typ postu, mam post samouczka na temat tworzenia niestandardowych typów postów i taksonomii.
W moim szablonie zaczynam od wygenerowania filtrów. Pobiorę wszystkie niepuste terminy w mojej niestandardowej taksonomii [get_terms](https://developer.wordpress.org/reference/functions/get_terms/)()i dodam je do listy nieuporządkowanej.
Przed wygenerowaniem elementów dla każdego terminu w taksonomii upewnię się, że zrobię jeden element dla „Wszystkich” (linia #6). Aby filtrowanie FilterizR zadziałało musimy dostarczyć atrybut danych „ data-filter” do każdego elementu jednoznacznie oznaczają unikalną wartość filtrowania, w naszym przypadku slug terminu (możesz użyć identyfikatora terminu lub czegoś innego, jeśli chcesz).Oznacza to, że muszę dodać slug terminu jako atrybuty danych również do postów (patrz dalej), więc FilterizR może wiedzieć, które posty należą do którego filtra.
Z powyższym kodem powinieneś otrzymać listę z „Wszystko”, po której następują wszystkie niepuste terminy. Świetny!
Teraz tuż pod tym zacznę renderować posty.
Renderowanie postów
Podczas renderowania postów musisz pamiętać o dwóch rzeczach. Jednym z nich jest zawinięcie wszystkich postów do kontenera, któremu podam nazwę klasy filter-container. Ta klasa jest tym, czego potrzebujemy za pomocą JavaScript, aby FilterizR działał. Po drugie, każdy element musi mieć atrybut danych „ data-category“, który zawiera wszystkie terminy oddzielone przecinkami. Wartości tutaj muszą odpowiadać wartościom wygenerowanym w data-filteratrybucie „ ” filtrów.
Wysyłam zapytania do wszystkich postów z niestandardowego typu postów [WP_Query](https://developer.wordpress.org/reference/classes/wp_query/)i zapętlam je. To, co wyświetlasz w poście, zależy wyłącznie od Ciebie, ale poniższy przykład renderuje wyróżniony obraz, tytuł posta i pojedynczą niestandardową meta postu dla tytułu stanowiska. Wszystkie zawinięte wewnątrz linki, które trafiają do jednego pracownika.
Zapytanie w wierszu #2-7zapewnia pobranie wszystkich opublikowanych postów pracowników typu post, uporządkowanych alfabetycznie. Przed renderowaniem opakowania divdla każdego posta, w linii #13, [wp_get_object_terms](https://developer.wordpress.org/reference/functions/wp_get_object_terms/)()pobieram wszystkie terminy przypisane do tego posta. Jako parametr proszę tylko o ślimaki warunków. Zwracana jest tablica dowolnych przypisanych fragmentów terminów. Następnie używam funkcji PHP, [implode](https://www.php.net/manual/en/function.implode.php)()aby utworzyć ciąg znaków ze wszystkich elementów tablicy oddzielonych przecinkami. Jest to powtarzane jako wymagany data-categoryatrybut do katalogu głównego div– co sprawia, że filtry działają.
Jeśli chodzi o treść każdego posta, wyjście jest dość standardowe. Polecany obraz posta generujemy przy użyciu niestandardowego rozmiaru obrazu („ employees-thumb“), tytułu posta i wartości pojedynczej niestandardowej meta postu (dla tytułu stanowiska). Wszystko jest opakowane w link, który prowadzi do pojedynczego widoku dla tego pracownika. Dodałem również kilka klas i wrapperów, aby ułatwić kierowanie za pomocą CSS. Wynik dla każdego elementu zależy oczywiście całkowicie od Ciebie.
W tym momencie renderowanie PHP powinno być kompletne. Możesz stylizować i ładnie wyglądać, ale nie zawracaj sobie głowy stylizacją kolumn. FilterizR wygeneruje dla Ciebie kolumny (flexbox). Następnym krokiem jest inicjalizacja skryptu filtrującego!
Inicjowanie skryptu filtrującego
Ostatnia część to edycja filtering-main.jsskryptu. Musimy po prostu powiedzieć FilterizR, aby zainicjował filtrowanie na naszej renderowanej treści. Należy jednak pamiętać o kilku rzeczach:
FilterizR upewni się, że opakowanie wszystkich postów jest automatycznie dopasowywane do widoku. Na przykład, jeśli aktywny filtr wyświetla posty w jednym wierszu, a klikniemy inny filtr, który ma cztery wiersze, kontener przeskaluje się automatycznie do odpowiedniej wysokości. W ten sposób upewniając się, że wszelkie treści, które pojawiają się później, nie zostaną ukryte. Ale aby ta automatyczna zmiana rozmiaru działała, wszystkie obrazy muszą być najpierw załadowane. W niektórych przypadkach skrypt może zostać załadowany i uruchomiony przed zakończeniem ładowania każdego obrazu, co powoduje automatyczne zwijanie kontenera do wysokości 0. To nie jest dobre. Musimy więc umieścić kod inicjujący w funkcji, w której wiemy, że obrazy są ładowane. Dla waniliowego Javascriptu jest to window.onload. W przypadku jQuery użyjesz $(window).load().
Po drugie, chcemy się upewnić, że nasz skrypt inicjalizuje FilterizR tylko wtedy, gdy rzeczywiście istnieje kontener, który można filtrować. Jeśli zainicjujemy FilterizR, a bieżąca strona nie ma wymaganej klasy wrappera, spowoduje to błąd JavaScript. Możemy to rozwiązać, sprawdzając najpierw, czy klasa kontenera istnieje. W waniliowym JavaScript możesz użyć document.getElementById()lub document.getElementsByClassName(). Zobacz przykład poniżej. W przypadku jQuery użyłbyś jQuery('<selector>').lengthdo sprawdzenia tego.
Sposobem na zainicjowanie FilterizR przez waniliowy JavaScript jest utworzenie nowej instancji Filterizr, dostarczając selektor kontenera jako pierwszy parametr i opcjonalnie obiekt ustawień jako drugi parametr. Oto przykład najbardziej podstawowego:
Inicjalizacja następuje w linii #4. Podajemy nazwę klasy do kontenera, który otacza nasze posty z kropką z przodu, oznaczającą selektor klasy. Z powyższym kodem FilterizR powinien teraz przejąć Twoje posty i umieścić je w kolumnach. Ponieważ użyliśmy odpowiednich atrybutów danych, filtry również powinny działać automatycznie!
Dostosowywanie opcji FilterizR
Mam tylko kilka końcowych wskazówek, jak zoptymalizować FilterizR, co możemy zrobić, dostarczając obiekt ustawień. Polecam przyjrzeć się możliwym opcjom FilterizR, aby zobaczyć, co możesz zrobić. Możesz kontrolować szybkość animacji, typ animacji i nie tylko!
Aby kolumny działały optymalnie w responsywnych rozmiarach, odkryłem, że ustawienie layout„ sameWidth” sprawia, że FilterizR działa lepiej z postami o różnej wysokości. Daje to styl „murarski”. W naszym przykładzie wysyłamy echo dodatkowej treści po obrazie, co może skutkować różnymi wysokościami (nazwy mogą być dłuższe, wymuszając wiele wierszy). Może to spowodować dziwne zachowanie.
Domyślnie każdy element nie ma odstępu między sobą. Jeśli chcesz mieć trochę odstępów między poszczególnymi elementami, możesz ustawić rozmiar odstępu w pikselach dla gutterPixels. W powyższym przykładzie użyłem 10px jako rozmiaru przerwy. PS: Rozmiar szczeliny jest również dodawany do pojemnika do pakowania. To może nie zawsze być to, czego chcesz. Aby to zmienić, po prostu dodałem stylizację padding: 0!importantdo .filter-container.
Oto dostosowany kod do inicjalizacji FilterizR z moimi opcjami:
Przy niewielkiej stylizacji wynik wygląda mniej więcej tak:
Pamiętaj, że filtrowanie to tylko jedna rzecz, którą może zrobić FilterizR! Sprawdź przykłady w sekcji „Samouczki” na ich stronie głównej. Możesz dodać elementy sterujące do sortowania, mieszania i/lub wyszukiwania. Masz też więcej opcji kontrolowania układu.