WooCommerce Ürün Görseli Boyutu: Üç Boyut ve Bunları Gerçekten Değiştirme Yolu

WooCommerce yüklediğiniz her ürün fotoğrafı için üç görsel boyutu üretir ve bunların yalnızca ikisi WordPress yönetim panelinden düzenlenebilir. woocommerce_thumbnail katalog ızgarası görselidir, woocommerce_single ürün sayfasındaki büyük görseldir ve woocommerce_gallery_thumbnail onun altındaki küçük görsel şerididir. Bunları Görünüm > Özelleştir > WooCommerce > Ürün Görselleri yolundan değiştirirsiniz — ve o panel size bir kırpma menüsü gösterip genişlik kutularını göstermiyorsa, temanız genişlikleri bilerek kodda kilitlemiştir.

Üç boyut

Boyut adı	Nerede görünür	Kırpma	Özelleştiricide düzenlenebilir
woocommerce_thumbnail	Mağaza sayfası, kategori ızgaraları, ilgili ürünler, çapraz satışlar	Varsayılan olarak kareye sert kırpılır	Genişlik ve oran
woocommerce_single	Tekil ürün sayfasındaki ana görsel	Kırpılmaz — orijinal en boy oranı korunur	Yalnızca genişlik
woocommerce_gallery_thumbnail	Ana ürün görselinin altındaki küçük şerit	Kareye sert kırpılır	Hayır

Bunlar standart WordPress boyutlarının üstüne biner. Tek bir ürün fotoğrafı tipik olarak thumbnail, medium, medium_large, large, üç WooCommerce boyutu ve muhtemelen temanızın add_image_size ile kaydettiği ekstraları üretir. Bu, yükleme başına epey dosya demektir ve 300 ürünlük bir içe aktarmanın neden bu kadar uzun sürdüğünü açıklar.

Galeri küçük görseli insanları en çok şaşırtan olan: yönetim panelinde hiçbir denetimi yok. Varsayılan bir kurulumda tarihsel olarak 100 piksellik küçük bir karedir ve retina ekranda yumuşak görünmeye en yatkın boyuttur, çünkü dosya gerçekten minicik.

Ayarlar aslında nerede

Görünüm > Özelleştir > WooCommerce > Ürün Görselleri size üç denetim verir:

• Ana görsel genişliği — woocommerce_single boyutunun genişliği. Yükseklik otomatiktir, yani orijinal en boy oranı korunur.
• Küçük görsel genişliği — woocommerce_thumbnail boyutunun genişliği.
• Küçük görsel kırpması — 1:1 (kare, varsayılan), Özel (4:3 gibi bir oran yazarsınız) ya da Kırpılmamış.

Eksik olana dikkat edin: katalog küçük görseli için yükseklik alanı yoktur, çünkü yükseklik kırpma oranından türetilir. Ve galeri küçük görseli için hiçbir şey yoktur.

Bir şey değiştirmeden önce, belirli bir dosyanın hangi türevleri üreteceğini tam olarak görmek işe yarar — gerçek bir ürün fotoğrafını WordPress görsel boyutları aracına bırakın, kaynağınızın her boyutu büyütmeden doldurmaya yetip yetmediği dahil tüm listeyi alın.

Katalog görselleriniz neden yanlış görünüyor

Katalog küçük görseli kareye sert kırpar. Sert kırpma, WooCommerce’in fotoğrafınızın ortasından bir kare alıp geri kalanını atması demektir — ne siyah bant ekler ne de sıkıştırır. 2000x1200 boyutunda bir ürün çekimi, ortadan alınan 1200x1200’lük bir dilime dönüşür ve sonra küçültülür.

Bu, çevresinde boşlukla tam ortadan çekilmiş bir şişe fotoğrafı için sorun değil. Şunlar için felaket:

• Uzun ürünler (kayak, kablo, perde borusu) — yalnızca ortadaki üçte biri görünür, gerisi yok
• Merkez dışı kompozisyonlar — ürün kadrajın kenarına kayar ve dilimlenir
• Ürünün kadrajı baştan sona doldurduğu fotoğraflar — üst ve alt kesilir
• Ürünün bir köşede durduğu yaşam tarzı çekimleri

Yaygın tavsiye “kırpmayı Kırpılmamış yapın” olur. İşe yarar ama bedelini dürüstçe söyleyelim: kırpılmamış demek, her küçük görselin kendi en boy oranını koruması demektir; yani karışık yönlü fotoğraflardan oluşan bir ızgara görsel olarak dağınıklaşır ve temanızın CSS’i değişken yükseklikleri idare etmiyorsa satırlar artık hizalanmaz. Çoğu tema kare varsayar.

Karşılayabiliyorsanız daha iyi çözüm kaynakta: ürün fotoğraflarını, ürün ortalanmış ve boşluklar eşit olacak şekilde kare standardına oturtun. O zaman kareye sert kırpma hiçbir şey yapmaz ve sonrasındaki her şey öngörülebilir olur. Kırpma ayarını değiştirmek geçici çözüm; tutarlı kaynak görseller asıl çözüm.

