Implementera en animerad filtrering av inlägg efter kategori

Har du någonsin velat göra en snygg spaltpresentation av inlägg med kategorifilter ovan som blandar och filtrerar inläggen med en snygg animation? Då är det här handledningen för dig.

Vad vi kommer att göra i den här handledningen är en lista över alla inlägg (helst inom en anpassad inläggstyp som anställda) snyggt i kolumner och med deras utvalda bilder. Ovanför inläggen genererar vi filter för den anslutna taxonomin. När du klickar på ett filter kommer inläggen med en trevlig animation att blanda och dölja inlägg som inte finns i den valda kategorin.

För att göra detta använder vi oss av ett Javascript-bibliotek för filtreringen. Det finns många tillgängliga – vissa kräver jQuery och andra inte – vissa är öppen källkod och vissa kräver kommersiell licens. De mest populära är MixItUp och Isotope. Men båda dessa kräver en kommersiell licens. För mitt projekt behövde jag ett bibliotek som gör susen samtidigt som det är helt gratis att använda i kommersiella projekt. Jag har provat flera och den bästa jag hittat hittills är FilterizR. Låt oss börja den här handledningen genom att ta tag i det här biblioteket!

FilterizR-biblioteket

Kolla in demon på FilterizR hemsida för att se om det här biblioteket är något för dig. Du kan till och med spela med alternativen i realtid. Det här biblioteket stöder filtrering (vilket är vad vi kommer att göra i den här handledningen), blandning (randomiserad ordning), sökning och sortering. Den är lyhörd och optimerad för mobila enheter. Så långt från vad jag har upplevt klarar den också av att ställa in den automatiska höjden på behållaren på varje föremål väldigt bra.

FilterizR erbjuder tre olika typer av användning:

• Vanilla Javascript: Exponerar FilterizR som en global funktion för att anropa standard Javascript.
• jQuery: Låter dig använda jQueryför att initiera och ställa in den.
• Rent Javascript-bibliotek/npm: För användning vid ES6-import (t.ex. om du skriver anpassade block för Gutenberg).

Det andra alternativet är det enklaste för personer som inte är bekanta med Javascript. De flesta börjar med jQuery. Men tänk på att jQuery är ett stort och tungt bibliotek att ladda i ditt projekt, och om det kan undvikas bör du göra det. I den här handledningen kommer vi att använda vanilla Javascript-metoden. Om du implementerar detta i ett anpassat Gutenberg-block bör du överväga att använda det tredje alternativet. Sedan kan du helt enkelt installera den via npmoch importera biblioteket i din blockkod.

Ladda ner och ställa in filerna

Låt oss få tag på den lämpliga filen! Gå till FilterizR:s Github för att ladda ner. Om du inte installerar via npm (tredje alternativet), kan du gå in i mappen ‘ dist‘ och ladda ner det minifierade bibliotek du behöver. Eftersom jag kommer att använda den med vanilla Javascript i den här handledningen laddar jag ner vanilla.filterizr.min.jsfilen och placerar den i min theme-folder/assets/js/mapp. Var du placerar biblioteket är såklart helt upp till dig, det är bara att justera vägen längre ner.

Vi kommer också att behöva en annan Javascript-fil för att initiera och bestämma alternativen. Jag skapar en fil theme-folder/assets/js/filtering-main.js. Vi återkommer till den här filen senare. Detta är naturligtvis inte nödvändigt om du implementerar detta i ett anpassat Gutenberg-block.

För att få WordPress att inkludera skripten måste vi ställa båda skripten i kö i wp_enqueue_scriptskroken. Detta kan läggas till någonstans i ditt temas functions.php. Såhär:

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);
});

Justera filnamnen och/eller sökvägarna så att de passar ditt projekt/tema. Ovanstående kod ställer vanilla filterizR-skriptet i kö, och för det andra filtering-main.jsskriptet som är beroende av filterizR-skriptet. Detta säkerställer att initialiseringsskriptet laddas efter det nödvändiga biblioteket.

Rendering av mallen

