Implementieren einer animierten Filterung von Beiträgen nach Kategorie

Wollten Sie schon immer eine schöne Spaltenpräsentation von Posts mit Kategoriefiltern darüber erstellen, die die Posts mit einer netten Animation mischt und filtert? Dann ist dies das Tutorial für Sie.

Was wir in diesem Tutorial erstellen werden, ist eine Liste aller Beiträge (vorzugsweise innerhalb eines benutzerdefinierten Beitragstyps wie Mitarbeiter) in Spalten und mit ihren vorgestellten Bildern. Oberhalb der Beiträge generieren wir Filter für die verbundene Taxonomie. Wenn Sie auf einen Filter klicken, werden die Beiträge mit einer netten Animation gemischt und Beiträge ausgeblendet, die nicht in der ausgewählten Kategorie vorhanden sind.

Dazu verwenden wir eine Javascript-Bibliothek für die Filterung. Es sind viele verfügbar – einige erfordern jQuery und andere nicht – einige sind Open Source und einige erfordern eine kommerzielle Lizenz. Die beliebtesten sind MixItUp und Isotope. Beide erfordern jedoch eine kommerzielle Lizenz. Für mein Projekt brauchte ich eine Bibliothek, die den Zweck erfüllt und gleichzeitig völlig kostenlos in kommerziellen Projekten verwendet werden kann. Ich habe mehrere ausprobiert und das beste, das ich bisher gefunden habe, ist FilterizR. Beginnen wir dieses Tutorial, indem wir uns diese Bibliothek besorgen!

Die FilterizR-Bibliothek

Schauen Sie sich die Demo auf der FilterizR-Homepage an, um zu sehen, ob diese Bibliothek für Sie geeignet ist. Sie können sogar in Echtzeit mit den Optionen spielen. Diese Bibliothek unterstützt das Filtern (was wir in diesem Tutorial tun), das Mischen (Randomisierungsreihenfolge), das Suchen und Sortieren. Es ist responsiv und für Mobilgeräte optimiert. Soweit ich es bisher erlebt habe, kann es auch die automatische Höhe des Containers für jedes Element sehr gut einstellen.

FilterizR bietet drei verschiedene Nutzungsarten:

• Vanilla Javascript: Stellt FilterizR als globale Funktion bereit, die in Standard-JavaScript aufgerufen werden kann.
• jQuery: Ermöglicht die Verwendung jQueryzum Initialisieren und Einrichten.
• Reine Javascript-Bibliothek/npm: Zur Verwendung in ES6-Importen (z. B. wenn Sie benutzerdefinierte Blöcke für Gutenberg schreiben).

Die zweite Option ist die einfachste für Leute, die mit Javascript nicht vertraut sind. Die meisten Leute beginnen mit jQuery. Aber denken Sie daran, dass jQuery eine große und schwere Bibliothek ist, die Sie in Ihr Projekt laden müssen, und wenn es vermieden werden kann, sollten Sie es tun. In diesem Tutorial verwenden wir die Vanilla-JavaScript-Methode. Wenn Sie dies in einem benutzerdefinierten Gutenberg-Block implementieren, sollten Sie die dritte Option in Betracht ziehen. Dann können Sie es einfach über installieren npmund die Bibliothek in Ihren Blockcode importieren.

Herunterladen und Einrichten der Dateien

Besorgen wir uns die passende Datei! Gehen Sie zum Herunterladen auf Github von FilterizR. Sofern Sie nicht über npm installieren (dritte Option), können Sie in den Ordner „ dist” gehen und die benötigte minimierte Bibliothek herunterladen. Da ich es in diesem Tutorial mit Vanilla Javascript verwenden werde, lade ich die vanilla.filterizr.min.jsDatei herunter und lege sie in meinen theme-folder/assets/js/Ordner. Wo Sie die Bibliothek platzieren, ist natürlich ganz Ihnen überlassen, passen Sie einfach den Pfad weiter unten an.

