Wie man relative Daten in WordPress anzeigt (2 Methoden)

Nachdem wir seit vielen Jahren WordPress Websites betreiben, haben wir gelernt, dass kleine Änderungen einen großen Unterschied machen können. Eines dieser kleinen, aber wichtigen Details ist die Art und Weise, wie Sie das Datum in Ihren Beiträgen veröffentlichen.

In den meisten Blogs wird normalerweise das genaue Datum angegeben, an dem ein Beitrag veröffentlicht wurde. Die Verwendung relativer Daten wie „vor 2 Tagen“ oder „gestern“ kann für die Besucher jedoch besser sein. Diese Daten zeigen den Leuten schnell, wie neu und relevant Ihr Inhalt ist, was die Wahrscheinlichkeit erhöht, dass sie ihn lesen.

Das Problem ist, dass die meisten WordPress-Themes das Datum nicht standardmäßig auf diese Weise anzeigen. Aber keine Sorge! Wir haben 2 einfache Wege gefunden, um relative Datumsangaben auf Ihrer WordPress Website anzuzeigen: einen mit einem Plugin und einen anderen mit einem einfachen Code.

Warum relative Daten statt absoluter/exakter Daten anzeigen?

Ist Ihnen schon einmal aufgefallen, dass auf sozialen Medienplattformen wie Facebook oder Twitter Beiträge als „vor 2 Stunden“ oder „vor 3 Tagen“ veröffentlicht werden und nicht als genaue Daten? Das nennt man ein relatives Datumsformat.

Im Gegensatz zu absoluten Datumsangaben (wie z. B. „21. August 2024“) geben relative Datumsangaben in WordPress Ihren Besuchern ein schnelles Gefühl dafür, wie aktuell Ihre Inhalte sind.

Sehen wir uns ein Beispiel an. Wenn Besucher einen Beitrag sehen, der nicht mit einem bestimmten Datum, sondern mit „vor 2 Tagen“ datiert ist, wissen sie sofort, dass es sich um aktuelle Inhalte handelt. Auf diese Weise können die Besucher schnell erkennen, welche Beiträge neu sind und sich lohnen, sie zu lesen, ohne sich Gedanken über das heutige Datum machen zu müssen oder irgendwelche Berechnungen anstellen zu müssen.

Es ist jedoch zu beachten, dass relative Daten nicht für jede Art von Website geeignet sind.

Wenn Sie z. B. einen historischen Blog oder eine Website betreiben, bei der genaue Daten wichtig sind, sollten Sie absolute Daten oben halten. Bei der Entscheidung, ob Sie Ihrer WordPress Website relative Datumsangaben hinzufügen sollen, müssen Sie die Art des Inhalts und die Präferenzen der Zielgruppe berücksichtigen.

Schauen wir uns also 2 Möglichkeiten an, wie man in WordPress relative Datumsangaben hinzufügen kann. Wir haben ein Plugin gefunden, das den Prozess für Sie vereinfacht, aber wir haben auch eine Code-Methode gefunden, die mehr Kontrolle bietet. Verwenden Sie die Links unten, um zu Ihrer bevorzugten Methode zu gelangen:

Methode 1: Verwendung von Meks Time Ago Plugin (kostenlos, aber begrenzt)

Wenn Sie auf der Suche nach einem einfachen Plugin sind, um relative Zeiten und Daten in WordPress anzuzeigen, dann haben wir eine tolle Auswahl für Sie. Von allen Plugins für relative Datumsangaben, die wir ausprobiert haben, ist Meks Time Ago eines der einfachsten für Anfänger. Außerdem ist es kostenlos und funktioniert sowohl mit klassischen als auch mit Block-Themes.

Um Meks Time Ago zu nutzen, können Sie das WordPress Plugin in Ihrem Verwaltungsbereich installieren und aktivieren.

Gehen Sie danach in Ihrem Dashboard auf Einstellungen “ Allgemein . Scrollen Sie nach unten, und Sie finden die Plugin-Einstellungen von Meks Time Ago.

Die erste Einstellung, die Sie aktivieren müssen, ist diejenige, auf die das Format „Zeit vor“ angewendet werden soll. Hier müssen Sie „Datum“ und „Uhrzeit“ auswählen.

Sie können auch wählen, ob dieses Datumsformat auf Beiträge angewendet werden soll, die nicht älter als eine bestimmte Anzahl von Minuten, Stunden, Tagen und Monaten sind.

