Artikelbilder in WordPress verwenden

Artikelbilder in WordPress verwenden

Seit Version 2.9 gibt es Artikelbilder in WordPress. Dabei handelt es sich um kleine Bildchen (Thumbnails), die oft dazu verwendet werden, Artikel auch optisch einer bestimmten Kategorie zuzuordnen. Ich verwende hier auf diesem Blog ja schon seit längerem Grafiken für die Artikelvorschau, hatte dies bisher aber nicht über die Artikelbilder-Funktion realisiert, sondern die Bilder einfach am Anfang eines Beitrags eingebaut. In den letzten Tagen habe ich mich näher mit dem Thema beschäftigt und dabei festgestellt, dass die Informationen, wie man Artikelbilder in WordPress richtig nutzt, weit verstreut sind. Deshalb versuche ich in diesem Artikel alle Infos über Artikelbilder zusammenzufassen.

Artikelbilder aktivieren

Die Artikelbilder-Funktion kann standardmäßig nicht in WordPress genutzt werden, sondern muss erst aktiviert werden. Dazu müsst ihr in der functions.php eures WordPress-Themes (falls die Datei noch nicht existiert, einfach anlegen) folgenden Code einbauen:

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

Wenn ihr danach einen neuen Artikel schreibt, erscheint rechts unten unterhalb den Schlagwörtern eine neue Box:

Artikelbild festlegen
Box, mit der ihr das Artikelbild festlegen könnt.

Wenn ihr in dieser Box auf „Artikelbild festlegen“ klickt und eine Grafik hochladet, öffnet sich fast das gleiche Dialogfenster wie ihr es vielleicht schon vom Einfügen von Grafiken in WordPress kennt. Der einzige Unterschied ist, dass durch die Aktivierung der Artikelbilder noch der Link „Als Artikelbild nutzen“ hinzu gekommen ist. Durch das Anklicken des Klicks wird das hochgeladene Bild als Artikelbild gekennzeichnet. Allerdings erscheint es danach noch nicht im Artikel.

Dazu müsst ihr noch folgende Codezeile an die Stelle in eurem Theme einbauen, wo das Artikelbild erscheinen soll:

if (has_post_thumbnail()) {the_post_thumbnail();}

Ich habe den Code bei mir z. B. wie folgt in der index.php eingebaut, damit das Artikelbild auf der Startseite vor jedem Artikel erscheint:

<?php if (has_post_thumbnail()) the_post_thumbnail();
the_content(); ?>

(Bei Themes, die bereits WP 3.x unterstützen, muss der Code in die loop.php eingefügt werden)

Den gleichen Code habe ich noch in der single.php eingebaut, damit das Artikelbild auch am Anfang jedes Artikels angezeigt wird. (siehe auch: WordPress: Artikelbilder (Post Thumbnails) aktivieren)

Artikelvorschau mit Artikelbild
Artikelvorschau mit Artikelbild

Artikelbilder mit CSS formatieren

Wenn ihr die Artikelbilder so wie beschrieben einbaut, hat dies den Nachteil, dass der Text unterhalb des Bildes anfängt, was in den meisten Fällen nicht so schön aussieht. Um das zu vermeiden, könnt ihr die Artikelbilder wie folgt per CSS formatieren:

.attachment-post-thumbnail{padding:5px 10px 5px 0; float:left;}

(siehe auch: WordPress Design Inspirationen & Tipps)

Artikelbilder für ähnliche Beiträge verwenden

Den Anlass mich mit den WordPress-Artikelbildern zu beschäftigen, lieferte mir Ralf Bohn, der in seinem Artikel WordPress: Related Post Plugin von Sergej Müller beschrieb, wie er diese mit einem Plugin, das ähnliche Artikel anzeigt, kombinierte. Da ich dieses Plugin sowieso schon einsetzte und meine Artikel auch schon mit Bildern optisch aufwertete, war ich für diese Idee dankbar und habe sie auch bei mir gleich umgesetzt:

Artikelbilder + ähnliche Artikel
Artikelbilder mit ähnlichen Artikeln kombinieren

Am Anfang hatte ich zwar das Problem, dass bei einer ungeraden Anzahl von ähnlichen Artikeln der folgende Text das letzte Bild überlagerte, das konnte ich aber dadurch lösen, dass ich vor dem Text noch eine Clear-Anweisung eingefügt habe:

<div class="clear"></div>

Artikelbilder in Facebook verwenden

Sergej Müller hat eine Funktion geschrieben, die dafür sorgt, dass die WordPress-Artikelbilder automatisch als Miniaturgrafiken in Facebook verwendet werden. Diesen Code hat H.-Peter Pfeufer so erweitert, dass auch eingebettete Bilder als Facebook-Grafik verwendet werden können.

Weitere Infos über Artikelbilder

Phil erklärt in seinem Artikel Post Thumbnails verwenden noch, wie ihr verschiedene Größen für das Thumbnail festlegen könnt. Wenn ihr wissen wollt, wie ihr einem Artikel eine Bildunterschrift verpassen könnt, dann findet ihr Infos darüber in Maurices Artikel Thumbnails in WordPress.

WordPress-Tutorial Artikelbild

Wenn euch die bisherigen Erklärungen viel zu trocken waren, dann könnt ihr euch das Ganze auch bei WordPress Austria per Video zeigen lassen.

Verwendet ihr Artikelbilder?

Wie sieht es bei euch aus? Setzt ihr Artikelbilder ein? Wenn ja, für welchen Zweck? Ich würde mich freuen, wenn ihr in den Kommentaren über eure Erfahrungen damit berichten würdet.

Veröffentlicht von

Cujo

Die Webmaster-Zentrale wurde im Januar 2010 von mir gegründet. Dabei haben mich 3 Internetauftritte maßgeblich beeinflusst. Zum einen die Website des t3n-Magazins, www.t3n.de, auf der immer sehr interessante Artikel zum Thema Webseitenerstellung gepostet wurden. Genau solche Artikel wollte ich auch schreiben. Dann bin ich schon seit mehreren Jahren im Homepage-Forum, www.homepage-forum.de, aktiv. Im Laufe der Zeit stellte ich fest, dass dort immer die gleichen Fragen gestellt wurden. Jedesmal darauf die gleichen Antworten zu geben, war erstens langweilig, zweitens zeitraubend und drittens hat es sich nicht gelohnt, die Fragen ausführlich zu beantworten. In der Webmaster-Zentrale greife ich jetzt oft Fragen auf, die im Homepage-Forum gestellt wurden und habe die Möglichkeit die angesprochenen Themen viel detaillierter zu behandeln. Bei wiederkehrenden Fragen poste ich dann einen Link zu einem Artikel in der Webmaster-Zentrale. Dadurch erhalten die User ausführlichere Antworten als normalerweise in einem Forum üblich. Die Idee, Informationen bereitzustellen und diese im Forum zu verlinken, habe ich von Daniel, www.homepage-faqs.de, übernommen. Daniel bezeichnet sich selbst als Forenhelfer und ist sehr aktiv im Homepage-Forum. Er hat schon zahllosen Usern mit seinen Informationen geholfen und ihnen die Grundlagen der Webseitenerstellung erklärt. Diese 3 Webauftritte hatten einen so großen Einfluss auf mich, dass ich sicher behaupten kann, dass es ohne sie die Webmaster-Zentrale nicht geben würde.

