Ana İçeriğe Geç

görüntüleri WordPress tarafından nasıl yönetildiğini Responsives

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Duyarlı görüntülerin artan şekilde benimsenmesi göz ardı edilemezken, işlevselliği WordPress gibi büyük bir CMS'nin kısıtlamaları altında kullanmak çok zor olabilir. Temanızdaki özelliği kendiniz tasarlamak tamamen mümkün olsa da, bunu yapmak zor bir iştir ve zaman alır.

Neyse ki, WordPress 4.4'ün piyasaya sürülmesiyle, tema ve eklenti geliştiricileri, ürünlerinde duyarlı görseller kullanma fırsatına sahip olacaklar. Bu sürümün başlangıcından bu yana, "Responsive Images RICG" eklentisi WordPress çekirdeğinde birleştirildi, yani duyarlı görüntü desteği artık dahili bir WordPress varsayılan özelliği. Nasıl çalıştığına ve WordPress sitenizden en iyi şekilde yararlanmak için nasıl kullanabileceğinize bir göz atalım.

Duyarlı-image-trac-wordpress

Nasıl resim çalışmalarını responsives

WordPress 4.4'e yükseltir yükseltmez, tüm içeriğiniz ve resimleriniz 'srcset' ve ' boyutları İstenen orijinal görüntünün boyutu korunurken, mevcut her görüntü boyutunun var olmasını sağlamak için filtrelenir. Özel yeniden boyutlandırmaların " srcset »En boy oranı istenen orijinal görüntüden farklıysa. Ek olarak, işlev aracılığıyla bir görüntü çağırarak " wp-get-ek resim Aynı zamanda duyarlı bir görüntü döndürür.

duyarlı Görüntüler Arka planda bir özelliktir, yani bir kullanıcı medya yükleme arayüzü aracılığıyla WordPress'e her resim yüklediğinde her şeyin otomatik olarak gerçekleştiği anlamına gelir. Bir sayfada bir resim göründüğünde, " srcset "Ve" boyutları Bu arka plan işleminin bir sonucu olarak.

Bu, duyarlı görüntülerin yeni işlevselliğinin görünür bir kullanıcı arayüzüne sahip olmayacağı anlamına gelir. Geçiş seçenekleri, doldurulabilir formlar veya onay kutuları yoktur. Bununla birlikte, tema geliştiricileri kendi " functions.php Görüntülerinin "özniteliği ile hassas olması için" boyutları ". Gerçekten de, WordPress'teki duyarlı görsellerden bahsettiğimizde, özellikle özniteliklerden bahsediyoruz " srcset "Ve" boyutları Hangi resmin etiketinde bulunur.

WordPress, kullanılabilir tüm boyutları özelliğe eklemek için olağanüstü bir iş yaparken " srcset "," Boyutlar "özniteliğinin tahmin edilmesi biraz daha zor. Nitekim, " boyutları Görüntünün pencerenin mevcut boyutlarına göre nasıl göründüğünü tarayıcıya söylemekten sorumludur. Bilgiler, kullanıcının temasının tarzına bağlı olarak farklı olacağından, yapabileceğimiz en iyi şey, aşağıdaki gibi makul bir varsayılan sağlamaktır:

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

sizes="(max-width: {{image-width}}) 100vw, {{image-width}}"

Bu varsayılan özellik " boyutları İki şey yapar. İlk olarak, geçerli bir öznitelik olduğundan emin olur " boyutları Son zamanlarda şartnameye göre zorunlu bir gereklilik haline gelen görüntüde var. İkinci olarak, tarayıcının istenen orijinal genişlikten daha büyük bir görüntü kaynağı sağlamamasını sağlar. CSS manipülasyonu durumunda, resmin boyutu pencerelerin genişliğine bağlı olarak farklı olacaktır, diğer yandan varsayılan değer " boyutları Daha az kullanışlı olacak.

Varsayılan özellikten beri " boyutları "Yalnızca CSS tarafından değiştirilmeyen resimlere yardımcı olacak, tema geliştiricilerinin" özniteliği "ayarlamasına izin vermek için filtre parantezleri mevcut olacak boyutları "Her görüntünün mükemmel olmasını sağlamak" boyutları Her durma noktasına teslim edilir.

