Artikelbilder/Post Thumbnails in WordPress einfügen und ausgeben

wpSEO, das Plugin für WordPress SEO

Schon seit Version 2.9 bringt WordPress eine ganz nützliche Funktion mit, die jetzt in WP 3.0 noch aufgebessert und erweitert wurde. Man kann für jeden Blog Post ein Artikelbild, ein Thumbnail festlegen und dieses im Template (wie z.B. hier bei mir auf der Startseite) ausgeben. Was vorher recht umständlich über Benutzderdefinierte Felder zu lösen war, geht mittlerweile mit einigen Klicks. Ich habe einfach mal eine kleine Anleitung zum Integrieren der Funktion in ein bestehende Themes geschrieben:

Anlegen und Ausgeben von Artikelbildern/Post Thumbnails

Beim Erstellen oder Bearbeiten der Artikel erscheint seit WordPress 3.0 in der rechten Seitenleiste das „Artikelbild-Widget“.

Mit einem Klick auf „Artikelbild festlegen“ erhält man die folgende Auswahlmaske:

Dort einfach wie gehabt das gewünschte Bild auswählen und diesmal nicht mit „In den Artikel einfügen“, sondern „Als Artikelbild nutzen“ bestätigen. Nun sollte Das gewählte Bild schon der Sidebar im Artikelbild-Widget angezeigt werden.

Um jetzt dem verwendeten Theme noch beizubringen, das Bild im Loop mit auszugeben sind einige kleine Eingriffe in den Code nötig.

In der entsprechenden Datei für die Artikelübersicht – in WordPress 2.9 ist es die index.php, im 3.0 Twentyten Theme ist es die loop.php – einfach an der gewünschten Stelle folgenden Code einfügen:

1
2
3
4
5
<?php
if ( function_exists('has_post_thumbnail') && has_post_thumbnail() ) {
the_post_thumbnail();
}
?>

Wenn gewünscht kann man nun auch noch feste Bildmaße (hier im Beispiel 250×120 Pixel) oder CSS-Klassen (z.B. alignright, post_thumbnail) vorgeben:

1
2
3
4
5
<?php
if ( function_exists('has_post_thumbnail') && has_post_thumbnail() ) {
the_post_thumbnail(array(250,120), array("class" => "alignright post_thumbnail"));
}
?>

Mehr Infos zu den Parametern und Optionen zur the post thumbnail Funktion, bzw. zur in der if-Abfrage genutzen has post thumbnail Funktion gibt es im WordPress-Codex.

Was, wenn es nicht funktioniert?

Bei älteren Themes kann es erfahrungsgemäß notwendig sein, dem Theme die Artikelbildfunktion erst “beizubringen”. Dazu wird folgender Code in die functions.php des verwendeten Themes eingefügt:

1
2
3
4
5
<?php
if ( function_exists('add_theme_support')) {
add_theme_support('post-thumbnails');
}
?>

Referenz: http://codex.wordpress.org/Function_Reference/add_theme_support

Edit

28.10.2010: Angaben zur Abwärtskompatibilität und Umgang mit älteren Themes eingefügt (Vielen Dank TuxX)
28.10.2010: Code-Darstellung optimiert
03.11.2010: Code und Texte überarbeitet

Dieser Beitrag wurde unter Wordpress abgelegt und mit , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

