Eine Textwand ohne Bilder ist ein sicherer Weg, Leser in den ersten fünf Sekunden zu verlieren. Das Beitragsbild fungiert als Titelbild des Beitrags: Es ist das, was Nutzer im Beitrags-Feed, in Widgets und in Social-Media-Vorschauen sehen. Es verkauft den Klick, noch bevor jemand die Überschrift gelesen hat.

Das Problem ist, dass WordPress Autoren nicht dazu zwingt, ein Vorschaubild festzulegen. Ein Beitrag sticht mit einem großen Foto hervor, ein anderer schrumpft zu einem winzigen Quadrat, ein dritter hat überhaupt kein Bild. Die Startseite wird zum visuellen Chaos, und Facebook sowie Telegram ziehen ein zufälliges Logo anstelle einer aussagekräftigen Vorschau.

Nachfolgend eine vollständige Aufschlüsselung der Beitragsbild-Mechanik: vom Hinzufügen Ihres ersten Vorschaubildes bis hin zu obligatorischen Prüfungen vor der Veröffentlichung. Mit funktionierendem Code, einem spezifischen Plugin und Schritt-für-Schritt-Anleitungen.

💡 Kurzüberblick:

• Hinzufügen eines Beitragsbildes über die Editor-Seitenleiste
• Bildgrößen verstehen: Was WordPress im Hintergrund tut und wie Sie es neu konfigurieren
• Installation von Simple Image Sizes und Anpassung der Abmessungen für Ihr Theme
• Automatisierung der Vorschaubild-Einrichtung mit Code in functions.php
• Umgang mit vergesslichen Autoren: Ohne Bild geht der Beitrag in den Entwurf

Wie Beitragsbilder funktionieren

Das Beitragsbild (oder Post-Thumbnail) ist ein Meta-Feld, das das Theme für die Ausgabe an drei zentralen Stellen nutzt:

• Startseite und Archive. Eine Vorschau mit Bild erhält exponentiell mehr Klicks als ein reiner Textlink.
• Der Beitragsheader selbst. Das Theme zeigt das Vorschaubild oberhalb oder direkt unterhalb des Titels an, oft über die gesamte Inhaltsbreite.
• Soziale Netzwerke. Facebook, X und Telegram ziehen das Beitragsbild via Open Graph. Ohne Bild ersetzt das Netzwerk es durch das, was es gerade findet.

Die Funktion ist seit Langem ein WordPress-Standard. Heute ist es unmöglich, ein ordentliches Theme ohne Unterstützung dafür zu finden. Aber die Qualität der Implementierung variiert weiterhin von Entwickler zu Entwickler: Ein Theme gibt das Vorschaubild als ansprechendes Banner aus, ein anderes streckt ein winziges Quadrat auf die volle Breite.

Ein Beitragsbild hinzufügen: Grundlegende Mechanik

Im Beitragseditor (Gutenberg oder Classic) gibt es rechts das Panel „Beitragsbild". Klicken Sie auf „Beitragsbild festlegen", laden Sie eine Datei hoch oder wählen Sie eine aus der Mediathek, klicken Sie auf „Festlegen". Fertig.

Nuance: WordPress verlangt vom Autor nicht, ein Bild festzulegen. Wird es vergessen, erscheint die Veröffentlichung mit einer leeren Stelle im Feed. Die Lösung für dieses Problem behandeln wir im Abschnitt zu obligatorischen Prüfungen.

Bildgrößen: Was WordPress im Hintergrund tut

Jede WordPress-Installation bringt ab Werk vier Größen mit:

• Voll, die Originaldatei unverändert
• Vorschaubild, ein Quadrat (standardmäßig 150×150 px gemäß den WordPress-Medieneinstellungen), von der Mitte aus beschnitten
• Mittel, skaliert auf eine vorgegebene maximale Breite, kein Zuschnitt
• Groß, dasselbe, aber mit einem höheren Grenzwert

Die Einstellungen finden Sie unter „Einstellungen → Medien". Beim Hochladen eines neuen WordPress-Bildes generiert WordPress alle vier Versionen plus zusätzliche Größen, die vom aktiven Theme registriert wurden. Jede Version landet als separate Datei in wp-content/uploads/.

