Eine Anleitung zur Formatierung von Datum und Uhrzeit in Divi

Das Anzeigen von Datum und Uhrzeit auf Ihrer Website ist eines der Dinge, über die die meisten Menschen nicht wirklich nachdenken. Wir neigen dazu, bei der Standardformatierung für das Veröffentlichungsdatum von Post-Metadaten zu bleiben. Und wenn wir Zeit haben, fügen wir das aktuelle Jahr dynamisch in die Fußzeile neben dem Copyright-Text ein.

Es ist jedoch praktisch, zu verstehen, wie Datum und Uhrzeit formatiert werden. Es gibt Ihnen die Freiheit, ein Datum für Benutzer lesbarer zu machen. Zum Beispiel ist „Am Montag, den 23. Mai 2020“ etwas wärmer (und menschlicher) als minimale Datumsanzeigen wie „5.23.20“. Obwohl letzteres seinen Platz hat. Das gleiche gilt für die Formatierung der aktuellen Uhrzeit auf einer Website. Einige Websites können von einer 12-Stunden-Anzeige wie "8:30 Uhr" profitieren, während andere (wie militärische oder medizinische Websites) eine 24-Stunden-Anzeige wie "20:30" bevorzugen.

Divi und WordPress geben Ihnen überraschend viel Kontrolle über die in PHP verfügbare Datums- und Zeitformatierung. In diesem Tutorial werden wir Ihnen helfen zu verstehen, wie Sie Datum und Uhrzeit in Divi anzeigen, formatieren und gestalten. Sie können Blog-Posts ein benutzerdefiniertes Format für das Veröffentlichungsdatum geben oder sogar einem Aufruf zum Handeln ein dynamisches Element hinzufügen, um eine persönlichere Note zu erhalten (z. B. „Happy Monday ! Schauen Sie sich unser neues Angebot an“).

Lass uns anfangen!

Laden Sie eine Anleitung zur Formatierung von Datum und Uhrzeit Divi Layout KOSTENLOS herunter

Laden Sie dieses hilfreiche Layout des Formatierungsleitfadens für Datum und Uhrzeit herunter, um einen schnellen Überblick über die Formatierung von Datum und Uhrzeit in Divi zu erhalten. Es enthält Beispiele für jedes Datums-/Uhrzeitformat, das als dynamischer Inhalt in einem Divi-Textmodul verwendet wird, damit Sie aus erster Hand sehen können, wie jedes Format auf einer Live-Seite funktioniert.

Um die Anleitung zur Formatierung von Datum und Uhrzeit in die Hände zu bekommen, müssen Sie sie zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Um das Abschnittslayout in Ihre Divi-Bibliothek zu importieren, navigieren Sie zur Divi-Bibliothek.

Klicken Sie auf die Schaltfläche Importieren.

Wählen Sie im Portabilitäts-Popup die Registerkarte Import und wählen Sie die Download-Datei von Ihrem Computer.

Klicken Sie dann auf die Schaltfläche Importieren.

Sobald dies erledigt ist, wird das Abschnittslayout im Divi Builder verfügbar sein.

Kommen wir zum Tutorial, ja?

Verfügbare Formatzeichen für die Anzeige von Datum und Uhrzeit

Wie bereits erwähnt, nutzt Divi die integrierte Datums- und Uhrzeitformatierung von WordPress. Bevor wir uns jedoch mit der Formatierung von Datum und Uhrzeit in Divi befassen, ist es hilfreich, die uns zur Verfügung stehenden Formatierungszeichen zu verstehen.

Unten finden Sie eine Liste der verfügbaren Formatzeichen, die zusammen (oder kombiniert) verwendet werden können, um benutzerdefinierte Datums- und Uhrzeitformate zu erstellen. Dies ist praktisch, wenn Sie mit einzigartigen Formaten für Datum und Uhrzeit auf Ihrer Divi-Site experimentieren.

Datumsformatierung

Zeichen im DAY-Format

• d = Tag des Monats, 2-stellig mit führenden Nullen („02“, „22“)
• D = Tag des Monats in drei Buchstaben („Jun“, „Jul“)
• l (Kleinbuchstabe „L“) = Wochentag, das ganze Wort („Montag“, „Dienstag“)
• N = numerischer ISO-8601-Wochentag („1“ für Montag und „7“ für Sonntag)
• S = Suffix für den Tag des Monats; mit j verwenden („nd“, „st“, „rd“)
• w = Numerischer Wochentag („0“ für Sonntag und „6“ für Samstag)
• z = Der Tag des Jahres, beginnend bei 0 (dh „173“ oder „dies ist der 173. Tag des Jahres“)

Zeichen im WEEK-Format

• W = 26 (Wochennummer des Jahres, Wochen beginnend am Montag; dh „dies ist die 26. Woche des Jahres“)

