WordPress FSE Temalarda Varsayılan Öne Çıkan Görsel Nasıl Eklenir?
WordPress’te içerik yayımlarken her gönderiye ayrı bir öne çıkan görsel eklemek istemeyebilirsiniz. Özellikle yüzlerce içerik barındıran bir web sitesinde bu işlem hem zaman alıyor hem de medya kütüphanesinde gereksiz dosya kullanımına neden olabiliyor.
İkinci Öğretmen web sitemde bu sorunla karşılaştım. Sitemde standart blog yazılarının yanı sıra eğitim materyalleri ve indirilebilir belgeler için ayrı gönderi türleri kullanıyorum. Bazı içeriklerin kendine ait kapak görseli bulunurken bazılarında öne çıkan görsel alanı boş kalıyor.
Benim istediğim, öne çıkan görseli bulunmayan gönderilerde otomatik olarak belirlediğim bir kapak görselinin gösterilmesiydi. Ancak bunu yaparken her gönderinin veritabanına ayrı ayrı görsel atamak istemiyordum.
İlk düşündüğüm çözüm: save_post
Başlangıçta WordPress’in save_post eylemini kullanarak görseli olmayan gönderilere otomatik öne çıkan görsel atayan bir PHP kodu hazırladım.
Bu yöntem, bir gönderi kaydedildiğinde çalışıyor. Gönderinin öne çıkan görseli yoksa medya kütüphanesindeki varsayılan görseli o gönderiye atayabiliyorsunuz.
İlk bakışta istediğim sonucu verecek bir yöntemdi. Ancak önemli bir dezavantajını fark ettim: Görsel, gönderinin _thumbnail_id meta verisine kaydediliyordu.
Bu da her gönderide aynı görselin ilişkilendirilmesi anlamına geliyordu.
Benim amacım ise yalnızca görselin ekranda gösterilmesiydi. Gönderinin gerçek öne çıkan görsel bilgisinin değişmesine gerek yoktu.
Bu nedenle yaklaşımımı değiştirdim.
Daha iyi çözüm: post_thumbnail_id filtresi
WordPress’in post_thumbnail_id filtresi sayesinde gönderinin öne çıkan görsel kimliğini, veritabanındaki gerçek değeri değiştirmeden filtreleyebiliyoruz.
Örneğin medya kütüphanesine eklediğimiz bir görselin kimliği 123 olsun. Aşağıdaki kodda bu kimliği varsayılan görsel olarak tanımlıyoruz.
add_filter(
'post_thumbnail_id',
function( $thumbnail_id, $post ) {
if (
is_admin() ||
( defined( 'REST_REQUEST' ) && REST_REQUEST )
) {
return $thumbnail_id;
}
if ( $thumbnail_id ) {
return $thumbnail_id;
}
$post = get_post( $post );
if ( ! $post ) {
return $thumbnail_id;
}
$post_types = array(
'post',
'materyal',
'wpdmpro'
);
if (
! in_array(
$post->post_type,
$post_types,
true
)
) {
return $thumbnail_id;
}
$default_image_id = 123;
return wp_attachment_is_image(
$default_image_id
) ? $default_image_id : $thumbnail_id;
},
10,
2
);Önemli: Buradaki 123 örnek bir medya kimliğidir. Kodu kullanmadan önce kendi varsayılan görselinizin medya kütüphanesindeki kimliğiyle değiştirmelisiniz.
Kod nasıl çalışıyor?
Kodun işleyişi oldukça basit:
- WordPress bir gönderinin öne çıkan görsel kimliğini istediğinde filtre devreye giriyor.
- Gönderinin zaten bir öne çıkan görseli varsa mevcut kimlik değiştirilmeden kullanılıyor.
- Öne çıkan görsel bulunmuyorsa gönderi türü kontrol ediliyor.
- Gönderi
post,materyalveyawpdmprotüründeyse varsayılan görsel kimliği döndürülüyor. - Gerçek gönderi meta verisine herhangi bir değer yazılmıyor.
Kodda yönetim paneli ve standart REST API istekleri dışında bırakılıyor. Böylece editör tarafında gerçekte atanmamış bir görselin atanmış gibi görünmesini önlemeyi amaçladım.
FSE temalarda nasıl kullanılır?
Klasik WordPress temalarında bazı işlemler tema dosyalarına bağlı olarak gerçekleştiriliyor. Ancak ben Full Site Editing (FSE) teması kullandığım için çözümün bloklarla uyumlu olması önemliydi.
FSE temalarında şu adımları izleyebilirsiniz:
- WordPress yönetim panelinde Görünüm → Düzenleyici bölümünü açın.
- Gönderi veya arşiv şablonunuzu düzenleyin.
- Görselin bulunmasını istediğiniz alana Öne Çıkan Görsel bloğunu ekleyin.
- PHP kodunu küçük bir özel eklentiye veya kod parçacığı yöneticisine ekleyin.
- Öne çıkan görseli bulunan ve bulunmayan gönderileri karşılaştırarak kontrol edin.
Kodun çalışması için FSE şablonunda gerçekten Öne Çıkan Görsel bloğunun bulunması gerekiyor.
Varsayılan kapak görselini nasıl hazırladım?
Teknik çözümün ardından görsel tarafını da ele aldım.
İkinci Öğretmen için 1080 × 1080 piksel ölçülerinde, sitenin renk paletine uygun bir kapak tasarladım. Logoyu sağ alt köşeye yerleştirerek bir bölümünün kadraj dışında kaldığı sade bir kompozisyon tercih ettim.
Böylece görsel, ayrı bir yazı kapağı gibi değil, sitedeki diğer içerik kartlarıyla uyumlu bir tasarım öğesi hâline geldi.
Görseli SVG olarak hazırladım. Bununla birlikte WordPress’in varsayılan kurulumunda SVG yükleme desteği sınırlı olduğu için medya kütüphanesinde kullanmadan önce güvenilir bir yöntemle SVG desteği sağlamak veya görseli PNG biçimine dönüştürmek gerekiyor.
Bu yöntemle ilgili dikkat edilmesi gerekenler
Bu çözümün en önemli avantajı, gönderilerin gerçek öne çıkan görsel verisini değiştirmemesi.
Ancak filtreyi kullanan kodlar, görsel kimliği sorgulandığında varsayılan görseli gerçek görsel gibi algılayabilir. Dolayısıyla görselin yalnızca belirli kartlarda görünmesi isteniyorsa daha dar kapsamlı bir blok filtresi tercih edilebilir.
Ayrıca yönetim panelini ve REST isteklerini dışarıda bıraktığım için bazı editör önizlemeleriyle ön yüz arasında farklılık görülebilir. AJAX ile oluşturulan özel listelerde de ayrıca kontrol yapmak gerekir.
Önceden save_post yöntemiyle gönderilere görsel atadıysanız bu filtre geçmişte kaydedilen _thumbnail_id verilerini kendiliğinden silmez.
Sonuç
Benim ihtiyacım için en uygun yaklaşım, görseli olmayan gönderilere kalıcı olarak görsel atamak yerine WordPress’in öne çıkan görsel sorgusuna müdahale etmek oldu.
Bu yöntem özellikle özel gönderi türleri kullanan, içerik sayısı fazla olan ve FSE temasıyla çalışan WordPress sitelerinde değerlendirilebilir.
Gönderinin kendisine ait görseli varsa o görsel kullanılır; yoksa belirlediğimiz varsayılan kapak gösterilebilir. Üstelik bunun için bütün eski içerikleri tek tek düzenlemek zorunda kalmayız.