Burada, mümkünse, temanızın " özniteliğinin varsayılan değerine güvenmemesi gerektiğini belirtmek önemlidir.boyutları“Duyarlı görüntü desteği hakkında doğru bilgi sağlamak için. Gerçekten de, varsayılan öznitelik “boyutları”Pencere orijinal istenen görüntü boyutundan daha küçük olduğunda tarayıcının görüntü kaynağını değiştirmesine izin vermez. Ayrıca, görüntü istenen orijinal boyuttan daha büyük olduğunda, görüntü bir kesme noktasında CSS ile düzenlenirse kaynağı değiştiremez.

Bir tema geliştiricisiyseniz veya bir WordPress kod tabanına erişiminiz varsa, temanızdaki hassasiyeti sağlamak için temanızdaki görüntüleri filtreleyin " boyutları Yeni sürüm yakında çıktıktan sonra yapabileceğiniz en önemli şeylerden biri. Aşağıdaki, " wp_calculate_image_sizes Temanıza uyacak şekilde geliştirebilirsiniz.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

function adjust_image_sizes_attr( $sizes, $size ) {
   $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';
   return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr', 10 , 2 );

Bu örnekte, onay işareti, öne çıkan görüntüler ve küçük resimler dahil tüm içeriğe uygulanacaktır. Farklı görüntü türlerinin farklı değerlere sahip olmasını sağlamak için ek mantık eklenebilir.

kod kaynak-wp-image-duyarlı

"Özniteliği için yeni işlevler eklendi srcset "Ve" boyutları İçeriği görüntülemek üzere eklenen resimlere ek olarak, Medya Yöneticisi aracılığıyla WordPress'e eklenmiş bir resme eklenebilir. İşlevi wp_get_attachment_image_sizes Varsayılan bir özellik döndürür " boyutları "Dosyadaki temanızın filtresi tarafından değiştirilebilir" functions.php ". İşlevi wp_get_attachment_image_srcset bir öznitelik dönecek srcset »İstenen görüntünün mevcut tüm boyutlarını içerecek. Bu yeni işlevlerin nasıl kullanılacağına dair belgeler ve örnekler bulunabilir geliştiricilerin referans dizini.

Temanız için Duyarlı Görüntü Yapılandırması

Yeni özellikler sayesinde, temanıza en iyi şekilde uyan duyarlı görüntüler için yeni bir destek düzeyi sağlamak için kullanılabilecek birkaç yeni destek geliyor. Kanca max_srcset_image_width "Tema geliştiricisinin, görüntünün maksimum genişliğini filtrelemesine olanak tanıyacak" srcset ". Kanca wp_calculate_image_srcset »Özellikleri filtreleyecek« srcset »Görüntüler, kancadayken (filtre)« wp_calculate_image_sizes "Tema geliştiricisinin içeriği özelleştirmesine izin verecek" boyutları Temalarındaki görüntü kesme noktalarını daha iyi eşleştirmek için.

Özelliğin en iyi nasıl filtreleneceğine dair bir örnek arıyorsanız " boyutları Bir görüntünün yeni yirmi on altı teması mükemmel bir örnek olacaktır. Bu temanın functions.php dosyasında, son iki işlev "özniteliği filtreler" boyutları Tema içindeki farklı görüntü kesme noktalarına yanıt vermek için.

Duyarlı filtreler görüntü WordPress öğretici #

WordPress 4.4 sürümüne güncelleme, kullanıcıların her pencere boyutunda ve piksel yoğunluğunda net ve net görüntülerin görüntülenmesini teşvik edecek duyarlı görüntü uyumluluğundan hemen yararlanacağı anlamına gelir. Sayfaların uzun süre büyük, ağır resimler yüklemesi gerekmeyeceğinden, bu aynı zamanda performansta bir artışa neden olacaktır. Bu, kullanıcılar için otomatik bir süreç olsa da, tema geliştiricilerinin resim boyutlarını temalarına göre ayarlamaları gerekecektir.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Hepsi bu ders için, umarım WordPress'teki duyarlı görüntülerin önemini ve kavramını daha iyi anlamanıza yardımcı olur. En sevdiğiniz sosyal ağlarda bu öğreticiyi arkadaşlarınızla paylaşmaktan çekinmeyin.

 

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
11 hisseleri
hisse6
cıvıltı1
Enregistrer4