Wir haben uns für 12 Monate entschieden.

Als Nächstes können Sie die Stelle im Datumsformat ändern, an der das Wort „vor“ stehen soll.

Wir haben uns dafür entschieden, sie nach dem relativen Datum zu setzen, weil die meisten Menschen mit dieser Formulierung vertraut sind.

Schließlich können Sie das Wort „ago“ bei Bedarf durch einen anderen Begriff ersetzen. Sie können es auch einfach leer lassen.

Klicken Sie dann einfach auf „Änderungen speichern“.

Das war’s! Jetzt werden alle Ihre Beiträge mit einem relativen Datum versehen. Sie können Ihre Änderungen auf dem Handy, dem Desktop und dem Tablet anzeigen, um zu sehen, ob alles richtig aussieht.

Hier ist ein Beispiel:

Eine Sache, die uns an Meks Time Ago nicht gefällt, ist, dass das Plugin das Veröffentlichungsdatum als „vor X Minuten“ oder „vor X Stunden“ anzeigt, selbst wenn der Beitrag heute oder gestern veröffentlicht wurde.

Manche Leute stört dieses Format nicht, aber manche möchten vielleicht auch, dass das Datum als „Heute“ oder „Gestern“ angezeigt wird. Wenn Sie das bevorzugen, können Sie die nächste Methode anwenden.

Methode 2: Verwendung von individuellem Code (anpassbar, aber etwas fortgeschritten)

Diese Methode erfordert individuellen Code und ist, wie wir bereits erklärt haben, die bessere Wahl, wenn Sie Daten als „Heute“ oder „Gestern“ anstelle von „Vor X Minuten“ oder „Vor X Stunden“ anzeigen möchten.

Aber lassen Sie sich nicht einschüchtern! Wir werden Sie Schritt für Schritt durch den Prozess führen. Außerdem werden wir ein Code Snippet Plugin namens WPCode verwenden, mit dem Sie sicher und einfach individuellen Code hinzufügen können, ohne Ihre Website zu zerstören.

Mehr über das Plugin erfahren Sie in unserem WPCode Testbericht.

Installieren und aktivieren Sie zunächst das WordPress Plugin in Ihrem Verwaltungsbereich.

Danach müssen Sie zu Code-Snippets “ + Snippet hinzufügen gehen. Wählen Sie dann „Individuellen Code hinzufügen (neues Snippet)“ und klicken Sie auf den Button „+ Individuelles Snippet hinzufügen“.

Geben Sie nun Ihrem neuen individuellen Code einen Namen. Es kann etwas Einfaches sein, wie „Relatives Datum mit Zeit formatiert“.

Ändern Sie außerdem den Code-Typ in ‚PHP Snippet‘.

Kopieren Sie dann einfach den unten stehenden Codeschnipsel und fügen Sie ihn in die Box „Codevorschau“ ein:

/**
 * Converts a timestamp into a human-readable relative date string.
 *
 * @param int $timestamp The timestamp to convert
 * @return string The human-readable relative date string
 */
function human_readable_relative_date( $timestamp ) {
    $time_difference = time() - $timest  // Calculate the time difference between now and the timestamp
    $seconds_in_a_day = 86400;  // Number of seconds in a day


    if ( $time_difference < 0 ) {
        return 'Date is in the future';  // Handle future dates
    } elseif ( $time_difference < $seconds_in_a_day ) {
        return 'Today at ' . date( 'H:i', $timestamp );  // Handle same-day dates
    } elseif ( $time_difference < 2 * $seconds_in_a_day ) {
        return 'Yesterday at ' . date( 'H:i', $timestamp );  // Handle one-day-old dates
    } elseif ( $time_difference < 7 * $seconds_in_a_day ) {
        $days = floor( $time_difference / $seconds_in_a_day );  // Calculate full days ago
        return $days . ($days == 1 ? ' day' : ' days') . ' ago at ' . date( 'H:i', $timestamp );  // Handle dates within the last week
    } elseif ( $time_difference < 30 * $seconds_in_a_day ) {
        $weeks = floor( $time_difference / ( 7 * $seconds_in_a_day ) );  // Calculate full weeks ago
        return $weeks . ($weeks == 1 ? ' week' : ' weeks') . ' ago at ' . date( 'H:i', $timestamp );  // Handle dates within the last month
    } elseif ( $time_difference < 365 * $seconds_in_a_day ) {
        $months = floor( $time_difference / ( 30 * $seconds_in_a_day ) );  // Calculate full months ago
        return $months . ($months == 1 ? ' month' : ' months') . ' ago at ' . date( 'H:i', $timestamp );  // Handle dates within the last year
    } else {
        $years = floor( $time_difference / ( 365 * $seconds_in_a_day ) );  // Calculate full years ago
        return $years . ($years == 1 ? ' year' : ' years') . ' ago at ' . date( 'H:i', $timestamp );  // Handle dates older than a year
    }
}


