WordPress’te Ek Görüntü Boyutları Nasıl Oluşturulur?

Web sitenizin medya klasörüne her görüntü yüklediğinizde, WordPress kullanmanız için bu görüntünün çeşitli sürümlerini oluşturur. Bu durum bu görüntüleri kendiniz yeniden boyutlandırmaya daha az, web sitenizin içeriğini oluşturmaya daha fazla odaklanmanıza olanak tanır. WordPress, varsayılan ve özel görüntü boyutu varyasyonlarını destekler.

Şu anda, varsayılan varyasyonlar arasında küçük resim, orta, orta-büyük, büyük ve tam (orijinal resim boyutu) yer alır. Yüklediğiniz temaya ve eklentilere bağlı olarak bazı sözde yerleşik görüntü boyutlarını da kullanabilirsiniz. Alternatif olarak ek görüntü boyutlarınızı bu makalede açıklayacağımız süreci WordPress’te oluşturabilirsiniz. Lütfen bu makalenin bazı bölümlerinin kod içerdiğini unutmayın, bu nedenle net olmayan bir şey bulursanız ek araştırma yapmanızı öneririz.

Bununla birlikte görüntü boyutları eklemek için WordPress kullanma konusuna daha derinden inelim. Bu makale boyunca aşağıdaki soruları da yanıtlayacağız:

• Ek görüntü boyutunun kaydedilmesi

• Ek görüntü boyutunu WordPress düzenleyicide seçilebilir yapma

• Ek görüntü boyutunu kullanma

• Görüntü boyutları yeniden oluşturuluyor

WordPress’te ek görüntü boyutları nasıl oluşturulur?

Bu bölümde, WordPress’te ek bir görüntü boyutu oluşturmak ve kullanmak için gerekli tüm adımları ele alacağız. Adımlardan bazıları FTP aracılığıyla kod eklemenizi gerektirdiğinden, FTP kullanımıyla ilgili bilgilerinizin tazelenmesi gerekebilir. Her ihtimale karşı WordPress dosyalarınızın bir yedeğini almanızı da öneririz.

Ek görüntü boyutu nasıl kaydedilir?

WordPress ile varsayılan, yerleşik ve ek görüntü boyutlarını ayırt ediyoruz. Varsayılanlar arasında küçük resim (150×150 piksel), orta (300×300 piksel), büyük (1024×1024 piksel) ve tam (orijinal resim boyutu) bulunur. Hatta WordPress 4.4 sürümüne eklenen orta büyüklükte (768 piksel genişliğinde) bir boyut da bulunmaktadır. Yerleşik resimler, temanız, bazı eklentileriniz (örn. WooCommerce) ve hatta WordPress’in kendisi tarafından etkinleştirilir. Örneğin WordPress 5.3’te aşağıdaki görüntü boyutları – 1536×1536 ve 2048×2048 eklendi.

Bu yüzden Medya Kitaplığınıza bir görüntü yüklediğinizde, WordPress otomatik olarak bu görüntünün mevcut tüm boyutlarda/boyutlarda birkaç sürümünü oluşturur. Elbette orijinal görüntü boyutunun ve yönünün yeniden boyutlandırma için uygun bir temel sağlaması şartıyla. Tüm bu yeni sürümler sunucunuzda wp-content/uploads altında saklanacaktır; Medya Kitaplığınızda tutulmazlar. Bu yüzden sayfanıza veya gönderinize bir resim eklerken ve bunun için kayıtlı bir resim boyutu seçtiğinizde, WordPress sunucunuzdan hazırlanan sürümü çağıracaktır.

