Manueller Einbau der Anzeige von ähnlichen Beiträgen

Anzeige ähnliche Beiträge per manuellem Einbau

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;
}

...

 

Zur Sicherheit solltet ihr vor Veränderungen der functions.php eine FTP-Sicherung anlegen.

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! :-)

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".

10 Kommentare

  • Hallo Silvy, ich finde deine Umsetzung sehr gelungen. Macht richtig was her, auch mit dem Hoover. Tippi Toppi.
    Schönen Abend und ein schönes Wochenende.
    LG Hans

    • Hej Hans,

      freu mich total, dass sie Dir so gut gefällt. :-D
      Ich wünsche Dir auch einen tolles und hoffentlich sonniges Wochenende.

      Lieben Gruß
      Sylvi

  • Hi Sylvi echt schöner Beitrag habs getestet geht auch :)
    nur muss ich was an der Css ändern! Nur was die Thumbnails hätte ich gern links und daneben den Beitrag siehe Link?
    Online Blogger der Technik Blog

    • Hallo Mathias,

      es ist möglich, dass ich ihn noch ein bisschen verändert habe. Der aktuelle CSS-Code sieht bei mir nun so aus:

      .rpbc{width:100%;font-size:14px}
      .rpbc a{text-decoration:none;color:#000;float:left;display:block;padding:4px 4px 0 10px;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;}

      Gruß Sylvi