5 Möglichkeiten, Ihrer WordPress-Website ein Datums- und Uhrzeit-Widget hinzuzufügen

Die Anzeige eines Datums- und Uhrzeit-Widgets hat mit Zeitungs-Websites begonnen. Das heutige Datum aus ihrer Zeitung zu bekommen, war einfach etwas, das schon immer zum Leben der Menschen gehört hatte. Als sich der Printjournalismus ins Internet verlagerte, sollte sich das nicht ändern.

Die Anzeige des aktuellen Datums und der Uhrzeit ist jedoch nicht nur für Nachrichten-Websites gedacht. Es gibt viele Gründe, warum andere Websites darüber nachdenken sollten, dasselbe zu tun:

• Sie können die aktuelle Uhrzeit in Ihrer Zeitzone anzeigen, um Kunden mitzuteilen, wann sie den Kundensupport erreichen können
• Es lässt Ihre Website lebendig und relevant aussehen, auch wenn Ihr Inhalt etwas älter ist. Dies ist wichtig, da die meisten von uns auf der Suche nach den neuesten und aktuellen Informationen sind.
• Wenn auf Ihrer Seite bevorstehende Ereignisse angezeigt werden, hilft die aktuelle Uhrzeit und das aktuelle Datum den Besuchern zu verstehen, wie lange sie auf sie warten müssen (alternativ können Sie ein Countdown-Timer-Modul verwenden, wie es im Divi-Design enthalten ist).

Kurz gesagt hilft Ihnen die Anzeige eines Datums- und Uhrzeit-Widgets, Ihr Publikum zu binden, macht Ihre Site attraktiver und positioniert Sie als Anbieter aktueller Nachrichten und Informationen. Grund genug, um zu lernen, wie Sie eines auf Ihrer WordPress-Site implementieren.

Im folgenden Artikel zeigen wir Ihnen verschiedene Möglichkeiten, wie Sie ein Datums- und Uhrzeit-Widget für Ihre Website erstellen können. Zuerst gehen wir darauf ein, wie es manuell gemacht wird, und sprechen dann über einige Plugin-Lösungen, mit denen Sie dasselbe ohne Codierung tun können.

Hört sich gut an? Dann lassen Sie uns nicht düster, sondern gleich loslegen.

So erstellen Sie manuell ein Datums- und Uhrzeit-Widget in WordPress

Eine Möglichkeit, die aktuelle Uhrzeit und das aktuelle Datum in Ihre Website aufzunehmen, besteht darin, selbst eine Lösung zu programmieren. Das werden wir zuerst tun. Wir erstellen einen einfachen Shortcode, der, wenn er irgendwo auf Ihrer Website eingegeben wird, Ihren Besuchern die Uhrzeit und das Datum anzeigt.

Erstellen Sie den Shortcode

Unser erster Schritt besteht darin, den eigentlichen Shortcode einzurichten. Dazu öffnen wir zunächst die functions.php unseres aktuellen Themes. Wir empfehlen Ihnen dringend, dafür ein Child-Theme zu verwenden, um keine Änderungen zu verlieren, wenn Ihr Parent-Theme aktualisiert wird.

Nachdem wir die Datei geöffnet haben, fügen Sie diesen Code am Ende ein:

function current_time_date(){
return date('F jS, Y, H:i:s');
}

add_shortcode( 'time_date', 'current_time_date' );

Einige Informationen dazu: Der obige Code ist eine Funktion, die das aktuelle Datum und die aktuelle Uhrzeit ausspuckt und dann einem Shortcode namens [time_date] zuordnet . Wenn Sie den Shortcode auf Ihrer Site eingeben, wird die Funktion aufgerufen.

In dem von uns oben verwendeten Format werden Uhrzeit und Datum in diesem Format ausgegeben: 06.07.2017, 12:35:41. Sie können jedoch verschiedene Formate verwenden, die Sie hier kennenlernen können.

Um den Code zu testen, kopieren Sie den Shortcode einfach irgendwo auf Ihre Website. Beachten Sie jedoch, dass Shortcodes standardmäßig nicht in Widgets funktionieren. Um sie zu verwenden, müssen Sie entweder das Shortcode-Widget-Plugin installieren oder diese Zeile in der functions.php hinzufügen.

add_filter('widget_text','do_shortcode');

Danach hier das Ergebnis:

Wechseln Sie zu JavaScript

Sieht soweit gut aus, oder? Wenn Sie jedoch die obigen Schritte ausführen, werden Sie schnell feststellen, dass sich die Uhr nicht von selbst aktualisiert. Stattdessen spuckt es die aktuelle Uhrzeit nur einmal aus – wenn die Seite geladen wird. Danach bleibt es statisch, was dem Zweck etwas zuwiderläuft, findest du nicht?

Das liegt daran, dass PHP eine serverseitige Sprache ist, was bedeutet, dass Sie zusätzliche Aufrufe an den Server ausführen müssen, um die Informationen zu aktualisieren. Aus diesem Grund arbeiten wir besser mit einer clientseitigen Sprache wie JavaScript.

Zum Glück gibt es im Netz jede Menge JavaScript-Uhren. Eine kurze Google-Suche zeigt viele Beispiele. Ich habe diesen Service verwendet, um den JavaScript-Code für mein gewünschtes Format zu generieren. Danach habe ich den Code in eine Datei namens clock.js eingegeben, die ich in meinen Themenordner kopiert habe.

