Implementazione di un filtro animato dei post per categoria

Hai mai desiderato fare una bella presentazione in colonna di post con filtri di categoria sopra che mescolano e filtrano i post con una bella animazione? Allora questo è il tutorial che fa per te.

Quello che faremo in questo tutorial è un elenco di tutti i post (preferibilmente all’interno di un tipo di post personalizzato come i dipendenti) ben in colonne e con le loro immagini in primo piano. Sopra i post generiamo filtri per la tassonomia connessa. Facendo clic su un filtro, i post verranno mischiati con una bella animazione e nascosti i post che non sono presenti nella categoria scelta.

Per fare questo utilizziamo una libreria Javascript per il filtraggio. Ce ne sono molti disponibili – alcuni richiedono jQuery e altri no – alcuni sono open source e altri richiedono una licenza commerciale. I più popolari sono MixItUp e Isotope. Tuttavia, entrambi richiedono una licenza commerciale. Per il mio progetto avevo bisogno di una libreria che facesse il trucco pur essendo completamente gratuita da usare in progetti commerciali. Ne ho provati diversi e il migliore che ho trovato finora è FilterizR. Iniziamo questo tutorial accedendo a questa libreria!

La libreria FilterizR

Dai un’occhiata alla demo nella home page di FilterizR per vedere se questa libreria fa per te. Puoi persino giocare con le opzioni in tempo reale. Questa libreria supporta il filtraggio (che è ciò che faremo in questo tutorial), la mescolanza (ordine casuale), la ricerca e l’ordinamento. È reattivo e ottimizzato per i dispositivi mobili. Finora, da quanto ho sperimentato, gestisce molto bene anche l’impostazione dell’altezza automatica sul contenitore su ogni elemento.

FilterizR offre tre diversi tipi di utilizzo:

• Vanilla Javascript: espone FilterizR come una funzione globale per richiamare Javascript standard.
• jQuery: consente di utilizzarlo jQueryper inizializzare e configurarlo.
• Libreria Javascript pura/npm: da utilizzare nelle importazioni ES6 (ad es. se si scrivono blocchi personalizzati per Gutenberg).

La seconda opzione è la più semplice per le persone che non hanno familiarità con Javascript. La maggior parte delle persone inizia con jQuery. Ma tieni presente che jQuery è una libreria grande e pesante da caricare nel tuo progetto e, se può essere evitata, dovresti. In questo tutorial useremo il metodo Javascript vanilla. Se lo stai implementando in un blocco Gutenberg personalizzato, dovresti considerare di utilizzare la terza opzione. Quindi puoi semplicemente installarlo tramite npme importare la libreria nel tuo codice di blocco.

Download e configurazione dei file

Proviamo il file appropriato! Vai a Github di FilterizR per scaricare. A meno che tu non stia installando tramite npm (terza opzione), puoi andare nella cartella ‘ dist‘ e scaricare la libreria ridotta di cui hai bisogno. Poiché lo userò con Javascript vanilla in questo tutorial, scaricherò il vanilla.filterizr.min.jsfile e lo metterò nella mia theme-folder/assets/js/cartella. Dove posizionare la libreria dipende ovviamente completamente da te, basta regolare il percorso più in basso.

Avremo anche bisogno di un altro file Javascript per inizializzare e decidere le opzioni. Creerò un file theme-folder/assets/js/filtering-main.js. Torneremo su questo file più avanti. Questo ovviamente non è necessario se lo stai implementando in un blocco Gutenberg personalizzato.

Per fare in modo che WordPress includa gli script, dobbiamo accodare entrambi gli script wp_enqueue_scriptsnell’hook. Questo può essere aggiunto da qualche parte nel tuo tema functions.php. Così:

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

Regola i nomi dei file e/o i percorsi per adattarli al tuo progetto/tema. Il codice sopra accoda lo script vanilla filterizR e, in secondo luogo, lo filtering-main.jsscript che ha una dipendenza dallo script filterizR. Ciò assicura che lo script di inizializzazione venga caricato dopo la libreria necessaria.

Rendering del modello

Il prossimo passo è avere un posto in cui vogliamo rendere questo elenco di post. Questo dipende interamente da te. Per semplificare in questo tutorial userò un modello di pagina nel mio tema. Se lo stai implementando in un blocco Gutenberg, puoi renderizzarlo con PHP (per blocchi dinamici) o con Javascript nel savemetodo del blocco. La parte importante è rendere correttamente l’HTML che circonda i post e i filtri.