48 Antworten auf Artikelbilder/Post Thumbnails in WordPress einfügen und ausgeben

  1. Hi,

    ne Idee, warum immer quadratische Thumbnails ausgegeben werden, obwohl ich Breite und Höhe unterschiedlich gesetzt habe?

    „alignleft post_thumbnail“));
    } ? >

    In dem Beispiel wird der thumbnail auf 110×110 skaliert.

  2. Blöd. Mein PHP Code wurde etwas gekillt. Ich versuch es nochmal…

    if ( function_exists(„has_post_thumbnail“) && has_post_thumbnail() ) {
    the_post_thumbnail(array(170,110), array(„class“ => „alignleft post_thumbnail“));
    }

  3. Kai Köpke sagt:

    Sieht ok aus, bei mir siehts nicht viel anders aus.

    Hast du vieleicht dem Artikelbild beim einfügen im Artikel eine andere Größe zugewiesen?

  4. Nein. Ich habe einfach ein beliebiges Bild (größer, als es als Thumbnail sein sollte) hochgaladen und das als Thumbnail zugewisesen. Wie gesagt erscheit es ja auch, aber immer quadratisch, statt rechteckig. Wobei eben eine der von mir festgelegten Dimensionen verwendet wird.

    Aus 170×110 wird dann z.B. 110×110. Wenn ich 75×75 ausgeben will, dann klappt das problemlos. Scheint irgendwie die rechteckigen Formate nicht zu mögen. Irgendeine Idee?

    • TonkBerlin sagt:

      Du solltest vorher in den WordPress-Einstellungen die Größe für Thumbnails definieren!
      Einstellungen > Mediathek
      Dann kannst du 170×110 definieren, anschließend den Code von Kai ohne Werte ausgeben:

      1
      the_post_thumbnail(array("class" => "xyz"));
  5. nachrichten sagt:

    Wirklch sehr informativ! Werde aufjedenfall wieder kommen. Danke fuer den Beitrag.

    Gruss
    Andres

  6. Also, ich hab das nun auch mal getestet, und muss sagen, es funktioniert wunderbar. Auch habe ich keine Probleme mit der Bildformatierung.

    Einfach „the_post_thumbnail(array(„class“ => „alignleft post_thumbnail“));“ einfügen, ohne Angabe der Boldgrößen und schon nimmt Worpress genau das was als Thumbnail definiert wurde. Auch mit den jeweiligen Maßen.

    In diesem Sinne…

  7. Servus,

    habe ein aktuelles wp bei mir zu liegen, jedoch finde ich das artikelbild nicht. muss ich das irgendwie zuschalten?

    grüße aus b. an der s.

  8. Kai Köpke sagt:

    Hallo,

    nein, du musst dem jeweiligen Artikel ein Artikelbild zuweisen und (sofern du nicht das WordPress 3.0 Standard-Theme „Twentyten“ nutzt) die oben beschriebenen Änderungen am Template vornehmen, dann sollte das Artikelbild auch dargestellt werden.

    Gruß, Kai

  9. s. aus b. an der s. sagt:

    Hai Kai,

    nein du hast mich falsch verstanden. ich habe beim neuen artikel schreiben rechts unter schlagwörter keine feld „artikelbild festlegen“. wie bekomme ich das sichtbar?

    grüße,
    grüße aus b. an der s.

  10. Kai Köpke sagt:

    Oh ok, das ist mir neu. Und du bist dir sicher, daß du ein WordPress mindestens Version 3.0 nutzt?

  11. s. aus b. an der s. sagt:

    ja das bin ich…

    ich benutzte WordPress 3.0.1.

    muss man dafür vielleicht irgendwas anschalten oder installieren?

    grüße

  12. Hallo s. aus b. an der s.,

    Als erstes, ne Frage. Du bist nicht zufällig der lang verschollene Zwilling von Kai? *lach*

    Ok, zurück zum Thema:
    Es kann durchaus sein, dass diese kleine Box, in der man das Artikelbild einstellen kann etwas weiter unten ist. Diese kann man für gewöhnlich per Drag & Drop verschieben. Also muss sie nicht zwangsläufig rechts an der Seite irgendwo „klemmen“ sondern kann auch weit unter dem Editor sein.

    Eine weitere Möglichkeit ein Artikelbild einzufügen hast Du direkt im Editor. Da gibt es oben so kleine graue“ Buttons (Hochladen/einfügen), einer davon heißt „Bild einfügen“. Da klickst Du einfach drauf und wählst ein Bild aus. Dann statt „In Artikel einfügen“ nimmst Du „Als Artikelbild festlegen“. Klappt genau so gut.

    Ich hoffe ich konnte etwas weiter helfen.

  13. TuxX sagt:

    @s. aus b. an der s.
    In die functions.php deines Themes muss folgende Zeile eingefügt werden:

    add_theme_support( ‚post-thumbnails‘ );

    Dann hast du die Möglichkeit ein Artikebild festzulegen.

  14. Ray sagt:

    Damit haben sich ein paar Probleme bei mir erledigt. Vielen Dank für die Hilfe!

  15. Thomas sagt:

    Kann es sein, dass die Funktion nicht bei jedem Theme angezeigt wird? Wenn ich ein eigenes Theme aktiviere, fehlt die Box zum Hinzufügen eines Artikelbilds. Leider bin ich noch nicht drauf gekommen, wie man das hinbekommt. Ich kann doch nicht jedesmal auf das Standard Theme switchen um ein Bild einzufügen 🙂

    Jedenfalls schon mal Danke für den informativen Beitrag!

  16. Kai Köpke sagt:

    Hallo Thomas,

    richtig, grade diversen älteren Themes muss man diese Funktion oftmals erst „beibringen“.

    Das Problem sollte eigentlich wie im letzten Punkt beschrieben mit dem Einfügen der Funktion add_theme_support(‚post-thumbnails‘); in die functions.php behoben sein.

  17. Thomas sagt:

    hab es gefunden!

    Für alle, die es interessiert: Man muss bei einem eigenen Theme (oder wo es nicht vorhanden ist) eine functions.php im Theme Ordner anlegen/ editieren. Dort kommt folgender Code rein:

    Damit sollte dann beim Erstellen oder Editieren eines Posts die Artikelbild Funktion angezeigt werden.

  18. Thomas sagt:

    Ich war Blind, schande über mein Haupt 🙂

  19. Kai Köpke sagt:

    Kein Problem 😉

  20. Bene sagt:

    Hallo,
    das einbinden des Artikelbild Buttons hat super funktionier, wenn ich jetzt aber ein Bild als Artikelbild festlege wird das immer über dem Text angezeigt, möchte das jedoch links neben dem Text zentrieren, wie geht das denn? danke!

  21. Christoph sagt:

    Vielen Dank für den Hinweis, wusste bis eben nicht das dies möglich ist… vielen Dank! 😉

  22. Achim Hartig sagt:

    Gefällt mir gut die Seite. Könnte etwas schöner gestaltet sein, aber alles in allem – gefällt!

  23. Felix sagt:

    1a Beitrag!

  24. Onliner sagt:

    Genau diesen Teil mit „Wenns mal nicht klappt“ hab ich gerade gebraucht. Ich war schon am verzweifeln, weil ich 3 Blogs mit 3 gleichen Themes habe und in 2 funktionieren Artikelbilder und im letzten nicht…
    Hab die Funktion in der functions.php ergänzt und schon geht es. Hab zwar keine Ahnung warum der 3. Blog diesen Zusatz braucht, obwohl er das gleiche Theme wie die anderen verwendet, aber hauptsache es geht jetzt dank deines Artikels.

  25. Can sagt:

    super!
    vielen dank!

    lg Can

  26. Can sagt:

    da kommt mir noch ne idee in den sinn..

    wie könnte ich das neueste bild in groß darstellen..und alle anderen kleiner?

  27. Um noch mal das Theme mit der Größe des Post-Thumbnails aufzugreifen. Es ist recht einfach dieses mittels einer Boardfunktion auf die richtige Größe zu bringen, als im Nachhinein beim Auslesen.
    Um die Größe des Post-Thumbnails zu bestimmen, hat WordPress eine eigene Funktion.
    set_post_thumbnail_size();

    Beispiel:

    1
    2
    3
    4
    if ( function_exists( 'add_theme_support' ) ) {
        add_theme_support( 'post-thumbnails' );
            set_post_thumbnail_size( 150, 150 );
    }

    Diesen Code in die functions.php einfügen und die Post-Thumbnails haben eine Größe von 150×150 Pixel. Dadurch erübrigt sich das ganze Gefrickel beim Auslesen der Post-Thumbnails. Eine genaue Beschreibung der Funktion, findet ihr auf der verlinkten Seite 🙂

  28. GeTDruck sagt:

    Danke für die Tips guter Beitrag, auch das set_post_thumbnail_size. Allerdings finde ich schade das wenn der User dann eine eigene Größe beim wählen des Thumbnail anklickt, diese genommen wird und nicht meine festgelegte.

  29. Kai, hast du eine Ahnung, ob es eine Möglichkeit gibt, Artikelbilder festzulegen, die nicht auf dem eigenen Server liegen?

  30. Klaus sagt:

    Hallo und vielen Dank für den Artikel. Ich benutze das zBwench Theme, das offensichtlich schon Artikelbilder unterstützt. Allerdings bekomme ich immer nur einen kleinen Ausschnitt meines Bildes angezeigt – auch schon im Widget beim Bearbeiten des Artikels. Wie kann ich WordPress dazu überreden, das komplette Bild (notfalls entsprechend skaliert) anzuzeigen?

  31. Can sagt:

    übrigens kann die funktion trotz eintrag in der functions.php auch im backend deaktiviert/aktiviert werden

    wenn man einen artikel schreibt/bearbeitet gibt es ganz recht oben einen button „optionen einblenden“

    dort können alle „widgets“ oder funktionen eingeblendet oder eben auch ausgeblendet werden

    auf dem screenshot kann man mehr erkennen

    http://img560.imageshack.us/img560/7513/artikelbilder.jpg

    @Klaus
    vielleicht ist in der functions irgendwas anderes definiert? dass die bilder cropped..also automatisch einen ausschnitt erstellt

  32. Daniel sagt:

    Hallo,
    bei mir passiert nix im Frontend. Habe alle Sniptes eingefügt, aber keine Thumbs erscheinen 🙁

    Gruß Daniel

  33. Hilfe!

    Ich habe den Code eingebaut und damit meinen Blog komplett zerschossen! Nichts geht mehr! Hast du eine Idee, wie ich zumindest wieder in den Admin-Bereich komme, um irgendwas zu retten?

    Wenn man meine Seite aufrufen möchte (http://www.dietestfamilie.de) geht überhaupt nichts mehr – es kommt folgende Fehlermeldung:

    Parse error: syntax error, unexpected ‚<' in /webspace/10/62558/dietestfamilie.de/wp-content/themes/twentyten/functions.php on line 509

    Was ich gemacht habe?

    Ich habe diesen Code in meine functions.php eingebunden:

    Ich habe den Code ganz unten auf der functions.php eingegeben und kurz danach kam obiger Fehler. Auch nachdem ich den Code wieder gelöscht habe, kam dieser Fehler.
    Jetzt kann ich nicht mal mehr in den Editor, ich gelange immer nur auf den Fehler.

    • Kai Köpke sagt:

      Also ich komme auf deine Seite. Ich vermute, du konntest das Problem inzwischen lösen?

      • ja, ich habe das Problem gelöst. Allerdings kriege ich das mit den Thumbnails nicht hin. Ich habe das Twentyten 1.3.
        Wo muss ich den Code denn einfügen?
        „In der entsprechenden Datei für die Artikelübersicht – in WordPress 2.9 ist es die index.php, im 3.0 Twentyten Theme ist es die loop.php – einfach an der gewünschten Stelle folgenden Code einfügen:“

        was ist „die gewünschte Stelle“? Ich möchte gerne, dass bei jedem Artikel in der Übersicht ein Vorschaubild erscheint, z.B. hier: http://www.dietestfamilie.de/category/neue-artikel/

        • Also, um das mal abzukürzen.
          Bei solchen Änderungen sollte man schon etwas Ahnung von dem Ganzen haben, da diese Änderungen an Themes dazu führen können, dass danach nichts mehr funktioniert, wenn man es falsch macht.

          Um die Artikelbilder in der Übersicht einzufügen muss beim TwentyTen-Theme der Code an mehreren Stellen in die loop.php eingefügt werden und zwar jeweils vor <?php the_content(); ?>

          Mit andern Worten, aus

          1
          <?php the_content(); ?>

          wird

          1
          2
          3
          4
          5
          6
          7
          <?php
          if(function_exists('has_post_thumbnail') && has_post_thumbnail()) {
          the_post_thumbnail('thumbnail', array("class" => "alignleft post_thumbnail"));
          }

          the_content();
          ?>

          Nur als Beispiel.

          Anmerkung:
          Dies ist jetzt nur auf die Schnelle von mir erstellt und noch nicht genau geprüft. Aber da die loop.php wirklich nur den Artikelindex aufbaut, und je nach Posttype ausgibt, sollte das so funktionieren. Ich übernehme keine Garantie dafür und Änderungen an euerm Theme macht ihr natürlich auf kopmplett eigne Gefahr. Desweiteren würde ich dazu raten sämtliche Änderungen immer nur an einem Child-Theme durchzuführen, da somit das eigentliche Theme nicht beeinträchtigt werden kann und immer noch updatefähog bleibt. Aber dazu befragt bitte jemanden, der sich damit auskennt und weiß was er tut. Unbedacht am Code eines Themes herunexperimentieren ist selten eine gute Idee.

          • mit dem nichts mehr funktionieren habe ich gemerkt 😉

            Also die Loop-Datei ist ja nicht sehr groß, die sieht bei mir so aus:

            ?>

            <div id="post-“ >

            “ . __( ‚Pages:‘, ‚twentyten‘ ), ‚after‘ => “ ) ); ?>
            <?php edit_post_link( __( 'Edit', 'twentyten' ), '‘, “ ); ?>

          • Wie ich bereits sagte:

            Aber dazu befragt bitte jemanden, der sich damit auskennt und weiß was er tut. Unbedacht am Code eines Themes herunexperimentieren ist selten eine gute Idee.

            Ein Kommentarformular eines Blogs ist keine ausreichende Plattform um so etwas zu analysieren und so auch zu einem ordentlichen Ergebnis zu gelangen. Das mag bei Leuten funktionieren, die „die selbe Sprache“ sprechen, also Leute, die mit solchem Code auch etwas anzufangen wissen.

          • ok, ich geb’s auf und suche nach einem Plugin, damit komme ich besser klar 😉

            Danke für deine Mühe, den Code einem daU zu erklären 😉

  34. Ralph sagt:

    DANKE für die netten Tipps!

  35. Ben sagt:

    Hey,
    ist zwar schon älter, aber Danke für den gut beschriebenen Hinweis. 😉

    LG
    Ben

  36. Uwe sagt:

    danke, danach habe ich gerade gesucht, erspart mir viel Zeit um dies nicht jedes mal bei einem excerpt einzutippen !

  37. Sehr gute Beschreibung, sowas habe ich für unsere Kunden gesucht.

    PS: Seite gefällt mir sehr gut 🙂 weiter so..

    Vielen Dank!

  38. Jule sagt:

    Hi,
    vielleicht kannst Du mir helfen. Immerhin habe ih es endlich geschafft unter http://www.chaosandqueen.de die Thumbnails in Miniatur auf der Startseite im angerissenen Post zu zeigen. Wenn ich den Artikel dann aufrufe erscheint das Bild aber darüber noch einmal in Originalgröße. Das brauche ich nicht, denn im Artikel sieht man es auch noch mal. Hast Du eine Idee? Seit Tagen suche ich und versuche alle Plugins…..zumindest die, die ich verstehe. Ich bin nämlich kein Profi! 🙂

    Vielen Dank für Deine Mühe. Darfst mir gern ne Mail schreiben!!!
    Jule

4 Trackbacks/Pingbacks for Artikelbilder/Post Thumbnails in WordPress einfügen und ausgeben

  1. wp-popular.com » Blog Archive » Artikelbilder/Post Thumbnails in Wordpress 3.0 | Kai Köpke | Webdesign & Magento Online Shops

  2. delicious Links: 13. July 2010 | miZine

  3. Webnews #16: Twitter, Marketing und Google | Andi Licious' Blogosphäre

  4. Artikelbilder und Post Thumbnails | SIDEWALKS

Schreibe einen Kommentar

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