Wir benötigen außerdem eine weitere Javascript-Datei, um die Optionen zu initialisieren und festzulegen. Ich erstelle eine Datei theme-folder/assets/js/filtering-main.js. Wir werden später auf diese Datei zurückkommen. Dies ist natürlich nicht notwendig, wenn Sie dies in einem benutzerdefinierten Gutenberg-Block implementieren.

Damit WordPress die Skripte enthält, müssen wir beide Skripte in den wp_enqueue_scriptsHook einreihen. Dies kann irgendwo in Ihrem Design hinzugefügt werden functions.php. So:

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

Passen Sie die Dateinamen und/oder Pfade an Ihr Projekt/Thema an. Der obige Code stellt das Vanilla-Skript filterizR und zweitens das filtering-main.jsSkript, das eine Abhängigkeit zum filterizR-Skript hat, in die Warteschlange. Dadurch wird sichergestellt, dass das Initialisierungsskript nach der erforderlichen Bibliothek geladen wird.

Rendern der Vorlage

Der nächste Schritt besteht darin, einen Ort zu haben, an dem wir diese Liste von Beiträgen rendern möchten. Dies liegt ganz bei Ihnen. Um es in diesem Tutorial einfach zu halten, verwende ich eine Seitenvorlage in meinem Design. Wenn Sie dies in einem Gutenberg-Block implementieren, können Sie es entweder mit PHP (für dynamische Blöcke) oder mit Javascript in der saveMethode des Blocks rendern. Der wichtige Teil besteht darin, den HTML-Code rund um die Posts und Filter korrekt wiederzugeben.

Rendern der Filter

Ich erstelle eine Seitenvorlage template-filters.phpin meinem Themenordner und füge meinen PHP-Code hinzu, um die Ausgabe dort zu rendern.

In diesem Tutorial gehen wir davon aus, dass wir Beiträge innerhalb eines benutzerdefinierten Beitragstyps rendern möchten. Sie können dies mit Standard-Posts und -Kategorien tun, aber Posts werden normalerweise ziemlich viele – was für diese Art der Anzeige nicht praktikabel ist. Nehmen wir zum Beispiel einen benutzerdefinierten Beitragstyp für Mitarbeiter mit einer verbundenen benutzerdefinierten Taxonomie für die Abteilung an. Ich werde in diesem Tutorial nicht zeigen, wie der benutzerdefinierte Beitragstyp hinzugefügt wird. Denken Sie nur daran, dass der Name des Beitragstyps employeesund der Name der benutzerdefinierten Taxonomie department. Tauschen Sie die Namen für Ihren Beitragstyp und Ihre Taxonomie aus. Wenn Sie sich nicht sicher sind, wie Sie einen benutzerdefinierten Beitragstyp hinzufügen, habe ich einen Tutorial-Beitrag zum Erstellen benutzerdefinierter Beitragstypen und Taxonomien.

