Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Wie man ein Fallback Featured Image basierend auf der Beitragskategorie in WordPress einrichtet

Hinweis der Redaktion: Wir erhalten eine Provision für Partnerlinks auf WPBeginner. Die Provisionen haben keinen Einfluss auf die Meinung oder Bewertung unserer Redakteure. Erfahre mehr über Redaktioneller Prozess.

Suchen Sie nach einer Möglichkeit, ein Standard-Post-Thumbnail für bestimmte WordPress-Kategorien festzulegen?

Wenn Sie Artikel haben, die kein Vorschaubild haben, oder wenn Sie möchten, dass alle Beiträge in einer Kategorie ähnliche Vorschaubilder haben, dann können Sie ein Ersatzbild für jede Kategorie festlegen, damit kein Blogbeitrag ausgelassen wird.

In diesem Artikel zeigen wir Ihnen, wie Sie die Standard-Fallback-Bilder für bestimmte Kategorien in WordPress festlegen.

How to set fallback featured image based on post category in WordPress

Warum ein Fallback-Featured Image für die Beitragskategorie hinzufügen?

Angenommen, Sie haben einen WordPress-Blog, in dem Sie jedem Beitrag eine einzelne Kategorie zuweisen. Sie können allen Beiträgen in dieser Kategorie dasselbe Ersatzbild zuweisen, wenn sie aus irgendeinem Grund kein Featured Image haben.

Ein weiterer Vorteil des Hinzufügens eines Fallback-Bildes für eine Beitragskategorie besteht darin, dass die Archivseiten Ihrer Kategorien, die viel Suchverkehr erhalten, dadurch ansprechender und attraktiver werden.

Sehen wir uns also an, wie Sie mit einem WordPress-Plugin und benutzerdefiniertem Code ein Fallback-Bild auf Basis der Beitragskategorie hinzufügen können.

Fallback Featured Image in WordPress mit einem Plugin einstellen

Standardmäßig bietet WordPress keine Option zum Hinzufügen von Bildern zu Ihren Beitragskategorieseiten. Sie können jedoch mit einem WordPress-Plugin ganz einfach ein Ersatzbild für Beitragskategorien festlegen.

Zunächst müssen Sie das Plugin für Kategorie- und Taxonomiebilder installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung können Sie im WordPress-Administrationsbereich zu Einstellungen “ Taxonomiebilder gehen. Als nächstes können Sie auf das Kontrollkästchen „Kategorie“ klicken, um Taxonomie-Bilder in Ihre Beitragskategorien als Fallback einzubinden.

Enable taxonomy images for category

Vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, wenn Sie fertig sind.

Danach können Sie in Ihrem WordPress-Dashboard zu Beiträge “ Kategorien gehen. Wenn Sie eine neue Kategorie hinzufügen oder eine bestehende bearbeiten, wird ein Feld „Bild“ angezeigt.

New image field for categories

Geben Sie einfach die URL eines Bildes ein, das Sie zu Ihrer WordPress-Kategorie hinzufügen möchten. Weitere Details dazu finden Sie in unserer Anleitung, wie Sie die URL von Bildern, die Sie in WordPress hochladen, erhalten.

Wenn Sie nun einen Blogbeitrag veröffentlichen, dem kein Bild zugeordnet ist, verwendet WordPress das Bild, das Sie gerade für Ihre Kategorie festgelegt haben.

Hier sehen Sie eine Vorschau des Bildes, das wir auf Ihrer Demoseite verwendet haben.

Preview of fallback image with plugin

Das war’s schon! Sie haben nun erfolgreich ein Ersatzbild auf der Grundlage der Beitragskategorie hinzugefügt.

Fallback Featured Image in WordPress ohne Plugin einstellen

Sie können auch ein Fallback-Bild für Beitragskategorien konfigurieren, ohne ein WordPress-Plugin zu verwenden. Diese Methode ist jedoch für Anfänger nicht zu empfehlen, da sie Code-Snippets beinhaltet.

Als Erstes müssen Sie Bilder für Ihre WordPress-Kategorien erstellen. Verwenden Sie den Kategorie-Slug als Dateinamen und speichern Sie sie alle im gleichen Format, z. B. JPG oder PNG.

Als Nächstes können Sie Ihre Kategoriebilder über Media “ Add New auf Ihre WordPress-Website hochladen.

Upload images to media library

WordPress speichert Ihre Kategoriebilder während des Uploads und erstellt die von Ihrem Theme definierten Bildgrößen.

