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:
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)
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:
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.
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 🙂
Hey. Schöner Artikel und vielen Dank für die Erwähnung.
@HPP Ups, da war tatsächlich ein Fehler drin. Ist jetzt aber korrigiert. Danke für den Hinweis 🙂
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 🙂
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.
Find ich klasse, dass die Sache so rege diskutiert wird. Macht Spaß Eure Kommentare zu lesen 🙂
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!
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
@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.
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.
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 😉
@Marcel Die Bilder, die ich hier verwende, stammen von der DVD 250000 Cliparts – Mehr braucht keiner.
Super Anleitung – vielen Dank dafür und auch den Tipp, der an Marcel ging, kann ich gebrauchen!
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?
sind die bilder den frei von jeglichem copyright ?
ansonsten klasse artikel, werde ich in kürze ausprobieren. danke.
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
@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.
Hab mal kurz Google angeworfen.
http://dynamicinternet.eu/blog/2010-02-21/der-fluch-von-the_post_thumbnail/
http://bueltge.de/wordpress-post-thumbnail-abwaertskompatibel/1079/#comment-349782
@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.
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
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
@ Tom Jones
Schau mal bei Amazon und gib dort mal Grafiken oder grafik Pack ein wirst bestimmt fündig 🙂
habe mir jetzt das grafikpack gekauft man kann damit echt super arbeiten, empfehlung aussprech 😉
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.
@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.
Ok danke. So mache ich es nun auch.
also ich habe teils noch immer probleme damit, mein freund kennt sich etwas aus vlt. kann er mir das ja so ändern 😉
**
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
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
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!
@Bianca Schick mir deine Domain per E-Mail. Ich schaue mir das dann gerne mal an.
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?
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 🙂
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.
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
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
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
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!
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.