In meiner Vorlage beginne ich damit, die Filter zu generieren. Ich rufe alle nicht leeren Begriffe in meiner benutzerdefinierten Taxonomie mit [get_terms](https://developer.wordpress.org/reference/functions/get_terms/)()ab und füge sie einer ungeordneten Liste hinzu.

Bevor ich die Elemente für jeden Begriff in der Taxonomie generiere, stelle ich sicher, dass ich ein Element für „Alle” (Zeile) erstelle. Damit die FilterizR-Filterung funktioniert, müssen wir jedem Filterelement #6das Datenattribut „ ” zuweisen. Der Inhalt sollte data-filterkennzeichnen eindeutig einen eindeutigen Filterwert, in unserem Fall den Slug des Begriffs (Sie können die Begriffs-ID oder etwas anderes verwenden, wenn Sie möchten). Das bedeutet, dass ich die Slugs des Begriffs auch als Datenattribute zu den Posts hinzufügen muss (siehe später). FilterizR kann wissen, welche Beiträge zu welchem ​​Filter gehören.

Mit dem obigen Code sollten Sie eine Liste mit „All” gefolgt von allen nicht leeren Begriffen erhalten. Groß!

Jetzt, gleich darunter, fange ich an, die Posts zu rendern.

Rendern der Beiträge

Beim Rendern der Beiträge müssen Sie zwei Dinge beachten. Eine besteht darin, alle Posts in einen Container zu packen, dem ich den Klassennamen gebe filter-container. Auf diese Klasse müssen wir mit Javascript abzielen, damit FilterizR funktioniert. Und zweitens muss jedes Element ein Datenattribut „ data-category” haben, das alle Begriffe durch Komma getrennt auflistet. Die Werte hier müssen den Werten entsprechen, die Sie im data-filterAttribut „ ” des Filters generiert haben.

Ich frage alle Beiträge des benutzerdefinierten Beitragstyps mit ab [WP_Query](https://developer.wordpress.org/reference/classes/wp_query/)und durchlaufe die Beiträge. Was Sie pro Post anzeigen, liegt ganz bei Ihnen, aber das folgende Beispiel rendert das vorgestellte Bild, den Post-Titel und ein einzelnes benutzerdefiniertes Post-Meta für die Stellenbezeichnung. Alle umschlossenen Inside-Links, die zum einzelnen Mitarbeiter gehen.

Die Abfrage in Zeile #2-7sorgt dafür, dass ich alle veröffentlichten Beiträge des Beitragstyps Mitarbeiter abrufe, alphabetisch geordnet. Vor dem Rendern des Umbruchs divfür jeden Beitrag #13verwende ich in Zeile, [wp_get_object_terms](https://developer.wordpress.org/reference/functions/wp_get_object_terms/)()um alle diesem Beitrag zugewiesenen Begriffe abzurufen. Als Parameter frage ich nur nach den Slugs der Begriffe. Die Rückgabe ist ein Array aller zugewiesenen Term-Slugs. Ich verwende dann die PHP-Funktion [implode](https://www.php.net/manual/en/function.implode.php)(), um einen String aus allen Elementen im Array zu erstellen, die durch Komma getrennt sind. Dies wird als erforderliches data-categoryAttribut an den Stamm zurückgegeben div– wodurch die Filter funktionieren.

Was den Inhalt für jeden Beitrag betrifft, so ist die Ausgabe ziemlich standardisiert. Wir generieren das vorgestellte Bild des Beitrags unter Verwendung einer benutzerdefinierten Bildgröße (‘ employees-thumb‘), des Beitragstitels und des Werts eines einzelnen benutzerdefinierten Beitrags-Metas (für die Berufsbezeichnung). Alles ist in einen Link verpackt, der zur Einzelansicht für diesen Mitarbeiter führt. Ich habe auch einige Klassen und Wrapper hinzugefügt, um das Targeting mit CSS zu vereinfachen. Die Ausgabe für jedes Element liegt natürlich ganz bei Ihnen.

An dieser Stelle sollte das PHP-Rendering abgeschlossen sein. Sie können es gerne stylen und schön aussehen lassen, aber machen Sie sich nicht die Mühe, Spalten zu stylen. FilterizR generiert Spalten (Flexbox) für Sie. Der nächste Schritt ist die eigentliche Initialisierung des Filterskripts!

Initialisieren des Filterskripts

Der letzte Teil ist die Bearbeitung des filtering-main.jsSkripts. Wir müssen FilterizR lediglich anweisen, die Filterung unserer gerenderten Inhalte zu initialisieren. Hier gibt es aber ein paar Dinge zu beachten:

FilterizR stellt sicher, dass der Wrapping-Container aller Posts automatisch an die Ansicht angepasst wird. Wenn der aktive Filter beispielsweise Beiträge in einer Zeile anzeigt und wir auf einen anderen Filter mit vier Zeilen klicken, wird der Container automatisch auf die richtige Höhe skaliert. So stellen Sie sicher, dass nachfolgende Inhalte nicht dahinter verborgen werden. Aber damit diese automatische Größenanpassung funktioniert, müssen alle Bilder zuerst geladen worden sein. In einigen Fällen kann das Skript geladen und ausgeführt werden, bevor jedes Bild vollständig geladen ist, was dazu führt, dass der Container automatisch auf eine Höhe von 0 reduziert wird. Das ist nicht gut. Daher müssen wir den Initialisierungscode in eine Funktion einfügen, von der wir wissen, dass die Bilder fertig geladen sind. Für Vanille-Javascript ist dies window.onload. Für jQuery würdest du $(window).load().

Zweitens möchten wir sicherstellen, dass unser Skript FilterizR nur initialisiert, wenn tatsächlich ein filterbarer Container vorhanden ist. Wenn wir FilterizR initialisieren und die aktuelle Seite nicht über die erforderliche Wrapper-Klasse verfügt, führt dies zu einem Javascript-Fehler. Wir können dies lösen, indem wir zuerst prüfen, ob die Containerklasse existiert. In Vanille-Javascript können Sie document.getElementById()oder verwenden document.getElementsByClassName(). Siehe Beispiel unten. Für jQuery würden Sie dies verwenden jQuery('<selector>').length, um dies zu überprüfen.

Die Art und Weise, FilterizR mit Vanilla Javascript zu initialisieren, besteht darin, eine neue Instanz von zu erstellen Filterizr, die den Containerselektor als ersten Parameter und optional ein Einstellungsobjekt als zweiten Parameter bereitstellt. Dies ist ein Beispiel für die grundlegendsten:

Die Initialisierung erfolgt in Zeile #4. Wir stellen den Klassennamen dem Container zur Verfügung, der unsere Posts umschließt, mit einem Punkt davor, der einen Klassenselektor kennzeichnet. Mit obigem Code sollte FilterizR nun deine Posts übernehmen und in Spalten platzieren. Da wir die entsprechenden Datenattribute verwendet haben, sollten die Filter auch automatisch funktionieren!

Anpassen der Optionen von FilterizR

Ich habe nur noch ein paar abschließende Tipps zur Optimierung von FilterizR, was wir tun können, indem wir ein Einstellungsobjekt bereitstellen. Ich empfehle, einen Blick auf die möglichen Optionen für FilterizR zu werfen, um zu sehen, was Sie tun können. Sie können die Animationsgeschwindigkeit, den Animationstyp und mehr steuern!

Damit die Spalten in responsiven Größen optimal funktionieren, habe ich festgestellt, dass die Einstellung layoutauf „ sameWidth” FilterizR besser mit Beiträgen mit unterschiedlichen Höhen funktioniert. Dies führt zu einem „Mauerwerk”-Stil. In unserem Beispiel geben wir zusätzlichen Inhalt nach dem Bild aus, was zu unterschiedlichen Höhen führen kann (Namen können länger sein, was sie in mehrere Zeilen zwingt). Dies kann zu einem seltsamen Verhalten führen.

Standardmäßig bekommt jedes Element keinen Abstand zwischen den anderen. Wenn Sie einen gewissen Abstand zwischen den einzelnen Elementen wünschen, können Sie die Lückengröße in px für festlegen gutterPixels. Im obigen Beispiel habe ich 10 Pixel als Lückengröße verwendet. PS: Die Lückengröße wird auch dem Verpackungsbehälter hinzugefügt. Dies ist möglicherweise nicht immer das, was Sie möchten. Um dies zu überschreiben, habe ich einfach Styling padding: 0!importantauf hinzugefügt .filter-container.

Hier ist der angepasste Code zum Initialisieren von FilterizR mit meinen Optionen:

Mit etwas kleinerem Styling sieht das Ergebnis in etwa so aus:

Denken Sie daran, dass Filtern nur eine Sache ist, die FilterizR kann! Schauen Sie sich die Beispiele unter „Tutorials” auf ihrer Homepage an. Sie können Steuerelemente zum Sortieren, Mischen und/oder Suchen hinzufügen. Und Sie haben auch mehr Optionen, um das Layout zu steuern.