Warum so viele Kopien? Ohne sie müsste ein Designer jede Größe manuell für einen bestimmten Ausgabeort anpassen. Mit ihnen fordert das Theme einfach die benötigte Variante über the_post_thumbnail('medium') oder wp_get_attachment_image_src() an. Mehr zur Architektur des Mediensubsystems in der offiziellen WordPress-Dokumentation.

Das Vorschaubild ist die einzige Größe, die zwangsweise beschnitten wird. Die übrigen werden unter Beibehaltung der Proportionen skaliert.

Die Beitragsbildgröße ändern

Themes verwenden unterschiedliche Abmessungen. Bei einem Theme-Wechsel oder für eine neue Aufgabe kann eine Anpassung der Beitragsbildgröße erforderlich sein.

Prüfen Sie zuerst die Theme-Einstellungen: „Design → Customizer". Moderne Themes bieten oft einen Schieberegler oder ein Dropdown für Vorschaubild-Breite und -Höhe. Wenn Sie es finden, ändern Sie es mit zwei Klicks.

Haben Sie es nicht gefunden, kein Problem. Das Plugin Simple Image Sizes löst die Aufgabe ohne eine einzige Codezeile.

Simple Image Sizes: Das richtige Werkzeug für Abmessungen

Kostenloses Plugin von Nicolas Juen, aktiv gepflegt (aktuelle Version 3.2.5, benötigt PHP 8.0+). Nach der Installation gehen Sie zu „Einstellungen → Medien" und sehen alle registrierten Größen, einschließlich derer, die das Theme hinzugefügt, aber versteckt hat.

Legen Sie für jede Größe Breite und Höhe fest. Orientieren Sie sich beim Beitragsbild daran, wie das Theme es ausgibt. Bei einem Banner über die volle Inhaltsbreite verwenden Sie 1200×630 px (optimal für soziale Netzwerke gemäß den Facebook Open Graph-Empfehlungen). Bei einem quadratischen Vorschaubild in einem Raster 400×400 oder 600×600 px.

Vorteile:

• Sieht alle Größen, einschließlich der vom Theme versteckten
• Ermöglicht das Ein- und Ausschalten der Größenanzeige im Medien-Einfügen-Dropdown
• Generiert fertigen add_image_size()-PHP-Code zur Übertragung ins Theme

Nachteile:

• Benötigt PHP 8.0+, läuft nicht auf veralteten Hosts
• Minimalistische Oberfläche, keine visuellen Hinweise

Preis: kostenlos, keine Pro-Version.

🔗 Simple Image Sizes auf WordPress.org

Was mit alten Bildern zu tun ist

WordPress wendet neue Größen nur auf frische Uploads an. Alles, was Sie früher hochgeladen haben, bleibt in den alten Abmessungen.

Auch diese Aufgabe deckt Simple Image Sizes ab. Scrollen Sie auf der Seite „Einstellungen → Medien" zum Regenerierungsblock. Wählen Sie die benötigte Größe, geben Sie den Beitragstyp an und starten Sie die Neuerstellung. Das Plugin geht alle vorhandenen Bilder durch und erzeugt neue Kopien unter den aktualisierten Größen.

Warnung: Auf Websites mit Zehntausenden von Dateien frisst die Regenerierung Speicherplatz auf dem Server. WordPress löscht alte Thumbnails nicht, sie bleiben als Ballast im Ordner. Stellen Sie vor einer Massenregenerierung sicher, dass Sie genügend Platz auf der Festplatte haben.

Automatische Einrichtung des Beitragsbilds

Wenn ein Beitrag Bilder enthält, das Beitragsbild aber leer ist, kann WordPress das erste Bild aus dem Inhalt nehmen und als Vorschaubild zuweisen. Praktisch für Autoren, die diesen Schritt regelmäßig vergessen, und für Blogs mit Stream-Publishing.

Die Mechanik ist einfach: Ist das Beitragsbild nicht manuell gesetzt, findet die Funktion das erste angehängte Bild über get_children und setzt es via set_post_thumbnail().