Nästa steg är att ha en plats där vi vill rendera den här listan med inlägg. Detta är helt upp till dig. För att hålla det enkelt i denna handledning använder jag en sidmall i mitt tema. Om du implementerar detta i ett Gutenberg-block kan du rendera det antingen med PHP (för dynamiska block) eller med Javascript i blockets savemetod. Den viktiga delen är att rendera HTML-koden som omger inläggen och filtren korrekt.

Rendering av filtren

Jag skapar en sidmall template-filters.phpi min temamapp och lägger till min PHP-kod för att återge resultatet där.

I den här handledningen antar vi att vi vill rendera inlägg inom en anpassad inläggstyp. Du kan göra detta med vanliga inlägg och kategorier, men inlägg brukar bli ganska många – vilket inte är möjligt att använda för den här typen av visning. Antag till exempel en anpassad posttyp för anställda med en ansluten anpassad taxonomi för avdelning. Jag kommer inte att visa hur man lägger till den anpassade inläggstypen i denna handledning, tänk bara på att inläggstypens namn är employeesoch det anpassade taxonominamnet är department. Byt ut namnen för din inläggstyp och klassificering. Om du är osäker på hur man lägger till en anpassad inläggstyp har jag ett handledningsinlägg om hur man skapar anpassade inläggstyper och taxonomier.