/**
 * Shortcode function to convert a given timestamp or date to a human-readable relative date string.
 *
 * @param array $atts Shortcode attributes
 * @return string The human-readable relative date string
 */
function relative_date_shortcode( $atts ) {
    $attributes = shortcode_atts(
        array(
            'timestamp' => '',  // Default value for 'timestamp' attribute
            'date' => '',       // Default value for 'date' attribute
        ),
        $atts
    );


    // If no timestamp or date attribute provided, use the post's published date
    if ( empty($attributes['timestamp']) && empty($attributes['date']) ) {
        global $post;
        if ( !is_null($post) ) {
            $attributes['timestamp'] = get_the_time('U', $post->ID);  // Get the post's timestamp
        }
    } elseif ( !empty($attributes['date']) ) {
        $attributes['timestamp'] = strtotime($attributes['date']);  // Convert 'date' attribute to timestamp
    }
    
    // Validate the timestamp
    if ( !empty($attributes['timestamp']) && is_numeric($attributes['timestamp']) ) {
        return human_readable_relative_date( $attributes['timestamp'] );  // Return the human-readable relative date
    } else {
        return 'Invalid timestamp or date';  // Return an error message if the timestamp is invalid
    }
}
add_shortcode( 'relative_date', 'relative_date_shortcode' );  // Register the shortcode

Die erste Funktion, human_readable_relative_date, nimmt ein Datum und wandelt es in ein benutzerfreundliches Format um.

So kann zum Beispiel ‚Heute um 14:30 Uhr‘ oder ‚Vor 3 Tagen um 10:15 Uhr‘ angezeigt werden. So können Ihre Besucher leichter erkennen, wie alt ein Beitrag ist.

Die zweite Funktion, relative_date_shortcode, erstellt einen Shortcode, den Sie in WordPress verwenden können. Mit diesem Shortcode können Sie ganz einfach relative Datumsangaben zu Ihrem Inhalt hinzufügen, ohne Ihre Theme-Dateien zu ändern.

Mit Hilfe dieses Codes können Sie das Datum Ihrer Beiträge benutzerfreundlicher gestalten. Die Besucher sehen schnell, wie aktuell Ihre Inhalte sind, was Ihre Website aktueller und ansprechender macht.

Blättern Sie dann nach unten zum Abschnitt „Einfügen“. Wählen Sie dann für die Einfügemethode „Automatisch einfügen“ und für die Position „Nur Frontend“.

Ändern Sie in der rechten oberen Ecke den Schalter von „Inaktiv“ auf „Aktiv“ und klicken Sie auf den Button „Snippet speichern“.

Nachdem Sie den Code aktiviert haben, sehen wir uns an, wie Sie relative Datumsangaben in Ihrem WordPress-Blog aktivieren können. Je nach Art des Themes, das Sie verwenden, ist der Vorgang unterschiedlich.

Hinzufügen des relativen Datumsformats in Block-Themes

Wenn Sie ein Block-Theme verwenden, können Sie den Shortcode einfach in das Template „Post Meta“ einfügen.

Dieser Teil des Templates ist für die Anzeige von Informationen über Ihre Beiträge verantwortlich, wie Autor, Kategorie und Veröffentlichungsdatum.

Gehen Sie zunächst auf Design “ Editor , um den vollständigen Website-Editor zu öffnen.

Sie sehen nun mehrere Optionen, um Ihr Block-Theme individuell anzupassen.

Klicken Sie hier auf „Vorlagen“.

Auf der nächsten Seite sehen Sie alle Vorlagen und Templates, die Ihr Theme enthält.

Wählen Sie einfach die Option „Meta veröffentlichen“.

Sie sollten nun den Teil des Templates Post Meta sehen.

Zunächst müssen Sie den bestehenden Datumsblock löschen, damit wir ihn durch unseren Shortcode ersetzen können.