Der Code wird in die functions.php des aktiven Themes eingefügt. Ich empfehle dringend, dies über das WPCode-Plugin zu tun, ein Tippfehler in der functions.php ohne dieses legt die Website komplett lahm:

1
function autoset_featured() {
2
    global $post;
3
    $already_has_thumb = has_post_thumbnail( $post->ID );
4
    if ( ! $already_has_thumb ) {
5
        $attached_image = get_children( array(
6
            'post_parent'    => $post->ID,
7
            'post_type'      => 'attachment',
8
            'post_mime_type' => 'image',
9
            'numberposts'    => 1,
10
        ) );
11
        if ( $attached_image ) {
12
            foreach ( $attached_image as $attachment_id => $attachment ) {
13
                set_post_thumbnail( $post->ID, $attachment_id );
14
            }
15
        }
16
    }
17
}
18
 
19
add_action( 'the_post', 'autoset_featured' );
20
add_action( 'save_post', 'autoset_featured' );
21
add_action( 'draft_to_publish', 'autoset_featured' );
22
add_action( 'new_to_publish', 'autoset_featured' );
23
add_action( 'pending_to_publish', 'autoset_featured' );
24
add_action( 'future_to_publish', 'autoset_featured' );

Die Funktion greift bei sechs Hooks: the_post, save_post und allen Statusübergängen *_to_publish. Nach der Zuweisung bleibt das Vorschaubild erhalten, selbst wenn Sie das Bild aus dem Beitragstext entfernen.

Nachteil: Hat der Autor kein einziges Bild in den Text eingefügt, gibt es kein Vorschaubild. Für dieses Szenario siehe den nächsten Abschnitt.

Pflichtprüfung: kein Vorschaubild, keine Veröffentlichung

Einfache und strikte Methode: Der Autor klickt auf „Veröffentlichen", und WordPress speichert den Beitrag als Entwurf und zeigt eine Warnung an. Ohne Beitragsbild kommt die Veröffentlichung nicht durch.

Zwei Code-Snippets in der functions.php:

Teil 1, Prüfung beim Speichern (nur für den Typ post):

1
add_action( 'save_post', 'pu_validate_thumbnail' );
2
 
3
function pu_validate_thumbnail( $post_id ) {
4
    if ( get_post_type( $post_id ) != 'post' ) {
5
        return;
6
    }
7
 
8
    if ( ! has_post_thumbnail( $post_id ) ) {
9
        set_transient( 'pu_validate_thumbnail_failed', 'true' );
10
        remove_action( 'save_post', 'pu_validate_thumbnail' );
11
        wp_update_post( array( 'ID' => $post_id, 'post_status' => 'draft' ) );
12
        add_action( 'save_post', 'pu_validate_thumbnail' );
13
    } else {
14
        delete_transient( 'pu_validate_thumbnail_failed' );
15
    }
16
}

Teil 2, Fehlermeldung im Admin:

1
add_action( 'admin_notices', 'pu_validate_thumbnail_error' );
2
 
3
function pu_validate_thumbnail_error() {
4
    if ( get_transient( 'pu_validate_thumbnail_failed' ) == 'true' ) {
5
        echo '<div class="notice notice-error"><p><strong>You must set a featured image before publishing.</strong></p></div>';
6
        delete_transient( 'pu_validate_thumbnail_failed' );
7
    }
8
}

Der Meldungstext ist vollständig anpassbar, ersetzen Sie die Zeichenkette innerhalb von <p><strong>...</strong></p> durch Ihre eigene.

Vorschaubild in der Beitragsliste

Die Standardtabelle „Beiträge → Alle Beiträge" zeigt Titel, Autor, Kategorien, Schlagwörter und Datum. Das Beitragsbild fehlt dort. Um zu prüfen, welchen Beiträgen ein Vorschaubild fehlt, müssen Sie jeden einzeln öffnen. Bei über 50 Veröffentlichungen ist das lästig.

Der folgende Code fügt eine Spalte Thumbs zur Beitrags- und Seitentabelle hinzu:

1
add_filter( 'manage_posts_columns', 'posts_columns', 5 );
2
add_action( 'manage_posts_custom_column', 'posts_custom_columns', 5, 2 );
3
 
4
add_filter( 'manage_post-type_posts_columns', 'posts_columns', 5 );
5
add_action( 'manage_post-type_posts_custom_column', 'posts_custom_columns', 5, 2 );
6
 
7
function posts_columns( $defaults ) {
8
    $defaults['riv_post_thumbs'] = __( 'Thumbs' );
9
    return $defaults;
10
}
11
 
12
function posts_custom_columns( $column_name, $id ) {
13
    if ( $column_name === 'riv_post_thumbs' ) {
14
        if ( has_post_thumbnail() ) {
15
            echo the_post_thumbnail( array( 100, 100 ) );
16
        } else {
17
            _e( 'No Thumbnail For Post' );
18
        }
19
        echo '<style>.column-riv_post_thumbs img{max-height:100px;max-width:100px;}</style>';
20
    }
21
}

Die Vorschaugröße ist auf 100×100 px gesetzt, ausreichend für eine schnelle visuelle Kontrolle. Benötigen Sie eine größere Darstellung, ersetzen Sie array(100, 100) durch array(200, 200). Mehr zu den Parametern in der the_post_thumbnail-Dokumentation.

Für Seiten fügen Sie diese beiden Zeilen am Anfang des Snippets hinzu:

1
add_filter( 'manage_pages_columns', 'posts_columns', 5 );
2
add_action( 'manage_pages_custom_column', 'posts_custom_columns', 5, 2 );

Jetzt sehen Sie auch im Bereich „Seiten → Alle Seiten", wo ein Vorschaubild vorhanden ist und wo nicht.

Das Vorschaubild klickbar machen

Ein gutes Theme verpackt das Beitragsbild automatisch in einen Link zum Beitrag. Ein schlechtes gibt ein statisches Bild aus, das nirgendwo hinführt. Der Besucher klickt auf der Startseite auf die Vorschau, und nichts passiert.

Behoben mit einem Filter in functions.php:

1
function wcs_auto_link_post_thumbnails( $html, $post_id, $post_image_id ) {
2
    $html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
3
    return $html;
4
}
5
add_filter( 'post_thumbnail_html', 'wcs_auto_link_post_thumbnails', 10, 3 );

Der Filter post_thumbnail_html fängt die HTML-Ausgabe des Vorschaubilds ab und verpackt sie in einen Link mit get_permalink(). Der Beitragstitel landet über esc_attr() im title-Attribut, sicher und informativ.

Den Text „Beitragsbild festlegen" ändern

Wenn die Seite Vorschaubilder automatisch aus dem Inhalt einrichtet, führt die Standardbeschriftung „Beitragsbild festlegen" Autoren in die Irre. Es scheint, als müsse das Bild manuell gesetzt werden, obwohl das System es selbst erledigt.

Ändern Sie den Text in etwas Aussagekräftiges:

1
function change_featured_image_text( $content ) {
2
    return $content = str_replace(
3
        __( 'Set featured image' ),
4
        __( 'Thumbnail will be set automatically from the first image in the post' ),
5
        $content
6
    );
7
}
8
add_filter( 'admin_post_thumbnail_html', 'change_featured_image_text' );

Der Filter admin_post_thumbnail_html bearbeitet den HTML-Block des Beitragsbilds in der Seitenleiste des Editors. Ersetzen Sie im zweiten Argument von str_replace einen beliebigen Text innerhalb von __( ... ).

Video: Wie das alles in der Praxis funktioniert

Wenn Sie eine visuelle Demonstration bevorzugen, finden Sie hier eine vollständige Anleitung von WPBeginner: vom Hinzufügen Ihres ersten Vorschaubilds bis zur Feinabstimmung von Größen und Automatisierung.

⁉️🤔 Häufig gestellte Fragen

Warum wird das Beitragsbild auf der Website nicht angezeigt?

