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.
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’te Eklenti Kullanarak Yedek Öne Çıkarılmış Görsel Ayarlama
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.
İş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.
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.
Hepsi bu kadar! Artık gönderi kategorisine göre bir yedek resmi başarıyla eklediniz.
WordPress’te Eklenti Olmadan Yedek Öne Çıkarılmış Görsel Ayarlama
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.
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.
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.
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.
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.
Ardından, ekranda görünen seçenekler listesinden kod türü olarak ‘PHP Snippet’i seçmeniz gerekir.
Ş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.
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.
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.
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.
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.
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
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?
Deepak
do we now have a plugin for this same requirement? or we need to still use manual method?
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
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
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
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?
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!
WPBeginner Support
@Matt thanks for notifying us, we have fixed it.
Yönetici
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.