Related Posts mit Thumbnails

Am Wochende habe ich eine Änderung am Design meines Blogs vorgenommen. Ich habe schon seit längerer Zeit das Related Posts Plugin von Sergej Müller hier im Einsatz. Das Plugin sucht nach themenrelevanten Beiträgen innerhalb der aktuellen Kategorie und listet die gefundenen Artikel unter jedem Post gruppiert auf.

Related Posts ab sofort mit Thumbails

Ab sofort sind die Related Posts mit einem Thumbnail Bild versehen. Das sieht optisch im Vergleich zur reinen textuellen Auflistung der Beiträge sehr viel ansprechender aus. Schaut euch mal das Beispiel an. Schön, oder? Unten beschreibe ich, wie das geht.

Wie geht’s? Code-Schnipsel zum Kopieren

Nach der Installation des Plugins sind lediglich 2 Anpassungen am Design vorzunehmen.

1. Style.css erweitern

Folgenden Code an das Ende der style.css (in WordPress unter Design / Editor zu finden) kopieren.

.related{
width: 100%;
font-size: 12px;
background: none;
}
.related a{
text-decoration: none;
}
.related li{
margin: 5px;
padding: 5px;
width: 265px;
float:left;
border: 1px solid #dedede;
}
.related ul li{
background: none;
}
.related img{
width: 70px;
height: 70px;
float: left;
margin: 5px;
border: 3px solid #dedede;


2. Single.php anpassen

Folgenden Code in PHP Datei Single.php (einzelner Artikel) kopieren. In meinem Beispiel habe ich eine Stelle am Ende eines Artikels gewählt (nach dem Statement <?php the_content(“); ?>).

<div class="related">
<h3>Weitere interessante Beiträge</h3>
<ul style="list-style-image: none;">
<?php do_action(
'related_posts_by_category',
array(
'orderby' => 'post_date',
'order' => 'DESC',
'limit' => 6,
'echo' => true,
'before' => '<li>',
'inside' => '',
'outside' => '',
'after' => '</li>',
'rel' => 'nofollow',
'type' => 'post',
'image' => 'array(70,70)',
'default' => 'http://weblog-abc.de/wordpress/wp-content/uploads/2011/08/logo-weblogabc-70.png',
'message' => 'Keine Treffer'
)
) ?>
</ul>
</div>


Bei der Bildgröße habe ich mit jeweils 70px Höhe und Breite exakt die Größe meiner WordPress Thumbnails angegeben, die ich jedem Artikel hinzufüge. Da es die Thumbnail Funktion erst seit WordPress 2.9 gibt, habe ich noch ein Default Bild hinzugefügt, damit auch ältere Posts per Bild verlinkt werden können. Das Statement .related lu li { background: none; } war bei mir wichtig, da ich meine normale Formatierung für Aufzählungen (vor allem die Aufzählungszeichen) bei den „related posts“ nicht übernehmen wollte.

Weitere Möglichkeiten zur Individualisierung der „Related Posts“ sind auf der Plugin Seite beschrieben.