Höchstwahrscheinlich unterstützt das Theme die Funktion post-thumbnails nicht. Prüfen Sie functions.php: Dort sollte eine Zeile add_theme_support( 'post-thumbnails' ) stehen. Falls nicht, fügen Sie sie hinzu. Zweiter Grund: In den Theme-Einstellungen ist die Anzeige des Beitragsbilds für einen bestimmten Beitragstyp deaktiviert. Dritter Grund: Ein Caching-Plugin hält eine alte Version der Seite vor, leeren Sie den Cache.

Was ist der Unterschied zwischen Beitragsbild und Titelbild?

Das Beitragsbild ist ein Meta-Feld des Beitrags, das das Theme für Vorschauen in Feeds, Archiven und Open Graph nutzt. Das Titelbild ist ein Block innerhalb des Inhalts (eingeführt mit Gutenberg), der nur im Beitragstext erscheint und soziale Netzwerke nicht beeinflusst. Sie können beide gleichzeitig verwenden: das Titelbild als visuellen Einstieg in den Artikel, das Beitragsbild für alles andere.

Welche Größe sollte ich für Beitragsbilder verwenden?

Für soziale Netzwerke ist das optimale Format 1200×630 px (Verhältnis 1,91:1) laut Facebook-Entwicklerdokumentation. Für das Beitragsraster auf der Startseite orientieren Sie sich an den Vorgaben in den Theme-Einstellungen. Nutzt das Theme quadratische Vorschaubilder, wählen Sie 600×600 oder 800×800 px. Komprimieren Sie das Bild vor dem Hochladen mit TinyPNG oder ShortPixel auf 100-150 KB.

Ist es zwingend erforderlich, für jeden Beitrag ein Beitragsbild festzulegen?

Technisch nicht. Aber ohne sieht die Startseite und die Darstellung in sozialen Netzwerken unprofessionell aus, und die Klickrate sinkt um das Zwei- bis Dreifache. Wenn Sie befürchten, es zu vergessen, nutzen Sie den Code zur Pflichtprüfung aus dem obigen Abschnitt oder das Plugin Quick Featured Images, das ein Standardbild für Beiträge ohne eigenes Bild einsetzt.

Wie entferne oder ersetze ich ein Beitragsbild?

Klicken Sie im Beitragseditor in der Seitenleiste auf das aktuelle Beitragsbild. Die Mediathek öffnet sich, klicken Sie auf „Beitragsbild entfernen". Danach wird die Schaltfläche wieder zu „Beitragsbild festlegen". Laden Sie ein neues Bild hoch.

Kann ich ein Bild als Beitragsbild für mehrere Beiträge verwenden?

Ja, WordPress erlegt hier keine Beschränkungen auf. Wählen Sie für verschiedene Beiträge dieselbe Datei aus der Mediathek aus. Wenn das Bild jedoch im Feed mehrfach auftaucht, wirkt das wie ein Fehler oder Versehen. Für visuelle Abwechslung sollten Sie besser individuelle Vorschaubilder wählen.

Was Sie jetzt mit Beitragsbildern tun sollten

Das Beitragsbild ist kein optionales Element, sondern ein zwingender Bestandteil jedes Beitrags. Ohne es ersetzen soziale Netzwerke die Vorschau durch zufällige Inhalte, die Startseite verliert ihre visuelle Struktur und die Klickrate sinkt exponentiell.

Gehen Sie in zehn Minuten diese Checkliste durch:

• Öffnen Sie einen beliebigen Beitrag und stellen Sie sicher, dass das Beitragsbild gesetzt ist.
• Prüfen Sie, wie es auf der Startseite und in sozialen Netzwerken aussieht (der Facebook Sharing Debugger hilft dabei).
• Falls die Größen nicht Ihren Erwartungen entsprechen, installieren Sie Simple Image Sizes und passen Sie die Abmessungen an.
• Wenn Sie mit einem Autorenteam arbeiten, fügen Sie den Code zur Pflichtprüfung ein, damit eine Veröffentlichung ohne Vorschaubild als Entwurf gespeichert wird.

Diese zehn Minuten sparen Ihnen Stunden manueller Nachbearbeitung und Dutzende verlorene Leser. Tun Sie es jetzt.