Das Loop Element vom Elementor Pro war und ist ein kleiner Gamechanger gewesen.
Für diejenigen unter euch die nicht wissen was der Loop Builder ist oder kann – hier ganz kurz eine Erläuterung:
Was ist der Elementor Loop Builder?
Der Elementor Loop Builder ist ein leistungsstarkes Tool im Elementor Page Builder, das dir ermöglicht, dynamische und wiederholbare Layouts für Blog-Posts, Produktlisten und andere Inhalte zu erstellen. Mit diesem Feature kannst du individuelle Designs für deine Schleifen erstellen und so eine konsistente, ansprechende Präsentation deiner Inhalte gewährleisten.
Lange Zeit waren z.B. komplexe Verzeichnisse oder Eventseiten nur über vorgefertigte Themes und Plugins umzusetzen – mit dem Elementor Loopbuilder gibt es hier nun eigentlich keine Grenzen mehr.
In meinem heutigen Artikel möchte ich kurz eine Funktion erläutern die ich eigentlich bei jedem Einsatz des Loopbuilders benötige – die Sortierung der Postings auf Grundlage eines speziellen Custom Fields.
Was ist das „Problem“ ?
Über den Elementor Loop Builder habe ich aktuell nur die Möglichkeit nach den folgenden Optionen bei der Ausgabe zu sortieren:
- Datum
- Titel
- Menü Anordnung
- zuletzt modifiziert
- Anzahl Kommentare
- Zufall
Alles soweit ok und sicher auch in verschiedenen Optionen ausreichend.
Gerade bei Event Seiten ist aber eine Sortierung nach dem Datum des Events, deutlich effektiver. Also dass z.B. die aktuellesten Events ganz oben in der Liste stehen. Diese Funktion ist so „out of the box“ jedoch nicht möglich.
Daher möchte ich euch hier heute eine kurze Anleitung geben, wie ihr diese Aufgabenstellung ganz leicht umsetzt.
Voraussetzungen:
- das Elementor Pro Plugin
- das Advanced Custom Fields Plugin
Ich gehe nun davon aus das ihr bereits ein Loop gebaut habt. Ich beschreibe das Procedere einmal an einem aktuellen Projekt, bei dem ich für den Kunden ein Übersicht über alle Events des Hotels erstelle.
In meinem Fall lautet der Custom Post Type hier „Events“
Query ID zum loop Grid hinzufügen
Im ersten Step fügt ihr nun bei eurem Loop Item in das Feld für „Query ID“ die folgende ID hinzu: fwp_event_date
Einbau PHP Snippet
Im nächsten Step fügen wir nun ein kleines PHP Snippet in unsere Seite ein. Dieses soll dann ein spezielles Advanced Custom Field (unser Datumsfeld) prüfen und auf der Basis die Postings ordnen.
Folgende Info:
- um den PHP Code einzubauen empfehle ich ein Child Theme und den Einbau des Codes in die functions.php – alternative Optionen sind möglich und euch überlassen
- mein Datumsfeld ist über das Plugin Advanced Custom Fields angelegt und lautet in meinem Fall „datum_des_events“ – an dieser Stelle müsst ihr natürlich selbst den passenden Namen eures Feldes wählen:
Hier der Code für die functions.php
Tauscht datum_des_events mit dem Namen eures ACF aus
<?php
function fwp_query_by_event_date( $query ) {
$query->set( 'orderby', 'meta_value' );
$query->set( 'meta_key', 'datum_des_events' );
}
add_action( 'elementor/query/fwp_event_date', 'fwp_query_by_event_date' );Code-Sprache: HTML, XML (xml)So, das war es dann eigentlich schon. Die Postings eures Loops sollten nun auf Basis des Datumsfeldes sortiert werden.
