WordPress: Recent Post (Letzte Artikel) mit Thumbnail-Images in der Sidebar anzeigen

Neben der Anzeige von „ähnlichen Artikeln“ geniest die Anzeige der „Neuste Artikel“ in WordPress eine wichtige Bedeutung. Neben den Suchmaschinen, die auf eine interne Verlinkung achten, kann man auch Besucher für weitere Artikel gewinnen, die einmal auf die Seite gelangt, sich nun auch noch über ein anderes Thema informieren. Schon im Standard bietet WordPress das Widget „Neuste Artikel“ (Recent Post), wie es auch dieser Blog einsetzt. In der Sidebar sieht der Leser eine bestimmte Menge an Artikel, die in jüngster Vergangenheit geschrieben wurden.

Seit der Diskussion um das Star Rating und den Autor-Vorschaubildern in den Google-Suchergebnissen wissen wir, dass ein Bild „mehr sagt als tausend Worte“. Der Wunsch liegt auf der Hand: Das WordPress-Widget „Neuste Artikel“ soll mit Vorschau-Bildern (Thumbs) angereichert werden. Ein einfacher Wunsch – leider keine Standard Lösung.

Lösung 1: Das WordPress Plugin „Special Recent Posts“

Das WordPress Plugin Special Recent Posts
Das WordPress Plugin „Special Recent Posts“ bietet einen Vorschautext samt Image in der WordPress Sidebar auf die neusten Artikel

Was liegt näher, als unter WordPress das 1001 Plugin zu installieren? Bei der Suche nach einem Plugin, welches einem administrative Freiheiten bei der Definition der „Neusten Artikel“ in der Sidebar ermöglicht, stößt man auf das WordPress Plugin „Special Recent Posts“. Dieses Plugin ermöglicht eine Anzeige eines Images zum Artikel. Bei meiner Suche habe ich leider kein weiteres Plugin gefunden, die dies in vernünftiger Form ermöglicht. Um es aber auch gleich vorweg zu nehmen: Zu 100 Prozent war bzw. bin ich nicht zufrieden mit diesem Plugin.
Aber zurück zum Plugin: Die Installation ist problemlos. In den Optionen erreicht man eine Konfigurationsseite des WordPress-Plugins, die sicherlich aber in den meisten Fällen unverändert übernommen werden kann. Interessant wird es erst in den Design-Widgets. Dort findet man nach der Installation des Plugins unter „Verfügbare Widgets“ das Plugin. Anklicken, in die Sidebar ziehen und schon ist das Plugin aktiviert. Doch halt: Zuerst sollten weitere Einstellungen unter den Widgets / Sidebar vorgenommen werden. Hier ist neben dem „Widget Title“, die „Max Number of Pages to Display“ und einige andere Dinge einzustellen. Ein besonderes Augenmerk sollte auf die „Thumbnail Options“ fallen: Hier kann einiges über das Aussehen der Images festgelegt werden.
Positiv beeindruckt hat mich das Caching der Images. Die Thumbs werden einmal generiert und in einem Cache-Verzeichnis gespeichert. In der Regel sind die Thumbs ja nur 50 bis  vielleicht 80 Pixel groß. Das Original-Image aus dem Artikel liegt meist in wesentlich größeren Dimensionen auf der Festplatte. Nachteil: Das Cache-Verzeichnis benötigt weitreichende Schreibrechte. Mehr als mir lieb ist.

Wer schnell seine Sitebar mit Images aus den jeweiligen Artikeln anreichern möchte, kann das WordPress Plugin „Special Recent Posts“ nutzen. Ebenso schnell, wie es installiert ist, kann man dieses Plugin auch wieder löschen.

Was mich am Plugin „Special Recent Posts“ gestört hat:

  • Weitreichende Schreibrechte für den Cache-Ordner von Nöten
  • Design der Anzeige nur über tiefgründige Änderungen in der Plugin-CSS und den
  • PHP-Dateien möglich, was ein Plugin-Update „erschwert“
  • Inkompatibilitäten bei manchen Themes
  • Vorschautext des Artikels zeichenbegrenzt

Lösung 2: Sidebar Widget „Neuste Artikel“ mit Thumbnail-Images ohne Plugin

Wordpress Sidebar Widget Neuste Artikel mit Thumbnail-Images ohne Plugin
Im Eigenbau: WordPress Sidebar Widget „Neuste Artikel“ mit Thumbnail-Images ohne Plugin

Nachdem ich massive Änderungen am Design für eine WordPress Installation vorgenommen habe, die ein zukünftiges Plugin-Update nicht vereinfacht, machte ich mir Gedanken über Alternativen. Es störte mich weiter, dass der Vorschautext eines Artikels nicht individuell bestimmbar, sondern zeichenbegrenzt ist. Dies bedeutet, dass die Vorschau nach x-Zeichen endet, egal ob ein Wort zu Ende ist, oder nicht. Neben diesem unschönen Verhalten hat das Plugin mit einer weiteren von mir eingesetzten Theme unschöne Design-Inkompatibilitäten gezeigt, so dass ich dazu überging, Thumbs in der Sidebar ohne Plugin-Hilfe anzuzeigen.