Bu aynı zamanda, özellikle sunucunuzda daha da fazla resim sürümüyle sonuçlanacak birden çok ek resim boyutu oluşturursanız, sitenizin yavaşlayabileceği anlamına gelir. Bu yüzden ek görüntü boyutları oluşturmaya üç şeyi göz önünde bulundurarak yaklaşmak özellikle önemlidir. İlki, sunucu alanınızı daraltmaktan kaçınmak için gerçekte kullanacağınız boyutlarda en uygun boyuttaki resimleri yüklemeye çalışın. İkincisi, ihtiyacınız olmayan boyutların görüntü sürümlerini silmek için ara sıra wp-content/uploads klasörünüze girin veya size yardımcı olması için Regenerate Thumbnails eklentisini kullanın. Ve üçüncüsü, özel görüntü boyutları oluşturmayı özellikle kullanmayı planladığınız boyutlarla sınırlayın.

Varsayılan seçeneklerin ötesinde bir boyut istiyorsanız, WordPress add_image_size() işlevini kullanarak ek görüntü boyutlarınızı kaydedebilirsiniz.

add_image_size() işlevi dört parametreye sahiptir: görüntü boyutu kimliği, piksel cinsinden görüntü genişliği, piksel cinsinden görüntü yüksekliği ve kırpma davranışı. İlk üçü oldukça basit olsa da, bu işlevin kabul ettiği dördüncü parametre biraz daha açıklama gerektiriyor.

Kırpma davranışı olarak (parametrenin varsayılan değeri olan) false değerini koyarsanız, yumuşak görüntü kırpmayı etkinleştirirsiniz. Yumuşak kırpma, orijinal en boy oranını korurken belirtilen boyutlara (veya boyutlardan en az birine) sığana kadar görüntüyü küçültür. Bu yüzden yumuşak kırpma hala kullanılsa da, aşağı doğru yeniden boyutlandırma terimi muhtemelen daha uygundur.

Öte yandan, kırpma davranışını özellikle true olarak ayarlarsanız, sabit görüntü kırpmayı etkinleştirirsiniz. Bu durum konumlandırma için orijinal görüntünün merkezini kullanarak görüntüyü belirtilen boyutlara kırpacaktır. X ve y ekseni kırpma konumuna sahip bir dizi ekleyerek kırpma konumunu belirleyebilirsiniz. Kabul edilen x ekseni değerleri “sol”, “orta” veya “sağ” iken, kabul edilen y ekseni değerleri “üst”, “orta” veya “alt” şeklindedir.

Kesin kırpma için add_image_size işlevini nasıl kullanabileceğinize bir örnek:

add_image_size( 'your-custom-size', 700, 500, array( 'left', 'top' ) );

Bu örnekte, resim boyutu tanımlayıcısı your-custom-size olarak adlandırılır, resim boyutu 700×500’dür ve resim sol üst konumda sabit kırpılmıştır. Basitçe söylemek gerekirse, yeni resminiz orijinal resmin sol üst bölümünün 700×500 pikselini kaplar.

Fakat bu yazı için yaptığımız örneği göstermeden önce iki önemli uyarıyı eklememiz gerekiyor.

• Her iki kırpma türü de yalnızca yüklenen görüntünün boyutunun belirtilen görüntü boyutlarından büyük olması durumunda mümkündür. Yani, orijinal görüntü çok küçükse, onu daha küçük bir görüntüye dönüştürmek veya yeniden ölçeklendirmek mümkün değildir. Orijinal görüntü boyutunu koruduğu için bu, tam hariç tüm görüntü boyutları için geçerlidir. Bu yüzden resmi o resimden oluşturmak istediğinizden daha büyük boyutlarda yüklediğinizden emin olun.

• Ek resim boyutları eklemenin bir ön koşulu, kullandığınız temada küçük resimler için desteği etkinleştirmektir. Bu durum add_image_size() işlevini çağırmadan önce temanızın functions.php dosyasına aşağıdaki kod parçasını ekleyerek yapılır:

add_theme_support( 'post-thumbnails' );

