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

WordPress’te Yazı Kategorisine Göre Yedek Öne Çıkan Görsel Nasıl Ayarlanır

WordPress kategorileri için yedek öne çıkan görseller ayarlamanın, özellikle yüksek miktarda içeriğe sahip bloglar için büyük bir zaman tasarrufu sağladığını gördük.

Öne çıkan görseli olmayan makaleleriniz varsa veya bir kategorideki tüm gönderilerin benzer küçük resimlere sahip olmasını istiyorsanız, her kategori için bir yedek görsel ayarlayabilirsiniz.

Bu şekilde, hiçbir blog gönderisinin öne çıkan görsel olmadan kalmayacağından emin olabilirsiniz ve bunları her bir gönderiye manuel olarak atamanız gerekmez.

Bu makalede, WordPress’te belirli kategoriler için varsayılan yedek öne çıkan görselleri nasıl ayarlayacağınızı göstereceğiz.

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

Neden Gönderi Kategorisi için Yedek Öne Çıkarılmış Görsel Ekleyelim?

Diyelim ki her yazıya tek bir kategori atadığınız bir WordPress blogunuz var. Bu kategorideki tüm yazıları, herhangi bir nedenle öne çıkan bir görselleri yoksa aynı yedek görseli gösterecek şekilde atayabilirsiniz.

Bir gönderi kategorisi için yedek görsel eklemenin bir başka faydası da, kategori arşiv sayfalarınız çok fazla arama trafiği alıyorsa, onları daha ilgi çekici ve çekici hale getirmesidir.

Bununla birlikte, bir WordPress eklentisi ve özel kod kullanarak yazı kategorisine göre nasıl yedek bir görsel ekleyebileceğinizi görelim.

WordPress varsayılan olarak yazı kategorisi sayfalarınıza görsel ekleme seçeneği sunmaz. Ancak, bir WordPress eklentisi kullanarak yazı kategorileri için kolayca yedek bir görsel ayarlayabilirsiniz.

Öncelikle Kategori ve Taksonomi Resmi eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için lütfen bir WordPress eklentisinin nasıl kurulacağına ilişkin kılavuzumuza bakın.

Etkinleştirmenin ardından, WordPress yönetici panelinden Ayarlar ” Taksonomi Görüntüsü bölümüne gidebilirsiniz. Ardından, taksonomi görsellerini yazı kategorilerinize yedek olarak eklemek için ‘kategori’ onay kutusunu tıklayabilirsiniz.

Enable taxonomy images for category

İşiniz bittiğinde ‘Değişiklikleri Kaydet’ düğmesine tıklamayı unutmayın.

Bundan sonra, WordPress kontrol panelinizden Yazılar ” Kategoriler bölümüne gidebilirsiniz. Yeni bir kategori eklerken veya mevcut bir kategoriyi düzenlerken bir ‘Resim’ alanının göründüğünü göreceksiniz.

New image field for categories

WordPress kategorinize eklemek istediğiniz bir görsel URL’si girmeniz yeterlidir. Bununla ilgili daha fazla ayrıntı için lütfen WordPress’te yüklediğiniz görsellerin URL’sini nasıl alacağınıza ilişkin kılavuzumuza bakın.

Şimdi, öne çıkan görsel atanmamış bir blog yazısı yayınladığınızda, WordPress kategoriniz için yeni ayarladığınız resmi kullanacaktır.

İşte demo sitemizde kullandığımız görselin bir önizlemesi.

Preview of fallback image with plugin

Hepsi bu kadar! Artık gönderi kategorisine göre bir yedek resmi başarıyla eklediniz.

WordPress eklentisi kullanmadan da yazı kategorileri için bir yedek resim yapılandırabilirsiniz. Ancak bu yöntem kod parçacıkları içerdiğinden yeni başlayanlar için önerilmez.

Yapmanız gereken ilk şey WordPress kategorileriniz için görseller oluşturmaktır. Resim dosyası adı olarak kategori slug’ını kullanın ve hepsini JPG veya PNG gibi aynı formatta kaydedin.

Ardından, kategori görsellerinizi WordPress sitenize Medya ” Yeni Ekle bölümünden yükleyebilirsiniz.

Upload images to media library

WordPress, yükleme sırasında kategori resimlerinizi depolayacak ve temanız tarafından tanımlanan resim boyutlarını oluşturacaktır.

Kategori görsellerini yükledikten sonra, onları farklı bir dizine taşımanız gerekir. Bir FTP istemcisi kullanarak web sitenize bağlanın ve /wp-content/uploads/ klasörüne gidin.

Uploads folder in WordPress

Yüklediğiniz kategori resimleri /uploads/2022/08/ gibi ay klasöründe saklanacaktır.

Devam edin ve bu ayın dosyasını açın.

Media uploads organized in year and monthly folders

