Ähnliche Beiträge mit Thumbnails ohne Plugin anzeigen am Beispiel “Seashell”

Ähnliche beiträge

Nach Einbau der Funktion für die Darstellung “related posts” (ähnliche Beiträge) und diversen Änderungen in meinem neuen Theme wurden bei einigen Titeln keine Thumbnails angezeigt. Davon waren lediglich die Artikel betroffen, denen kein Beitragsbild zugeordnet ist.

Das alte Theme “Smoky” hatte ich nachträglich um die Funktion zum Festlegen eines Beitragsbildes ergänzt, die Ausgabe im Beitrag aber in der Artikel- und Seitenansicht unterdrückt. Stattdessen wurden dort nur die direkt im Beitrag eingefügten Grafiken angezeigt.

Der Vorteil dieser Methode war, dass ich die Grafikanzeige auch auf der Startseite sehr individuell gestaltet konnte, vor allem dann, wenn man sowohl horizontale als auch vertikale Fotos verwendet. Außerdem ermöglichte es mir, ein Standardbild festzulegen (z. B. mein Bloglogo), so dass dieses zwar im Beitrag nicht erschien,  aber für die Thumbnailanzeige bei den “ähnlichen Beiträgen” generiert wurde.

Mit Änderung des Themes entschied ich: Eine einheitliche Beitragsbilddarstellung soll her. Aktuell stehen jetzt an erster Stelle die festgelegten Artikelbilder. Nach dieser Umstellung musste ich sämtliche manuell eingefügten Grafiken entfernen, da die Ausgabe der Bilder doppelt erfolgte.

Mut zur kreativen Lücke

Mittlerweile habe ich die Größe sämtlicher Beitragsbilder dem Theme angepasst, manche ausgetauscht und auch ganz Neue erstellt. Daher sind noch einige wenige, meist ältere Artikel übrig geblieben, zu denen mir schlichtweg die Idee fehlte, welche Grafik ich für sie verwenden oder basteln könnte. Diese sind dann eben “bildlos” geblieben.

Da bei einigen Posts das als Beitragsbild festgelegte Bloglogo über jedem Artikel erschien, musste ich auch dieses entfernen. Der ungünstige Nebeneffekt war, dass dadurch keine Thumbnails mehr, sondern nur noch der jeweilige Titel angezeigt wurde.

Code komplett geändert

Beitragsbild festlegenDaher beschloss ich, den Code “related posts” dahingehend zu ergänzen, um automatisiert die Anzeige einer Standardgrafik für die Beiträge zu erwirken, denen ich kein Beitragsbild zugeordnet habe. Ein wenig steckt auch der Gedanke dahinter, dass ich mir künftig die Option erhalte, auch mal kein Bild verwenden zu müssen – für den Fall, dass es mir an Kreativität mangelt. ;-)

Ich habe eine Weile recherchiert und festgestellt, dass es nicht so einfach ist, dieses in meinem derzeit verwendeten Code umzusetzen. Daher habe ich nun eine komplett andere Umsetzung gewählt, als die in diesem Beitrag dokumentierte. Danach hatte ich die Funktion mittels Toolboxmodul erstellt und dessen Ausgabe in der single.php meines alten Themes vorgenommen.

Im Theme “Seashell” habe ich die komplette Funktion einschließlich Ausgabe der loop.php – im Anschluss an den Code für die Social Media-Buttons – hinzugefügt.

Gewünschten Code “zusammengebastelt”

Im Netz existieren ja unzählige manuelle Umsetzungsvorschläge. Mal mit, mal ohne Thumbnails, Ausgabe via Tags oder Kategorien. Es war nicht einfach, einen Code zu finden, der meinem Wunsch entsprechend

die kategoriebasierte Ausgabe “ähnlicher Beiträge” mit Thumbnails einschließlich Standardgrafik bei Nichtvorhandensein eines Beitragsbildes erzielt.

Daher habe ich mir einige Dokumentationen näher angeschaut und daraus einen Code erstellt, der kategoriebasierte Beiträge mit Thumbnail und Standardgrafik ausgibt und im Child-Theme umgesetzt wird.

