Zum Inhalt springen
Startseite » WP Snippets » NEU-Icon bei neuen Beiträgen anzeigen

NEU-Icon bei neuen Beiträgen anzeigen

Für viele Besucher ist das Veröffentlichungsdatum eines Beitrags wichtig, da es unter Umständen um neue und vielleicht auch zeitlich begrenzte Informationen geht.

Mit einem NEU-Icon auf deinem Beitragsbild oder Titel kann der Nutzer einen neuen Beitrag viel schneller wahrnehmen und sieht, dass deine Seite up to date ist.

function add_new_label_to_recent_posts($title, $id = null) {
    // Nur im Frontend und im Haupt-Loop ausführen
    if (is_admin() || !in_the_loop() || !is_main_query()) {
        return $title;
    }

    // Nur für Posts (nicht Seiten, Menüs etc.)
    if (!$id || get_post_type($id) !== 'post') {
        return $title;
    }

    // Zeitraum für den "Neu"-Hinweis in Tagen
    $days = 7;

    // Caching per Post-ID
    static $cache = [];
    if (isset($cache[$id])) {
        return $cache[$id];
    }

    // Veröffentlichungsdatum holen und Differenz berechnen
    $post_date    = get_the_time('U', $id);
    $current_date = time();
    $date_diff    = ($current_date - $post_date) / DAY_IN_SECONDS; // WordPress-Konstante

    $new_title = ($date_diff <= $days)
        ? '<span class="new-label">Neu</span> ' . $title
        : $title;

    $cache[$id] = $new_title;
    return $new_title;
}
add_filter('the_title', 'add_new_label_to_recent_posts', 10, 2);

Erklärung des Codes:

  • $days = 7;: Hier kannst du die Anzahl der Tage einstellen, innerhalb derer ein Beitrag als „Neu“ gekennzeichnet wird.
  • $post_date: Holt das Veröffentlichungsdatum des Beitrags.
  • $date_diff: Berechnet die Differenz in Tagen zwischen dem aktuellen Datum und dem Veröffentlichungsdatum des Beitrags.
  • if ($date_diff <= $days): Wenn der Beitrag innerhalb des definierten Zeitraums veröffentlicht wurde, wird das „Neu“-Label hinzugefügt.
  • add_filter(‚the_title‘, ‚add_new_label_to_recent_posts‘, 10, 2);: Dieser Filter wird verwendet, um das „Neu“-Label dem Beitragstitel hinzuzufügen.

Schritt 2: CSS für das „Neu“-Label hinzufügen

Füge das folgende CSS in deine style.css oder unter Design > Customizer > Zusätzliches CSS ein, um das „Neu“-Label zu stylen:

.new-label {
    background-color: #ff0000; /* Rot für den Hinweis */
    color: #ffffff; /* Weiße Schrift */
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
}

Schritt 3: Testen und Anpassen

  • Testen: Erstelle einen neuen Beitrag und prüfe, ob das „Neu“-Label korrekt angezeigt wird, wenn du den Beitrag auf der Website ansiehst.
  • Anpassen: Du kannst den Zeitraum anpassen, indem du den Wert von $days änderst. Ebenso kannst du das CSS weiter anpassen, um das Label nach deinen Wünschen zu gestalten.

Zusammenfassung

Mit dieser Methode wird das „Neu“-Label automatisch für alle neuen Beiträge angezeigt, die innerhalb eines bestimmten Zeitraums veröffentlicht wurden, ohne dass ein Shortcode benötigt wird. Dies ist eine einfache und automatische Möglichkeit, neue Inhalte hervorzuheben.

Ähnliche Beiträge