Dazu können Sie auf den Block Datum klicken.

Wenn es schwierig ist, darauf zu klicken, können Sie einfach oben auf den Button „Listenansicht“ klicken und den Block „Datum“ auswählen. Klicken Sie dann auf das Drei-Punkte-Menü und wählen Sie „Löschen“.

Nachdem Sie den Datumsblock gelöscht haben, fügen Sie den Block „Shortcode“ zu Ihrem Beitrag Meta hinzu.

Klicken Sie dazu auf den ‚+‘-Button irgendwo auf der Seite und ziehen Sie den Shortcode-Block per Drag-and-drop dorthin.

Danach geben Sie den folgenden Shortcode in den Block ein:

[relative_date]

Sobald das erledigt ist, klicken Sie auf „Speichern“.

Ihre Templates für einzelne Beiträge verwenden nun relative Datumsangaben.

So sieht es auf unserer Website aus:

Hinzufügen des relativen Datumsformats in klassischen Themes

Das Hinzufügen von relativen Daten in klassischen WordPress Themes ist ein wenig anders und technischer. Das liegt daran, dass jedes klassische Theme unterschiedliche Konfigurationen hat.

Aber haben Sie Geduld mit uns. Wir geben Ihnen ein Beispiel, damit Sie leicht verstehen können, wie Sie es selbst machen können, egal ob Sie ein kostenloses oder ein Premium WordPress Theme verwenden.

Wenn Sie die Dateien Ihres klassischen Themes zum ersten Mal individuell anpassen, empfehlen wir Ihnen, dies auf einer Staging-Website oder einer lokalen Version Ihrer WordPress Website zu tun. Auf diese Weise werden unerwartete Fehler, die durch die Bearbeitung des Codes verursacht werden, Ihre Live-Website nicht beeinträchtigen.

Als erstes müssen Sie die Theme-Datei finden, die für die Anzeige der Metadaten Ihrer Beiträge verantwortlich ist. Dies kann sein:

• Ihre Datei mit den einzelnen Beiträgen (normalerweise mit dem Namen single.php)
• Der Template-Teil, der den Inhalt Ihrer Beiträge anzeigt (z. B. content.php)
• Ihre Template-Tags-Datei, die Funktionen zur Anzeige von Beiträgen enthält (üblicherweise template-tags.php genannt)

Als Faustregel gilt, dass Sie nach Codezeilen suchen sollten, die das Datum des veröffentlichten Beitrags anzeigen. Diese Zeilen rufen in der Regel WordPress-Funktionen wie the_date(), the_time(), get_the_date(), get_the_time(), get_the_modified_date(), oder get_the_modified_time() auf.

Wenn Sie Hilfe benötigen, finden Sie hier eine Schritt-für-Schritt-Anleitung , wie Sie mit einem einfachen Plugin herausfinden, welche WordPress Theme-Dateien Sie bearbeiten müssen. Alternativ können Sie sich an den Entwickler Ihres WordPress Themes wenden oder in dessen Dokumentation nachsehen, um weitere Hilfe zu erhalten.

In unserem Fall ist die Datei, die für die Anzeige des Veröffentlichungsdatums der Beiträge verantwortlich ist, template-tags.php. Hier ist der vollständige Originalcode, den das Theme verwendet, um das genaue Veröffentlichungsdatum anzuzeigen:

if ( ! function_exists( 'twentysixteen_entry_date' ) ) :
	/**
	 * Prints HTML with date information for current post.
	 *
	 * Create your own twentysixteen_entry_date() function to override in a child theme.
	 *
	 * @since Twenty Sixteen 1.0
	 */
	function twentysixteen_entry_date() {
		$time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';

		if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
			$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">%4$s</time>';
		}

		$time_string = sprintf(
			$time_string,
			esc_attr( get_the_date( 'c' ) ),
			get_the_date(),
			esc_attr( get_the_modified_date( 'c' ) ),
			get_the_modified_date()
		);

		printf(
			'<span class="posted-on"><span class="screen-reader-text">%1$s </span><a href="%2$s" rel="bookmark">%3$s</a></span>',
			/* translators: Hidden accessibility text. */
			_x( 'Posted on', 'Used before publish date.', 'twentysixteen' ),
			esc_url( get_permalink() ),
			$time_string
		);
	}
endif;

Um die Datei selbst zu bearbeiten, können Sie die Datei über FTP oder den Dateimanager Ihres WordPress Hosting-Anbieters öffnen.