Das Skript fordert ein div mit dem Namen clockbox . Aus diesem Grund habe ich meine vorherige Funktion wie folgt geändert:

function current_time_date(){

echo '<div id="clockbox"></div>';

}

add_shortcode( 'time_date', 'current_time_date' );

Jetzt müssen Sie nur noch meine neue JavaScript-Datei aufrufen:

wp_enqueue_script( 'clock', get_theme_file_uri('/clock.js'));

Und voila:

Styling hinzufügen

Schließlich möchten Sie wahrscheinlich Ihr Zeit- und Datums-Widget so gestalten, dass es zu Ihrem gesamten Branding passt. Da die von uns verwendete Funktion zum Glück eine CSS-ID erstellt hat, können wir dem Datums- und Uhrzeit-Widget unser eigenes Styling wie folgt hinzufügen:

#clockbox {
font-size: 22px;
font-style: italic;
color: #999;
}

Hier ist das Ergebnis:

Das war jetzt nicht so schwer, oder? Habe dir gesagt, es wäre einfach. Dies ist jedoch nur eine Möglichkeit, Ihr eigenes Datums- und Uhrzeit-Widget zu erstellen. Mit zusätzlichen Coding-Chops können Sie viel mehr erreichen.

Wenn Sie jedoch kein Typ für den manuellen Weg sind, können Sie mit Hilfe von WordPress-Plugins ähnliche Ergebnisse erzielen.

Plugins zum Erstellen von Zeit- und Datums-Widgets für Ihre Website

Während die Anzahl der verfügbaren Plugins im WordPress-Verzeichnis nicht überwältigend ist, gibt es ein paar Exemplare, die einen guten Job machen.

Datum der Live-Uhr

Unser erster Konkurrent ist dieses Plugin. Wie der Name schon sagt, können Sie Ihrer WordPress-Website eine Uhr und das Datum hinzufügen.

Ihr Zeit- und Datums-Widget bietet viele Anpassungsoptionen. Sie können zwischen einem 12- oder 24-Stunden-Zyklus wählen, ob Sie die Uhr minütlich oder sekündlich aktualisieren, das Datum ein- oder ausblenden und deren Reihenfolge bestimmen. Das Widget verfügt sogar über einen Abschnitt für benutzerdefiniertes CSS, sodass Sie dieselbe Schriftart wie Ihre Website und mehr verwenden können.

Leider sind die Formatierungsmöglichkeiten ansonsten etwas eingeschränkt. Es ist beispielsweise nicht möglich, den Wochentag aus dem Datum zu entfernen. Ansonsten tut das Plugin aber was es soll.

Datums- und Uhrzeit-Widget

Erstmal eine kleine Warnung. Dieses Plugin ist etwas alt und wurde zuletzt vor zwei Jahren aktualisiert. Daher gibt es keine Garantie, dass es mit allen modernen Themes und der neuesten Version von WordPress funktioniert. Da es in meinem Test mit WordPress 4.8 jedoch gut funktioniert hat und eine schöne Auswahl an Optionen bietet, dachte ich, dass es sich lohnt, es mit einzubeziehen.

Nach der Installation fügt das Plugin dem Widget-Menü ein neues Datums- und Uhrzeit- Widget hinzu. Wenn Sie es zu einem Widget-Bereich hinzufügen, haben Sie viele Möglichkeiten zur Anpassung.

Wie Sie sehen, können Sie das Zeit- und Datumsformat konfigurieren (oder vollständig deaktivieren), die Schriftfamilie und -größe sowie Textfarbe und Hintergrundfarbe (einschließlich Hex-Codes) ändern. Auf diese Weise ist es einfach, das Widget an Ihr Thema anzupassen. Wenn das nicht ausreicht, verfügt das Widget über genügend HTML-Klassen, sodass Sie Ihre eigenen benutzerdefinierten CSS-Regeln problemlos implementieren können.

Aktuelles Datum und Uhrzeit

Das letzte Plugin auf dieser Liste ist einfach genug. Installieren, aktivieren und Sie erhalten ein neues Widget namens Aktuelles Datum und Uhrzeit , das Sie in einen beliebigen Widget-Bereich ziehen können. Fertig.

Das Ergebnis sieht anständig aus und passt sich automatisch dem Stil Ihres Themes an. Es ist auch mobil responsive, was heutzutage ein Muss ist. Auf der anderen Seite bietet es keine Einstellungsmöglichkeiten. Es ist nur ein Zeitformat verfügbar, für mehr müssen Sie die Pro-Version kaufen.

Abschluss

Es gibt viele Gründe, ein Zeit- und Datums-Widget auf Ihrer WordPress-Site anzuzeigen. Auf diese Weise können Sie Ihren Kunden mitteilen, wann sie Sie erreichen können, wie aktuell Ihre Inhalte sind und vieles mehr.

Wie Sie oben gesehen haben, gibt es mehrere Möglichkeiten, dies in WordPress zu implementieren. Eine besteht darin, Ihren eigenen Shortcode einzurichten, um das Widget überall zu implementieren. Natürlich gibt es auch Plugins, die das Gleiche für Sie tun können. Obwohl es nicht überwältigend ist, gibt es einige solide Konkurrenten.

Nun zu dir. Haben Sie auf Ihrer Website schon einmal ein Zeit- und Datums-Widget verwendet? Wenn ja, wofür haben Sie es benötigt und wie haben Sie es umgesetzt? Lassen Sie es uns im Kommentarbereich unten wissen.

Miniaturansicht des Artikels von Jane Kelly / shutterstock.com