Rendering dei filtri

Creerò un modello di pagina template-filters.phpnella mia cartella del tema e aggiungerò il mio codice PHP per visualizzare l’output lì.

In questo tutorial assumiamo di voler eseguire il rendering dei post all’interno di un tipo di post personalizzato. Puoi farlo con post e categorie standard, ma i post di solito diventeranno parecchi, il che non è fattibile da usare per questo tipo di visualizzazione. Si supponga ad esempio un tipo di post personalizzato per i dipendenti con una tassonomia personalizzata connessa per il reparto. Non mostrerò come aggiungere il tipo di post personalizzato in questo tutorial, tieni solo a mente che il nome del tipo di post è employeese il nome della tassonomia personalizzata è department. Cambia i nomi per il tipo di post e la tassonomia. Se non sei sicuro di come aggiungere un tipo di post personalizzato, ho un post tutorial su come creare tipi di post personalizzati e tassonomie.

Nel mio template inizio generando i filtri. Recupererò tutti i termini non vuoti nella mia tassonomia personalizzata utilizzandoli [get_terms](https://developer.wordpress.org/reference/functions/get_terms/)()e li aggiungerò a un elenco non ordinato.

Prima di generare gli elementi per ogni termine nella tassonomia, mi assicurerò di creare un elemento per "Tutto" (riga #6). Per far funzionare il filtro FilterizR dobbiamo fornire l’attributo dati " data-filter" a ciascun elemento del filtro. Il contenuto dovrebbe significano in modo univoco un valore di filtro univoco, nel nostro caso lo slug del termine (puoi usare l’ID del termine o qualcos’altro se vuoi).Ciò significa che devo aggiungere anche gli slug del termine come attributi di dati ai post (vedi più avanti), quindi FilterizR può sapere quali post appartengono a quale filtro.

Con il codice sopra dovresti ottenere un elenco con "Tutto" seguito da tutti i termini non vuoti. Grande!

Ora, appena sotto questo, inizierò a rendere i post.

Rendering dei post

Durante il rendering dei post è necessario ricordare due cose. Uno è racchiudere tutti i post all’interno di un contenitore, a cui darò il nome della classe filter-container. Questa classe è ciò di cui abbiamo bisogno con Javascript per far funzionare FilterizR. E in secondo luogo, ogni elemento deve avere un attributo di dati " data-category" che elenca tutti i termini separati da virgola. I valori qui devono corrispondere ai valori che hai generato nell’attributo ” " dei filtri data-filter.

Interrogo tutti i post dal tipo di post personalizzato con [WP_Query](https://developer.wordpress.org/reference/classes/wp_query/)e scorro i post. Ciò che visualizzi per post dipende completamente da te, ma l’esempio seguente mostra l’immagine in primo piano, il titolo del post e un singolo meta post personalizzato per il titolo del lavoro. Il tutto racchiuso in link che vanno al singolo dipendente.

La query alla riga #2-7assicura che recuperi tutti i post pubblicati del tipo di post dipendenti, in ordine alfabetico. Prima di eseguire il rendering del wrapping divper ogni post, in line #13, utilizzo [wp_get_object_terms](https://developer.wordpress.org/reference/functions/wp_get_object_terms/)()tutti i termini assegnati a questo post. Come parametro chiedo solo gli slug dei termini. Il ritorno è un array di qualsiasi termine slug assegnato. Quindi uso la funzione PHP [implode](https://www.php.net/manual/en/function.implode.php)()per creare una stringa da tutti gli elementi nell’array separati da virgola. Questo viene ripreso come data-categoryattributo richiesto alla radice div, il che fa funzionare i filtri.

Per quanto riguarda il contenuto di ogni post, l’output è piuttosto standard. Generiamo l’immagine in primo piano del post utilizzando una dimensione dell’immagine personalizzata (‘ employees-thumb‘), il titolo del post e il valore di un singolo meta post personalizzato (per il titolo del lavoro). Tutto è racchiuso in un collegamento che va alla vista singola per quel dipendente. Ho anche aggiunto alcune classi e wrapper per semplificare il targeting con CSS. L’output per ogni elemento dipende ovviamente completamente da te.

A questo punto il rendering PHP dovrebbe essere completo. Sei il benvenuto per lo stile e renderlo bello, ma non preoccuparti delle colonne di stile. FilterizR genererà colonne (flexbox) per te. Il passaggio successivo è in realtà l’inizializzazione dello script di filtraggio!

Inizializzazione dello script di filtro

L’ultima parte è la modifica dello filtering-main.jsscript. Dobbiamo semplicemente dire a FilterizR di inizializzare il filtraggio sul nostro contenuto renderizzato. Ci sono alcune cose da tenere a mente qui però:

FilterizR si assicurerà che il contenitore di avvolgimento di tutti i post venga ridimensionato automaticamente per adattarsi alla vista. Ad esempio, se il filtro attivo visualizza i post in una riga e si fa clic su un altro filtro con quattro righe, il contenitore si ridimensionerà automaticamente all’altezza corretta. Assicurandoti così che qualsiasi contenuto che viene dopo non si nasconda dietro. Ma affinché questo ridimensionamento automatico funzioni, tutte le immagini devono essere state prima caricate. In alcuni casi lo script può essere caricato ed eseguito prima che ogni immagine sia stata caricata, e questo fa sì che il contenitore si comprima automaticamente a un’altezza di 0. Questo non va bene. Quindi dobbiamo posizionare il codice di inizializzazione all’interno di una funzione in cui sappiamo che le immagini sono state caricate. Per vanilla Javascript questo è window.onload. Per jQuery useresti $(window).load().

In secondo luogo, vogliamo assicurarci che il nostro script inizializzi FilterizR solo se è effettivamente presente un contenitore filtrabile. Se inizializziamo FilterizR e la pagina corrente non ha la classe wrapper necessaria, risulterà in un errore Javascript. Possiamo risolverlo controllando se la classe container esiste prima. In vanilla Javascript puoi usare document.getElementById()o document.getElementsByClassName(). Vedi esempio sotto. Per jQuery useresti jQuery('<selector>').lengthper verificarlo.

Il modo per inizializzare FilterizR da vanilla Javascript è creare una nuova istanza di Filterizr, fornendo il selettore del contenitore come primo parametro e facoltativamente un oggetto delle impostazioni come secondo parametro. Questo è un esempio dei più elementari:

L’inizializzazione avviene alla riga #4. Forniamo il nome della classe al contenitore che avvolge i nostri post con un punto davanti, a significare un selettore di classe. Con il codice sopra, FilterizR dovrebbe ora prendere in consegna i tuoi post e posizionarli nelle colonne. Poiché abbiamo utilizzato gli attributi dei dati appropriati, anche i filtri dovrebbero funzionare automaticamente!

Personalizzazione delle opzioni di FilterizR

Ho solo alcuni suggerimenti finali per ottimizzare FilterizR, cosa che possiamo fare fornendo un oggetto impostazioni. Ti consiglio di dare un’occhiata alle possibili opzioni per FilterizR per vedere cosa puoi fare. Puoi controllare la velocità dell’animazione, il tipo di animazione e altro!

Per fare in modo che le colonne funzionino in modo ottimale con dimensioni reattive, ho scoperto che l’impostazione layoutsu ‘ sameWidth‘ fa funzionare meglio FilterizR con i post che hanno altezze diverse. Ciò si traduce in uno stile "muratura". Nel nostro esempio facciamo eco al contenuto aggiuntivo dopo l’immagine e questo può comportare altezze diverse (i nomi possono essere più lunghi costringendolo a più righe). Ciò può comportare un comportamento strano.

Per impostazione predefinita, ogni elemento non ha spazio tra di loro. Se desideri una spaziatura tra ogni elemento, puoi impostare la dimensione dello spazio in px per gutterPixels. Nell’esempio sopra ho usato 10px come dimensione dello spazio vuoto. PS: la dimensione dello spazio vuoto viene aggiunta anche al contenitore di avvolgimento. Questo potrebbe non essere sempre quello che vuoi. Per ignorare questo ho semplicemente aggiunto lo stile padding: 0!importantsu .filter-container.

Ecco il codice modificato per inizializzare FilterizR con le mie opzioni:

Con uno stile minore il risultato è qualcosa del genere:

Tieni presente che il filtraggio è solo una cosa che FilterizR può fare! Dai un’occhiata agli esempi in "Tutorial" nella loro home page. Puoi aggiungere controlli per ordinare, mescolare e/o cercare. E hai anche più opzioni per controllare il layout.