Nach dem Hochladen der Kategoriebilder müssen Sie diese in ein anderes Verzeichnis verschieben. Verbinden Sie sich einfach mit einem FTP-Client mit Ihrer Website und gehen Sie zum Ordner /wp-content/uploads/.

Uploads folder in WordPress

Die Kategoriebilder, die Sie hochgeladen haben, werden im Monatsordner gespeichert, z. B. /uploads/2022/08/.

Öffnen Sie den Ordner für diesen Monat.

Media uploads organized in year and monthly folders

Weitere Informationen finden Sie in unserem Leitfaden, wo WordPress Bilder auf Ihrer Website speichert.

Erstellen Sie als Nächstes einen Ordner auf dem Desktop Ihres Computers und nennen Sie ihn category-images. Laden Sie nun alle Ihre Kategoriebilder und alle von WordPress für sie erstellten Größen in diesen neuen Ordner auf Ihrem Desktop herunter.

Sobald der Download abgeschlossen ist, müssen Sie den Ordner „category-images“ in Ihr Verzeichnis /wp-content/uploads hochladen. Auf diese Weise können Sie alle Bildgrößen Ihrer Kategorien in einem separaten Ordner ablegen, der sich leicht in Ihrem Thema aufrufen lässt.

Weitere Einzelheiten finden Sie in unserer Anleitung zum Hochladen von Dateien in WordPress per FTP.

Anzeige des Kategoriebildes als Standard-Fallback-Featured Image

Als Nächstes zeigen wir Ihnen, wie Sie eines dieser Bilder als Ersatzbild anzeigen können, wenn für einen Beitrag in einer Kategorie kein Bild eingestellt ist.

Bei dieser Methode muss Code kopiert und eingefügt werden, und wir empfehlen normalerweise nicht, dass Benutzer ihre Themadateien bearbeiten. Kleine Fehler können zu großen Fehlern auf Ihrer Website führen.

Eine einfachere Möglichkeit, Code zu Ihrer Website hinzuzufügen, ist die Verwendung von WPCode. Es ist das beste WordPress-Code-Snippet-Plugin, mit dem Sie benutzerdefinierten Code auf Ihrer Website sicher und einfach verwalten können.

Zunächst müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

Als Nächstes können Sie in Ihrem WordPress-Administrationsbereich auf Code Snippets “ + Snippet hinzufügen gehen, um ein neues Snippet hinzuzufügen. Klicken Sie dann einfach auf die Schaltfläche „Add New“.

Click 'Add New Snippet' in WPCode

Danach können Sie entweder eigenen Code hinzufügen oder ein Snippet aus der WPCode-Bibliothek verwenden.

Hierfür verwenden Sie Ihren eigenen benutzerdefinierten Code. Bewegen Sie also den Mauszeiger über die Option „Benutzerdefinierten Code hinzufügen (neues Snippet)“ und klicken Sie auf die Option „Snippet verwenden“.

Add custom code in WPCode

Fügen Sie nun einen Namen für Ihr Snippet hinzu, der so gewählt werden kann, dass Sie sich daran erinnern können, wofür der Code gedacht ist.

Da der Code PHP enthält, müssen Sie im Dropdown-Menü als Codetyp „PHP Snippet“ auswählen.

Add a fallback image

Kopieren Sie dann einfach den folgenden Codeschnipsel und fügen Sie ihn in das Feld „Codevorschau“ ein.

/**
 * Plugin Name: Category Thumbnail Fallback
 * Description: Use the category image as fallback when the post does not have a featured image
 */

class WPBCategoryThumbnailFallback
{
    protected static $taxonomies = ['category'];

    protected $nonceId = 'wpb_category_thumb_fallback_none';
    protected $fieldId = 'wpb_category_fallback_post_image';

    public $taxonomy;

    protected function __construct($taxonomy)
    {
        $this->taxonomy = $taxonomy;
    }

    public static function init()
    {
        foreach (static::$taxonomies as $taxonomy) {
            $_self = new self($taxonomy);

            add_action('admin_enqueue_scripts', [$_self, 'scripts']);

            add_action("{$taxonomy}_add_form_fields", [$_self, 'add']);
            add_action("{$taxonomy}_edit_form_fields", [$_self, 'edit'], 99, 2);

            add_action("created_{$taxonomy}", [$_self, 'saveTerm'], 10, 2);
            add_action("edited_{$taxonomy}", [$_self, 'editTerm'], 10, 2);

            add_filter("get_post_metadata", [$_self, 'fallback'], 99, 5);
        }
    }