Bunu bilerek asıl örneğimize geçebiliriz. Herhangi bir kod eklemek için uygun yerler, temanızın functions.php dosyası veya siteye özel bir eklentinin içidir. Bu makaleyi oluştururken, birincisini seçtik. Fakat konum bireysel tercih meselesi olduğundan, bu kodun önerilen yerlerden herhangi birine nasıl ekleneceği konusunda ayrıntılı bilgi vermeyeceğiz. Bunun yerine, kodu ayrıntılı olarak açıklamaya odaklanacağız. Söylemeye gerek yok, add_image_size() işlevinin argümanlarından herhangi birini değiştirebilirsiniz çünkü bizim kullandıklarımız sadece örnekti.

Kodumuz, add_action() işlevi kullanılarak after_setup_theme kancasına takılan, register_custom_image_sizes adlı ısmarlama bir işlevi temsil eder. register_custom_image_sizes işlevi iki bölümden oluşur. Koşullu kısımlardan biri, küçük resimler için tema desteği eklemek içindir ve diğer kısım, iki yeni resim boyutunu kaydetmek içindir. Koşullu kısım, yalnızca temanıza daha önce eklenmemişse küçük resimler için destek ekler. Kaydedeceğimiz iki görüntü boyutunun kimlikleri olarak özel-küçük kare ve özel-yatay vardır. İlki 450×450 boyutlarında ve orta konumda sert kırpılmış, ikincisi ise 1000×600 boyutlarında ve yumuşak kırpılmış.

function register_custom_image_sizes() {
if ( ! current_theme_supports( 'post-thumbnails' ) ) {
add_theme_support( 'post-thumbnails' );
}
add_image_size( 'custom-small-square', 450, 450, true );
add_image_size( 'custom-landscape', 1000, 600 );
}
add_action( 'after_setup_theme', 'register_custom_image_sizes' );

Bu örnek kodu takiben, istediğiniz görüntü boyutlarını kaydedebilirsiniz. Fakat add_image_size() işlevlerinin argümanlarını web sitenize en uygun olanlarla değiştirdiğinizden emin olun.

Ek görüntü boyutunu WordPress düzenleyicide seçilebilir hale getirme

Yeni görüntü boyutlarını kaydettikten sonra, bunları temanızda kullanmaya hazırsınız. Bunu yapmak için, ilgili şablon dosyasını, eklenen özel görüntü boyutlarından birini çağıran bir kod parçasıyla düzenlemeniz gerekir. Bu yaklaşım ileri düzey WordPress kullanıcıları için daha uygun olsa da, daha kullanıcı dostu bir yaklaşım sağlamanın bir yolu var. Sayfanıza veya gönderinize bir WordPress sayfa oluşturucu ile eklenen herhangi bir resim için eklenen özel resim boyutunu seçme seçeneğini içerir. Bu amaç için özel olarak yapılmış WordPress eklentileri olsa da, daha güvenilir olduğu için bu işlevin nasıl etkinleştirileceğini basit bir kod parçacığı ile göstermeyi seçtik. Daha önce de belirttiğimiz gibi, bu pasajı temanızın functions.php dosyasına veya siteye özel bir eklentinin içine ekleyebilirsiniz.

Kod çok basit – oluşturduğumuz add_custom_image_sizes() işlevi bir image_size_names_choose filtresine bağlı. İşlev, yeni oluşturulan iki görüntü boyutunu mevcut görüntü boyutları dizisine ekler. Bu iki görüntü boyutunun adları sırasıyla Özel Kare ve Özel Yatay olarak ayarlanmıştır.

function add_custom_image_sizes( $sizes ) {
return array_merge( $sizes, array(
'custom-small-square' => __( 'Custom Square' ),
'custom-landscape' => __( 'Custom Landscape' )
) );
}
add_filter( 'image_size_names_choose', 'add_custom_image_sizes' );

Bu kodu ekledikten sonra yazının bundan sonraki bölümünde eklenen resim boyutlarını nasıl kullanacağımızı keşfedeceğiz.

Ek görüntü boyutunu kullanma

