Related Posts mit Thumbnail für WordPress

Related Posts, also weitere Artikel die mit dem aktuell angezeigten Artikel in irgendeiner Weise in Verbindung stehen, können eine gute Ergänzung eurer internen Verlinkung darstellen. Natürlich und vor allem hilft es aber auch euren Lesern. Was gibt es besseres als direkt nach dem fertig Lesen eines Artikels schon einen neuen, thematisch verwandten, Artikel vorgeschlagen zu bekommen?

Im Folgenden Artikel möchte ich euch ein WordPress Plugin zu diesem Zweck kurz vorstellen und auch zeigen wie ihr dieses an eure Bedürfnisse anpassen könnt und um kleine Thumbnails (Vorschaubilder) zu den reinen Linktexten erweitert.

Related Posts WordPress Plugin

Eine sehr schönes WordPress Plugin um verwandte Artikel anzeigen zu lassen ist Yet Another Related Posts Plugin. Im unten gezeigten Bild und natürlich auch am Ende diese Artikels könnt ihr einen Eindruck meiner Modifikation gewinnen. Diese wurde anhand eines Templates erstellt, natürlich funktioniert das Plugin auch ganz ohne Templates und kann einfach mit ein paar HTML Codes angepasst werden.

Wie ihr sehen könnt habe ich dieses Plugin um eine Anzeige von einem Thumbnail erweitert und auch sonst ein wenig besser an das Design meines Blogs angepasst. Wie dies genau geht, zeige ich euch im nächsten Abschnitt.

Related Posts Thumbnail WordPress

Das Related Posts Plugin habe ich bereits schon einmal im Artikel über die 10 besten WordPress Plugins vorgestellt, dort findet ihr noch weitere Informationen, wie etwa das ‚Matching‘ funktioniert,  also auf welche Weise passende Artikel ausgewählt werden.

Thumbnail Template

Um im Plugin ‚Yet Another Related Posts‘ (kurz YARPP) ein eigenes Template zu nutzen sind folgende Schritte nötig:

  1. Ihr kopiert die Datei ‚yarpp-template-thumbnail.php‘ aus dem Ordner  ‚../wp-content/plugins/yet-another-related-posts-plugin/yarpp-templates/yarpp-template-thumbnail.php‘ nach ‚ ../wp-content/themes/euer-theme/yarpp-template-thumbnail.php‘.
  2. Nun könnt ihr im WordPress Backend unter ‚Einstellungen -> Related Posts (YARPP) -> Darstellung‘ eine Haken bei ‚Eine eigene Template-Datei verwenden‘ setzen und die Vorlage ‚yarpp-template-thumbnail.php‘ auswählen.
  3. Und das war es auch schon. Glückwunsch. :)

Jetzt nutzt ihr natürlich nur das Standard Template, welches mir nicht sonderlich gut gefallen hat. Zu diesem Zweck habe ich einige Anpassungen vorgenommen.

Als erstes ging es an das grobe, die grundlegende Darstellung. Der PHP Code unten sucht bei jedem Schleifendurchlauf das passende Thumbnail heraus und speichert den <img /> Tag zu diesem in einer Variable. Das erste ‚echo‘ fügt den Code dann im ersten ‚div‘ ein, im zweiten besorge ich mir mit WordPress Hausmitteln den passenden Titel.

Pfad: ../wp-content/euer-theme/yarpp-template-thumbnail.php

<strong>Empfohlene Artikel:</strong>
<div style="border-bottom: 1px dotted #99cc00; margin-bottom: 10px"></div>

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

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

<?php
 $thumb = '';
 if ( has_post_thumbnail() ) {
 $thumb = get_the_post_thumbnail( $post->ID, 'yarpp', array( 'title' => trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt )) ) );
 }
 ?>
 <div class="related">
 <div class="related-image">
 <a href="<?php the_permalink() ?>" rel="bookmark">
 <?php echo $thumb; ?>
 </a>
 </div>
 <div class="related-text">
 <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" rel="bookmark">
 <?php the_title(); ?>
 </a>
 </div>
 </div>
 <?php endwhile; ?>
 <div style="clear: both"></div>
<?php endif; ?>

Folgenden Aufruf ergänzt ihr einfach in eure ‚functions.php‘, dieser bewirkt das Thumbnails in passender Größe erstellt werden. Hier könnt ihr natürlich in der Größe variieren. Denkt aber dann auch daran die *.css Datei entsprechend anzupassen.

Pfad: ../wp-content/euer-theme/functions.php


add_image_size( 'yarpp', 40, 40, true );

Als letztes noch meine Ergänzung in der *.css Datei meines Themes. Hier wird nun der Design ‚Rahmen‘ festgelegt. Dieses passt natürlich in erster Linie gut in meinen Blog, nicht zwingend in euren, hier müsst ihr also wohl etwas kreativ werden und einige Zeilen editieren.

Pfad: ../wp-content/euer-theme/style.css


.related {
 line-height: 40px;
 vertical-align: middle;
 color: #808080;
 background: #f8f8f8;
 margin: 0 0 7px 0;
 padding: 2px;
 overflow: hidden;
 border: 1px solid #eee;
 -webkit-border-radius: 2px;
 -moz-border-radius: 2px;
 border-radius: 2px;
}

.related-image {
 display: inline;
 line-height: 40px;
 padding: 5px;
 float: left;
 vertical-align: middle;
}

.related-text {
 display: inline;
 line-height: 40px;
 vertical-align: middle;
}

Bewerte diesen Artikel:
1 Stern2 Stern3 Stern4 Stern5 Stern (2 Bewertungen, durchschnittlich: 5,00 von 5 )
Loading...

Kommentar

  1. Besten Dank !!!
    Konnte das benutzerdefinierte Template nicht unter „Einstellungen“ aktivieren.
    Händisch ging es nach Deiner Methode jetzt schon! :-)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

Post Navigation