    public function scripts($hook_suffix)
    {
        if (in_array($hook_suffix, ['term.php', 'edit-tags.php'])) {
            $screen = get_current_screen();

            if (is_object($screen) && "edit-{$this->taxonomy}" == $screen->id) {
                wp_enqueue_media();

                wp_add_inline_script('media-editor', $this->inlineScript());
            }
        }
    }

    public function add()
    {
        ?>
        <div class="form-field upload_image-wrap">
            <label for="upload_image">Image</label>
            <input id="upload_image" type="hidden" size="36" name="<?php
            echo esc_attr($this->fieldId)
            ?>" value=""/>
            <div id="wpb-category-image-preview" style="max-width: 150px; max-height: 150px;"></div>
            <input id="upload_image_button" class="button" type="button" value="Upload Image"/>
            <p>Enter a URL or upload an image</p>
        </div>
        <?php
        wp_nonce_field($this->nonceId, $this->nonceId);
    }

    public function edit($term, $taxonomy)
    {
        $value = get_term_meta($term->term_id, $this->fieldId, true);
        $image = wp_get_attachment_image((int)$value);
        ?>
        <tr class="form-field upload_image-wrap">
            <th scope="row"><label for="name">Image</label></th>
            <td>
                <label for="upload_image">
                    <input id="upload_image" type="hidden" size="36" name="<?php
                    echo esc_attr($this->fieldId)
                    ?>" value="<?php
                    echo esc_attr($value)
                    ?>"/>
                    <div id="wpb-category-image-preview" style="max-width: 150px; max-height: 150px;"><?php
                        echo $image;
                        ?></div>
                    <input id="upload_image_button" class="button" type="button" value="Upload Image"/>
                </label>
                <p class="description">Enter a URL or upload an image</p>
            </td>
        </tr>
        <?php
        wp_nonce_field($this->nonceId, $this->nonceId);
    }

    public function saveTerm($term_id, $tt_id)
    {
        $data = array_filter(wp_unslash($_POST), function ($value, $key) {
            return in_array($key, [$this->nonceId, $this->fieldId]);
        }, ARRAY_FILTER_USE_BOTH);

        if (
            empty($data) ||
            empty($data[$this->nonceId]) ||
            ! wp_verify_nonce($data[$this->nonceId], $this->nonceId) ||
            ! current_user_can('manage_categories')
        ) {
            return null;
        }

        if (empty($data[$this->fieldId]) || empty(absint($data[$this->fieldId]))) {
            return delete_term_meta($term_id, $this->fieldId);
        }

        $value = absint($data[$this->fieldId]);

        return update_term_meta($term_id, $this->fieldId, $value);
    }

    public function editTerm($term_id, $tt_id)
    {
        $this->saveTerm($term_id, $tt_id);
    }

    public function fallback($null, $object_id, $meta_key, $single, $meta_type)
    {
        if (
            $null === null &&
            $meta_key === '_thumbnail_id'
        ) {
            $meta_cache = wp_cache_get($object_id, $meta_type . '_meta');

            if ( ! $meta_cache) {
                $meta_cache = update_meta_cache($meta_type, [$object_id]);
                $meta_cache = $meta_cache[$object_id] ?? null;
            }

            $val = null;

            if (isset($meta_cache[$meta_key])) {
                if ($single) {
                    $val = maybe_unserialize($meta_cache[$meta_key][0]);
                } else {
                    $val = array_map('maybe_unserialize', $meta_cache[$meta_key]);
                }
            }

            if (empty($val)) {
                $fallbackImageId = $this->getPostFallbackImageId($object_id, $single);

                if ( ! empty($fallbackImageId)) {
                    return $fallbackImageId;
                }
            }

            return $val;
        }

        return $null;
    }

    public function getPostFallbackImageId($postId, $single)
    {
        $terms = get_the_terms($postId, $this->taxonomy);

        if (empty($terms) || is_wp_error($terms)) {
            return null;
        }

        foreach ($terms as $term) {
            $fallbackIdFromCategoryId = get_term_meta($term->term_id, $this->fieldId, $single);

            if ( ! empty($fallbackIdFromCategoryId)) {
                return $fallbackIdFromCategoryId;
            }
        }

        return null;
    }

