WordPress’te Özel Görsel Boyutu Tanımlama

WordPress ile çalışan her geliştirici ya da site yöneticisi, er ya da geç görsel boyutları meselesiyle boğuşmak zorunda kalır. Tema değiştirdiniz, yeni bir sayfa düzeni kurdunuz ya da WooCommerce mağazanız için özel bir ürün galeri yapısı tasarladınız; ama WordPress’in varsayılan görsel boyutları hiçbir zaman tam olarak ihtiyacınıza uymadı. İşte tam bu noktada add_image_size() fonksiyonu devreye giriyor.

Bu yazıda WordPress’te özel görsel boyutu tanımlamanın tüm inceliklerini, functions.php dosyasında bu boyutları nasıl yöneteceğinizi, mevcut görselleri nasıl yeniden boyutlandıracağınızı ve gerçek dünya senaryolarında bu yapıyı nasıl kullanacağınızı ele alacağız.

WordPress Görsel Boyutlandırma Sistemi Nasıl Çalışır?

WordPress, bir görsel yüklendiğinde arka planda otomatik olarak birden fazla boyut oluşturur. Varsayılan olarak şu boyutları tanımlar:

• thumbnail: 150×150 piksel (kırpmalı)
• medium: max 300×300 piksel
• medium_large: max 768px genişlik
• large: max 1024×1024 piksel
• full: orijinal görsel boyutu

Bu boyutlar wp-content/uploads klasörünüzde fiziksel dosyalar olarak oluşturulur. Yani ornek-gorsel.jpg yüklediğinizde, WordPress otomatik olarak ornek-gorsel-150x150.jpg, ornek-gorsel-300x225.jpg gibi versiyonlar üretir.

Peki sorun nerede? Diyelim ki temanızın ana sayfa slider’ı 1200×500 piksel tam genişlik görsel istiyor. WordPress’in large boyutu 1024×1024, bu da ihtiyacınızı karşılamıyor. Öte yandan full boyutu çok büyük ve sayfa performansını olumsuz etkiliyor. İşte özel görsel boyutları tam bu boşluğu dolduruyor.

add_image_size() Fonksiyonunun Anatomisi

Temel kullanım şöyle:

add_image_size( $name, $width, $height, $crop );

Parametreleri şöyle açıklayalım:

• $name: Boyuta verdiğiniz benzersiz isim. Daha sonra bu isimle çağıracaksınız
• $width: Genişlik, piksel cinsinden. 0 yazarsanız sınırsız anlamına gelir
• $height: Yükseklik, piksel cinsinden. 0 yazarsanız sınırsız anlamına gelir
• $crop: Kırpma ayarı. false orantısal yeniden boyutlandırma yapar, true tam kırpma uygular. Dizi formatında kırpma noktası da belirtebilirsiniz

Şimdi bunu functions.php dosyasına nasıl ekleyeceğimize bakalım:

<?php
function tema_gorsel_boyutlari() {
    // Temanın görsel desteğini aktif et
    add_theme_support( 'post-thumbnails' );

    // Özel görsel boyutları tanımla
    add_image_size( 'slider-tam-genislik', 1200, 500, true );
    add_image_size( 'kart-gorsel', 400, 300, true );
    add_image_size( 'profil-avatar', 100, 100, true );
    add_image_size( 'blog-kapak', 800, 0, false );
}
add_action( 'after_setup_theme', 'tema_gorsel_boyutlari' );

Dikkat ettiniz mi? blog-kapak boyutunda yüksekliği 0 ve kırpma değerini false olarak belirttik. Bu, görselin genişliğini 800 pikselde tutarken yüksekliğini orantısal olarak ayarlayacak anlamına gelir. Slider için ise tam 1200×500 kırpmalı boyut istedik.

Kırpma Noktası Belirleme

WordPress 3.9 ve sonrasında kırpma noktasını da kontrol edebiliyorsunuz. Varsayılan olarak WordPress görseli ortadan kırpar, ama bazen bu istemediğiniz sonuçlar üretir. Özellikle insan yüzleri olan görsellerde kırpma noktası çok önemli.

