WordPress’te Öne Çıkan Görsel Boyutunu Değiştirme: Eksiksiz Teknik Kılavuz

Öne çıkan görseller — gönderi küçük resimleri olarak da bilinir — herhangi bir WordPress sitesinin birincil görsel çapasıdır. Gönderi listelerinde, arşiv sayfalarında, sosyal medya önizlemelerinde ve RSS akışlarında görünürler; bu da boyutlarını düzen tutarlılığı ve algılanan tasarım kalitesi üzerinde doğrudan etkili bir faktör haline getirir. WordPress’te öne çıkan görsel boyutunu değiştirmek; WordPress’in yükleme sırasında kaydettiği piksel boyutlarını yeniden tanımlamak, temanızın bu boyutları oluşturma sırasında nasıl talep ettiğini güncellemek ya da her ikisini birden yapmak anlamına gelir — ve her iki tarafı da ele almamak, yeniden boyutlandırılan görsellerin ön uçta yanlış görünmesinin tek en yaygın nedenidir.

Bu kılavuz, kodsuz gösterge paneli ayarlarından doğrudan PHP özelleştirmesine kadar mevcut her yöntemi, her yaklaşım için kesin teknik bağlamla birlikte kapsamaktadır.

WordPress’in Görsel Boyutlarını Nasıl İşlediğini Anlamak

Herhangi bir ayara dokunmadan önce, süreci anlamanız gerekir. Bir görsel yüklediğinizde, WordPress tek bir dosya depolamaz — kayıtlı boyut tanımlarına göre birden fazla türev dosya oluşturur. Bu tanımlar veritabanında yaşar ve WordPress çekirdeği, etkin temanız veya yüklü eklentiler tarafından kaydedilir.

WordPress’in varsayılan olarak kaydettiği üç boyut şunlardır:

• Küçük resim — genellikle 150x150 piksel, varsayılan olarak sabit kırpmalı
• Orta — 300x300 piksele kadar, orantılı ölçeklendirilmiş
• Büyük — 1024x1024 piksele kadar, orantılı ölçeklendirilmiş

Temanız add_image_size() kullanarak ek boyutlar kaydeder. Bir şablon the_post_thumbnail('large') çağırdığında, WordPress yükleme sırasında o kayıtlı boyut için oluşturulan dosyayı arar. Bu kritik mimari noktadır: bir boyut tanımını değiştirmek, önceden yüklenmiş görselleri geriye dönük olarak yeniden boyutlandırmaz. Herhangi bir boyut değişikliğinden sonra küçük resimleri yeniden oluşturmanız gerekir.

Yöntem 1: WordPress Medya Ayarları Aracılığıyla Öne Çıkan Görsel Boyutunu Ayarlama

Bu, temanın öne çıkan görsel çıktısı için üç temel boyuttan birini kullandığı siteler için doğru başlangıç noktasıdır.

Adım 1: Medya Ayarlarını Güncelleyin

WordPress gösterge panelinizde Ayarlar > Medya‘ya gidin. Üç boyut grubu göreceksiniz. Temanızın öne çıkan görseller için hangi boyutu kullandığını belirleyin — CSS sınıfını doğrulamak için tema belgelerinizi kontrol edin veya oluşturulan HTML’yi inceleyin (örn. wp-image-* ile birlikte size-large).

İlgili boyut için genişlik ve yükseklik alanlarını ayarlayın. Her iki boyutu da 0 olarak ayarlamak, WordPress’e kırpmak yerine diğer eksen boyunca orantılı olarak ölçeklendirmesini söyler.

Değişiklikleri Kaydet‘e tıklayın.

Adım 2: Mevcut Küçük Resimleri Yeniden Oluşturun

Yeni yüklemeler güncellenmiş boyutları hemen kullanacaktır. Medya kitaplığınızda zaten bulunan görseller için türevleri yeniden oluşturmanız gerekir. Bunun için en güvenilir araç, Alex Mills tarafından geliştirilen Regenerate Thumbnails eklentisidir.

Yükleyip etkinleştirdikten sonra Araçlar > Regen. Thumbnails‘e gidin ve Regenerate All Thumbnails‘e tıklayın. Büyük kitaplıklarda bu, kaynak yoğun bir işlemdir — düşük trafikli saatlerde çalıştırın ve bir VPS Hosting planındaysanız, zaman aşımlarını önlemek için php.ini içindeki PHP’nin max_execution_time ve memory_limit değerlerini geçici olarak artırmayı düşünün.

Yaygın tuzak: Temanız, bir temel boyutla aynı etikete sahip kendi özel boyutunu kaydediyorsa, Medya Ayarları paneli bunu etkilemez. Temanın add_image_size() çağrısı öncelik kazanır.

Yöntem 2: WordPress Özelleştirici veya Tema Seçenekleri Panelini Kullanma

Birçok ticari tema, kod değişikliği gerektirmeden görsel boyutu kontrollerini sunar.

Adım 1: Özelleştiriciyi Kontrol Edin

Görünüm > Özelleştir‘e gidin. Tema Seçenekleri, Blog Ayarları, Düzen veya Gönderi Ayarları etiketli bölümlerin altına bakın. Bazı temalar burada özel bir Öne Çıkan Görsel bölümü sunar.

Kontroller mevcutsa, genişlik ve yüksekliği ayarlayın, ardından Yayımla‘ya tıklayın. Tema, kayıtlı boyut tanımını güncelleyecek ve bazı uygulamalarda etkilenen görselleri otomatik olarak yeniden oluşturacaktır.

Adım 2: Özel Bir Tema Seçenekleri Panelini Kontrol Edin

Redux veya Kirki gibi çerçeveler üzerine inşa edilmiş premium temalar, genellikle gösterge paneli kenar çubuğunda bağımsız bir Tema Seçenekleri veya Tema Paneli menü öğesine sahiptir. Görsel Ayarları, Gönderi Küçük Resimleri veya Arşiv Düzeni adlı alt bölümleri arayın.

Değerleri ayarlayın, kaydedin ve ardından yukarıda açıklanan eklenti yöntemini kullanarak küçük resimleri manuel olarak yeniden oluşturun; çünkü çoğu tema paneli yeniden oluşturmayı otomatik olarak tetiklemez.

Yöntem 3: functions.php İçinde Özel Görsel Boyutları Tanımlama

Bu, geliştiriciler ve boyutlar, kırpma davranışı ve boyut adlandırma üzerinde hassas kontrole ihtiyaç duyan herkes için teknik olarak doğru yöntemdir. Aynı zamanda temel varsayılanlarla çakışmayan boyutlar kaydetmenize izin veren tek yöntemdir.

Adım 1: Özel Boyutu Kaydedin

Alt temanızın functions.php dosyasını düzenleyin. Üst temanın dosyalarını asla doğrudan düzenlemeyin — güncellemeler değişikliklerinizin üzerine yazar. Alt temanız yoksa, devam etmeden önce bir tane oluşturun.

Aşağıdakileri kancalı bir fonksiyonun içine ekleyin:

function mytheme_custom_image_sizes() {
    add_theme_support( 'post-thumbnails' );
    add_image_size( 'featured-hero', 1200, 600, true );
    add_image_size( 'featured-card', 400, 300, true );
}
add_action( 'after_setup_theme', 'mytheme_custom_image_sizes' );

add_image_size() için parametre açıklaması:

• Argüman 1 — boyut tanıtıcısı (string), şablonlarda görsel çağrılırken kullanılır
• Argüman 2 — piksel cinsinden genişlik
• Argüman 3 — piksel cinsinden yükseklik
• Argüman 4 — kırpma modu: tam boyutlara sabit kırpma için true; orantılı ölçeklendirme için false; konumsal kırpma için array( 'left', 'top' ) gibi bir dizi

Uç durum: Kırpma argümanı olarak true geçirmek, varsayılan olarak merkez-merkez kırpmaya döner. Öne çıkan görsellerinizin konuları tutarlı biçimde merkez dışındaysa (örn. portre fotoğrafçılığı), başların kırpılmasını önlemek için konumsal bir dizi kullanın — array( 'center', 'top' ).

Adım 2: Şablon Dosyalarında Özel Boyutu Çağırın

Öne çıkan görseli oluşturmaktan sorumlu şablon dosyasını bulun. Yaygın adaylar single.php, archive.php, content.php veya template-parts/content-single.php‘dir. Tam çağrıyı bulmak için the_post_thumbnail araması yapın.

Mevcut boyut argümanını değiştirin:

// Before
the_post_thumbnail( 'large' );

// After
the_post_thumbnail( 'featured-hero' );

Çıktı işaretlemesi üzerinde daha fazla kontrol için özel niteliklerle get_the_post_thumbnail() kullanın:

echo get_the_post_thumbnail(
    get_the_ID(),
    'featured-hero',
    array(
        'class' => 'hero-image lazyload',
        'alt'   => get_the_title(),
        'loading' => 'lazy',
    )
);

Adım 3: Özel Boyutu Medya Yükleyicide Seçilebilir Yapın (İsteğe Bağlı)

Varsayılan olarak, add_image_size() ile kaydedilen özel boyutlar WordPress medya yükleyicisinin boyut açılır menüsünde görünmez. Bunları editoryal kullanım için açığa çıkarmak için şu filtreyi ekleyin:

function mytheme_add_image_sizes_to_selector( $sizes ) {
    return array_merge( $sizes, array(
        'featured-hero' => __( 'Featured Hero (1200x600)', 'mytheme' ),
        'featured-card' => __( 'Featured Card (400x300)', 'mytheme' ),
    ) );
}
add_filter( 'image_size_names_choose', 'mytheme_add_image_sizes_to_selector' );

Adım 4: Küçük Resimleri Yeniden Oluşturun

Yöntem 1’de açıklandığı gibi Regenerate Thumbnails eklentisini çalıştırın. Önceden yüklenmiş tüm görseller, yeni boyutlarda yeni türev dosyalara sahip olacaktır.

Yöntem 4: Sayfa Oluşturucuda Öne Çıkan Görsel Boyutunu Ayarlama

Elementor, Divi ve Bricks Builder gibi sayfa oluşturucular şablon katmanını soyutlar, bu nedenle şablon dosyası düzenlemeleri uygulanmayabilir. Her oluşturucunun kendi görsel boyutu kontrolleri vardır.

Elementor

1. Sayfayı veya gönderiyi Elementor’da açın.
2. Öne Çıkan Görsel widget’ını veya küçük resmi görüntüleyen bir Gönderiler widget’ını seçin.
3. Sol panelde, İçerik sekmesi altında Görsel Boyutu‘nu bulun.
4. Açılır menüden kayıtlı bir boyut seçin veya piksel boyutlarını girmek için Özel‘i seçin.
5. Güncelle‘ye tıklayın.

Teknik not: Elementor’da “Özel” seçeneğini seçtiğinizde, yeni bir WordPress görsel boyutu kaydedilmez — JavaScript kullanarak görseli istemci tarafında yeniden boyutlandırır veya tam boyutlu görseli talep edip CSS aracılığıyla ölçeklendirir. Bu, sayfa ağırlığını artırır. Performans açısından kritik sayfalar için özel bir Elementor boyutu yerine her zaman kayıtlı bir WordPress boyutunu tercih edin.

Divi

Divi’nin Blog Modülü veya Gönderi Öne Çıkan Görsel modülünde, Gelişmiş altındaki Görsel Boyutu seçeneği hangi kayıtlı WordPress boyutunun talep edileceğini kontrol eder. Divi ayrıca Divi > Tema Seçenekleri > Genel > Küçük Resim Boyutları altında kendi görsel boyutu ayarlarına sahiptir ve bu ayarlar ek türevler kaydeder.

Yöntem 5: Kodsuz Özel Görsel Boyutları için Eklenti Kullanma

PHP düzenleme bir seçenek değilse, bu eklentiler add_image_size() işlevselliğini bir kullanıcı arayüzü aracılığıyla çoğaltır:

Simple Image Sizes, add_image_size() için en doğrudan alternatiftir. Yükledikten sonra Ayarlar > Medya‘ya gidin — eklenti, temel varsayılanların altına özel bir boyutlar bölümü ekler. Boyutunuzu tanımlayın, kaydedin ve uygulamak için eklentinin yerleşik yeniden oluşturma özelliğini kullanın.

Karşılaştırma: Tüm Yöntemlere Genel Bakış

Performans ve Görsel Optimizasyon Değerlendirmeleri

Çok fazla görsel boyutu kaydetmek, sıklıkla göz ardı edilen sunucu taraflı bir sorundur. Kayıtlı her boyut, yükleme sırasında yeni bir dosya oluşturur. 15 kayıtlı boyutu ve medya kitaplığında 2.000 görseli olan bir sitede potansiyel olarak diskte 30.000 görsel dosyası bulunur. Paylaşımlı barındırmada bu kotaları doldurur; herhangi bir sunucuda yedek boyutlarını şişirir.

Kayıtlı boyutlarınızı periyodik olarak denetleyin. Tüm kayıtlı boyutları listelemek için geçici bir eklentide veya functions.php içinde şu kod parçacığını kullanın:

add_action( 'wp_loaded', function() {
    if ( current_user_can( 'manage_options' ) && isset( $_GET['show_image_sizes'] ) ) {
        echo '<pre>';
        print_r( wp_get_registered_image_subsizes() );
        echo '</pre>';
        exit;
    }
} );

Tam listeyi görmek için yönetici olarak oturum açmışken https://yoursite.com/?show_image_sizes=1 adresini ziyaret edin.

Ek performans uygulamaları:

• WebP formatı kullanın. WordPress 5.8+, sunucunuzun GD veya Imagick kütüphanesi destekliyorsa yüklenen görselleri WebP’ye dönüştürür. Araçlar > Site Sağlığı altında desteği doğrulayın.
• Tembel yüklemeyi uygulayın. WordPress, sürüm 5.5’ten itibaren varsayılan olarak ekranın altındaki görsellere loading="lazy" ekler. Özel the_post_thumbnail() çağrılarınızın bu niteliği koruduğundan emin olun.
• Yüklemeden önce sıkıştırın. ShortPixel veya Imagify gibi araçlar doğrudan WordPress medya hattına entegre olur ve türevleri otomatik olarak sıkıştırır. TinyPNG, manuel yükleme öncesi sıkıştırma için iyi çalışır.
• CDN kullanın. Siteniz küresel bir kitleye hizmet veriyorsa, görsel dağıtımını bir CDN’e yüklemek, kayıtlı boyut sayısından bağımsız olarak gecikmeyi azaltır.

Yoğun görsel iş yüklerine sahip siteler için — fotoğrafçılık portföyleri, haber siteleri, WooCommerce mağazaları — cPanel’li VPS, PHP bellek limitlerini ayarlamak, Imagick’i doğrudan yapılandırmak ve paylaşımlı ortamların sunamadığı disk kotalarını yönetmek için sunucu düzeyinde kontrol sağlar.

Duyarlı Görseller ve srcset Niteliği

WordPress, tüm kayıtlı görsel boyutlarından yararlanarak içerikteki görseller için otomatik olarak srcset ve sizes nitelikleri oluşturur. Bu, kaydettiğiniz her boyutun tarayıcının kullanıcının görünüm alanı ve cihaz piksel yoğunluğu için en uygun çözünürlüğü seçme yeteneğine katkıda bulunduğu anlamına gelir.

the_post_thumbnail() çağırdığınızda, WordPress şuna benzer bir işaretleme çıktısı verir:

<img src="hero-1200x600.jpg"
     srcset="hero-400x300.jpg 400w, hero-800x400.jpg 800w, hero-1200x600.jpg 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
     alt="Post Title"
     loading="lazy">

sizes niteliği, tarayıcıya görselin çeşitli görünüm alanı genişliklerinde ne kadar geniş oluşturulacağını söyler. WordPress varsayılan bir sizes değeri oluşturur, ancak bu değer karmaşık düzenler için genellikle yanlıştır. wp_calculate_image_sizes filtresini kullanarak veya get_the_post_thumbnail() öğesinin $attr dizisinde özel bir sizes niteliği geçirerek bunu geçersiz kılın.

SSL, Alan Adı ve Barındırma Bağlamı

Bir WordPress sitesini yeni bir alan adına taşıyor veya bir SSL Sertifikası edindikten sonra HTTP’den HTTPS’ye geçiş yapıyorsanız, gönderi meta verilerinde depolanan görsel URL’leri (_thumbnail_id referansları) ek kimliğine göredir ve alan adı değişikliklerinden etkilenmez. Ancak, gönderi içeriğine veya tema seçeneklerine sabit kodlanmış görsel URL’lerinin WP-CLI kullanılarak bir arama-değiştirme işlemiyle güncellenmesi gerekecektir:

wp search-replace 'http://olddomain.com' 'https://newdomain.com' --skip-columns=guid

Sıfırdan yeni bir WordPress kurulumu yapıyorsanız, alan adınızı Alan Adı Kaydı aracılığıyla kaydetmek ve düzgün yapılandırılmış bir barındırma ortamıyla eşleştirmek, medya yükleme yollarınızın ve .htaccess yeniden yazma kurallarınızın başından itibaren doğru olmasını sağlar; böylece geriye dönük olarak hata ayıklaması sıkıcı olan bozuk görsel URL kalıplarından kaçınırsınız.

Teknik Karar Kontrol Listesi

Durumunuz için doğru yaklaşımı seçmek üzere bu matrisi kullanın:

• Temel bir boyutu (küçük resim/orta/büyük) değiştirmeniz gerekiyor ve kod düzenlemiyorsunuz — Ayarlar > Medya’yı kullanın, ardından küçük resimleri yeniden oluşturun.
• Premium temanızda bir Tema Seçenekleri paneli var — Herhangi bir dosyaya dokunmadan önce önce oraya bakın.
• Tam piksel boyutlarına ve sabit kırpmaya sahip bir boyuta ihtiyacınız var — Bir alt temanın functions.php dosyasında add_image_size() kullanın.
• Konu materyaliniz merkez dışı kırpma gerektiriyor — add_image_size() için dördüncü argüman olarak konumsal bir dizi geçirin.
• Elementor veya Divi kullanıyorsunuz — Oluşturucunun yerel Görsel Boyutu kontrolünü kullanın, ancak performans için “Özel” yerine kayıtlı WordPress boyutlarını tercih edin.
• PHP düzenleyemiyorsunuz ve özel bir boyuta ihtiyacınız var — Simple Image Sizes’ı yükleyin, boyutu tanımlayın, yeniden oluşturun.
• Büyük bir medya kitaplığınız var — Gereksiz işlemeyi önlemek için boyut adına göre seçici yeniden oluşturmaya izin veren Regenerate Thumbnails Advanced’ı kullanın.
• Performans önceliktir — Kayıtlı boyutları denetleyin, WebP’yi etkinleştirin, CDN uygulayın ve tembel yüklemenin etkin olduğundan emin olun.
• Paylaşımlı barındırmada yeniden oluşturma sırasında bellek veya zaman aşımı hatalarıyla karşılaşıyorsunuz — PHP limitlerinin yapılandırılabilir olduğu bir VPS Hosting planına geçmeyi düşünün.

SSS

Medya Ayarlarını değiştirdikten sonra öne çıkan görsellerim neden hâlâ eski boyutu gösteriyor?

WordPress, görsel türevlerini yükleme sırasında oluşturur. Ayarlar > Medya’da bir boyut tanımını değiştirmek yalnızca yeni yüklemeleri etkiler. Medya kitaplığınızda zaten bulunan dosyaları yeniden boyutlandırmak için — Regenerate Thumbnails eklentisi gibi — bir küçük resim yeniden oluşturma aracı çalıştırmanız gerekir.

add_image_size() ile kırpma parametresi olarak true ve false arasındaki fark nedir?

true geçirmek, WordPress’i varsayılan olarak ortalanmış şekilde belirttiğiniz tam genişlik ve yüksekliğe görseli kırpmaya zorlar. false geçirmek, görseli orantılı olarak ölçeklendirir; böylece hiçbir boyut belirtilen değerleri aşmaz; bu, orijinal en boy oranı farklıysa gerçek çıktı boyutlarının belirtilenden daha küçük olabileceği anlamına gelir.

Çok sayıda özel görsel boyutu kaydetmek sitemin yavaşlamasına neden olur mu?

Oluşturma sırasında değil — WordPress önceden oluşturulmuş dosyaları sunar. Performans maliyeti, Imagick veya GD’nin kayıtlı boyut başına bir türev oluşturması gereken yükleme sırasında ortaya çıkar. Çok sayıda boyuta ve yüksek yükleme hacmine sahip siteler, yavaş yükleme yanıtları ve önemli disk kullanımı artışı yaşayabilir.

Artık ihtiyaç duymadığım görsel boyutlarını kaldırabilir miyim?

Evet. Yeni yüklemeler için bir boyut oluşturmayı durdurmak üzere functions.php dosyanızda remove_image_size( 'size-name' ) kullanın. O boyut için mevcut dosyalar manuel olarak silinene kadar diskte kalır. WP-CLI komutu wp media regenerate --only-missing, tüm türevleri yeniden oluşturmadan yalnızca eksik boyutları oluşturarak temizlemeye yardımcı olabilir.

Öne çıkan görsel boyutunu değiştirmek, görsellerin sosyal medyada paylaşılma şeklini etkiler mi?

Doğrudan değil. Facebook ve Twitter gibi sosyal platformlar, hangi görseli görüntüleyeceğini belirlemek için Open Graph meta etiketlerini (og:image) okur. Bu etiketler genellikle Yoast SEO veya Rank Math gibi bir SEO eklentisi tarafından ayarlanır; bu eklentiler özellikle sosyal paylaşım için kendi görsel boyutlarını (genellikle 1200x630) kaydeder. SEO eklentiniz aynı boyut tanıtıcısını kullanacak şekilde yapılandırılmadıkça, temanızın öne çıkan görsel boyutunu değiştirmek Open Graph görselini etkilemez.