Ek görüntü boyutlarını kullanmanın bir yolu, uygun tema dosyasının içine kod eklemektir. Hangi dosyayı kullanmanız gerektiği sorusu iki şeye bağlıdır: temanın dosya yapısı ve resmi tam olarak nerede (web sitesinin hangi bölümünde) görüntülemek istediğiniz. Ek görüntü boyutunuzu eklemek için kullanmayı düşünebileceğiniz birkaç farklı işlev de vardır. Bunlardan biri,_post_thumbnail() işlevidir. Görüntü boyutu ve ek nitelikler olmak üzere iki parametreye kadar kabul eder. Görüntü boyutu, geçerli bir görüntü boyutu tanımlayıcısı kullanılarak veya piksel cinsinden genişlik ve yükseklik anlamına gelen bir boyutlar dizisi olarak temsil edilebilir. Ek öznitelikler, görüntüye eklemek istediğiniz bir sorgu dizesi veya bir dizi öznitelik olabilir. Bu işlevi kullanarak özel görüntü boyutlarına sahip görüntüleri görüntülerken, şuna benzer bir şeye sahip olmalısınız:

the_post_thumbnail( 'your-custom-size' );

Lütfen, özel boyutunuzla ilgili bölümün, kayıtlı bir resim boyutu tanımlayıcısıyla değiştirilmesi gerektiğini unutmayın. Örneğimizde, bunlar özel-küçük kare veya özel-yatay olacaktır. Hatta bu işlev bir WordPress Döngüsü içinde kullanılmalıdır.

Yukarıdakine çok benzeyen ve kullanmayı düşünebileceğiniz başka bir işlev de get_the_post_thumbnail() işlevidir. Görüntü boyutunun ve ek niteliklerin yanı sıra, bir parametre daha kabul eder: gönderi kimliği veya WP_Post nesnesi. Bunu,_post_thumbnail() işleviyle aynı şekilde eklersiniz.

Fakat tüm WordPress kullanıcıları kod konusunda rahat olmadığından, sitenizde ek resim boyutları kullanmanın bir yolunu daha göstereceğiz. Bu durum seçtiğiniz düzenleyici/sayfa oluşturucu eklentisi içindeki uygun görüntü öğeleri için bunları seçerek yönetilir. Aşağıdaki bölümde Elementor, WPBakery ve Gutenberg için bunu nasıl yapacağınızı göstereceğiz.

Sayfa oluşturucunuz olarak Elementor kullanıyorsanız, bir Görüntü widget’ı ekleyebilir ve İçerik sekmesinde uygun şekilde adlandırılmış seçenekten görüntü boyutunu seçebilirsiniz. Liste, eklediğimiz ikisi de dahil olmak üzere tüm görüntü boyutlarını içerecektir. Ek olarak Elementor, görüntünün görünmesini istediğiniz tam boyutları belirtmenize olanak tanıyan özel bir seçeneğe sahiptir.

Sayfa oluşturucunuz olarak WPBakery kullanıyorsanız prosedür çok benzer. Görüntü boyutlarını girme seçeneği olan Tek Görüntü kısa kodu ekleyebilirsiniz. Bu seçenek, varsayılan, yerleşik veya sizin eklediğiniz görüntü boyutu kimliklerini kabul eder. Aynı zamanda, görüntünün tam boyutlarını piksel cinsinden belirtme olanağını da korur.

Öte yandan, sayfa oluşturucunuz olarak Gutenberg kullanıyorsanız, uygun öğeye görüntü bloğu denir. Daha sonra onu seçtirirken, ekranın sağ tarafındaki açılır menüden bir görüntü boyutu seçebilirsiniz. Kullanılabilir görüntü boyutları, varsayılan boyutlardır (orta-büyük içermezler) ve eklediğimiz özel boyutlardır. Gutenberg ayrıca görüntünün tam boyutlarını belirlemek için dört yeniden boyutlandırma seçeneği dahil olmak üzere ayrı seçeneklere sahiptir: %25, %50, %75 ve %100.

Ek görüntü boyutlarını nasıl oluşturabileceğiniz ve kullanabileceğinizle ilgili kılavuzumuzun ana bölümü burada sona eriyor…