PehBehBeh

Erfahrungen eines Hobby-Webentwicklers

WordPress 2.9: Post Thumbnails verwenden

| 32 Kommentare

Post-Thumbnails sind schon in vielen WordPress Themes vorhanden – besonders in Magazin-Layouts. Die kleinen Bilder dienen dazu, einen Artikel zu repräsentieren. In den meisten Themes musste man dazu eine Custom-Field ausfüllen, doch seit WordPress 2.9 gibt es eine integrierte Möglichkeit, die zunächst aktiviert werden muss.


Theme Support hinzufügen

Wie man jetzt vielleicht vermuten mag, lässt sich die Option nicht im Backend aktivieren, sondern muss manuell in der functions.php des Themes aktiviert werden. Ganz einfach folgende Zeile eintragen:

1
add_theme_support('post-thumbnails');

Dieser Funktionsaufruf aktiviert Thumbnails für Artikel und Seiten. Möchte man nur eines der beiden aktivieren lässt sich das mit folgenden Befehlen bewerkstelligen:

1
2
add_theme_support('post-thumbnails', array('post')); // für Artikel
add_theme_support('post-thumbnails', array('page')); // für Seiten

Thumbnail-Dimensionen bestimmen

Im nächsten Schritt sollte man die Größe der Thumbnails festlegen. Hierbei hat man zwei Möglichkeiten:

box-resizing

Beim „box-resizing“ werden die Bilder proportional verkleinert, bis sie in die definierte Box passen. Ein 200×100 Bild würde also in einer 100×100 Box auf 100×50 verkleinert werden. Der Nachteil dieser Variante ist, dass man nicht immer gleich große Thumbnails erhält.

1
set_post_thumbnail_size(100, 100); // "box-resizing"-Variante

hard-cropping

Möchte man stattdessen lieber feste Werte für den Thumbnail haben, sodass dieser immer gleich groß erscheint, ist „hard-cropping“ die bessere Variante. Der Nachteil hierbei ist, dass die Bilder in Breite und Höhe abgeschnitten werden könnten.

1
set_post_thumbnail_size(100, 100, true); // "hard-crop"-Variante

Template-Tags einfügen

Nun kann man die Template-Funktionen innerhalb der Loops verwenden, um die Bilder anzuzeigen. Mit has_post_thumbnail() kann überprüft werden, ob der Autor ein Thumbnail ausgewählt hat.

1
2
3
4
5
if (has_post_thumbnail()) {
    // Thumbnail vorhanden
} else {
    // kein Thumbnail vorhanden
}

Falls vorhanden, kann das Bild mit the_post_thumbnail() ausgegeben werden.

1
<?php the_post_thumbnail(); ?>

Thumbnails einfügen

Beim Erstellen eines Artikels erscheint ab sofort eine neue Options-Box:

Thumbnail hinzufügen

Mit Klick auf „Miniaturbild setzen“ erscheint der bekannte Dialog des Mediathek-Uploaders. Ein Unterschied ist im unteren Bereich zu finden:

Thumbnail auswählen

Ein Klick auf „Verwende es als Miniaturbild“ setzt das hochgeladene Bild als Thumbnail für diesen Artikel.

Erweiterte Einstellungen

Es gibt Fälle, da möchte man auf der Startseite ein kleines Vorschaubild anzeigen – in der Artikel-Ansicht jedoch ein großes Bild mit den Maßen 400×100. Dazu hat sich WordPress auch etwas ausgedacht: zusätzliche Bild-Größen.

Über add_image_size() lassen sich weitere Größen definieren:

1
add_image_size('single-view', 400, 100);

In der single.php des Themes übergibt man dann der Funktion the_post_thumbnail() einfach den Namen der Bilder-Größe:

1
<?php the_post_thumbnail( 'single-view' ); ?>

Zusammenfassung

Hier nochmal eine Zusammenfassung des Codes, der jetzt so in die functions.php eingefügt werden könnte. Hinzu kommt noch eine „function_exists()“-Abfrage, die überprüft, ob die aktuelle WordPress-Version Thumbnails unterstützt.

1
2
3
4
5
if (function_exists('add_theme_support')) {
    add_theme_support('post-thumbnails');
    set_post_thumbnail_size(100, 100, true);
    add_image_size('single-view', 400, 100);
}

Quellen: Onextrapixel, Mark on WordPress

