Orientieren Sie die Besucherinnen und Besucher Ihrer Website auf einen Blick über neue Beiträge. Das lässt sich recht einfach einrichten: neben den Titel der einzelnen Post erscheint dann auf Ihrer Übersichtsseite eine Markierung – das kann ein Text oder auch ein Bild sein.
Der Code, der den Markierungsjob ausführt ist der nachfolgende. Fügen Sie ihn in Ihre Datei functions.php ein, welche Sie unter Design/Theme-Editor öffnen können.
function lastvisit_the_title ( $title, $id ) {
if ( !in_the_loop() || is_singular() || get_post_type( $id ) == 'page' ) return $title;
// gibt Titel aus, wenn kein Cookie vorhanden ist
if ( !isset($_COOKIE['lastvisit']) || $_COOKIE['lastvisit'] == '' ) return $title;
$lastvisit = $_COOKIE['lastvisit'];
$publish_date = get_post_time( 'U', true, $id );
if ($publish_date > $lastvisit) $title .= '<span class="new-post-text">Neu!</span>';
return $title;
}
add_filter( 'the_title', 'lastvisit_the_title', 10, 2);
// Cookie setzen
function lastvisit_set_cookie() {
if ( is_admin() ) return;
$current = current_time( 'timestamp', 1);
setcookie( 'lastvisit', $current, time()+60+60*24*7, COOKIEPATH, COOKIE_DOMAIN );
}
add_action( 'init', 'lastvisit_set_cookie' );- Der Code klärt zunächst ab, ob ein Cookie im Browser abgelegt ist, das besagt, wann der/die BesucherIn letztmals auf der Website war.
- Ist ein solches Cookie vorhanden, werden alle seither veröffentlichten Beiträge mit «Neu» markiert.
- Fehlt das Cookie, handelt es sich wohl um einen Erstaufruf; die Beiträge werden ohne Markierung angezeigt.
- Im Anschluss aktualisiert der Code das bestehende Cookie, bzw. setzt ein solches, um beim nächsten Aufruf die neuen Beiträge entsprechend markieren zu können.
Sie haben nun noch die Möglichkeit die Textmarkierung «Neu!» ein wenig zu gestalten. Das erledigen Sie mit ein paar Zeilen CSS-Code, den Sie in Ihr CSS-Stylesheet unter Design/Customizer/Zusätzliches CSS einfügen:
.new-post-text {
background: #d3e5f7;
padding: 3px;
border: 1px solid #000095;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-left:5px;
font-size: 16px;
font-family: 'Roboto';
text-transform: uppercase;
color: #000000;
font-weight: bold;
}Denn CSS-Code sollten Sie natürlich so anpassen, dass er zum Aussehen Ihrer Website passt.
Variante: Bildmarkierung statt Text
Statt oben vorgeschlagener Textmarkierung «Neu!» können Sie auch ein Bild anzeigen lassen. Der Code ist fast derselbe; er gehört statt der oben erwähnten Codeblöcke (auf keinen Fall zusätzlich) in die functions.php. Diese rufen Sie unter Design/Theme-Editor auf:
function lastvisit_the_title ( $title, $id ) {
if ( !in_the_loop() || is_singular() || get_post_type( $id ) == 'page' ) return $title;
// gibt Titel aus, wenn kein Cookie vorhanden ist
if ( !isset($_COOKIE['lastvisit']) || $_COOKIE['lastvisit'] == '' ) return $title;
$lastvisit = $_COOKIE['lastvisit'];
$publish_date = get_post_time( 'U', true, $id );
if ($publish_date > $lastvisit) $title .= '<img class="new-post-image" src="https://dr-code.ch/wp-content/uploads/baseline_new_releases_black_18dp.png" alt="new">';
return $title;
}
add_filter( 'the_title', 'lastvisit_the_title', 10, 2);
// Cookie setzen
function lastvisit_set_cookie() {
if ( is_admin() ) return;
$current = current_time( 'timestamp', 1);
setcookie( 'lastvisit', $current, time()+60+60*24*7, COOKIEPATH, COOKIE_DOMAIN );
}
add_action( 'init', 'lastvisit_set_cookie' );Dieser Code hat genau dieselben Funktionen wie der erste und unterscheidet sich bloss durch die Zeile 7, welche nun keinen Text, sondern ein Bild aufruft. Natürlich sollten Sie die Bild-URL mit einem eigenen Bild ersetzen, damit die Anzeige zu Ihrem Sitedesign passt.
Auch dieses Bild lässt sich mit ein wenig CSS-Code stylen. Zum Beispiel wie der folgende, den Sie anstelle des erstgenannten CSS-Codes in Ihr CSS-Stylesheet unter Design/Customizer/Zusätzliches CSS einfügen können:
.new-post-image {
height: 20px;
width: 20px;
float: left;
margin-right: 20px;
}Voilà. Gar nicht so kompliziert.
Werbung
Werbung
