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

Wir haben festgestellt, dass das Einstellen von Fallback-Bildern für WordPress-Kategorien eine enorme Zeitersparnis darstellt, insbesondere für Blogs mit einem hohen Volumen an Inhalten.

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.

Auf diese Weise können Sie sicherstellen, dass kein Blogbeitrag ohne ein Featured Image bleibt und Sie müssen es nicht jedem einzelnen Beitrag manuell zuweisen.

In diesem Artikel zeigen wir Ihnen, wie Sie die standardmäßigen Hervorgehobenen Beitragsbilder 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?

Nehmen wir an, 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 hervorgehobenes Bild 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.

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 auf das Bild, das wir auf unserer Website 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.

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.

Als Nächstes erstellen Sie einen Ordner auf dem Desktop Ihres Computers und nennen ihn Kategorie-Bilder. Laden Sie nun alle Kategorie-Bilder und alle Größen, die WordPress für sie erstellt hat, 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

Als Nächstes müssen Sie aus der Liste der Optionen, die auf dem Bildschirm erscheinen, „PHP Snippet“ als Codetyp auswählen.

Select the PHP snippet option

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.

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. Sehen Sie sich auch unsere Anleitung zum Hinzufügen eines Fortschrittsbalkens in WordPress-Beiträgen und unsere Expertenauswahl der besten Canva-Alternativen für Website-Grafiken an.

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 .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

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

10 KommentareEine Antwort hinterlassen

  1. Nicola

    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

  2. Sohail

    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?

  3. Deepak

    do we now have a plugin for this same requirement? or we need to still use manual method?

  4. tina

    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

    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

    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

    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

    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

    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.