WordPress'te duyarlı görüntülerle çalışma

Yakın zamana kadar, WordPress'te duyarlı görüntülerle çalışmak gerçek bir zorluktu. Kullanıcılar işlevselliği kendileri yazmaya istekli olmadıkça, şansları kalmamıştı. Diğer seçenek, bir eklenti satın almak veya başka bir geçici çözüm bulmaktı, ancak geliştiricilerin yararlanabileceği hiçbir temel işlev yoktu. Duyarlı görüntüler için destek olmadan oluşturulan temalar genellikle yavaş performans gösteriyordu ve kullanılabilirlik bazen değişen ekran boyutlarında kararsızdı. Bunlar tam olarak müşterilerin ve kullanıcıların iyi işlevsellik ile ilişkilendirdiği nitelikler değildir.

Neyse ki, tüm bunlar WordPress 4.4'ün piyasaya sürülmesiyle değişti. Artık duyarlı görüntülere yönelik işlevsellik, doğrudan WordPress'e dahil edilmiştir ve geliştiricilerin onunla temalarda çalışmasına olanak tanır. Bu, duyarlı bir resim eklentisi alarak ve onu WordPress çekirdeğinin bir parçası yaparak gerçekleştirildi.

her şey nasıl çalışıyor

Açıkçası, daha önce yapmadıysanız, ilk adımınız WordPress 4.4'e güncellemektir. Güncellemeyi tamamladıktan sonra, sitenizin kaynak kodunu görüntülerseniz, sitenizdeki görsellerin artık iki yeni özniteliğe sahip olduğunu fark edeceksiniz: sizes ve srcset . Bu öznitelikler filtrelenir; bu, mevcut tüm görüntü boyutlarının mevcut olduğu, ancak boyutların orijinal görüntüyle tutarlı kaldığı anlamına gelir. srcset özniteliği, en-boy oranının görüntünün orijinal sürümüyle aynı olmadığı durumlarda özel kırpmaya izin vermez. Bu, bir kullanıcının ekranında görüntülendiğinde görüntü kalitesinden ödün verilmemesini sağlamak içindir.

Kaputun altına girmek ve değişiklik yapmak

WordPress, arka plan özelliği olarak duyarlı görüntüler ekledi; bu, işlemin otomatik olarak gerçekleştiği anlamına gelir. Medya yükleyiciyi kullanarak bir resim yüklediğinizde, özellikler sizin müdahaleniz olmadan bu resimlere uygulanır. Bu, görüntü optimizasyonu için de kullanışlıdır.

Bu bir arka plan özelliği olduğu için, duyarlı görüntüler bir kullanıcı arayüzü ile birlikte gelmez - sadece gerçekleşir. Bir geliştirici olarak, resimlerinize doğru bir sizes özelliği verildiğinden emin olmak için temalarınızın her birinde functions.php dosyasını değiştirebilirsiniz. Unutmayın: Duyarlı resimlere atıfta bulunmak istediğinizde, bu, srcset sizes etiketi nitelikleri anlamına gelir.

Varsayılan özellikler

Bu özellikle çalışmaya başladığınızda, WordPress'in olası tüm boyutları bulma ve bunları srcset özniteliğine ekleme konusunda oldukça iyi olduğunu fark edeceksiniz. Ne yazık ki, sizes özniteliğinin öngörülebilirliği söz konusu olduğunda sorunlar ortaya çıkabilir. Bu, görüntülerin herhangi bir ekranda kullanılabilir ve görüntülenebilir olması için tarayıcılara görüntü genişliğini iletmek için kullanılan niteliktir.

Bu özelliği varsayılan olarak ayarlamak birkaç şekilde çalışır. Birincisi, her bir görüntüye uygulanacak sizes özniteliğini zorlamasıdır. Bu, artık zorunlu bir gereklilik olduğu düşünüldüğünde faydalıdır. İkincisi, tarayıcıların görüntünün orijinal boyutundan daha geniş bir görüntü kaynağı kullanmasına izin vermemesidir. Görüntü boyutunu ekran genişliklerine (medya sorguları gibi) bağlı olarak ayarlamak için kullanılan CSS kodu, ne yazık ki bu varsayılanı çok daha az kullanışlı hale getirebilir.

Tema geliştiricileri için filtre kancaları

Bu varsayılan öznitelik yalnızca CSS koduyla değiştirilmemiş resimlerle çalıştığından, WordPress tema geliştiricilerin kullanması için filtre kancaları oluşturmuştur. Bu kancayı kullanarak tüm resimler için size özniteliğini ayarlamanız sizes . Sonuç olarak, sunulan sizes özelliğinin her durumda ideal olacağından emin olabilirsiniz.

Bir uyarı

