WordPress Core'da duyarlı görüntülerin önemi

Duyarlı görüntülerin popülaritesi artıyor ve bu, kimsenin görmezden gelemeyeceği bir şey. Ancak aynı işlevselliği WordPress gibi popüler CMS'de kullanmak zorlu bir deneyim olabilir. Kullanıcıların temanın içinde özellik yazmaları mümkün olsa da, görev zaman alıcı olabilir. Ancak, WordPress 4.4'ün piyasaya sürülmesinden bu yana işler çarpıcı bir şekilde değişti ve geliştiriciler ve yöneticiler için duyarlı görüntü işlevselliğini temalarına yerleştirmeyi oldukça kolaylaştırdı.

En önemli özelliği, WordPress çekirdeğinde Duyarlı Görüntüler eklentisinin kullanılabilirliğini içerir. Bu, kullanıcıların artık WordPress'te varsayılan bir özellik olarak gelen duyarlı görüntü desteğinin keyfini çıkarabilecekleri anlamına geliyor. Bu özelliğin gerçekte nasıl çalıştığına ve WordPress sitesinin potansiyelinden yararlanmak için nasıl dikkatli bir şekilde kullanılabileceğine yakından bakalım.

Özelliğin Çalışması

İçerik ve görseller Tüm srcset oluşan ve WordPress 4.4 için güncellendiğinde özelliklerini boyutları edilecektir. Bu, esas olarak, istenen gerçek görüntü boyutunu korumak için her görüntü boyutunun kullanılabilirliğini sağlamak içindir. En boy oranının, istenen orijinal görüntüye göre değiştiği durumlarda, özel kırpmalar srcset özniteliğinin dışında bırakılır. Aynı zamanda, wp-get-attachment-image işlevi aracılığıyla bir görüntü çağrıldığında duyarlı bir görüntü döndürülür.

Duyarlı görüntüler, bir medya yükleyici aracılığıyla WordPress'e bir görüntü yüklendiğinde ortaya çıkan otomatik işlevselliği nedeniyle WordPress 4.4'te bir arka plan özelliği görevi görür. Bu otomatik arka plan işlemi, bir sayfada bir görüntü göründüğünde srcset ve boyutların niteliklerinin görüntülenmesiyle sonuçlanır. Bu, yeni duyarlı görüntüler özelliğinde görünür arabirim olmadığı anlamına gelir. Doldurma amaçlı formların veya kontrol amaçlı kutuların varlığı ve geçiş amaçlı seçenekler gibi seçeneklerden hiçbiri, görünür arayüzlerin olmaması nedeniyle mevcut değildir.

Tema geliştiricileri, temanın functions.php dosyasını düzenleyerek resimlerde doğru boyutlar özniteliğinin sunulmasını sağlamalıdır. Srcset ve boyutları aslında WordPress duyarlı görüntüleri temsil şeydir resim etiketinde bulunan ilişkilendirdiği için bunu dikkate almak önemlidir. WordPress, srcset özniteliği içinde mevcut tüm boyutları dahil etme konusunda iyi performans gösterse de, tahmin edilmesi en zor olan boyut özniteliğidir. Tarayıcıya, görüntünün mevcut her görünüm alanında ne kadar geniş olacağını açıklamak, boyutların niteliğinin görevidir. Ancak sonuçlar, kullanıcının temasıyla kullanılabilen stile bağlı olarak farklılık gösterebilir ve makul varsayılanı yani 'sizes=” (maksimum genişlik: {{image-width}}) 100 vw, {{image-width}}” sağlar.

Boyutlar özelliği ile kullanıcılar özellikle iki şeyi başarabilir. İlk olarak, teknik özellikler söz konusu olduğunda artık bir ön koşul haline gelen görüntüde geçerli bir boyut özniteliğinin mevcudiyetini sağlar. İkinci olarak, tarayıcının, istenen orijinal genişliğe kıyasla daha fazla bir görüntü kaynağı sağlamasını engeller. Bununla birlikte, herhangi bir CSS görüntünün boyutunu tamamen farklı görünüm alanı genişliklerinde manipüle ettiğinde, varsayılan boyutlar özniteliğinin faydası daha az olur.