Dir hat der Artikel gefallen?
Dann abonniere doch den RSS-Feed!
  • Hi,

    ich hab vor einiger Zeit auch was drüber geschrieben, vielleicht noch für den einen oder anderen interessant. Beschreibt, wie man u.a. Bildunterschriften unter die Thumbnails bekommt.

    http://www.im-ernstfall.de/blog/2010/01/06/thumbnails-in-wordpress-2-9/

    Gruß,
    maurice

  • Pingback: wp-popular.com » Blog Archive » WordPress 2.9: Post Thumbnails verwenden()

  • Pingback: KW19: YouTube Filme, kostenlose Games, geklaute iPad-Werbung und mehr - Der Softwareentwickler Blog()

  • Hallo!

    Guter Beitrag! Kurz, knapp, verständlich!

    Gruß Rüdiger

  • Danke, freut mich. 🙂

  • Hallo, kann mich Rüdiger nur anschließen: ein super Artikel. Hat mir sehr gut weitergeholfen.

  • David

    Also ich hab das jetzt so probiert und irgendwie geht es nicht.

    Habe den ganzen Code in die Funktion.php eingefügt.

    if (function_exists(‚add_theme_support‘)) {
    add_theme_support(‚post-thumbnails‘);
    set_post_thumbnail_size(100, 100, true);
    add_image_size(’single-view‘, 400, 100);
    }

    der passte so von meinen Wünschen und hab noch die Größen anngepasst.

    Und den hab ich in die Single.php geschrieben:

    — hoffe an die richtige Stelle.

    In der Mediathek wird die neue Funktion auch angezeigt, aber was muss man da jetzt tun?

    Bild einfach hochladen und einfach als Minibild verwenden klicken?

  • David

    Also irgendwie geht es doch: Aber eine andere Frage. Wie bekomme ich das hin, dass das Thumbnail auf der linken Seite ist und der Text exakt rechts daneben?

  • Die Thumbnails erhalten die CSS-Klasse „attachment-post-thumbnail„.

    Somit lassen sich die Thumbnails über die style.css mit CSS positionieren:

    .attachment-post-thumbnail {
    float: left;
    }

  • David

    Prima, Dankeschön 🙂 Kann man die Teaserbilder jetzt auch noch mit den Artikeln verlinken?

    hab schon im Netz geguckt, aber nix weitergefunden 🙂

  • Ja, natürlich kann man das… indem man den Thumbnail in ein Link-Element einbettet:

    <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail(); ?>
    </a>
    
  • David

    Herzlichen Dank 🙂

  • Hallo!

    Ich habe den Code zwischen in functions.php eingefügt und bekomme Fehlermeldungen im Backend, dass der Header schon gesendet wurde… oder was damit gemeint ist…!

    Jedenfalls gehts nicht, so nicht!
    Und ohne den php-Zusatz auch nicht… da wird der Code einfach angezeigt!

    Hatte jemand das gleiche Problem?

    Danke
    Marcus

  • Hallo! Es geht, wenn man es an der richtigen Stelle einbindet! 🙂 Danke

  • gefällt mir!

  • Pingback: WordPress: Thumbnails im RSS-Feed anzeigen | pehbehbeh()

  • Vielen Dank – ich habe es Dank Deiner Anleitung hinbekommen. In meinem Template war es schon eingebaut, ich war aber zu blind, die Stelle zu finden, wo ich das Vorschaubild einstelle.

    DANKE!

  • Kerstin

    Hi!
    Bin ja ganz glücklich, dass ich Deine Seite gefunden habe und probiere gerade, die Artikelbild-Funktion in mein theme zu basteln.
    Ich weiß aber fast gar nichts und taste mich eher blind durch die Programmierung.
    Mir fehlt in Deiner Erklärung eine winzige Information:

    WO schreibe ich das:
    if (has_post_thumbnail()) {
    // Thumbnail vorhanden
    } else {
    // kein Thumbnail vorhanden
    }

    hin?
    Ich meine: in welche Datei kommt diese Anweisung?
    Wäre sehr nett, wenn Du mir KURZ einen Tip gibst.

    Und wenn ich das richtig verstanden habe, dann reichen die Zeilen in der function.php und die Zeilen oben aus, damit ich wechselnde Headerbilder erscheinen lassen kann….das wäre eigentlich zu schön, um wahr zu sein 🙂

    Tausend Dank für Deine Mühe!!!
    Grüße von Kerstin

  • Wie oben beschrieben, muss der Code innerhalb des Loops eingebunden werden. Den Loop findet man in der loop.php-Datei. Dort sollte es in Normalfall kurz vor die Ausgabe des Inhalts eingebaut werden – also kurz bevor the_content() aufgerufen wird.

  • Kerstin

    Hi Phil!

    Danke für Deine schnelle Antwort!!!!
    Und ich weiß jetzt auch, warum ich den richtigen Platz nicht gefunden habe: mein theme hat keine loop.php.
    Aus der Traum 🙁

    Ich benutze ein blank-theme (http://www.wpthemerkit.com), bei dem ich das komplette Design über die css steuern kann – für mich als Grafikerin genau das Richtige. (z.B. http://www.familienzentrum-weitblick.de/)

    Leider ist das eine veraltete – nicht mehr aufgelegte Version – schade!
    Dank Dir trotzdem – und wenn Du weißt, wo ich ein gutes aktuelles blank-theme mit css-Steuerung herkriege – sag mal 🙂

    Viele Grüße von Kerstin

  • Der Loop befindet sich in jedem WordPress-Theme und Thumbnails lassen sich somit in jedes WordPress-Theme einbauen! Wenn keine loop.php existiert, wird der Loop eigentlich in der index.php durchgeführt.

    Also schau mal in deine index.php und suche dort nach dem Aufruf von the_content. Diese Funktion gibt den Inhalt deines Artikels aus. Wenn du also unmittelbar davor dein Thumbnails einbauen willst, musst du den Code z.B. eine Zeile darüber einfügen.

  • Kerstin Söhngen

    Hi – da bin ich wieder!
    Wie gesagt – ich habe keine Ahnung von php.
    So habe ich das jetzt in die index.php eingebaut.
    Es funktioniert aber nicht – was ist falsch???:

    if (has_post_thumbnail()) {
    // Thumbnail vorhanden
    } else {
    // kein Thumbnail vorhanden
    }

    <?php edit_post_link('Edit','‘,“); ?>

    Grüße von Kerstin

  • Der Code muss von PHP-Tags umschlossen werden – also <?php am Angang und ?> am Ende. Und wenn einer Thumbnail vorhanden ist, muss es natürlich noch mit the_post_thumbnail() angezeigt werden. Vielleicht solltest du dir erst einmal ein PHP-Tutorial für Anfänger ansehehen. So ganz ohne Kenntnisse ist es immer etwas schwierig…

  • Pingback: Artikelbilder in WordPress verwenden » Webmaster-Zentrale()

  • Hallo,
    seit ein paar Wochen kann ich keine Bilder mehr in meinen wordpress Blog einbinden.
    Hat Jemand das gleiche Problem?
    Für einen Tipp bin ich dankbar

    Viele Grüße
    Andrea

  • Lena

    cooler post. aber klappt nicht!

  • Hallo,

    also das ist mir zu hoch. Könnt Ihr mir eine Firma empfehlen, die sich mit wordpress auskennt? Ohne miniaturbilder sieht mein Blog extrem langweilig aus, da mein webdesigner auch keine Ahnung mehr hat.

    Gruß
    Andrea

  • Hallo nochmal,

    bei mir steht folgendes:

    ‚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 {?>

    Da ich absolut keine Ahnung von Programmierung habe, sieht vielleicht jemand von euch den Fehler?
    Seit einem neuen update funktioniert das Einbinden der Miniaturbilder nicht mehr.

    vielen Dank
    Andrea

  • Welches Theme benutzt du denn? Zufällig ein Standard-Theme? Die können nämlich bei einem Update überschrieben werden…

  • Hallo,
    habe Deine Antwort gerade erst entdeckt.
    Die Frage bzgl. des Theme kann ich Dir gar nicht beantworten, habe aber gerade meinen web designer angemailt.
    Tatsächlich funktioniert das Einbinden seit dem neuesten update nicht mehr.
    VG
    Andrea

  • Michael

    Kann man daraus auch hinbekommen, dass der Link auf eine URL, die in einem Benutzerdefinierten Feld eines Beitrags (XY) festgelegt ist verlinkt?

    <a href="“>

    Was muss ich bei <a href="“> ändern?

  • Heike G.

    Danke erst mal für deinen ausführlichen Artikel.

    Ich verwende das freie Theme „Ari“ von Elmastudio, das nicht mehr auf neuere WP-Versionen angepasst wurde. Generell ist Ari auf post_thumbnails eingerichtet und hat in 2012 auch noch diesbezüglich auf meinem PC funktioniert.

    Ich wollte nun meine neue HP mit WordPress und Ari aufbauen. Die Funktion post_thumbnails funktioniert jedoch mit dem neuesten WP nicht mehr (4.2.4). Hast du / habt ihr eine Ahnung, woran es liegen könnte? Ich würde mich sehr über Hilfe freuen.