<?php
function tema_gorsel_boyutlari_gelismis() {
    add_theme_support( 'post-thumbnails' );

    // Üstten ortaya kırp (yüz fotoğrafları için ideal)
    add_image_size( 'takim-uyesi', 300, 300, array( 'center', 'top' ) );

    // Soldan üstten kırp
    add_image_size( 'logo-kucuk', 200, 80, array( 'left', 'top' ) );

    // Sağdan alttan kırp
    add_image_size( 'banner-alt', 600, 200, array( 'right', 'bottom' ) );
}
add_action( 'after_setup_theme', 'tema_gorsel_boyutlari_gelismis' );

Kırpma noktası için kullanabileceğiniz değerler:

• Yatay konum: left, center, right
• Dikey konum: top, center, bottom

Medya Kütüphanesinde Özel Boyutları Göstermek

Özel boyutları tanımlamanız yetmez; editörlerin ve içerik yazarlarının bu boyutları medya kütüphanesinden seçebilmesi için image_size_names_choose filtresini kullanmanız gerekir.

<?php
function ozel_boyutlari_medya_kutuphanesine_ekle( $sizes ) {
    return array_merge( $sizes, array(
        'slider-tam-genislik' => __( 'Slider - Tam Genişlik (1200x500)', 'tema-adi' ),
        'kart-gorsel'         => __( 'Kart Görseli (400x300)', 'tema-adi' ),
        'profil-avatar'       => __( 'Profil Avatarı (100x100)', 'tema-adi' ),
        'blog-kapak'          => __( 'Blog Kapak Görseli (800px)', 'tema-adi' ),
        'takim-uyesi'         => __( 'Takım Üyesi (300x300)', 'tema-adi' ),
    ) );
}
add_filter( 'image_size_names_choose', 'ozel_boyutlari_medya_kutuphanesine_ekle' );

Bu kodu ekledikten sonra, editörler bir görseli blog yazısına eklerken “Boyut” açılır menüsünde sizin tanımladığınız boyutları da görecekler. Bu özellikle çok yazarlı sitelerde büyük kolaylık sağlar.

Template Dosyalarında Özel Boyutları Kullanmak

Özel görsel boyutlarını template dosyalarınızda nasıl çağıracağınıza bakalım.

the_post_thumbnail() ile kullanım:

<?php
// Döngü içinde kullanım
if ( has_post_thumbnail() ) {
    the_post_thumbnail( 'slider-tam-genislik', array(
        'class' => 'slider-gorsel',
        'alt'   => get_the_title(),
        'loading' => 'lazy',
    ) );
}

get_the_post_thumbnail_url() ile URL almak:

<?php
// Arka plan görseli olarak kullanmak için URL al
$gorsel_url = get_the_post_thumbnail_url( get_the_ID(), 'kart-gorsel' );

if ( $gorsel_url ) {
    echo '<div class="kart" style="background-image: url(' . esc_url( $gorsel_url ) . ');">';
    echo '<div class="kart-icerik">' . get_the_title() . '</div>';
    echo '</div>';
}

wp_get_attachment_image() ile tam kontrol:

<?php
// Ek ID'si bilinen bir görseli belirli boyutta göster
$ek_id = get_post_meta( get_the_ID(), '_ozel_gorsel_id', true );

if ( $ek_id ) {
    echo wp_get_attachment_image(
        $ek_id,
        'takim-uyesi',
        false,
        array(
            'class'   => 'takim-avatar',
            'alt'     => get_post_meta( $ek_id, '_wp_attachment_image_alt', true ),
            'loading' => 'lazy',
        )
    );
}

WooCommerce Senaryosu: Ürün Galerisi için Özel Boyutlar

WooCommerce kendi görsel boyutlarını tanımlar ama bazen bunlar yetmez. Diyelim ki bir elektronik mağazası kuruyorsunuz ve ürün listesinde standart kare yerine 16:9 oranında görsel göstermek istiyorsunuz.

