WordPress & Webwork

WordPress und Artikelbilder: ein Beispiel

Wie man Artikelbilder (Post Thumbnails) in WordPress aktiviert, einrichtet und anpasst. Und wie man eine Ausweichlösung realisiert.

Im folgenden Artikel will ich nur kurz zeigen, wie ich die Artikelbilder (Post Thumbnail) auf meiner "Herr der Ringe"-Website eingebaut habe und dabei es erreicht habe, dass es ein Fallback-Bild (Ausweichlösung) gibt und das die Artikelbilder in der Übersicht auf den einzelnen Artikel verlinken:

Artikelbilder im Einsatz

Artikelbilder in der Übersicht

Um die Funktion der Artikelbilder zu aktivieren muss man vorher in der functions.php folgendes unterbringen:

<?php add_theme_support( 'post-thumbnails' ); ?>

Hat dein Theme keine functions.php, dann musst du sie erstellen und dort den oberen Code notieren. Anschließend kannst du, wenn du Beiträge erstellst oder bearbeitest, ein Artikelbild festlegen:

WordPress: Artikelbild festlegen

Artikelbild festlegen

Diese neue Metabox befindet sich rechts unten und du kannst entweder ein neues Bild als Artikelbild oder ein Bild was schon mit dem Beitrag verknüpft ist als Artikelbild festlegen. Damit das ganze auch im Frontend angezeigt wird muss man auch die entsprechenden Template-Dateien bearbeiten. Weil ich auf meiner Tolkien-Webiste die Artikelbilder in der Übersicht anzeigen lasse ist die index.php für die Ausgabe der Artikelbilder zuständig.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
[...]
<div class="der-beitrag">
    <?php if (has_post_thumbnail()) { ?>
        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
    <?php } else { ?>
        <a href="<?php the_permalink() ?>"><img src="/[...]/artikel.jpg" width="120" height="120" alt="" class="attachment-thumbnail" /></a><?php } ?>
    <div class="ausschnitt"><?php the_content(); ?></div>
    <div class="clearer"></div>
</div>

Ich habe den Code auf den relevanten Abschnitt gekürzt und das ganze muss man innerhalb des Loops unterbringen, deswegen habe ich den Loop-Anfang (erste Zeile) im Code-Beispiel gelassen.

Mit if (has_post_thumbnail()) prüft man ob dem jeweiligen Artikel ein Artikelbild zugewiesen wurde. Wenn ja, dann soll ein verlinktes Bild the_post_thumbnail('thumbnail'); ausgegeben werden. Mit Hilfe von the_permalink(); holt man sich die URL des jeweiligen Artikels und mit Hilfe von the_title_attribute(); wird der Inhalt des title-Attributs des Bildes ausgelesen – Also das was man beim Bildupload unter der ersten Beschreibung (zweites Feld) eingegeben hat.

[adrotate group="6″]

Ist dem jeweiligen Beitrag kein Artikelbild zugewiesen, dann bindet WordPress ein Bild ein, welches ich manuell als Ausweichlösung definiert habe. Man könnte das ganze dadurch erweitern in dem man mit Hilfe von zum Beispiel if (in_category()) auch abfragt in welcher Kategorie sich der jeweilige Artikel befindet um dann für einzelne Kategorien Ausweichbilder parat zu haben. Ich habe das nicht gemacht, weil ich es im konkreten Beispiel als zu viel des Guten empfunden hätte.

In meinem Code-Beispiel nutze ich the_content(); für die Ausgabe des Inhalts in der Übersicht. Das setze ich deswegen ein, weil ich gegenüber the_excerpt(); mehr Kontrolle darüber habe wo der Artikel umgebrochen wird. Der Nachteil gegenüber the_excerpt(); ist, dass man die großen Bilder unterhalb des Artikelumbruch unterbringen muss, da sie sonst auch in der Übersicht erscheinen würden.

Nachtrag: über Twitter bin ich auf einen Artikel aufmerksam geworden, wo das erste Bild des Artikels gleichzeitig auch als Ausweichlösung dient.

15 Reaktion(en)

  1. Philipp (W3Filter)

    Oh, das ist ja genial. Ich habe mich schon gefragt, wie das geht.

    Ich weiß, dass du das nicht weiter ausgeführt hast, weil du es nicht brauchst, aber könntest du vielleicht so nett sein, an einem Beispiel zu zeigen, wie das genau geht mit den Artikelbildern pro Kategorie?

    Ich muss dann mal schauen, wie ich das dann in meinem Mystique-Theme einbauen kann.

  2. Justus

    Hi, Perun

    ich versuche mein twentyten via childtheme umzubauen. Und möchte meinen Artikeln im Blog Artikelbilder zuordnen und zwar so, dass sie in der Übersicht der Artikel, also in der Kategorie, immer links neben dem Artikel auftauchen. Jetzt habe ich lange im Netz gesucht und im WP-Forum gefragt – keine Antwort. Auch in deinem/euren Buch finde ich dazu nichts. Nun habe ich deinen Artikel gefunden, der genau das beschreibt aber ich kriege es nicht gebacken. Alles was ich erreicht habe ist im loop-single.php erfolgreich, sodass es im einzelnen Artikel auftaucht, aber da will ich es gar nicht haben…
    Kannst du mir sagen was genau ich machen muss?

    Beste Grüße im Voraus
    Justus

  3. Raphael

    Hi, vielen Dank für den Artikel, konnte ich bei meiner WEbsite sehr gut gebrauchen.
    Allerdings wird das Artikelbild nur bei dem neusten/obersten Artikel angezeigt.

    Kennt jemand hierfür eine Lösung?

    Vielen Dank im Voraus, viele Grüße
    Raphael

  4. hanstest

    gibt es auch die möglichkeit die bildbeschreibung auszulesen?

    denn bei the_title_attribute(); kommt bei mir nur der title der seite, nicht der des bildes!

  5. David

    Hallo, gibt es auch die Möglichkeit, das Artikelbild automatisch mit dem anhängenden Link zu versehen? Also ich gebe beim Hochladen des Bildes im feld URL einen andere Url an und möchte diese dann mit ausgeben.

  6. Pingback: Wordpress Loop in Twenty Ten - XHTMLforum

  7. Pingback: WordPress: Artikelbilder in der Kopfzeile (Header) | WordPress & Webwork

  8. Pingback: Falsches Wordpress Thumbnail bei Facebook-Shares? So macht man es richtig. – jinsiders.de – Blogstoff von Yannick

  9. Julius Ise

    Hi,

    gibt es eine Möglichkeit Artikelbilder auszublenden? Ich nutze sie nur, damit ich für die social sharing button bestimmen kann, welches Bild zum Artikel gepostet wird. Ansonsten würde ich die Artikelbilder lieber nirgendwo zu sehen haben, da ich es lieber habe, dass die Artikel mit der Überschrift starten und nicht mit einem Bild.

    Vielen Dank!

Die Kommentare in diesem Beitrag sind geschlossen.

✉ WordPress-Newsletter ✉

Tipps und News als E-Mail in deinem Postfach? Dann abonniere einfach den ersten deutsch­sprachigen Word­Press-Newsletter:


Der Newsletter ist hinterher jederzeit abbestellbar.

Eintragen!