Zeichen im MONAT-Format

• F = Eine vollständige Textdarstellung eines Monats („Januar“ oder „März“)
• m = Numerischer Monat, mit führenden Nullen (Juni wird als „06“ angezeigt)
• M = Monat in drei Buchstaben (März wird als „Mar“ angezeigt)
• n = Numerischer Monat, ohne führende Nullen (Juni wird als „6“ angezeigt)
• t = Anzahl der Tage im angegebenen Monat (im Juni würde „30“ angezeigt)

Zeichen im Format JAHR

• Y = 2020 (4-stelliges numerisches Jahr; z. B. „2020“)
• y = 20 (2-stelliges numerisches Jahr; z. B. „20“)

Beispiel für Datumsformatzeichenfolgen

• M j, Y = 22. Juni 2020
• F d, Y = 22. Juni 2020
• m/d/J = 22.06.2020
• mdY = 22.06.2020
• j M, Y = 22. Juni 2020
• l, M d = Montag, 22. Juni
• l, F jS, Y = Montag, 22. Juni 2020
• m · d · y = 06 · 22 · 20

Zeitformatierung

Zeichen im TIME-Format

• a = (Kleinbuchstabe „am“ oder „pm“)
• A = PM (Großbuchstaben „AM“ oder „PM“)
• g = Stunde, 12-Stunden, ohne führende Nullen („1-12“)
• h = Stunde, 12-Stunden, mit führenden Nullen („01-12“)
• G = Stunde, 24 Stunden, ohne führende Nullen („0-23“)
• H = Stunde, 24 Stunden, mit führenden Nullen („00-23“)
• i = 10 (Minuten, mit führenden Nullen („00-59“)
• s = 52 (Sekunden, mit führenden Nullen („00-59“)
• T = Zeitzone („CDT“, „EST“)

Beispiel für Zeitformat-Strings

• g:ia = 16:10 Uhr
• g:i:sa = 16:10:52 Uhr

Formatzeichenfolgen für Datum und Uhrzeit

• J/m/dg:i:s A = 22.06.2020 16:10:52
• M j, Y @ G:i = 22. Juni 2020 @ 16:10

Escape-Format-Strings mit „\“, um zusätzlichen Text/Zeichen einzufügen

Dies ist ein wirklich hilfreicher Trick, um die Datums- und Uhrzeitanzeige anzupassen. Fügen Sie einfach „\“ vor jedem Zeichen/Buchstaben hinzu, das Sie in die Formatzeichenfolge aufnehmen möchten, und dieses Zeichen wird wie gewohnt (außerhalb der Zeichenfolge) gerendert. „/T/h/e“ würde also das Wort „The“ in der Formatzeichenfolge anstelle eines tatsächlichen Datums-/Uhrzeitelements wie Zeitzone („T“) oder Stunde („h“) darstellen.

• D \a\t ga = Mo um 16 Uhr
• \T\h\e dS \d\a\y \o\f F = 22. Juni

Formatieren von Datum und Uhrzeit mit Divi

Ändern des standardmäßigen Datumsformats auf der gesamten Site

Wenn Sie das Standardformat für Datum und Uhrzeit auf der gesamten Website ändern möchten, bietet WordPress hierfür eine integrierte Option. Navigieren Sie in Ihrem WordPress-Dashboard zu Einstellungen > Allgemein. Dort sehen Sie die Option zum Ändern der Standardzeitzone, des Datumsformats und des Zeitformats.

Divi verwendet tatsächlich dieselben Standardformate, wenn Sie ein Datum oder eine Uhrzeit mithilfe dynamischer Inhalte mit dem Divi Builder hinzufügen (wie das Datum der Veröffentlichung und das aktuelle Datum).

Wenn Sie das Standard-Blogpost-Layout von Divi verwenden (kein benutzerdefiniertes Layout, das mit Divi Builder erstellt wurde), können Sie eine benutzerdefinierte Datumsformatzeichenfolge eingeben, die für alle Blog-Posts auf der gesamten Site verwendet wird. Sie finden die Datumsformatoption, indem Sie zu Divi > Themenoptionen navigieren und auf der Seite unter der Registerkarte Allgemein nach unten scrollen.

Interessanterweise können Sie sogar Zeitformatzeichen eingeben, um die Zeit anzuzeigen, zu der der Beitrag veröffentlicht wurde.

Verwenden des dynamischen Inhalts von Divi zum Formatieren und Anzeigen von Datum und Uhrzeit

Wenn Sie den Divi Builder verwenden, haben Sie die Möglichkeit, jedem Modul das aktuelle Datum oder das Post-Veröffentlichungsdatum als dynamischen Inhalt hinzuzufügen. Dies ist eine großartige Möglichkeit, das standardmäßige Datums- und Uhrzeitformat von Fall zu Fall zu überschreiben und dem Datums-/Uhrzeittext ein benutzerdefiniertes Format hinzuzufügen.

Um Ihrer Seite in Divi ein Veröffentlichungsdatum oder ein aktuelles Datum als dynamischen Inhalt hinzuzufügen, fügen Sie der Seite einfach ein Textmodul hinzu.

Wählen Sie dann das Symbol für dynamische Inhalte aus, während Sie den Mauszeiger über das Inhaltsfeld bewegen.

Nachdem das dynamische Datum zum Inhalt des Moduls hinzugefügt wurde, können Sie auf klicken, um das dynamische Datum für weitere Anpassungen zu bearbeiten. Zu diesen zusätzlichen Einstellungen gehören die Möglichkeit, der Datumsanzeige Vorher- und Nachher-Inhalte hinzuzufügen, sowie die Möglichkeit, das Datumsformat anzupassen.

Die integrierten Datumsformate von Divi

Unter der Dropdown-Liste Datumsformat finden Sie die folgenden vorgefertigten Datumsformate, die Sie auswählen können.

• M j, Y = 22. Juni 2020
• F d, Y = 22. Juni 2020
• m/d/J = 22.06.2020
• mdY = 22.06.2020
• j M, Y = 22. Juni 2020
• l, M d = Montag, 22. Juni

Hinzufügen eines benutzerdefinierten Datums-/Uhrzeitformats

Um ein benutzerdefiniertes Datums-/Uhrzeitformat zu erstellen, wählen Sie die benutzerdefinierte Option aus der Dropdown-Liste aus. Sobald Sie die benutzerdefinierte Option ausgewählt haben, steht Ihnen ein Eingabefeld zur Verfügung, in dem Sie Ihre Magie anwenden können, indem Sie eine beliebige Kombination verfügbarer Formatzeichen hinzufügen, um die perfekte Formatzeichenfolge für Datum, Uhrzeit oder beides zu erstellen.

Der gleiche Vorgang kann verwendet werden, um die aktuelle Uhrzeit oder die Zeit nach der Veröffentlichung hinzuzufügen. Fügen Sie einfach die Zeichen zur Zeitformatierung in das Feld Benutzerdefiniertes Datumsformat ein.

Nachdem Sie den Inhalt erstellt haben, können Sie die integrierten Designeinstellungen von Divi auf der Registerkarte Design des Textmoduls verwenden, um den Fließtext nach Belieben anzupassen. Das dynamische Datums-/Uhrzeitformat übernimmt den Stil des Fließtexts.

Weitere hilfreiche Beispiele

Urheberrechtsjahr

Die Formatierung von Datum und Uhrzeit ist praktisch, um ein dynamisches Copyright-Jahr für die globale Fußzeile Ihrer Divi-Site zu erstellen. Hier ist ein benutzerdefiniertes Format, das Sie verwenden können, um die Copyright-Informationen mit dem dynamischen Jahr in einem einzigen Textmodul anzuzeigen.

Fügen Sie einem Textbaustein das aktuelle Datum als dynamischen Inhalt hinzu. Bearbeiten Sie dann den dynamischen Inhalt wie folgt:

• Vorher: ©
• Nachher: ​​Unternehmen | Alle Rechte vorbehalten.
• Benutzerdefiniertes Datumsformat: Y

Dynamischer Call-to-Action

Sie können einem Call-to-Action oder einer Überschrift auf Ihrer Divi-Website auch ein dynamisches Datums- oder Zeitformat (inline) hinzufügen. Fügen Sie dazu einem Textbaustein ein aktuelles Datum als dynamischen Inhalt hinzu. Aktualisieren Sie dann Folgendes:

• Vor:

  <h1>It's

• Nach:

  ... <br>Time to Design!</h1>

• Benutzerdefiniertes Datumsformat: l … \a\f\t\e\rga

Beachten Sie, dass der h1-Header dem Element mithilfe von HTML-Tags in den Vorher- und Nachher-Eingaben hinzugefügt wird. Das Wort „Dienstag“ wird durch das „l“ im benutzerdefinierten Datumsformatfeld angezeigt, gefolgt vom Wort „nach“ mit dem „\“, um die Formatzeichenfolge zu maskieren. Dann werden mit „g“ und „a“ die „18 Uhr“ angezeigt.

Sie können dann die h1-Überschriftenstile auf der Registerkarte Design anpassen.

Abschließende Gedanken

Hoffentlich hat dieser Beitrag (und bleibt) eine hilfreiche Anleitung zum Formatieren von Datum und Uhrzeit in Divi. Wenn Sie wie ich sind, haben Sie die Augen für einige überraschende Formatierungsoptionen geöffnet, die Sie ohne Plugin und mit benutzerdefiniertem Code erreichen können!

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!