<?php
function woocommerce_ozel_gorsel_boyutlari() {
    // Standart ürün thumbnail'ı override et
    add_image_size( 'urun-liste-gorsel', 640, 360, true ); // 16:9

    // Ürün detay sayfası için büyük görsel
    add_image_size( 'urun-detay-buyuk', 1200, 675, true ); // 16:9

    // Sepet ve sipariş özeti için küçük görsel
    add_image_size( 'urun-sepet-kucuk', 120, 68, true ); // 16:9

    // Kategori banner görseli
    add_image_size( 'kategori-banner', 1920, 400, array( 'center', 'center' ) );
}
add_action( 'after_setup_theme', 'woocommerce_ozel_gorsel_boyutlari' );

// WooCommerce'in kendi thumbnail boyutunu değiştir
function woocommerce_thumbnail_boyutunu_degistir() {
    remove_image_size( 'woocommerce_thumbnail' );
    add_image_size( 'woocommerce_thumbnail', 640, 360, true );
}
add_action( 'after_setup_theme', 'woocommerce_thumbnail_boyutunu_degistir', 11 );

WooCommerce hook sırası önemli, after_setup_theme hook’unda priority 11 kullanarak WooCommerce’in kendi tanımlamalarından sonra çalışmasını sağlıyoruz.

Görsel Boyutlarını Kaldırmak

Bazen de tam tersi sorunla karşılaşırsınız: kullanmadığınız boyutlar sunucu diskini dolduruyor ve her görsel yüklemesinde gereksiz yere işlemci harcanıyor. Bu durumda remove_image_size() kullanın.

<?php
function gereksiz_gorsel_boyutlarini_kaldir() {
    // WordPress'in varsayılan medium_large boyutunu kaldır
    remove_image_size( 'medium_large' );

    // 1536x1536 ve 2048x2048 boyutlarını kaldır (WordPress 5.3 ile geldi)
    remove_image_size( '1536x1536' );
    remove_image_size( '2048x2048' );
}
add_action( 'after_setup_theme', 'gereksiz_gorsel_boyutlarini_kaldir' );

Bunun yanı sıra WordPress’in varsayılan boyutlarını tamamen sıfırlamak isterseniz:

<?php
function varsayilan_boyutlari_devre_disi_birak() {
    // Ayarlar üzerinden de kontrol edebilirsiniz
    update_option( 'thumbnail_size_w', 0 );
    update_option( 'thumbnail_size_h', 0 );
    update_option( 'medium_size_w', 0 );
    update_option( 'medium_size_h', 0 );
    update_option( 'large_size_w', 0 );
    update_option( 'large_size_h', 0 );
}
// Bu fonksiyonu dikkatli kullanın, bir kere çalıştırın
// add_action( 'init', 'varsayilan_boyutlari_devre_disi_birak' );

Dikkat: Bu fonksiyonu sürekli çalıştırmayın, sadece bir kez ihtiyaç duyduğunuzda tetikleyin ve sonra kaldırın.

Mevcut Görselleri Yeniden Boyutlandırma (Regenerate Thumbnails)

Yeni boyut tanımladınızda ya da mevcut boyutu değiştirdiğinizde, önceden yüklenmiş görseller otomatik olarak yeni boyuta uyarlanmaz. Bu durumda iki seçeneğiniz var.

Plugin yoluyla: “Regenerate Thumbnails” eklentisi en popüler çözüm. Admin panelinden tek tıkla tüm görselleri yeniden boyutlandırıyor.

WP-CLI ile komut satırından: Sunucuya SSH erişiminiz varsa bu çok daha hızlı ve verimli.

# Tüm görselleri yeniden boyutlandır
wp media regenerate --yes

# Sadece belirli bir boyutu yeniden oluştur
wp media regenerate --image-size=slider-tam-genislik --yes

# Belirli bir gönderinin görsellerini yeniden boyutlandır
wp media regenerate 123 456 789 --yes