Devam etmeden önce, varsayılan öznitelikler seçeneğinin iyi yanıt veren görüntü işlevselliği sağlamanın en iyi yolu olmadığını belirtmek için bir dakikanızı ayıralım. Aslında, bu varsayılana dayanan temalar oluşturmaktan kaçınmak için çalışmalısınız. Bunun nedeni, varsayılan özniteliğin, görüntüleme alanı orijinal görüntünün boyutu kadar büyük olmadığında, tarayıcıların görüntü kaynağını değiştirmesini engellemesidir. Tarayıcılar, CSS tarafından ince ayar yapılmışsa ve daha büyük bir görüntü gerekiyorsa, kaynağı değiştiremezler.

Görüntü filtreleme

Bir tema geliştiricisi olarak, doğru olan bir sizes özniteliği elde etmek için resimlerinizde filtrelemeyi kullanabilirsiniz. Bu, WordPress işlevi için bir kanca kullanılarak gerçekleştirilebilir, wp_calculate_image_sizes . Mevcut temanızla çalışması için bu işlevi kullanabilirsiniz. Farklı görüntü türlerine farklı sizes özniteliği uygulayan değişiklikler yapabilirsiniz.

Bu sürümle birlikte gelen yeni işlevler, WordPress medya yükleyicisini kullanarak eklediğiniz tüm resimlere sizes ve srcset niteliklerinin uygulanmasını artık mümkün kılıyor. Ayrıca, gönderilerinizdeki resimlere öznitelikler eklemenize de olanak tanır. wp_get_attachment_image_sizes bir göz atın. Bu, temanız için functions.php dosyasındaki bir filtre aracılığıyla yakalayabileceğiniz ve değiştirebileceğiniz bir sizes özniteliği döndürür. Benzer şekilde, wp_get_attachment_image_srcset aynı şeyi sadece srcset özniteliği için yapar.

Duyarlı görüntüler ve özel temanız

Bu son sürümle birlikte gelen yeni işlevlere, temanızdaki duyarlı görüntüler için etkili destek sağlamak için kullanabileceğiniz birçok kanca eşlik ediyor. Bu kancalar şunları içerir:

Wp_calculate_image_sizes – Tema geliştiricilerinin, temalarında bulunan kesme noktalarıyla çalışmak üzere size sizes ayarlamak için kullanabilecekleri bir kanca.

Max_srcset_image_width – Bir tema geliştiricisinin, srcset özniteliğinde bulunan görüntülerin maksimum genişliğine göre filtrelemek için kullanabileceği bir kanca.

W_calculate_image_srcset – Geliştiricilere srcset niteliklerine göre filtreleme yeteneği veren bir kanca.

Duyarlı görüntü desteği hakkında daha fazla bilgi edinme

WordPress geliştirici kılavuzu, söz konusu bu kancaları etkin bir şekilde kullanmak olduğunda daha fazla rehberlik sağlayabilir. Bu tür sahne arkası ayarlamaları yaparken sizin konfor seviyenize göre yapmanız gereken araştırma değişiklik gösterecektir. Bunu kesinlikle bir hobi olarak sürdüren bir tema geliştiricisiyseniz, biraz deneme yapmayı tercih edebilirsiniz. Öte yandan, bir kariyer teması geliştiricisiyseniz, bu güncellemede gerçekten ustalaşmak için gereken zamana ve kaynaklara yatırım yapmak isteyebilirsiniz.

Güncellemenin faydaları

WordPress'i henüz güncellemediyseniz (veya yönetilen WordPress sunucunuz sizin için henüz güncellemediyse), bunu yaptığınızda kullanıcılarınız bazı harika avantajlardan yararlanacaktır. Duyarlı görüntü desteği, sayfaları çok büyük görüntüleri aşağı çekerek zaman kaybetmeyeceğinden sayfa performansını artırabilir. Kullanıcılar ayrıca görüntülerin kalitesinde çok etkileyici bir gelişme olduğunu fark edecekler. Her şeye giren 'sosis yapımını' görmezler. Bunun yerine, sadece iyi çalıştığını görecekler.

Geliştirici olarak, tüm temalarınız için functions.php dosyalarının her birinde size özniteliğini ayarlamanız sizes . Ancak, bu ilk çabayı gösterdiğinizde, işler çok daha kolay hale gelir. Öğrenme eğrisinin üstesinden geldikten sonra, bu yeni işlevle çalışmanın oldukça doğal olduğunu göreceksiniz.

Bu yeni işleve alışmak ve özel temalarınız için duyarlı görüntü desteği almak biraz araştırma ve uygulama gerektirebilir. Bununla birlikte, geliştiricinin kılavuzunu incelemeye ve bazı şeyleri çözmeye istekliyseniz, müşterileriniz performans ve işlevsellikteki gelişmeyi gerçekten takdir edeceklerdir. Bu uzun zaman oldu ve deneyimli tema geliştiricileri ve özel temaları korumakla görevli olanlar bu güncellemeden haklı olarak heyecan duyuyorlar.