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

Jak ustawić zastępczy obrazek wyróżniający na podstawie kategorii wpisu w WordPress?

Przekonaliśmy się, że ustawienie obrazów zastępczych dla kategorii WordPress to ogromna oszczędność czasu, szczególnie w przypadku blogów z dużą ilością treści.

Jeśli masz artykuły, które nie mają wyróżnionego obrazu lub jeśli chcesz, aby wszystkie posty w kategorii miały podobne miniatury, możesz ustawić obraz zastępczy dla każdej kategorii.

W ten sposób możesz mieć pewność, że żaden wpis na blogu nie pozostanie bez wyróżnionego obrazu i nie będziesz musiał ręcznie przypisywać go do każdego posta.

W tym artykule pokażemy, jak ustawić domyślne obrazki wyróżniające dla określonych kategorii w WordPress.

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

Dlaczego warto dodać obrazek wyróżniający dla kategorii wpisów?

Załóżmy, że masz bloga WordPress, w którym przypisujesz pojedynczą kategorię do każdego wpisu. Możesz przypisać wszystkie wpisy w tej kategorii, aby wyświetlały ten sam obrazek awaryjny, jeśli z jakiegoś powodu nie mają wyróżniającego obrazka.

Kolejną korzyścią z dodania obrazka zastępczego dla kategorii wpisów jest to, że jeśli twoje strony archiwum kategorii uzyskują duży ruch z wyszukiwarek, to czyni je to bardziej angażującymi i atrakcyjnymi.

To powiedziawszy, zobaczmy, jak można dodać obrazek awaryjny na podstawie kategorii wpisu za pomocą wtyczki WordPress i własnego kodu.

Domyślnie WordPress nie oferuje opcji dodawania obrazków do stron kategorii twoich wpisów. Można jednak łatwo ustawić obrazek zastępczy dla kategorii wpisów za pomocą wtyczki WordPress.

Najpierw musisz zainstalować i włączyć wtyczkę Category and Taxonomy Image. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat instalacji wtyczki WordPress.

Po włączaniu można przejść do Ustawienia ” Obraz tak sonomii z panelu administracyjnego WordPress. Następnie możesz kliknąć pole wyboru „kategoria”, aby uwzględnić obrazki tak sonomii w kategoriach twojego wpisu jako rozwiązanie awaryjne.

Enable taxonomy images for category

Nie zapomnij kliknąć przycisku „Zapisz zmiany” po zakończeniu.

Następnie możesz przejść do Wpisy ” Kategorie z twojego kokpitu WordPress. Podczas dodawania nowej kategorii lub edycji istniejącej pojawi się pole „Obrazek”.

New image field for categories

Wystarczy wpisz adres URL obrazka, który chcesz dodać do swojej kategorii WordPress. Aby uzyskać więcej informacji na ten temat, zapoznaj się z naszym przewodnikiem na temat uzyskiwania adresów URL obrazków przesyłanych w WordPress.

Teraz, gdy opublikujesz wpis na blogu bez przypisanego obrazka wyróżniającego, WordPress użyje obrazka, który właśnie ustawiłeś dla swojej kategorii.

Oto podgląd obrazka, którego użyliśmy na naszej witrynie demonstracyjnej.

Preview of fallback image with plugin

To wszystko! Udało ci się dodać obrazek zastępczy na podstawie kategorii wpisu.

Można również skonfigurować obrazek zastępczy dla kategorii wpisów bez użycia wtyczki WordPress. Ta metoda nie jest jednak zalecana dla początkujących, ponieważ bierze udział we fragmentach kodu.

Pierwszą rzeczą, którą musisz zrobić, jest utworzenie obrazków dla twoich kategorii WordPress. Użyj uproszczonej nazwy kategorii jako nazwy twojego obrazka i zapisz je wszystkie w tym samym formacie, takim jak JPG lub PNG.

Następnie możesz przesłać swoje obrazki kategorii do witryny WordPress z Media ” Utwórz nowy.

Upload images to media library

WordPress będzie przechowywać twoje obrazy kategorii podczas przesyłania i tworzyć obrazki o rozmiarach zdefiniowanych przez twój motyw.

Po wgraniu obrazków kategorii należy przenieść je do innego katalogu. Wystarczy połączyć się z twoją witryną internetową za pomocą klienta FTP i przejść do katalogu /wp-content/uploads/.

Uploads folder in WordPress

Przesłane obrazki kategorii zostaną zapisane w katalogu miesiąca, np. /uploads/2022/08/.