# İşlem sırasında kaç görsel işlendiğini takip et
wp media regenerate --yes --verbose

WP-CLI ile yapılan işlemler özellikle binlerce görsel olan büyük sitelerde çok daha hızlı çalışır. Plugin arayüzü üzerinden yapılan regenerate işlemleri bazen PHP timeout hatası verebilir, komut satırı bu riski ortadan kaldırır.

Conditional Image Size: Bağlama Göre Boyut Seçimi

Gerçek dünya projelerinde tek bir yerde sabit boyut kullanmak yerine, içeriğe veya ekran boyutuna göre farklı boyut seçmeniz gerekebilir. Örneğin ana sayfadaki öne çıkan yazı için büyük boyut, arşiv sayfasındaki liste için küçük boyut kullanmak isteyebilirsiniz.

<?php
function akilli_gorsel_goster( $post_id = null ) {
    if ( ! $post_id ) {
        $post_id = get_the_ID();
    }

    // Sayfa şablonuna göre boyut belirle
    if ( is_front_page() && get_post_meta( $post_id, '_one_cikan_yazi', true ) ) {
        $boyut = 'slider-tam-genislik';
    } elseif ( is_archive() || is_search() ) {
        $boyut = 'kart-gorsel';
    } elseif ( is_single() ) {
        $boyut = 'blog-kapak';
    } else {
        $boyut = 'medium';
    }

    if ( has_post_thumbnail( $post_id ) ) {
        echo get_the_post_thumbnail(
            $post_id,
            $boyut,
            array( 'loading' => 'lazy', 'class' => 'yazi-gorseli' )
        );
    }
}

Görsel Boyutlarını Yönetmek için Kapsamlı functions.php Örneği

Şimdiye kadar öğrendiklerimizi bir araya getirelim ve gerçek bir tema için eksiksiz bir görsel boyutu yönetim sistemi oluşturalım:

<?php
/**
 * Tema Görsel Boyutu Yönetimi
 * Tüm özel görsel boyutlarını merkezi olarak burada yönetiyoruz
 */

// 1. Tema desteğini ve özel boyutları tanımla
function tema_gorsel_sistemi_kur() {
    add_theme_support( 'post-thumbnails' );

    // Ana sayfa ve hero alanı
    add_image_size( 'hero-gorsel',        1920, 800,  array( 'center', 'center' ) );
    add_image_size( 'slider-gorsel',      1200, 500,  true );

    // Blog ve içerik görselleri
    add_image_size( 'blog-kapak',         800,  0,    false );
    add_image_size( 'blog-kart',          400,  280,  true );
    add_image_size( 'blog-kucuk-kart',    200,  140,  true );

    // Portfolio ve galeri
    add_image_size( 'portfolio-buyuk',    900,  600,  true );
    add_image_size( 'portfolio-kucuk',    450,  300,  true );
    add_image_size( 'galeri-thumb',       150,  150,  true );

    // Takım üyeleri ve profiller
    add_image_size( 'profil-buyuk',       400,  400,  array( 'center', 'top' ) );
    add_image_size( 'profil-kucuk',       80,   80,   array( 'center', 'top' ) );

    // Gereksiz varsayılan boyutları kaldır
    remove_image_size( '1536x1536' );
    remove_image_size( '2048x2048' );
}
add_action( 'after_setup_theme', 'tema_gorsel_sistemi_kur' );

// 2. Medya kütüphanesine özel boyutları ekle
function tema_gorsel_boyutlarini_listele( $sizes ) {
    $ozel_boyutlar = array(
        'hero-gorsel'      => 'Hero Görseli (1920x800)',
        'slider-gorsel'    => 'Slider (1200x500)',
        'blog-kapak'       => 'Blog Kapağı (800px genişlik)',
        'blog-kart'        => 'Blog Kartı (400x280)',
        'blog-kucuk-kart'  => 'Blog Küçük Kartı (200x140)',
        'portfolio-buyuk'  => 'Portfolio Büyük (900x600)',
        'portfolio-kucuk'  => 'Portfolio Küçük (450x300)',
        'galeri-thumb'     => 'Galeri Thumbnail (150x150)',
        'profil-buyuk'     => 'Profil Büyük (400x400)',
        'profil-kucuk'     => 'Profil Küçük (80x80)',
    );
    return array_merge( $sizes, $ozel_boyutlar );
}
add_filter( 'image_size_names_choose', 'tema_gorsel_boyutlarini_listele' );