40 Gedanken zu „Artikelbilder in WordPress verwenden“

  1. Hi,

    Erst mal, danke für die Erwähnung.
    Einen kleinejn Punkt muss ich jedoch ansprechen. Du hast im Abschnitt „Artikelbilder aktivieren“ bei dem Code einen kleinen Fehler. So wie der Code im Moment da steht, wird es ein erstklassiger HTML-Kommentar und somit von WordPress ignoriert.
    Es muss natürlich heißen:
    <?php add_theme_support( 'post-thumbnails' ); ?>
    Ansonsten, guter Artikel 🙂

  2. Cool, danke für den informativen Beitrag. Du hast Recht, die Infos dazu sind nicht sehr gut zugänglich. Danke, dass du dir die Mühe gemacht hast, das alles hier so schön übersichtlich zusammenzutragen 🙂

  3. Ich benutze diese Funktion auch in meinem Blog. Geht eben absolut easy und man muss nicht, wie beim Einbinden eines Bildes direkt im Editor, darauf achten, dass das Bild immer auf die gleiche Art und Weise platziert wird.
    Das wäre bei mir sicherlich: left, 300×200, usw. Ich denke, dass auch eine nachträgliche Änderung der Bildgröße für alle Artikel problemlos machbar ist.

    Gerade in Blogs, in denen mehrere Leute schreiben, ist die Arbeitsweise mit dem Artikelbild dringend zu empfehlen, um ein einheitliches Erscheinungsbild zu garantieren.

  4. Find ich klasse, dass die Sache so rege diskutiert wird. Macht Spaß Eure Kommentare zu lesen 🙂

  5. Schöner Artikel! Nun aber mal eine Frage woher holst du nur immer diese ganzen Bilder? Ich meine es gibt ja für alle irgendwo ein Copyright! Deine Passen aber immer zum Text und mir ist das bissel rätselhaft wo du die Bilder herholst zumal du ja da auch noch Zeit aufbringen musst um die Bilder dann zu finden!

  6. Guten Morgen! 😀

    Guter Artikel, danke! Allerdings war diese Funktion bei mir bereits aktiviert. Könnte das am von mir verwendetem Theme liegen?

    Ich muß dazu sagen, daß ich die Funktion bis jetzt nicht verwende. Mal sehen, vielleicht mach ich das noch irgendwann.

    Grüße aus Augsburg

    Mike, TmoWizard

  7. @Daniel Die Bilder habe ich von einer DVD, die mir Sylvi vor einiger Zeit mal empfohlen hat.

    @TmoWizard Wenn es sich um ein Theme handelt, dass WordPress 3.x unterstützt, kann es durchaus sein, dass die Artikelbilder bereits aktiviert sind. Ist ja keine große Sache, wie ich im Artikel bereits geschrieben habe.

  8. Ich möchte bald mit einem Word Press Blog starten, um ihn beruflich zu nutzen – da kommt mir dieser Beitrag zu Artikelbildern sehr gelegen. Da ich dann auch auf Copyright für Bilder achten muss, wäre ich für einen Tipp dankbar, welche DVD Du benutzt oder empfehlen kannst.

  9. Pingback: Linkhub – Woche 16-2011 | PehBehBeh
  10. Ich find deine Bilder absolut top! Muss ich mal so sagen, da macht es gleich viel mehr Spaß, die Artikel zu lesen. Der hier hat nochmal extra viel Spaß gemacht, weil so viele Bilder drin waren 😉

  11. Super Anleitung – vielen Dank dafür und auch den Tipp, der an Marcel ging, kann ich gebrauchen!

  12. Bisher habe ich die WordPress eigene Funktion noch nicht eingesetzt, weil ich in einem Bericht gelesen hatte, dass sich die Zahl der Datenbankzugriffe stark erhöht. Konntest du dazu etwas in Erfahrung bringen?

  13. sind die bilder den frei von jeglichem copyright ?

    ansonsten klasse artikel, werde ich in kürze ausprobieren. danke.

  14. Hallo Webmaster,

    ggf. könntest du noch einen Artikel schreiben, woher man am besten Bilder und Grafiken bezieht um seine Artikel interessanter zu gestalten?

    Ich hab schon versucht so einige günstige Lösungen wie den Photodroper oder ähnliches zu nutzen, aber nirgendswo konnte ich eine einfache und schnelle und vor allem angenehme Lösung finden.

    Beste Grüße

  15. @Timo Nein, das wäre mir neu. Hast du vielleicht noch den Link zu dem Artikel, den du gelesen hast?

    @Thomas Ich bin kein Rechtsanwalt, aber so wie ich die Lizenzbedingungen verstanden habe, darf man die Bilder, wenn man die DVD gekauft, für eigene Zwecke nutzen.

    @Rene Das ist eine gute Idee 🙂 Ich werde demnächst einen Artikel zu diesem Thema schreiben.

  16. @Timo Das war mir bisher nicht bewusst. Ich habe nach dem Aktivieren der Artikelbilder bisher allerdings keine spürbare Verlangsamung des Seitenaufbaus feststellen können.

  17. Vielen Dank für den tollen Artikel, Dvd scheint ein super angebot zu sein für 8 Euro ich wollte sowieso noch was von amazon bestellen villeicht kann ich mir dann den Versand sparen. Bis bald Reimo

  18. Danke für den Artikel. Ich bin auch auf der Suche nach guten Bildern die wenig kosten. Kenne mich da überhaupt nicht aus, aber die Bilder von Google darf man soweit ich weiss nicht nutzen, oder? Jedenfalls danke schonmal

  19. @ Tom Jones

    Schau mal bei Amazon und gib dort mal Grafiken oder grafik Pack ein wirst bestimmt fündig 🙂

  20. Könnte mir jemand sagen, wie ich dem Artikelbild, den Titel vom jeweiligen Posting bekomme? Also wenn man mit der Maus über das Bild fährt, was dann angezeigt wird.

  21. @Inge Du brauchst nur beim Einfügen des Artikelbilds das Feld „Titel“ auszufüllen. Dieser Text wird dann automatisch als Titel-Attribut der Grafik genommen und beim Überfahren mit der Maus angezeigt.

  22. 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

  23. Vielen Dank, jetzt bin ich einen Schritt weiter.

    Da ich absolut keine Ahnung habe, könnte mir noch bitte Jemand sagen, wo ich die Zeile einfüge und muß ich eine andere löschen?

    ‚Sidebar‘,
    ‚before_widget‘ => “,
    ‚after_widget‘ => “,
    ‚before_title‘ => “,
    ‚after_title‘ => “,
    ));

    function new_excerpt_more($more) {
    return ‚ID) . ‚“ style=“text-align:right;“>‘ . ‚Lesen Sie mehr…‘ . ‚‚;
    }
    add_filter(‚excerpt_more‘, ’new_excerpt_more‘);

    if ( function_exists( ‚add_theme_support‘ ) ) { // Added in 2.9
    add_theme_support( ‚post-thumbnails‘ );
    add_image_size( ‚pws_slider‘, 700, 250, true );
    add_image_size( ‚pws_home‘, 200, 120, true );
    add_image_size( ‚pws_thumb‘, 80, 60, true );
    }
    function pws_slider_image(){

    if ( has_post_thumbnail() ) {
    the_post_thumbnail( ‚pws_slider‘, array(‚class‘ => ’sidim‘) );
    } else {?>

    ‚postim‘) );
    } else {?>

    ‚thumbim‘) );
    } else {?>

    vielen Dank
    Andrea

  24. Hallo,
    ich habe leider ein problem mit diesem und allen anderen tutorials zu diesem thema ;.(
    wenn ich den besagten code in meine functions einfüge wird bei mir trotzdem nicht die box „Artikelbild“ angezeigt.. kannst du mir bitte helfen ich verzweifle nun schon den 3. tag ><
    (nutze version 3.1)
    danke!

  25. Super Erklärung kurz und Bündig.
    Ich bin zZ auch dabei Artikelbilder in mein Theme einzubauen und da stehe ich momentan vor folgendem Problem. Möchte man an verschiedenen Stellen das Artikelbild anzeigen also bei mir 1x auf der single.php einmal auf der index aber in einer anderen größe und dann noch einmal in einer 3. Größe in der Sidebar. Problem bei der Sache ist, das WordPress die Bilder einfach abschneidet. Ist es denn irgendwie möglich das Bild einfach nur zu vergrößern?

  26. Auch wenn es etwas mehr Aufwand bedeutet, erhöhen Artikelbilder, je nach Thema, schon sehr die Klickrate. Bisher war das einer der wichtigsten Kriterien, warum ich ein bestimmtes Theme benutzt und auf meine Bedürfnisse angepasst habe, aber mithilfe der Anleitung kann ich es nun selbst, ich sollte mir hier mal einiges evernoten 🙂

  27. Hallo, ja ich verwende auch seit kurzem Artikelbilder und ärger mich öfters damit rum, weil manche Bilder nich dazu taugen und nur ausschnittsweise gezeigt werden, man kann wohl nur Querformate nehmen, ein weiterer Nachteil ist, dass man nirgend die Infos zum Foto unterbringen kann, bleibt nur unten nach dem Artikel.

  28. Hallo Jutta,

    Die Größe der Artikelbilder kannst Du in Deinem WordPress selbst definieren. Gehe dazu unter Einstellungen -> Mediathek. Dort findest Du ganz oben den Punkt „Größe der Miniaturbilder“. Hier einfach das eintragen, was am besten in Dein Theme passt. Auch den Haken bei „Beschneide das Miniaturbild auf die exakte Größe (Miniaturbilder sind normalerweise proportional)“ nicht vergessen. Somit werden Bilder die zu groß sind auf die richtige Größe gebracht.

    Dann hast Du natürlich noch die Möglichkeit in der functions.php Deines Themes eigene Größen zu definieren.

    add_image_size('article-thumbnail', 250, 115, true);

    Damit definierst Du ein Artikelbild mit der Größe 250px x 115px. Die Größenzuordnung wird intern als „article-thumbnail“ gespeichert. Dieser Bezeichner ist frei ersetzbar, darf aber weder Sonder- noch Leerzeichen haben.

    Um nun ein Bild dieses Bezeichner im Template auszugeben:

    if (has_post_thumbnail()) {the_post_thumbnail('article-thumbnail');}

    So ist es möglich für verschiedene Zwecke verschiedene Größen zu definieren. Wichtig hierbei ist jedoch zu beachten, dass die neu definierten Größen nur bei neu hoch geladenen Bildern angwendet werden. Möchte man nun die bestehenden Bilder ebenfalls anpassen, so gibt es ein sehr schönes und hilfreiches Plugin namens Regenerate Thumbnails. (http://wordpress.org/extend/plugins/regenerate-thumbnails/)

    Dieses installieren, aktivieren und einfach einmal durchlaufen lassen. Danach kann es deaktiviert werden, bis man wieder die Größen der Artikelbilder ändert 🙂

    Also eigentlich ganz einfach 🙂

    Grüße

  29. Aha, Danke! Die Mediathek hab ich noch gar nich genutzt .. immer nur die Bilder direkt bearbeitet. Ja das sollte ich wohl nutzen, ebenso das Plugin hört sich gut an. Grüße

  30. Hallo und guten Tag,
    ich habe seit gestern das Problem, dass meine Bilder im Content nicht mehr angezeigt werden (http://www.antik-natur.de/blog).
    Die Dateirechte stehen auf 755.
    Ich finde den Fehler einfach nicht. Könnt Ihr eventuell helfen ?

    Vielen Dank.
    Karl-Heinz

  31. Das war einer der besten Artikel bisher, zum Thema „WordPress Artikelbilder verwenden“.

    Wegen dem CSS hatte ich nach dem erfolgreichen Einbau noch ein Problem mit dem Float:left;

    ich habe dem Artikel bild einfach noch zusätzlich die css class „clear“ angehängt, so sind die unteren beiträge (blog seite) nicht hochgerutscht bzw. verschoben worden, wenn ein beitrag etwas weniger Wörter hatte.

    Danke nochmal!

  32. Vielen Dank für diese Zusammenstellung.

    Auch mit WP4 und einem Theme von einem Drittanbieter (mit wenig Umdenken) funktioniert das noch gut auf diese weise.

Schreibe einen Kommentar

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