Tema genişlikleri kilitlediğinde

Ürün Görselleri paneliniz yalnızca kırpma sunuyorsa, temanız WooCommerce desteğini kaydederken sabit genişlikler bildirmiştir:

add_theme_support( 'woocommerce', array(
    'single_image_width'    => 800,
    'thumbnail_image_width' => 400,
) );

Bir tema bu değerleri geçtiğinde WooCommerce genişlik denetimlerini özelleştiriciden kaldırır ve geriye yalnızca oranı bırakır. Bu bir hata değil, temanın size düşmanlık etmesi de değil — temanın ürün düzeni CSS’i tam olarak o piksel genişlikleri üzerine kuruludur ve bunları değiştirmenize izin vermek ızgarayı bozar.

Bunları bir alt temanın functions.php dosyasından, boyut başına filtreyle geçersiz kılabilirsiniz:

add_filter( 'woocommerce_get_image_size_single', function ( $size ) {
    $size['width']  = 1000;
    $size['height'] = '';
    $size['crop']   = 0;
    return $size;
} );

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function ( $size ) {
    $size['width']  = 150;
    $size['height'] = 150;
    $size['crop']   = 1;
    return $size;
} );

Aynı kalıp woocommerce_get_image_size_thumbnail için de geçerli. Bu ayrıca galeri küçük görselini değiştirmenin tek yolu, çünkü onun arayüzü yok.

Bedelini açıkça söyleyelim: kilitli bir genişliği geçersiz kılmak, WooCommerce’in ürettiği dosyanın artık temanın CSS’inin beklediğiyle uyuşmaması demektir. Genellikle görsel tarayıcıda ölçeklenir ve kutudan büyük olduğu için iyi görünür. Bazen temanın sabit yükseklikte bir kabı vardır ve siyah bantlar ya da taşma alırsınız. 2.000 ürünü yeniden oluşturmadan önce tek bir üründe deneyin.

Boyut değiştirmek yeniden oluşturmak demek

Her boyut ayarı yalnızca yeni yüklemeleri etkiler. Mevcut ürünler yüklendikleri anda üretilen dosyaları sunmaya devam eder, yani siz onları yeniden oluşturana kadar gözle görülür hiçbir şey değişmez.

Özelleştiriciyi kaydettiğinizde WooCommerce arka planda bir yeniden oluşturma başlatır. Küçük bir katalogda bu yeterli. Büyük bir katalogda ise WP-Cron’un düzenli tetiklenmesine bağlıdır ve düşük trafikli bir mağazada bu çoğu zaman olmaz; sonuçta yarısı yenilenmiş bir kütüphaneyle kalırsınız. Bunun yerine kendiniz çalıştırın:

wp media regenerate --yes

Yalnızca ürün görsellerini yeniden oluşturmak için:

wp media regenerate --yes --post_type=product

Siz elle yaparken arka plan işini devre dışı bırakmak isterseniz:

add_filter( 'woocommerce_background_image_regeneration', '__return_false' );

Yeniden oluşturmanın yapmayacağı iki şey var. Eski dosyaları silmez — yükleme klasörünüz önceki ayarlardan kalan her öksüz türevi saklar ve büyümeye devam eder. Ve kaynağınızdan büyük bir boyut üretemez, çünkü WordPress büyütme yapmaz. Ana görsel genişliğini 1200 yaparsanız ama ürün fotoğraflarınız 800 piksel genişliğindeyse, 1200 piksellik bir dosya oluşmaz; tarayıcı 800 piksellik dosyayı alır ve gerer, srcset de sunacak daha iyi bir şey bulamaz.

Gerçekte yüklenmesi gereken boyut

Kare kaynak görselleri, ayarladığınız en büyük genişliğin kabaca iki katında tutmayı hedefleyin — 600 piksellik bir ana görsel için 1200x1200, temanız 800 piksel kullanıyorsa 1600x1600. Bu, 2x retina ekranları karşılar ve WordPress’e her türevi büyütmeden üretecek kadar piksel verir. Izgaranın düzgün kalması için her ürünü aynı ölçüde tutun.

Hâlâ takıldınız mı?

Boyutlar doğru ayarlanmışsa, yeniden oluşturma yaptıysanız ve bir ürün hâlâ yanlış görünüyorsa, görseli yeni bir sekmede açıp dosya adını okuyun. Ayarladığınız hiçbir boyutla eşleşmeyen bir boyut eki, o boyutu başka bir şeyin kaydettiği anlamına gelir. Hiç ek yoksa WooCommerce tam boyutlu dosyaya geri düşmüştür ki bu neredeyse her zaman kaynağın istediğiniz boyut için fazla küçük olduğunu gösterir. O kaynak dosyayı görsel boyutları aracından geçirin ve WordPress’in üretmesi gerekeni tarayıcının gerçekten yüklediğiyle karşılaştırın — ikisi uyuşmuyorsa aralarında genellikle bir iyileştirici eklenti ya da CDN görsel boyutlandırıcısı oturuyordur.