WordPress – Ähnliche Artikel anzeigen mit Bild und Textvorschau – YARPP Template

Anleitung und Script für WordPress Plugin YARPP welches ähnliche Beiträge anzeigt

WordPress Plugins gibt es viele und auch einige über welche man ähnliche Artikel anzeigen kann, meine Wahl ist nun auf YARPP (Yet Another Related Posts Plugin) gefallen, da dieses Script auch in mehrsprachigen Blogs welche z.B. mit WPML umgesetzt werden, eingesetzt werden kann. Des weiteren kann die Ausgabe einfach modifiziert und nach den eigenen Wünschen im Design angepasst werden.

Ein zusätzliches nettes AddOn von YARPP ist ebenfalls, dass die ähnlichen Artikel auch in den RSS Feed eingebunden werden können. Alle Einstellungen für die Ausgabe können komfortabel über das Backend eingestellt werden. Möchte man das Design der Ausgabe verändern, kann der Nutzer auf viele vordefinierte Templates zurück greifen. Eine Handvoll davon werden beim Script gleich mitgeliefert und müssen nur noch in den eigenen Template Ordner kopiert werden – etwas ausgefallenere YARPP Templates findet man im Internet und natürlich hier!

Bevor wir zum Template kommen, hier noch eine kleiner Einblick in die Konfigurationsoberfläche von YARPP:

Download: YARPP

Wer nun seinen Blog folgendes Design der ähnlichen Beiträge geben möchte:

…muss ein neues Template erstellen oder ein bestehendes Template bearbeiten.

Hier der Quellcode:

 

<?php /*
YARPP template
Author: mitcho (Michael Yoshitaka Erlewine)
Modified by: http://kenntwas.de
Modified for WPML and default picture by: https://itler.net (german) – http://www.itler.org (english)
*/
?>
<div class=“related_posts“>

 

<?php if ($related_query->have_posts()):?>

<?php
if (function_exists(„icl_register_string“)) {
icl_register_string(„Yet Another Related Posts Plugin“,“related posts header“,“Vielleicht auch noch interessant:“);
icl_register_string(„Yet Another Related Posts Plugin“,“no related posts message“,“Keine ähnlichen Beiträge.“);
}

?>

<h3><?php echo (function_exists(„icl_t“) ? icl_t(„Yet Another Related Posts Plugin“,“related posts header“,“Vielleicht auch noch interessant:“) : „Interessante Artikel“) ?></h3>

<ul>
<?php while ($related_query->have_posts()) : $related_query->the_post(); ?>

<li>
<div class=“related_thumbnail“>
<a href=“<?php the_permalink() ?>“ rel=“bookmark“ title=“<?php the_title(); ?>“><?php if ( has_post_thumbnail() ) { the_post_thumbnail(array(100,100), array(‚title'=>“)); } else {?> <img src=“<?php bloginfo(‚template_directory‘) ?>/custom/images/itler-logo-yarpp.png“ alt=“img“ /><?php ;}?></a>
</div>
<div class=“related_permalink“>
<a href=“<?php the_permalink() ?>“ rel=“bookmark“ title=“<?php the_title_attribute(); ?>“><?php the_title(); ?></a>
</div>
<div classe=“related_excerpt“>
<?php
$excerpt = get_the_excerpt();
// strip html
$excerpt= strip_tags($excerpt);
$len = 220 – strlen(get_the_title()); //max. Number of chars to display in excerpt
$break=“ „;
// return with no change if string is shorter than $limit

// an Wortgrenzen umbrechen
$newExcerpt = substr($excerpt, 0, $len);
if(false !== ($breakpoint = strrpos($newExcerpt, $break))) {
$newExcerpt = substr($newExcerpt, 0, $breakpoint);
}
$newExcerpt = $newExcerpt.“ …“;

echo „<p>“.$newExcerpt.“</p>“; //finally display excerpt
?>
</div>
<div style=“clear:both;“></div>
</li>

<?php endwhile; ?>
</ul>
<div style=“clear:both;“></div>

<?php else: ?>

<p><?php echo (function_exists(„icl_t“) ? icl_t(„Yet Another Related Posts Plugin“,“no related posts message“,“Keine ähnlichen Beiträge.“) : „Keine weiteren Artikel“) ?></p>

<?php endif; ?>
</div>

 

In das CSS File vom Blog müsst ihr noch folgende Zeilen ergänzen:

/* yarpp */
.related_posts{
width: 100%;
font-size: 12px;
}

.related_posts a{
text-decoration: none;
}

.related_posts li{
margin: 5px;
padding: 5px;
width: 425px;
height: 105px;
float:left;
border: 1px solid #dedede;
list-style-type: none;
}

.related_thumbnail img{
width: 100px;
max-height: 90px;
float: left;
margin: 5px;
//border: 3px solid #dedede;
}

/* EOF yarpp */

Das Script stammt übrigens in der Grundversion von KenntWas – ich habe diese nur um folgende Funktionen erweitert:
– Multilanguage-Fähigkeit – Das Template kann mit mehreren Sprachen genutzt werden.
– Anzeige eines Default-Bildes (zuvor wurden keine Beiträge angezeigt, bei denen kein Bild hinterlegt war – jetzt wird ein fest definiertes Foto / Bild angezeigt)

Bevor ihr das File jedoch benutzen könnt, solltet ihr noch ein paar Einstellungen tätigen:

Bild hochladen und Bildpfad anpassen
Damit das Script auch arbeitet und ein Bild anzeigt, wenn kein Foto oder Bild im Beitrag vorhanden ist, muss ein Default-Bild in das Template hoch geladen werden. Dieses sollte eine Größe von ca. 100×100 Pixel besitzen.

Den Pfad müsst ihr an dieser Stelle ändern:

<a href=“<?php the_permalink() ?>“ rel=“bookmark“ title=“<?php the_title(); ?>“><?php if ( has_post_thumbnail() ) { the_post_thumbnail(array(100,100), array(‚title'=>“)); } else {?> <img src=“<?php bloginfo(‚template_directory‘) ?>/custom/images/itler-logo-yarpp.png“ alt=“img“ /><?php ;}?></a>

Jetzt könnt ihr noch die Länge des Vorschautextes anpassen. Dies erledigt ihr an dieser Stelle:

$len = 220 – strlen(get_the_title()); //max. Number of chars to display in excerpt

Die Breite der Anzeige definiert ihr hier:

width: 425px;

Länge der Textvorschau und die Breite der Anzeige müssen aufeinander abgestimmt werden.

 

So, wenn diese Änderungen durchgeführt worden sind – sollte das Template bei Euch sauber funktionieren.

Solltet ihr einen Blog in mehreren Sprachen besitzen, müsst ihr nun natürlich noch die Sprache anpassen und übersetzen:

 

 

Sind diese Änderungen getätigt, wünsche ich Euch viel Spaß mit YARPP und dem WordPress Plugin Template mit Bild und Textvorschau.