© Chaiwuth Wichitdho/Shutterstock.com
WordPress-Beitragsbilder verstehen und richtig einsetzen

Bildlich gesprochen


Für viele WordPress-Einsteiger ist das Prinzip der Beitragsbilder etwas schwer verständlich. Das Konzept ist tatsächlich ein wenig abstrakt. In diesem Artikel soll es darum gehen, wie Beitragsbilder in einem WordPress-Theme funktionieren und was man so alles damit machen kann.

Ein Beitragsbild (englisch „Featured Image“ oder „Post Thumbnail“) ist ein Bild, das man einem Beitrag (post) oder einer Seite (page) fest zuordnen kann. WordPress weiß dann, dass dieses bestimmte Bild mit dem Text verknüpft ist. Das Besondere dabei: Das Bild wird nicht wie gewohnt in den Text eingebaut und dort deutlich sichtbar angezeigt. Stattdessen wird es quasi im Hintergrund gespeichert – man sieht es zunächst nur, wenn man weiß, wo man hingucken muss.

Ein Beitragsbild festlegen

Um ein Bild mit einem Beitrag zu verknüpfen, klickt man in der Metabox Beitragsbild rechts unten neben dem Editor auf den Link Beitragsbild festlegen (Abb. 1).

schelper_wordpress_1.tif_fmt1.jpgAbb. 1: Ist ein Beitragsbild ausgewählt, sitzt es als kleines Thumbnail in einer Box rechts neben dem Texteditor

Wichtig zu wissen ist dabei, dass die Anzeige des Beitragsbilds komplett vom Theme gesteuert wird. Das Theme entscheidet, in welcher Größe und an welcher Stelle ein Beitragsbild erscheint. Das kann eine Reihe von kurzen Teasern im „Kachel-Design“ sein oder ein Liste von Artikeln in einer Archivansicht. Das Beitragsbild kommt immer automatisch mit (Abb. 2).

schelper_wordpress_2.tif_fmt1.jpgAbb. 2: Artikel mit Beitragsbildern in verschiedenen Layouts: In der Einzelansicht (A), zusammen mit einem kurzen Teaser (B) und in der Archivansicht (C)

Das System der Beitragsbilder ist eine sehr mächtige Eigenschaft von WordPress. Man legt die Verknüpfung einmal fest, und das Theme macht sich an die Arbeit. Es präsentiert dem Leser ein und denselben Inhalt in immer neuen attraktiven Kombinationen und Layouts. Der große Vorteil: Weil die Beitragsbilder automatisch vom Theme ausgewählt und platziert werden, müssen die Redakteure nichts weiter tun. Bei komplexen Websites ist das ein große Arbeitserleichterung, weil sich die Redakteure ganz auf das Erstellen der Inhalte konzentrieren können.

Neben Themes arbeiten auch Custom Post Types und Plug-ins mit Beitragsbildern. Zum Beispiel fügen Plug-ins, die eine Liste der neuesten Beiträge (Recent Posts) in der Sidebar ausgeben, in der Regel ein eigenes Beitragsbildformat hinzu.

In meinem Theme gibt es gar kein Beitragsbild

Falls die Metabox für das Beitragsbild (Abb. 1) in Ihrem WordPress Backend fehlt, sollten Sie als Erstes überprüfen, ob die Beitragsbildbox vielleicht in den Ansichtsoptionen deaktiviert ist. Klicken Sie dazu auf Ansicht anpassen ganz rechts oben auf dem Bildschirm und aktivieren Sie die Checkbox für das Beitragsbild (Abb. 3).

schelper_wordpress_3.tif_fmt1.jpgAbb. 3: Klick auf „Ansicht anpassen“ rechts oben auf dem Bildschirm öffnet ein Drop-down-Menü, in dem die Checkbox für das Beitragsbild zu finden ist

Falls die Option „Beitragsbild“ dort nicht zu sehen ist, unterstützt Ihr Theme wahrscheinlich keine Beitragsbilder. Die Funktion steht nur zur Verfügung, wenn das Theme, das gerade aktiv ist, auch tatsächlich damit arbeitet. Sie können das überprüfen, indem Sie vorübergehend ein Standard-Theme aktivieren (z. B. Twentyseventeen). Alternativ können Sie in der functions.php Ihres Themes nachschauen und diese Zeile suchen:

add_theme_support( 'post-thumbnails' );

Ist die Zeile in der functions.php vorhanden, bedeutet das, dass Ihr Theme Beitragsbilder unterstützt. Fehlt sie, sieht Ihr Theme keine Beitragsbilder vor.

Wenn Sie trotzdem gerne mit Beitragsbildern arbeiten möchten, dann wäre das der Zeitpunkt, an dem Sie sich ein anderes Theme suchen sollten, das diese Funktion mitbringt. Rein theoretisch kann man zwar jedes Theme um die Beitragsbildfunktion ergänzen, aber dazu sind Eingriffe in den Code der Theme-Templates notwendig. Bei einer so grundlegenden Funktion wie dem Beitragsbild dürfte es nur in Ausnahmefällen sinnvoll sein, ein Theme von Hand nachzurüsten.

Beitragsbilder anpassen

Wenn die Größe des Beitragsbilds nicht mehr richtig passt, etwa weil das Theme gewechselt wurde, hilft das Plug-in Regenerate Thumbnails weiter (mehr dazu weiter unten). Wenn Sie sich gerade selbst ein Theme bauen, gibt es zwei Stellen, an denen Sie die Größe der Beitragsbilder beeinflussen können.

Die Maße für die Bildgrößen stellt man im Dashboard unter Einstellungen | Mediathek ein. Diese Bildgrößen beziehen sich auf alle Bilder, die zu WordPress hochgeladen werden, auch auf die Beitragsbilder. Unter Umständen kann es aber sein, dass sich die Darstellung der Bilder im Layout gar nicht verändert, nachdem Sie unter Einstellungen | Mediathek die Bildformate bearbeitet haben. Die Ursache dafür ist im Theme-Code zu suchen. Themes, die komplexe Layouts mit Beitragsbildern bauen, arbeiten in der Regel nicht mit diesen Standardgrößen. Die Themes bringen eigene, zusätzliche Bildgrößen mit, die in der functions.php des Themes festgelegt sind.

Zusätzliche Bildformate für Beitragsbilder werden in der functions.php mit der Funktion add_image_size() hinzugefügt [1]:

// additional image sizes add_image_size( 'category-thumb', 300, 200 ); //300 Pixel breit, 200px hoch }

Die Bildformate, die über add_image_size() festgelegt werden, beziehen sich nur auf die Beitragsbilder. Das heißt, wenn Sie einen Artikel schreiben und über den Button Dateien hinzufügen im Editor ein Bild platzieren, werden weiterhin nur die drei Standardgrößen angeboten, die Sie unter Einstellungen | Mediathek angegeben haben. Von den zusätzlichen Bildformaten in der functions.php merken Sie hier nichts. Diese Größen finden ausschließlich in den Theme-Templates Verwendung.

Beschneiden oder proportional verkleinern?

Sie können WordPress mitteilen, was beim Verkleinern eines Bilds passieren soll. Entweder wird das Bild proportional verkleinert (soft-crop), oder das Bild wird auf ein festes Maß beschnitten (hard-crop). Will man erreichen, dass ein Bild beim Verkleinern beschnitten wird, ergänzt man den Code add_image_size() um den entsprechenden Parameter. Im folgenden Beispiel wird das Bild auf das exakte Maß von 200 x 180 px verkleinert. Der kleine Zusatz true am Ende der Zeile gibt an, dass das Bild beschnitten wird.

add_image_size( 'category-t...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang