Auch Entwickler brauchen Platz zum Spielen

18. November 2010 /

Thematisch ähnliche Beiträge samt Vorschaubilder in WordPress

Überdurchschnittlich oft wird die Frage gestellt, wie hier im Playground-Blog die auf Thumbnails aufgebaute Anzeige der themenrelevanten Beiträge (unter jedem Artikel) realisiert ist. Ein Hinweis auf das Related Posts by Category Plugin und die ausführliche Online-Dokumentation reicht in der Regel nicht aus, da der für die Darstellung der Ausgabe zuständige CSS-Part im Manual nicht näher beschrieben wird. Nachstehende Anleitung erklärt Schritt für Schritt, wie das performante WordPress Plugin hier im Blog eingebunden wurde. Inklusive dem Funktionsaufruf als Schnittstelle zum Plugin und der wenigen Zeilen CSS für die optische Visualisierung der Ausgabe.

Identisches Thema: Weiterführende Artikel im Blog
Identisches Thema: Weiterführende Artikel im Blog

1. Schritt: Plugin installieren
Zunächst wird der Kern der Umsetzung benötigt: Das Related Posts by Category Plugin (Download), welches eine gewünschte Anzahl an „benachbarten“ (die Kategorie dient dabei als Basis) Posts in wenigen Millisekunden ermittelt und zur Weiterverwendung zurückgibt. Das WordPress Plugin ist kostenfrei, stets auf dem aktuellen Stand, kommt ohne Benutzeroberfläche und Datenbank-Speichervorgänge aus.

2. Schritt: Ausgabe generieren
Folgender Befehl sorgt für die Kommunikation zwischen dem Theme-Template und dem Related Posts Plugin. Im Template single.php eingenistet (abweichend je nach Theme und Vorhaben), initiiert der Funktionsaufruf die Ausgabe errechneter Artikel samt Thumbnail-Ansichten als HTML-Listenelemente. Die Online-Dokumentation beschreibt die verfügbaren Parameter der Plugin-Schnittstelle äußerst detailliert.

Neu in der Version 0.7: Das Array-Paar default beherbergt in sich eine statische Default-Grafik, welche im Fall eines fehlenden Artikelbildes als sichtbare Alternative geschaltet wird.

Platziert an der Ausgabeposition innerhalb der single.php

<ul id="related">
  <?php do_action(
    'related_posts_by_category',
    array(
      'orderby' => 'RAND',
      'limit'   => 2,
      'echo'    => true,
      'before'  => '<li>',
      'after'   => '</li>',
      'type'    => 'post',
      'image'   => 'full',
      'message' => 'Keine Treffer'
    )
  ) ?>
</ul>

3. Schritt: CSS-Formatierung
Optisch ansprechend ist die Liste mit ermittelten Beiträgen erst nach einer Behandlung durch CSS. Und so könnten die maßgeblichen Stylesheets aussehen:

CSS-Deklaration für Related Posts (nach Wunsch anpassbar)

#related {
  width: 500px;
  height: 76px;
  list-style: none;
}
#related li {
  float: left;
  width: 240px;
  margin: 0 10px 0 0;
}
#related img {
  float: left;
  width: 64px;
  height: 64px;
  margin: 0 15px 0 0;
  border: 4px solid #ececec;
  padding: 2px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

Fazit
Related Posts by Category stellt eine solide Basis für prompte Erfassungen von thematisch ähnlichen Posts dar, wobei die Vielfalt der Einstellungsmöglichkeiten die Anzahl der Ausgabevariationen diktiert. Stylesheets-Definitionen verpassen der Realisierung den visuellen Effekt.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.