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

Så här ställer du in en utvald image baserad på kategorin för inlägg i WordPress

Vi har upptäckt att inställningen av fallback-bilder för WordPress-kategorier är en enorm tidsbesparing, särskilt för bloggar med en hög volym innehåll.

Om du har artiklar som inte har en utvald bild, eller om du vill att alla inlägg i en kategori ska ha liknande miniatyrer, kan du ställa in en reservbild för varje kategori.

På så sätt kan du se till att inga blogginlägg lämnas utan en featured image och du behöver inte manuellt tilldela dem till varje enskilt inlägg.

I den här artikeln visar vi dig hur du ställer in standard fallback featured images för specifika kategorier i WordPress.

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

Varför lägga till en fallback featured image för inläggskategori?

Låt oss säga att du har en WordPress-blogg där du tilldelar ett enskilt inlägg en kategori. You can assign all posts in that category to show the same fallback image if they don’t have a featured image for some reason.

En annan fördel med att lägga till en fallback image för en post kategori är om din kategori archive pages får en hel del search trafik, då det gör dem mer engagerande och attraktiva.

Med detta sagt, låt oss se hur du kan lägga till en fallback image baserat på postens kategori med hjälp av ett WordPress plugin och custom code.

Som standard erbjuder WordPress inte ett alternativ för att add images till dina post category pages. Du kan dock enkelt ställa in en fallback image för post kategorier med hjälp av ett WordPress tillägg.

Först måste du installera och aktivera pluginet Category and Taxonomy Image. För mer detaljer, vänligen se vår guide om hur du installerar ett plugin för WordPress.

När du har aktiverat den kan du heada till Settings ” Taxonomi Image från WordPress adminpanel. Därefter kan du klicka på ”category” checkboxen för att inkludera taxonomi images i dina post kategorier som en reserv.

Enable taxonomy images for category

Glöm inte att clicka på knappen ”Save Changes” när du är klar.

Efter det kan du gå till Posts ” Categories från din WordPress dashboard. Du kommer att se ett ”Image”-fält visas när du lägger till en new kategori eller redigerar en befintlig.

New image field for categories

Enter helt enkelt en URL till en image som du vill add till din WordPress Category. För mer detaljer om detta, vänligen se vår guide om hur du får URL:en till bilder som du uploadar i WordPress.

Nu, när du publicerar ett blogginlägg utan att någon featured image har tilldelats, kommer WordPress att använda den bild som du just har ställt in för din kategori.

Här är en preview av den image som vi använde på vår demo site.

Preview of fallback image with plugin

Det var allt! Du har nu utan problem lagt till en fallback image baserat på postens kategori.

Du kan också konfigurera en fallback image för kategorier av post utan att använda en WordPress plugin. Denna metod rekommenderas dock ej för Beginnare eftersom den involverar code snippets.

Det första du behöver göra är att skapa images för dina WordPress kategorier. Använd kategorins slug som filnamn för dina images och save dem all i samma format, gillar JPG eller PNG.

Därefter kan du ladda upp dina kategori images till din WordPress site från Media ” Add New.

Upload images to media library

WordPress kommer att lagra dina kategoribilder under uploaden och skapa image-storlekar som definieras av ditt theme.

När du har uppladdat kategori images måste du flytta dem till en annan directory. Anslut till din website med en FTP-klient och gå till mappen /wp-content/upladdare/.

Uploads folder in WordPress

De Category images som du har laddat upp kommer att lagras i månadens folder, gillar /uploads/2022/08/.

Gå vidare och öppna den här månadens folder.

Media uploads organized in year and monthly folders

Du kan se vår guide om var WordPress lagrar image på din site för mer information.

Skapa sedan en folder på datorns skrivbord och döp den till category-images. Nu downloadar du alla dina category images och alla storlekar som WordPress har gjort för dem till denna new folder på skrivbordet.

När download är slutförd måste du uploada mappen category-images till din /wp-content/uploads directory. Genom att göra detta allow you att ha alla dina kategoriers image-storlekar i en separat folder som är lätt att anropa till ditt theme.

För mer detaljer, vänligen se vår guide om hur du använder FTP för att uploada filer till WordPress.

Displaying Category Image as Standard Fallback Featured Image

Nästa inlägg visar dig hur du visar en av dessa bilder som en fallback featured image när ett inlägg i en kategori ej har en sådan inställd.

Den här metoden innebär att kopiera och paste kod, och vi rekommenderar normalt inte att användare editerar sina theme-filer. Små misstag kan leda till stora error på din site.

Ett enklare sätt att add to kod till din site är genom att använda WPCode. Det är det bästa WordPress code snippet plugin, allow you att säkert och enkelt hantera custom code på din site.

Först måste du installera och aktivera det gratis pluginet WPCode. För mer detaljer, vänligen se vår guide om hur du installerar ett plugin för WordPress.

Därefter kan du gå till Code Snippets ” + Add Sn ippet i din WordPress adminpanel för att lägga till ett nytt snippet. Sedan klickar du bara på knappen ”Add New”.

Click 'Add New Snippet' in WPCode

Efter det kan du antingen add to custom code eller använda ett snippet från WPCode-biblioteket.

För detta kommer du att använda din egen anpassade kod, så hovera över alternativet ”Add Your Custom Code (New Snippet)” och klicka på alternativet ”Use Snippet”.

Add custom code in WPCode

Därefter måste du välja ”PHP Fragment Kodu” som kodtyp från listan med alternativ som visas på skärmen.

Select the PHP snippet option

Nu add to ett namn för your snippet, vilket kan vara vad som helst som hjälper you att komma ihåg vad koden är till för.

Add a fallback image

Följ detta genom att kopiera följande code snippet och paste in det i fältet ”Code Preview”.

/**
 * 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();
            });
        });";
    }
}

Därefter kan du rulla ner till ”Insertion” section och välja ”Auto Insert” för att låta pluginet hantera placeringen åt dig.

Välj sedan alternativet ”Insert Before Content” under avsnittet ”Page, Post, Custom Post Type” i dropdown-menyn ”Location”.

Select fallback image insertion option

Du kan sedan gå tillbaka högst upp på page och toggla från ”Inaktiverad” till ”Aktiv”.

När you click the ”Save Snippet” button at the högst upp, your fallback image will be in place.

Save and activate code snippet WPCode

Du kanske också vill läsa vår guide om hur du lägger till custom code snippets i WordPress.

Note: Detta code snippet fungerar endast med taxonomin ”category”. Du kan dock lägga till fler taxonomier genom att lägga till deras namn i listan i följande klass i koden och ändra den parentesförsedda termen till ”tag” eller ”post”, till exempel.

protected static $taxonomies = ['category'];

När du är klar är det bara att besöka your website för att se fallback-imagen.

Fallback image preview

Vi hoppas att den här artikeln hjälpte dig att lägga till en reservbild baserad på inläggskategorin. Du kan också se vår przewodnik om hur du lägger till en förloppsindikator i WordPress-inlägg och våra expertval av de bästa Canva-alternativen för webbplatsgrafik.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

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.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

12 kommentarerLämna ett svar

  1. Dennis Muthomi

    I think there is someting wrong with the WPCode snippet in the article, it is showing some overlapping line numbers, on the left column.

    • WPBeginner Support

      That is due to our CSS currently limiting the numbers to a one character column.

      Administratör

  2. 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

  3. 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?

  4. Deepak

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

  5. 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

  6. 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 :)

  7. 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

  8. 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?

  9. 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!

  10. 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.

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.