Wenn Sie ein Benutzer von Bluehost sind, können Sie den Dateimanager nutzen, indem Sie sich bei Ihrem Webhosting-Konto anmelden. Klicken Sie dann auf dem Dashboard auf den Tab „Websites“ und wählen Sie „Einstellungen“ für die Website, die Sie individuell anpassen möchten.

Dadurch wird die Seite mit den Einstellungen Ihrer Website geöffnet.

Wechseln Sie zum Tab „Erweitert“ und klicken Sie im Abschnitt „Dateimanager“ auf den Button „Verwalten“.

Sie sollten sich nun im Bluehost-Dateimanager befinden.

Da unsere Datei template-tags.php heißt, müssen wir zu public_html “ wp-content “ theme-name “ inc gehen.

Sie sehen nun mehrere Dateien, aus denen Sie auswählen können.

Wählen Sie hier die Datei template-tags.php aus. Klicken Sie mit der rechten Maustaste auf die Datei und wählen Sie „Bearbeiten“.

Suchen Sie nun den Code, der für die Anzeige des Veröffentlichungsdatums verantwortlich ist.

Dazu können Sie die Tasten STRG / Befehl und F verwenden.

Nun müssen Sie diesen speziellen Code so bearbeiten, dass er die Funktion human_readable_relative_date aufruft, die wir zuvor mit WPCode hinzugefügt haben.

So ersetzen wir den ursprünglichen Code von if ( ! function_exists( 'twentysixteen_entry_date' ) ) : zu endif;:

if ( ! function_exists( 'twentysixteen_entry_date' ) ) :
	/**
	 * Prints HTML with date information for current post.
	 *
	 * Create your own twentysixteen_entry_date() function to override in a child theme.
	 *
	 * @since Twenty Sixteen 1.0
	 */
	function twentysixteen_entry_date() {
		// Get the post's published timestamp
		$published_timestamp = get_the_time('U');


		// Generate the human-readable relative date
		$relative_date = human_readable_relative_date( $published_timestamp );


		// Output the relative date
		printf(
			'<span class="posted-on"><span class="screen-reader-text">%1$s </span><a href="%2$s" rel="bookmark">%3$s</a></span>',
			/* translators: Hidden accessibility text. */
			_x( 'Posted on', 'Used before publish date.', 'twentysixteen' ),
			esc_url( get_permalink() ),
			$relative_date
		);
	}
endif;

Sobald Sie den Code geändert haben, klicken Sie auf den Button „Änderungen speichern“.

Wenn Ihr Code nicht funktioniert und Sie ein absoluter Anfänger sind, dann empfehlen wir Ihnen, ein KI-Werkzeug wie ChatGPT von OpenAI zu verwenden, um herauszufinden, was mit Ihrem Code nicht stimmt.

Sie könnten eine einfache Frage stellen wie: „Hallo, ich versuche, X mit dem unten stehenden Code [fügen Sie Ihren Code hier ein] zu machen, aber es funktioniert nicht. Kannst du mir helfen, herauszufinden, was daran falsch ist?

Wenn Ihr Code funktioniert, sollten Sie in Ihrem Template für Einzelbeiträge folgendes sehen:

Bonustipps zum individuellen Anpassen Ihres WordPress-Blogs

Neben dem Hinzufügen von relativen Datumsangaben zu Ihren WordPress Beiträgen gibt es noch viele andere Möglichkeiten, wie Sie Ihren Blog individuell anpassen können. Hier sind einige Ideen:

• Wie man einzelne Kategorien in WordPress unterschiedlich gestaltet
• So fügen Sie einen Fortschrittsbalken in Ihre WordPress-Beiträge ein
• Festlegen eines Standard-Vorschaubildes für WordPress Beiträge-Vorschaubilder
• Wie man jeden WordPress-Beitrag unterschiedlich gestaltet
• Hinzufügen einer Lesefortschrittsleiste in WordPress-Beiträgen
• Wie man neue Beiträge für wiederkehrende Besucher in WordPress hervorhebt
• Wie man Breadcrumb Navigation Links in WordPress anzeigt

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie man relative Daten in WordPress anzeigt. Vielleicht interessieren Sie sich auch für unsere Expertenauswahl der besten Drag-and-drop Page-Builder für WordPress und unseren ultimativen Leitfaden zum Bearbeiten einer WordPress-Website.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.