Daha fazla bilgi için WordPress’in sitenizde görüntüyü nerede depolayacağına ilişkin kılavuzumuza bakabilirsiniz.

Ardından, bilgisayarınızın masaüstünde bir klasör oluşturun ve adını category-images koyun. Şimdi, tüm kategori resimlerinizi ve WordPress’in onlar için oluşturduğu tüm boyutları masaüstünüzdeki bu yeni klasöre indirin.

İndirme işlemi tamamlandığında, category-images klasörünü /wp-content/uploads dizininize yüklemeniz gerekir. Bunu yapmak, tüm kategori resim boyutlarınızı temanıza çağırması kolay ayrı bir klasörde bulundurmanızı sağlayacaktır.

Daha fazla ayrıntı için lütfen WordPress’e dosya yüklemek için FTP’nin nasıl kullanılacağına ilişkin kılavuzumuza bakın.

Kategori Görselini Varsayılan Yedek Öne Çıkan Görsel Olarak Görüntüleme

Daha sonra, bir kategorideki bir gönderide öne çıkan görsel ayarlanmadığında bu görsellerden birini yedek öne çıkan görsel olarak nasıl görüntüleyeceğinizi göstereceğiz.

Bu yöntem, kod kopyalama ve yapıştırma işlemlerini içerir ve normalde kullanıcıların tema dosyalarını düzenlemelerini önermiyoruz. Küçük hatalar sitenizde büyük hatalara neden olabilir.

Sitenize kod eklemenin daha kolay bir yolu WPCode kullanmaktır. Sitenizdeki özel kodları güvenli ve kolay bir şekilde yönetmenizi sağlayan en iyi WordPress kod parçacığı eklentisidir.

Öncelikle, ücretsiz WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için lütfen WordPress eklentisi yükleme kılavuzumuza bakın.

Ardından, yeni bir snippet eklemek için WordPress yönetici panelinizdeki Code Snippets ” + Add Snippet bölümüne gidebilirsiniz. Ardından ‘Yeni Ekle’ düğmesine tıklamanız yeterlidir.

Click 'Add New Snippet' in WPCode

Bundan sonra, özel kod ekleyebilir veya WPCode kütüphanesinden bir kod parçacığı kullanabilirsiniz.

Bunun için kendi özel kodunuzu kullanacaksınız, bu nedenle ‘Özel Kodunuzu Ekleyin (Yeni Snippet)’ seçeneğinin üzerine gelin ve ‘Snippet Kullan’ seçeneğine tıklayın.

Add custom code in WPCode

Ardından, ekranda görünen seçenekler listesinden kod türü olarak ‘PHP Snippet’i seçmeniz gerekir.

Select the PHP snippet option

Şimdi kod parçacığınız için bir ad ekleyin; bu ad kodun ne için olduğunu hatırlamanıza yardımcı olacak herhangi bir şey olabilir.

Add a fallback image

Bundan sonra, aşağıdaki kod parçacığını kopyalayın ve ‘Kod Önizleme’ alanına yapıştırın.

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

Ardından, ‘Yerleştirme’ bölümüne ilerleyebilir ve eklentinin yerleştirmeyi sizin için halletmesine izin vermek için ‘Otomatik Yerleştirme’yi seçebilirsiniz.

Ardından, ‘Konum’ açılır menüsündeki ‘Sayfa, Yazı, Özel Yazı Türü’ bölümünün altındaki ‘İçerikten Önce Ekle’ seçeneğini seçin.

Select fallback image insertion option

Daha sonra sayfanın en üstüne dönebilir ve geçişi ‘Etkin Değil’den ‘Etkin’e getirebilirsiniz.

En üstteki ‘Snippet’i Kaydet’ düğmesine tıkladığınızda, yedek resminiz yerinde olacaktır.

Save and activate code snippet WPCode

WordPress’te özel kod parçacıklarının nasıl ekleneceğine ilişkin kılavuzumuzu da görmek isteyebilirsiniz.

Not: Bu kod parçacığı yalnızca ‘kategori’ taksonomisi ile çalışacaktır. Ancak, koddaki aşağıdaki sınıftaki listeye adlarını ekleyerek ve parantezli terimi örneğin ‘etiket’ veya ‘yazı’ olarak değiştirerek daha fazla taksonomi ekleyebilirsiniz.

protected static $taxonomies = ['category'];

İşiniz bittiğinde, yedek görüntüyü görmek için web sitenizi ziyaret etmeniz yeterlidir.

Fallback image preview

Umarız bu makale yazı kategorisine göre yedek bir öne çıkan görsel eklemenize yardımcı olmuştur. WordPress yazılarına ilerleme çubuğu ekleme kılavuzumuza ve web sitesi grafikleri için en iyi Canva alternatifleri uzman seçimlerimize de göz atabilirsiniz.

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.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

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.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

10 yorumBir Cevap Bırakın

  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.

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.