Ich möchte aber auf jeden Fall die Beiträge erwähnen, die mir dabei geholfen haben. Da wäre schon einmal der Beitrag bei Beginner’s Book, dessen Code die Ausgabe ähnlicher Beiträge auf Kategoriebasis ermöglicht.

Eine tolle Hilfe war Andors Beitrag zum selben Thema – bei ihm fand ich die ausschlaggebende Zeile, die eine Alternativgrafik zieht, wenn kein Beitragsbild zur Verfügung steht:

<a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('template_directory')?/>/lib/images/thumb.png" /></a>

Last, but not least habe ich Christophs Tipp den Pfad zur Grafik für die Umsetzung in einem Child-Theme umsetzen können.

Mein individueller Code

So, nun aber genug palavert. Den folgenden Code habe ich der loop.php des Themes “Seashell” hinzugefügt und im Child-Theme gespeichert:

<div class="rpbc">	<br/>	
<ul class="rpbc"><?php
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'showposts'=> 6,  // Number of related posts that will be shown.
'caller_get_posts'=> 1,
'orderby'=>'rand' // Randomize the posts
);
 
$my_query = new wp_query($args);
if( $my_query->have_posts() ) {
echo '<div id="relatedposts"><h3>Ähnliche Beiträge</h3><ul>';
while ($my_query->have_posts()) {
$my_query->the_post();
?>
  
<?php
if ( has_post_thumbnail() ) { ?>
<li><div class="rpbc"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?><?php the_title(); ?></a></div></li>
<?php } else { ?>
<li><div class="rpbc"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/standardlogo_rpc.jpg" alt="<?php the_title(); ?>" /><?php the_title(); ?></a></div></li>
<?php }
?>
  
<?php
}
echo '</ul>';
}
}
$post = $backup;
wp_reset_query();
?></ul>
</div>

Zeile 10: Die Anzahl der dargestellten Beiträge könnt ihr natürlich variieren

Zeile 26: Hier müsst ihr gegebenenfalls noch den Pfad zu eurer Standardgrafik anpassen. Ich habe die entsprechende Grafik im Verzeichnis “Images” meines Child-Themes per ftp hochgeladen. Falls ihr kein Child-Theme verwendet, muss diese Zeile wie folgt angepasst werden:

<li><div class="rpbc"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/standardlogo_rpc.jpg" alt="<?php the_title(); ?>" /><?php the_title(); ?></a></div></li>

Styling

Die Darstellung habe ich nur geringfügig geändert:

.rpbc h3{margin:50px 0 0 0}
.rpbc{width:100%}
.rpbc a{text-decoration:none;color:#000;float:left;display:block;padding:10px 10px 0px;text-align:left;text-overflow:ellipsis;-webkit-hyphens:auto;-o-hyphens:auto;-ms-hyphens:auto;-moz-hyphens:auto;hyphens:auto}
.rpbc li{list-style:none;margin:5px;padding:10px 5px 5px 5px;min-width:230px;width:150px;height:250px;margin-bottom:20px;float:left;border:1px solid #dedede;filter:alpha(opacity=80);-moz-opacity:.8;opacity:.8}
.rpbc li:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}
.rpbc img{width:171px;height:110px;float:left;margin:0 15px 17px;border:none!important;filter:alpha(opacity=80);-moz-opacity:.8;opacity:.8}

 

 Die mobile Ansicht erscheint mir ganz annehmbar. :-)Ähnliche Beiträge in der Mobilansicht

 

Diese Codes können meines Erachtens auch in jedem anderen Theme eingesetzt werden. In meinem alten Theme wäre es die single.php gewesen. In anderen Themes heißt die verantwortliche Datei vermutlich content.php. Zur Not hilft eben einfach nur … ausprobieren. Aber bitte nicht vergessen, vorher eine Dateisicherung anzulegen. :-)

Die Autorin:

Sylvi

Meine Beiträge beinhalten eigene Erfahrungen über Soft- und Hardware, Social Media und die ich als WordPress-Bloggerin und Joomlanerin gesammelt habe. Zudem widme ich mich dem schönen Hobby "Fotografie".