Manueller Einbau der Anzeige von ähnlichen Beiträgen

In diesem Beitrag hatte ich unter anderem erwähnt, dass ich die Anzeige ähnlicher Beiträge mittels Bohncore-Variante und Toolbox-Lösung umgesetzt habe. Mittlerweile habe ich die Darstellung noch ein wenig verändert und die Anzahl der Beiträge von 4 auf 6 erhöht.

Zur besseren Veranschaulichung möchte ich noch einmal kurz dokumentieren, wie nun in meinem Blog die Codes aussehen, damit Funktion und Aussehen dem Theme “Smoky” angepasst sind.

Die Umsetzung der Funktion

Wie im oben verlinkten Beitrag bereits erwähnt, verwende ich die Funktion in dem Plugin Toolbox per Modul eigentlich schon eine ganze Weile. Nur hatte ich bisher eine numerische Auflistung mit acht Beiträgen gewählt. Die Anzahl habe ich auf sechs reduziert.

Der Code für das Toolbox-Modul sieht nun so aus:

<?php
/*
Module Name: Ausgabe Kategorie-verwandter Artikel
Module URI: 
Description: Ausgabe kategorie-verwandter Artikel. [Frontend]
Author: Sergej Müller
Author URI: 
*/


/* Sicherheitsabfrage */
if ( !class_exists('Toolbox') ) {
die();
}


/** Ab hier kann's los gehen */
function sm_related_posts() {
/* Keine Kategorien */
if ( ! $cat = get_the_category() ) {
return;
}
/* IDs */
$ids = implode(
',',
array_reduce(
$cat,
function($v, $w) {
$v[] = $w->term_id;
return $v;
}
)
);
/* Query starten */
$query = new WP_Query(
array(
'cat' => $ids,
'orderby' => 'rand',
'post__not_in' => array(get_the_ID()),
'posts_per_page' => 6
)
);
/* Keine Ergebnisse */
if ( ! $query->have_posts() ) {
return;
}
/* Ausgabe */
echo '<ul id="related">';
while ( $query->have_posts() ) {
$query->the_post();
echo sprintf(
'<li class="item"><a href="%s">%s%s</a></li>',
get_permalink(),
( function_exists('has_post_thumbnail') && has_post_thumbnail() ? get_the_post_thumbnail() : '' ),
get_the_title()
);
}
/* Reset */
wp_reset_postdata();
echo '</ul>';
}
 
/* Funktionsaufruf */
add_action(
'related_posts',
'sm_related_posts'
);

Ihr habt Toolbox nicht installiert? Kein Problem, dann müsst ihr folgenden Code der functions.php eures Themes hinzufügen, und zwar ab

function sm_related_posts() {
/* Keine Kategorien */
if ( ! $cat = get_the_category() ) {
return;
}

...

Die Darstellung per CSS

Durch den CSS-Wert .rpbc img{display:none} hatte ich bis vor Kurzem die Anzeige der Beitragsbilder unterbunden. Jetzt möchte ich, dass diese angezeigt werden. Außerdem sollte die Titelüberschrift unter den jeweiligen Thumbnails erscheinen.

 Ein kleiner Hovereffekt ist ebenfalls enthalten, die Idee habe ich von der Jetpack-Variante “geklaut”. ;-)

Mit ein paar Veränderungen und Ergänzungen sehen die CSS-Attribute in der style.css meines Themes wie folgt aus:

.rpbc_title{font-family:Verdana,Geneva,sans-serif;color:#2F2F2F;font-size:25px;font-weight:normal;margin:20px 0 20px 0;letter-spacing:-0.03em}
.rpbc{width:100%;font-size:14px}
.rpbc a{text-decoration:none;color:#000;float:left;display:block;padding:4px 4px 0 6px;text-align:left;text-overflow:ellipsis;-webkit-hyphens:auto;-o-hyphens:auto;-ms-hyphens:auto;-moz-hyphens:auto;hyphens:auto;}
.rpbc li{margin:5px;padding:10px 5px 5px 5px;min-width:180px;width:120px;height:190px;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:100px;height:78px;float:left;margin:0 25px 17px 25px!important;border:none!important;filter:alpha(opacity=80);-moz-opacity:.8;opacity:.8;}
.rpbc img:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}

Positionieren unter dem jeweiligen Beitrag

Abschließend habe ich folgenden Code der single.php meines Themes zwischen Content- und Kommentarbereich hinzugefügt:

<div id="rpbc_top"></div>
<div class="rpbc">	
	
<div class="rpbc_title">&Auml;hnliche Beitr&auml;ge</div>	
<ul class="rpbc"><?php do_action('related_posts'); ?></ul>
</div>

Anmerkung zur Jetpack-Variante

Auch wenn mir die Optik per Jetpack-Modul sehr gut gefiel, letztendlich hat mich geärgert, dass sich die Anzeige der ähnlichen Beiträge direkt unter den Content “dranhängt”. Das heißt, bei Verwendung meiner statischen und manuell eingebauten Social Media-Buttons war es mir nicht möglich, diese über den ähnlichen Beiträgen zu platzieren. Daher bin ich auch auf meinem Zweitblog wieder auf den manuellen Einbau wie hier beschrieben umgestiegen.

Vielleicht helfen euch diese Codes ein wenig dabei, die Darstellung in eurem Blog entsprechend anzupassen.

Ansonsten viel Spaß beim Tüfteln! :-)