I min mall börjar jag med att generera filtren. Jag hämtar alla icke-tomma termer i min anpassade taxonomi med [get_terms](https://developer.wordpress.org/reference/functions/get_terms/)()och lägger till dem i en oordnad lista.

Innan jag genererar elementen för varje term i taxonomin ska jag se till att skapa ett element för "Alla" (rad #6). För att FilterizR-filtreringen ska fungera måste vi tillhandahålla dataattributet " data-filter" till varje filterelement. Innehållet bör unikt betecknar ett unikt filtreringsvärde, i vårt fall termens slug (du kan använda term-ID eller något annat om du vill). Det betyder att jag måste lägga till termens slugs som dataattribut till inläggen också (se senare) så FilterizR kan veta vilka inlägg som tillhör vilket filter.

Med ovanstående kod bör du få en lista med "Alla" följt av alla icke-tomma termer. Bra!

Nu, precis nedanför detta ska jag börja rendera inläggen.

Rendering av inläggen

När du renderar inläggen måste du komma ihåg två saker. En är att linda in alla inlägg i en container, som jag ska ge klassnamnet filter-container. Den här klassen är vad vi behöver rikta in oss på med Javascript för att FilterizR ska fungera. Och för det andra måste varje artikel ha ett dataattribut " data-category" som listar alla termer separerade med kommatecken. Värdena här måste motsvara de värden du genererade i filtrens " data-filter"-attribut.

Jag frågar alla inlägg från den anpassade posttypen med [WP_Query](https://developer.wordpress.org/reference/classes/wp_query/)och går igenom inläggen. Vad du visar per inlägg är helt upp till dig, men exemplet nedan återger den utvalda bilden, inläggstiteln och en enda anpassad inläggsmeta för jobbtitel. Alla inslagna länkar som går till den enskilde anställde.

Frågan på raden #2-7ser till att jag hämtar alla publicerade inlägg av posttyp anställda, ordnade i alfabetisk ordning. Innan jag återger omslutningen divför varje inlägg, på rad #13, använder jag [wp_get_object_terms](https://developer.wordpress.org/reference/functions/wp_get_object_terms/)()för att hämta alla termer som tilldelats detta inlägg. Som parameter ber jag om endast termernas snäckor. Returen är en uppsättning av alla tilldelade termsniglar. Jag använder sedan PHP-funktionen [implode](https://www.php.net/manual/en/function.implode.php)()för att skapa en sträng från alla element i arrayen separerade med kommatecken. Detta återges som det nödvändiga data-categoryattributet till roten div– vilket gör att filtren fungerar.

När det gäller innehållet för varje inlägg är resultatet ganska standard. Vi genererar inläggets utvalda bild med hjälp av en anpassad bildstorlek (‘ employees-thumb‘), inläggets titel och värdet av en enskild anpassad inläggsmeta (för jobbtitel). Allt är insvept i en länk som går till den enda vyn för den anställde. Jag har också lagt till några klasser och omslag för att göra det lättare att rikta in sig på CSS. Utgången för varje element är naturligtvis helt upp till dig.

Vid denna tidpunkt bör PHP-renderingen vara komplett. Du får gärna styla och få det att se snyggt ut, men bry dig inte om att styla kolumner. FilterizR genererar kolumner (flexbox) åt dig. Nästa steg är faktiskt att initiera filtreringsskriptet!

Initierar filterskriptet

Den sista delen är att redigera filtering-main.jsmanuset. Vi behöver helt enkelt tala om för FilterizR att initiera filtrering på vårt renderade innehåll. Det finns dock några saker att tänka på här:

FilterizR kommer att se till att omslagsbehållaren för alla inlägg har automatisk storlek för att passa vyn. Till exempel om det aktiva filtret visar inlägg på en rad och vi klickar på ett annat filter som har fyra rader, kommer behållaren att automatiskt skala till rätt höjd. På så sätt se till att allt innehåll som kommer efter inte gömmer sig bakom. Men för att denna automatiska storleksändring ska fungera måste alla bilder ha laddats först. I vissa fall kan skriptet laddas och köras innan varje bild har laddats klart, och detta gör att behållaren automatiskt kollapsar till en höjd av 0. Detta är inte bra. Så vi måste placera initialiseringskoden i en funktion där vi vet att bilder har laddats. För vanilla Javascript är detta window.onload. För jQuery skulle du använda $(window).load().

För det andra vill vi se till att vårt skript bara initierar FilterizR om det verkligen finns en filtrerbar behållare. Om vi ​​initierar FilterizR och den aktuella sidan inte har den nödvändiga wrapperklassen kommer det att resultera i ett Javascript-fel. Vi kan lösa detta genom att kontrollera om containerklassen finns först. I vanilla Javascript kan du använda document.getElementById()eller document.getElementsByClassName(). Se exempel nedan. För jQuery skulle du använda jQuery('<selector>').lengthför att kontrollera detta.

Sättet att initiera FilterizR av vanilla Javascript är att skapa en ny instans av Filterizr, som tillhandahåller behållarväljaren som första parameter och eventuellt ett objekt med inställningar som andra parameter. Detta är ett exempel på det mest grundläggande:

Initieringen sker vid raden #4. Vi tillhandahåller klassnamnet till behållaren som omsluter våra inlägg med en prick framför, vilket betyder en klassväljare. Med ovanstående kod ska FilterizR nu ta över dina inlägg och placera dem i kolumner. Eftersom vi använde lämpliga dataattribut borde filtren också fungera automatiskt!

Anpassa FilterizR:s alternativ

Jag har bara några sista tips för att optimera FilterizR, vilket vi kan göra genom att tillhandahålla ett inställningsobjekt. Jag rekommenderar att du tar en titt på de möjliga alternativen för FilterizR för att se vad du kan göra. Du kan styra animeringshastigheten, animationstypen och mer!

För att få kolumnerna att fungera optimalt i responsiva storlekar har jag upptäckt att inställningen layouttill ‘ sameWidth‘ gör att FilterizR fungerar bättre med inlägg som har olika höjder. Detta resulterar i en "Masonry"-stil. I vårt exempel ekar vi ut ytterligare innehåll efter bilden, och detta kan resultera i olika höjder (namnen kan vara längre och tvingar in den i flera rader). Detta kan resultera i något konstigt beteende.

Som standard får varje objekt inget mellanslag mellan varandra. Om du vill ha lite avstånd mellan varje objekt kan du ställa in gapstorleken i px för gutterPixels. I exemplet ovan har jag använt 10px som gapstorlek. PS: Spaltstorleken läggs också till förpackningsbehållaren. Detta kanske inte alltid är vad du vill. För att åsidosätta detta har jag helt enkelt lagt till styling padding: 0!importantpå .filter-container.

Här är den justerade koden för att initiera FilterizR med mina alternativ:

Med lite mindre styling blir resultatet ungefär så här:

Tänk på att filtrering bara är en sak FilterizR kan göra! Kolla in exemplen under "Tutorials" på deras hemsida. Du kan lägga till kontroller för att sortera, blanda och/eller söka. Och du har fler alternativ för att styra layouten också.