    public function inlineScript()
    {
        return "jQuery(document).ready(function ($) {
            var custom_uploader;
            $('#upload_image_button').click(function (e) {
                e.preventDefault();
                //If the uploader object has already been created, reopen the dialog
                if (custom_uploader) {
                    custom_uploader.open();
                    return;
                }
                //Extend the wp.media object
                custom_uploader = wp.media.frames.file_frame = wp.media({
                    title: 'Choose Image',
                    button: {
                        text: 'Choose Image'
                    },
                    multiple: true
                });
                //When a file is selected, grab the URL and set it as the text field's value
                custom_uploader.on('select', function () {
                    console.log(custom_uploader.state().get('selection').toJSON());
                    attachment = custom_uploader.state().get('selection').first().toJSON();
                    
                    var thumbUrl = attachment && attachment.sizes && attachment.sizes.thumbnail && attachment.sizes.thumbnail.url
                    ? attachment.sizes.thumbnail.url
                    : attachment.url;
                    $('#wpb-category-image-preview').html('<img src=\"'+ thumbUrl +'\">');
                    $('#upload_image').val(attachment.id);
                });
                //Open the uploader dialog
                custom_uploader.open();
            });
        });";
    }
}

Als Nächstes können Sie zum Abschnitt „Einfügen“ blättern und „Automatisch einfügen“ wählen, damit das Plugin die Platzierung für Sie übernimmt.

Wählen Sie dann die Option „Vor dem Inhalt einfügen“ unter dem Abschnitt „Seite, Beitrag, benutzerdefinierter Beitragstyp“ im Dropdown-Menü „Ort“.

Select fallback image insertion option

Sie können dann zum Anfang der Seite zurückkehren und den Schalter von „Inaktiv“ auf „Aktiv“ umstellen.

Wenn Sie oben auf die Schaltfläche „Snippet speichern“ klicken, ist Ihr Ersatzbild bereits vorhanden.

Save and activate code snippet WPCode

Vielleicht interessiert Sie auch unsere Anleitung zum Hinzufügen von benutzerdefinierten Code-Snippets in WordPress.

Hinweis: Dieses Codeschnipsel funktioniert nur mit der Taxonomie „Kategorie“. Sie können jedoch weitere Taxonomien hinzufügen, indem Sie deren Namen zur Liste in der folgenden Klasse im Code hinzufügen und den in Klammern gesetzten Begriff z. B. in „Tag“ oder „Post“ ändern.

protected static $taxonomies = ['category'];

Wenn Sie fertig sind, besuchen Sie einfach Ihre Website, um das Fallback-Bild zu sehen.

Fallback image preview

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, ein Ersatzbild für die Beitragskategorie hinzuzufügen. Lesen Sie auch unseren Leitfaden über die Kosten für die Erstellung einer Website und die besten E-Mail-Marketingdienste für kleine Unternehmen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

11 KommentareEine Antwort hinterlassen

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Nicola says

    Most interesting would to have a hook to replace thumbnail to be used in functions so not to bother replacing wherever the thumbnail is used

  3. Sohail says

    Thank you. This works like a charm :-)

    While the fallback featured image gets displayed in the post; any ideas on how could I display them in category/archive pages, or where the posts get displayed on the homepage?

  4. tina says

    Hello!
    Please show how the articles of the way they are displayed in the „MORE ON RIGHT NOW WPBEGINNER“ above ?? a WordPress template
    Thank you

  5. David says

    I turned off the organize posts by date month in settings/media, and changed url to reflect uploads directory specifically – that way I can avoid the extra step. I’m hoping this won’t cause issues with my host but it certainly makes life a little easier for me. Thank you so much for sharing this info, I have been searching for a looooong time and it’s finally how I want it :)

  6. Rashid khan says

    hello,,, i want to add dynamic image on my wordpress home page. where al ready 5 images are set on differnet location..
    i just want to replace them and add new photo by post and catorrries…
    please help me
    i tried but no success
    i used post by thumbian function

  7. Richard Stewart says

    This is great, but I failed miserably trying to implement Displaying Category Image as Default Fallback Featured Image in my classifieds theme. It uses different categories from the ’stock‘ posts categories and the author refuses to help.

    Do you offer any technical services, paid or otherwise, where you can help me implement Displaying Category Image as Default Fallback Featured Image into my theme?

  8. Matt Cromwell says

    This is really awesome, a really useful tip in my case. Only issue is the first code above is incomplete. Luckily I didn’t need the „if“ part, so I just pulled that out and all was well.

    Thanks for some pretty advanced tips on your „begginer’s“ site. Keep it up!

  9. Damien Carbery says

    Another idea could to set the post thumbnail when the post is saved. The advantage of the solution above is that the category thumbnail is easily changed.

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.