// 3. Belirli post type'lara göre varsayılan boyut ata
function post_type_gorsel_boyutu( $size ) {
    if ( is_singular( 'portfolio' ) ) {
        return 'portfolio-buyuk';
    }
    if ( is_post_type_archive( 'portfolio' ) ) {
        return 'portfolio-kucuk';
    }
    if ( is_singular( 'post' ) ) {
        return 'blog-kapak';
    }
    return $size;
}
add_filter( 'post_thumbnail_size', 'post_type_gorsel_boyutu' );

Performans İpuçları ve Dikkat Edilmesi Gerekenler

Özel görsel boyutları güçlü bir araç ama yanlış kullanıldığında performans sorunlarına yol açabilir.

Boyut sayısını minimize edin. Her eklediğiniz boyut, yüklenen her görsel için disk alanı ve işlemci zamanı tüketir. Gerçekten kullanmayacağınız boyutları tanımlamayın.

Boyutları doğru adlandırın. gorsel-1, gorsel-2 gibi isimler yerine blog-kart-400x280 gibi açıklayıcı isimler kullanın. Altı ay sonra ne işe yaradığını hatırlarsınız.

Webp desteğini düşünün. WordPress 5.8 ve sonrasında JPEG/PNG yüklerken otomatik WebP oluşturma seçeneği mevcut. Bu özelliği aktif ederseniz her boyut için hem JPEG hem WebP dosyası oluşturuluyor, disk alanı ihtiyacı ikiye katlanıyor.

Yüksek çözünürlüklü ekranlar (Retina). Bazı geliştiriciler Retina ekranlar için 2x boyut tanımlıyor. Bu yaklaşım yerine srcset özelliğini kullanmak daha akıllıca; WordPress zaten otomatik srcset üretiyor.

Kırpma vs Orantısal yeniden boyutlandırma. Kırpma (true) her zaman tam olarak belirttiğiniz piksel boyutunu üretir. Orantısal boyutlandırma (false) ise görsel oranlara göre belirlenen bir boyut üretir; tarayıcıda bu görseli belirli bir alana sığdırmanız gerekebilir.

Sonuç

WordPress’teki görsel boyutu yönetimi, ilk bakışta basit görünse de doğru kullanıldığında sitenizin hem görsel kalitesini hem de performansını ciddi ölçüde etkiler. add_image_size() fonksiyonu ile temanıza özel boyutlar tanımlamak, gereksiz büyük görsellerin yüklenmesini engellemek ve kullanıcı deneyimini iyileştirmek için güçlü bir araç elinizde demektir.

Özetlemek gerekirse: Önce ihtiyaçlarınızı belirleyin, gerçekten kullanacağınız boyutları after_setup_theme hook’unda tanımlayın, editörlerin bu boyutlara erişebilmesi için medya kütüphanesine ekleyin ve var olan görselleri WP-CLI ya da Regenerate Thumbnails ile yeniden işleyin. Bu dörtlü yaklaşım, temiz ve yönetilebilir bir görsel sistemi kurmanızı sağlar.

Bir konuyu da hatırlatmakta fayda var: Tema değiştirildiğinde functions.php içindeki özel boyut tanımlamaları da gider. Bu yüzden bu kodu bir “site-specific plugin” olarak ya da mu-plugins klasörüne taşımayı düşünebilirsiniz; özellikle tema değişikliklerinden bağımsız olmasını istediğiniz production sitelerinde bu yaklaşım çok daha güvenli.