Grundsätzliche Überlegungen zu Images in der Sidebar bei den letzten Artikeln:

  • Jedem Artikel ist ein Image als Artikelbild zugeordnet. Dies soll auch im Widget „Recent Posts“ angezeigt werden.
  • Wir benötigen eine „Kurzbeschreibung“ zu jedem Artikel. Ein oder zwei Sätze sollen neben dem Artikel-Titel eine Vorschau geben.

Artikelbild den „Neusten Artikel“ zuordnen
Zu aller erst muss ein Artikelbild jedem Artikel zugeordnet werden. Dies ist  Bestandteil von WordPress und im Artikel „WordPress: Artikelbild (Vorschaubild) einfügen“ ausführlich beschrieben. Wer bei der Erstellung eines WordPress-Artikels den Kasten „Artikelbild“ nicht zu Gesicht bekommt, der muss die functions.php seiner Theme ändern. Informationen dazu siehe das Update im eben beschriebenen Artikel.

Somit haben wir nun das notwendige Image zum Artikel. WordPress legt das Image in der Dimension 150×150 Pixel ab. Diese Größe werden wir zur Anzeige unseres Thumbs nicht benötigen. Doch die verkleinerte Anzeige eines Images auf rund 60 bis 80 Pixel ist bei einem Original-Image von 150 Pixel vertretbar. Bei 300, 400 oder gar mehr Pixel, wäre dies eine deutliche Traffic-Verschwendung.

Kommen wir nun zum Vorschautext. Dieser soll kurz und prägnant sein, Lust zum Weiterlesen machen. Beim zuvor beschriebenen Plugin hat mich gestört, dass der Text nach einer bestimmten Anzahl von Zeichen einfach angeschnitten wurde. Eine Kurzbeschreibung bietet WordPress als Feld nicht an. Da die meisten WordPress-Nutzer auch das Plugin „All in one SEO“ nutzen, hätte man auch das Feld „Description“ nutzen können. Wer möchte, kann die folgende Lösung so umschreiben. Ich nutze hier ein eigenes „Benutzerdefiniertes Feld“ namens „kurzbeschreibung“. Vorteil: Ich kann hier speziell für diesen Zweck meinen Vorschausatz definieren.

Was wir nun also vornehmen müssen sind Änderungen in der Theme. Kritiker mögen einwenden, dass auch hier Code-Änderungen vorgenommen werden. Ja, nur Hand aufs Herz: Plugin-Änderungen macht der Webmaster aus Sicherheitsgründen, ein Update der Theme wird selten bis gar nicht durchgeführt.

Kommen wir nun zum Code. Wir öffnen das PHP-Script „sidebar.php“ unserer Theme. Der folgende Code muss nun an der passenden Stelle eingefügt werden. Dieser Code ist nicht optimiert und bewusst hier so angezeigt, um individuelle Anpassungen zu erleichtern:

<li id="meta" class="widget-container">

<h2 class="widget-title"><?php _e( 'Überschrift Neuste Artikel'); ?></h2>
<ul>

<?php $the_query = new WP_Query('showposts=10&orderby=post_date&order=desc');

while ($the_query->have_posts()) : $the_query->the_post();
      $id = $the_query->post->ID;
      $mymeta_field = get_post_meta($id, "kurzbeschreibung", false);
      $kurzbeschreibung = $mymeta_field[0];
      ?>
      <li>
            <a title="<?php the_title(); ?>" href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(70,70), array ('class' => 'alignleft')); ?></a>
            <a title="<?php the_title(); ?>" href="<?php the_permalink() ?>"><?php the_title(); ?></a> <?php echo $kurzbeschreibung; ?>
    </li><br>
    <?php endwhile; ?>
</ul>
   <?php wp_reset_query(); ?>
</li>

Was passiert in unserem Code?

  1. Wir fügen einen neuen „Widget-Container“ ein. Dieser bezieht seine Daten durch die SQL-Abfrage mittels „WP_Query“. Im Select werden mittels „Showpost“ die neusten („DESC“) 10 Artikel abgefragt.
  2. Dann gehen wir die SQL-Abfragemenge mittels While-Schleife durch, setzen die Variable $id mit der aktuellen Post_ID, rufen das Meta-Feld „kurzbeschreibung“ des Artikels auf uns speichern diese in der Variable $kurzbeschreibung. Dieser Code ist sicherlich optimierungsfähig.
  3. Dass öffnen wir den Tag „<li>“, fügen das Artikel-Images in der Dimension 70×70 Pixel hinzu, versehen es mit der CSS-Class „alignleft“ und einem Hyperlink. Wenn uns die Anzeige des Images nicht zusagt, können wir dem Thumbnail eine eigene CSS-Klasse zuweisen und im CSS-Code der Theme entsprechende Anweisungen vergeben.
  4. Als Vorschautext wird zuerst der Title des Artikels („the_title()“) mit Link zum Artikel und dann unser individueller Vorschautext aus dem benutzerdefinierten Feld angezeigt.
  5. Zu guter Letzt beenden wir den „<li>“ bzw. den „<ul>“-Tag, schließen die While-Schleife ab und resetten auch die Query. Das Abschließende „<li>“ darf natürlich nicht vergessen werden.

 

Schreibe einen Kommentar