Otwórz katalog z tego miesiąca.

Media uploads organized in year and monthly folders

Więcej informacji można znaleźć w naszym przewodniku na temat tego, gdzie WordPress przechowuje obrazek na twojej witrynie.

Następnie utwórz katalog na pulpicie twojego komputera i nazwij go category-images. Teraz pobierz wszystkie twoje obrazki kategorii i wszystkie rozmiary, które WordPress dla nich przygotował, do tego nowego katalogu na pulpicie.

Po zakończeniu pobierania należy przesłać folder category-images do twojego katalogu /wp-content/uploads. Pozwoli to na umieszczenie wszystkich rozmiarów obrazków kategorii w osobnym katalogu, który można łatwo wywołać w twoim motywie.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat korzystania z FTP do przesyłania plików do WordPress.

Wyświetlanie obrazka kategorii jako domyślnego awaryjnego obrazka wyróżniającego

Następnie pokażemy, jak wyświetlić jeden z tych obrazków jako awaryjny obrazek wyróżniający, gdy wpis w kategorii nie ma ustawionego takiego obrazka.

Ta metoda bierze biorący udział w kopiowaniu i wklejaniu kodu, i zwykle nie zalecamy użytkownikom edytowania plików motywu. Małe błędy mogą spowodować duże błędy na twojej witrynie.

Łatwiejszym sposobem na dodanie kodu do twojej witryny jest użycie WPCode. Jest to najlepsza wtyczka do fragmentów kodu WordPress, która pozwala bezpiecznie i łatwo zarządzać własnym kodem na twojej witrynie.

Najpierw należy zainstalować i włączyć darmową wtyczkę WPCode. Więcej szczegółów można znaleźć w naszym przewodniku na temat instalacji wtyczki WordPress.

Następnie możesz przejść do sekcji Fragmenty kodu ” + Dodaj fragment w twoim panelu administracyjnym WordPress, aby utworzyć nowy fragment kodu. Następnie wystarczy kliknąć przycisk „Utwórz nowy”.

Click 'Add New Snippet' in WPCode

Następnie można dodać własny kod lub użyć fragmentu kodu z biblioteki WPCode.

W tym celu użyjesz własnego kodu, więc najedź kursorem na opcję „Add Your Custom Code (New Snippet)” i kliknij opcję „Use Snippet”.

Add custom code in WPCode

Następnie należy wybrać „Fragment kodu PHP” jako typ kodu z listy opcji, które pojawią się na ekranie.

Select the PHP snippet option

Teraz dodaj nazwę dla twojego fragmentu kodu, która może być dowolna, aby pomóc ci zapamiętać, do czego służy kod.

Add a fallback image

Następnie wystarczy skopiować poniższy fragment kodu i wkleić go w polu „Podgląd kodu”.

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

Następnie możesz przewinąć w dół do sekcji „Wstawianie” i wybrać opcję „Automatyczne wstawienie”, aby wtyczka zajęła się wstawianiem za ciebie.

Następnie wybierz opcję „Wstaw przed treścią” w sekcji „Strona, wpis, własny typ treści” w rozwijanym menu „Położenie”.

Select fallback image insertion option

Następnie można powrócić do górnej części strony i przełączyć przełącznik z „Nieaktywny” na „Aktywny”.

Po kliknięciu przycisku „Zapisz fragment kodu” u góry, twój obrazek zastępczy będzie gotowy.

Save and activate code snippet WPCode

Możesz również zapoznać się z naszym przewodnikiem na temat dodawania własnych fragmentów kodu w WordPress.

Uwaga: Ten fragment kodu będzie działał tylko z taksonomią „category”. Można jednak dodać więcej taksonomii, dodając ich nazwę do listy w poniższej klasie w kodzie i zmieniając nawiasowe określenie na przykład na „tag” lub „wpis”.

protected static $taxonomies = ['category'];

Kiedy skończysz, po prostu przejdź na twoją witrynę internetową, aby zobaczyć obrazek zastępczy.

Fallback image preview

Mamy nadzieję, że ten artykuł pomógł ci w dodaniu awaryjnego wyróżnionego obrazu na podstawie kategorii postu. Możesz również zapoznać się z naszym przewodnikiem na temat dodawania paska postępu w postach WordPress i naszymi eksperckimi propozycjami najlepszych alternatyw Canva dla grafiki internetowej.

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.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

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.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

10 komentarzyZostaw odpowiedź

  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.

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.