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