Besucher bleiben länger bei der Stange, wenn Du unterhalb Deiner Beiträge ähnliche Artikel einblendest. Die meisten Blogs setzen dabei auf Plugins – das kann jedoch die Sicherheit und Performance Deines Blogs beeinträchtigen. Wir zeigen Dir, wie es ohne geht.
Mit sogenannten „Related Posts“-Plugins kannst Du bequem weitere Beiträge mit gleichen Schlagworten anzeigen. Plugins müssen allerdings aktualisiert werden, sind potenzielle Sicherheitslücken und können Dein Blog ausbremsen. Doch es geht auch anders – ohne Plugin und Nebenwirkungen.
Wichtig: Um starten zu können, benötigst Du WordPress und erste Erfahrungen in PHP. Für die beschriebenen Änderungen solltest Du zudem ein Child Theme verwenden, weil die Anpassungen sonst bei einem Update des Themes verloren gehen können. Bitte speichere auch immer die Original-Dateien, um im Notfall den ursprünglichen Zustand wiederherstellen zu können.
Und so ersparst Du Dir das „Related-Posts“-Plugin:
1. Beitragsbilder festlegen
Um Beiträge unterhalb der Artikel mit Bild anzuzeigen, müssen diese über ein Beitragsbild verfügen. Diese Funktion findest Du im WordPress Backend über Beiträge -> Erstellen bzw. Bearbeiten (Link rechts unten: Beitragsbild festlegen):
Falls Du diese Option nicht siehst, musst Du vorher die Ansicht anpassen, indem Du die Lasche oben rechts (Ansicht anpassen) öffnest und bei Beitragsbild ein Häkchen setzt.
Für den Upload eines neuen Bildes wählst Du anschließend den Reiter Datei hochladen. Empfehlenswert ist ein breites Seitenverhältnis (zum Beispiel 16:9), damit die aufgelisteten Beiträge später nicht zu viel Platz einnehmen. WordPress legt die Datei in der Mediathek ab und markiert sie automatisch. Nach einem Klick auf Beitragsbild festlegen leitet Dich WordPress zurück auf die Editor-Seite. Das Bild wird nun im Widget angezeigt. Nach einem Klick auf Veröffentlichen ist das Bild mit dem Beitrag verknüpft:
2. Ähnliche Beiträge anzeigen
Im folgenden Schritt legst Du fest, wo die ähnlichen Beiträge angezeigt werden sollen. Dafür bietet sich etwa der Bereich zwischen Beitrag und Kommentaren an. Wo der Code genau eingefügt wird, hängt vom verwendeten Theme ab. Beim Theme Twenty Seventeen fügst Du die Zeilen in die single.php oberhalb des Kommentars „// If comments are open or we have at least one comment, load up the comment template.“ ein.
// Ähnliche Beiträge anzeigen
$orig_post = $post;
global $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
$args=array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=>3, // Anzahl der angezeigten Beiträge
'caller_get_posts'=>1,
'orderby'=>'rand'
);
$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related-posts"><h3><b>Ähnliche Beiträge</b></h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post(); ?>
<li><div class="related-images"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
<div class="related-content">
<h3><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
</div>
</li>
<? }
echo '</ul></div>';
}
}
$post = $orig_post;
wp_reset_query();Beim Theme Twenty Seventeen sieht das im Editor so aus:
Die mit „//Anzahl der angezeigten Beiträge“ kommentierte Zeile ist selbsterklärend. In diesem Fall werden drei ähnliche Beiträge angezeigt. Um Leser nicht abzulenken, sind weniger Beiträge besser als mehr.
Unterhalb der Artikel werden nun Beiträge in zufälliger Reihenfolge angezeigt, die mindestens ein identisches Schlagwort haben. In diesem Beispiel sind das Beiträge mit dem Schlagwort „Kochen“. Das Beitragsbild und der Titel werden automatisch verlinkt:
3. Darstellung anpassen
Die Bilder fügen sich zwar in das bestehende Layout ein. Noch stören aber die Listenpunkte links neben den Bildern und die Abstände passen noch nicht. Mit ein bisschen Feinjustierung per CSS ist auch das kein Problem. Den Code fügst Du einfach in die style.css Deines Child Theme ein:
/* Ähnliche Beiträge */
#related-posts {
margin-top: 15px;
}
#related-posts h3 {
padding: 0px 0px 15px;
}
#related-posts li {
list-style: none !important;
}Deine Anpassungen solltest Du auf dem Desktop und auf dem Smartphone bzw. mit den Entwickler-Werkzeugen Deines Browsers testen. Mobil sehen die ähnlichen Beiträge bei uns damit so aus:
Selbermachen oder „Related Posts“-Plugin?
Vielleicht fragst Du Dich an dieser Stelle, ob sich der ganze Aufwand lohnt. Kommt drauf an: Wenn Du mit Code nichts anfangen kannst und die Implementierung möglichst einfach sein soll, ist die Installation eines gepflegten Plugins der bessere Weg. Selbermachen ist dann angesagt, wenn Du mit PHP und CSS vertraut bist und Dein WordPress schlanker werden soll. Weitere Vorteile sind: Mit dem Plugin-freien Vorgehen wirst Du unabhängiger von Dritten, reduzierst Risiken und musst Dir weniger Gedanken über Updates machen. Und letztlich macht das manuelle Einrichten oft mehr Spaß als die Installation auf Knopfdruck. 😉