Tema geliştiricileri, her kesme noktasında mükemmel boyutlar özniteliğinin teslim edilmesini sağlamak için filtre kancalarının yardımıyla her görüntüye karşılık gelen boyut özniteliğini ayarlayabilir. Bu nedenle, doğru duyarlı görüntü desteği sunma söz konusu olduğunda, temanın varsayılan boyutlar özniteliğine dayanmamasını sağlamak arzu edilir. Bunun ana nedeni, görüntü portunun boyutunun orijinal istenen görüntü boyutuna kıyasla daha küçük olduğu durumlarda tarayıcıların varsayılan boyutlar özniteliği ile görüntü kaynağını değiştirmesine veya değiştirmesine izin verilmemesidir. Ancak görüntü bir kesme noktasında CSS ile zaten değiştirilmişse, kaynak da değiştirilemez.

Bir WordPress Kod Tabanına erişimi olan bir kişiyseniz veya bir tema geliştiricisiyseniz, doğru boyut özelliklerini sağlamak için temalardaki görüntüleri filtrelemeniz daha büyük bir zorunluluktur. Yeni sürüm çıktıktan sonra yapılması gereken en önemli şey bu olmalı.

Temanız için Duyarlı Görsellerin Yapılandırması

Temanıza uyacak şekilde uyarlanmış bir düzeyde duyarlı görüntü desteği sağlamak için kullanılabilecek yeni işlevlerle birlikte bir dizi yeni kanca tanıtıldı. srcset özniteliğine dahil edilmesi gereken görüntünün maksimum genişliği, tema geliştiricisi tarafından max_srcset_image_width kancası aracılığıyla filtrelenebilir. Görüntünün srcset öznitelikleri, wp_calculate_image_srcset'e bağlanarak filtrelenebilirken, boyutlar özniteliği, bir tema geliştiricisi tarafından, wp_calculate_image_sizes filtreleme yoluyla görüntü kesme noktalarına kendi temalarına uyacak şekilde özelleştirilebilir.

İçerik resimleri wp_calculate_image_sizes ile filtrelenebilirken, küçük resimler/özellikli resimler wp_get_attachment_image_attributes işlevi ile filtrelenebilir. Tema, öne çıkan görüntülerin farklı kesme noktalarında görüntülenme biçimine göre değiştiğinden ve içerik görüntülerinin aynı koşullar altında görüntülenme biçiminden tamamen farklı olduğundan, iki farklı işleve ihtiyaç duyulmaktadır. Böylece WordPress 4.4, tema geliştiricilerine görüntüleri çeşitli şekillerde filtreleme ve böylece mümkün olduğunca spesifik olma konusunda gelişmiş bir fırsat sunar.

Tüm bunlar, kullanıcıların ve tema geliştiricilerin WordPress 4.4 güncellemesi aracılığıyla duyarlı görüntü desteği ile elde edebilecekleri anlık faydaları vurgular. Ayrıca, tema geliştiricilerin, görüntü alanı boyutu ve piksel yoğunluğundan bağımsız olarak net ve canlı görüntüler eklemesine ve böylece web sayfaları daha büyük görüntüleri yüklemek için gereken ek süreyi ortadan kaldırabileceğinden web sitesinin performansını iyileştirmesine olanak tanır. Kullanıcılar için otomatik bir prosedür olmasına rağmen, tema geliştiricileri, tema içindeki function.php dosyasında zaman harcayarak görüntü boyutları özniteliğini ayarlamaktan sorumludur. Ayrıca, Duyarlı Görüntüler eklentisinin oluşturulması ve birleştirilmesinin daha çok bir ekip işi olduğu unutulmamalıdır.