Zeitangaben in WordPress verständlich erfassen und anzeigen
Eine gute Zeitangabe zeigt auf einen Blick, wann etwas stattfindet, beginnt oder endet. Der Gutenberg-Block «Datum-Zeit» verbindet eine leicht lesbare Ausgabe mit einer Eingabe, die Start und Ende strukturiert speichert.
Datum, Uhrzeit und Zeiträume geben Besucherinnen und Besuchern Orientierung. Eine einzelne Angabe wie «10. Mai 2025 • 9 Uhr» vermittelt schnell den Zeitpunkt. Ein Zeitraum soll ebenso kompakt bleiben und seine wichtigsten Informationen unmittelbar sichtbar machen.
Dafür haben wir den Gutenberg-Block «Datum-Zeit» entwickelt. Die Redaktion erfasst Startdatum, Uhrzeit und optionale Endangaben in einer gemeinsamen Eingabe. Der Block formatiert daraus die sichtbare Ausgabe und speichert die Zeitpunkte zusätzlich für Listen, Filter und individuelle WordPress-Abfragen.
Zeitangaben im Editor eingeben
Im Editor steht das Startdatum als zentrale Angabe im Vordergrund. Eine Startzeit ergänzt den Eintrag bei Bedarf. Daneben zeigt die Vorschau unmittelbar die Zeichenfolge, die später im Frontend erscheint. Die Redaktion sieht dadurch bereits bei der Eingabe, wie Datum und Uhrzeit zusammenwirken.
Über «Optionen anzeigen» öffnet sich eine zweite Eingabezeile für Enddatum, Endzeit und einen individuellen Anzeigetext. Die Grundansicht eignet sich für einzelne Daten. Zeiträume und besondere redaktionelle Bezeichnungen lassen sich im selben Block ergänzen.
Zeiträume kompakt anzeigen
Eine eigene Formatierungsfunktion erzeugt aus den Eingaben eine deutsche Datumsdarstellung. Sie berücksichtigt, ob Start und Ende am selben Tag, im selben Monat, im selben Jahr oder in unterschiedlichen Jahren liegen. Wiederkehrende Bestandteile erscheinen einmal, und der Zeitraum bleibt auf einen Blick erfassbar.
| Eingabe | Formatierte Ausgabe |
|---|---|
| Startdatum | 10. Mai 2025 |
| Startdatum und Startzeit | 10. Mai 2025 • 9 Uhr |
| Zeitraum im selben Monat | 10. – 12. Mai 2025 |
| Zeitraum über mehrere Monate | 10. März – 12. Mai 2025 |
| Zeitraum über mehrere Jahre | 10. März 2024 – 12. Mai 2025 |
| Zeitspanne an einem Tag | 10. Mai 2025 • 9 – 12 Uhr |
Ein individueller Anzeigetext kann die automatisch erzeugte Zeichenfolge ergänzen oder ersetzen. So lässt sich beispielsweise «Freitagmorgen» ausgeben, während Start und Ende als strukturierte Zeitpunkte gespeichert bleiben.
Sichtbare Ausgabe und strukturierte Werte verbinden
Im gespeicherten Block stehen Start und Ende als vollständige ISO-Zeitstempel in den Attributen data-start und data-end. JavaScript und weitere Frontend-Funktionen können diese Werte direkt aus dem HTML auslesen. Die sichtbare Datumsangabe bleibt dabei auf die Leserinnen und Leser ausgerichtet.
Beim Speichern eines Beitrags durchsucht das Plugin die Blockstruktur rekursiv. Der ermittelte Startzeitpunkt wird im Metafeld ud_datetime_block_start abgelegt, das optionale Ende in ud_datetime_block_end. Die Registrierung über die WordPress-REST-API stellt diese Werte auch weiteren redaktionellen und technischen Anwendungen bereit.
Zeitangaben für Listen und Filter nutzen
Die Metafelder bilden eine Grundlage für zeitbezogene Inhaltsabfragen. Eine WP_Query kann kommende Einträge anhand des Startzeitpunkts auswählen und chronologisch ordnen. Auf derselben Datenbasis lassen sich Veranstaltungsübersichten, Terminfilter oder automatisch aktualisierte Ausgaben entwickeln.
Die Beitragsübersicht im WordPress-Backend kann zusätzlich eine Spalte für Start und Ende erhalten. Damit verbindet der Block die Pflege im Gutenberg-Editor mit strukturierten Werten für Übersichten und individuelle WordPress-Funktionen.
Ergebnis
Zeitangaben übersichtlich aufbereiten und weiterverwenden
Der Datum-Zeit-Block verbindet eine gut erfassbare Ausgabe mit strukturierten Zeitpunkten im Block und in den Metadaten des Beitrags. Redaktion, Frontend und zeitbezogene Abfragen greifen dadurch auf dieselben Angaben zu.
Startdatum, Uhrzeit und optionale Endangaben stehen in einer Eingabemaske mit direkter Vorschau bereit.
Datum und Zeit eingeben
Startdatum, Uhrzeit und optionale Endangaben stehen in einer Eingabemaske mit direkter Vorschau bereit.
Zeiträume kompakt anzeigen
Die Formatierung fasst wiederkehrende Bestandteile zusammen und stellt Tage, Monate, Jahre und Uhrzeiten übersichtlich dar.
Listen nach Zeit ordnen
Metafelder speichern Start und Ende als Zeitpunkte. WP_Query nutzt sie für chronologische Listen, Filter und Übersichten.