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 600.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

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

Neyse ki, WordPress 4.4'in piyasaya sürülmesiyle, tema geliştiricileri ve eklentileri ürünlerinde duyarlı görüntüler kullanma fırsatı bulacaklar. Bu sürümün başlangıcından beri, WordPress çekirdeğine eklenen "Responsive RICG Images" eklentisi birleştirildi; bu, duyarlı görüntü desteğinin artık WordPress'in varsayılan bir iç işlevi olduğu anlamına geliyor. 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 geçtiğinizde, tüm içerik ve resimleriniz "srcset" ve "özniteliklerine sahip olacak boyutları İstenen orijinal görüntünün boyutunu korurken, mevcut her görüntünün boyutunun mevcut olmasını sağlamak için filtrelenir. Özel boyutların öznitelikten göz ardı edileceğini unutmayın. " srcset En boy oranı istenen orijinal görüntüden farklıysa. Ayrıca, fonksiyon 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 Bir arkaplan özelliğidir, yani bir kullanıcı medya indirme arayüzü aracılığıyla bir resmi WordPress'e gönderdiğinde her şey otomatik olarak gerçekleşir. Sayfada bir resim göründüğünde, "" özniteliğine sahip olacak srcset "Ve" boyutları Bu arka plan işleminin bir sonucu olarak.

Bu, yeni duyarlı görüntü özelliğinin görünür bir kullanıcı arayüzüne sahip olmayacağı anlamına gelir. Değiştirme, doldurma formları veya onay kutuları gibi seçenek yoktur. Olduğu söyleniyor, tema geliştiricileri dosyalarını değiştirmeli " functions.php Görüntülerinin "özniteliği ile hassas olması için" boyutları ". Gerçekten, WordPress'teki duyarlı görüntüler hakkında konuştuğumuzda, özellikle özniteliklerden bahsediyoruz " srcset "Ve" boyutları Hangi resmin etiketinde bulunur.

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]

WordPress, kullanılabilir tüm boyutları özelliğe eklemek için olağanüstü bir iş yaparken " srcset "Boyutlar" özelliğini tahmin etmek biraz zor. Nitekim, nitelik boyutları Tarayıcıya görüntünün pencerenin mevcut boyutlarına göre nasıl olduğunu bildirmekten sorumludur. Bilgiler, kullanıcının temasının tarzına bağlı olarak farklılık göstereceğinden, yapabileceğimizin en iyisi aşağıdaki gibi makul bir varsayılan değer sağlamaktır:

boyutları = "(maksimum genişlik: {{görüntü genişliği}}) 100vw, {{görüntü genişliği}}"

Bu varsayılan özellik " boyutları İki şey yapar. İlk olarak, geçerli bir özellik olmasını sağlar " boyutları Şartnameye göre son zamanlarda zorunlu bir gereklilik haline gelen görüntüde var. İkincisi, tarayıcının istenen orijinal genişliğinden daha büyük bir görüntü kaynağı sağlamamasını sağlar. CSS manipülasyonunda görüntünün boyutu, pencerelerin genişliğine göre değişir, diğer yandan varsayılan değer « boyutları Daha az kullanışlı olacak.

Varsayılan özellikten beri " boyutları Yalnızca CSS tarafından bozulmuş olmayan resimlere yardımcı olacak, tema geliştiricilerin niteliği ayarlaması için filtre kancaları mevcut olacak boyutları Her görüntünün mükemmel bir özellik olmasını sağlamak boyutları "Her durma noktasında teslim edilir.

Mümkünse temanızın, özniteliğin varsayılan değerine dayanmaması gerektiğini burada belirtmek önemlidir. " boyutlarıMsgstr "Duyarlı resimler için destek hakkında doğru bilgi sağlamak. Gerçekten de, varsayılan özellik " boyutları Pencere istenen görüntünün orijinal boyutundan küçük olduğunda tarayıcının görüntünün kaynağını değiştirmesine izin vermez. Görüntü kesme noktasında CSS ile değiştirilirse, görüntünün istenen orijinal boyutundan büyük olabileceği durumlarda, 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ı Yakında kullanıma sunulacak olan yeni sürümden sonra yapabileceğiniz en önemli şeylerden biri. Aşağıdaki "" işlevindeki kancaya bir örnektir wp_calculate_image_sizes Temanıza uyacak şekilde geliştirebilirsiniz.

adjust_image_sizes_attr fonksiyonu ($ boyutları, $ boyutu) {$ boyutları = (maksimum genişlik: 709px) 85vw (maksimum genişlik: 909px) 67vw (maksimum genişlik: 1362px) 62vw, 840px '; $ Boyutları return; } Add_filter ( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr' 10, 2);

Bu örnekte, kanca, tek resimler ve küçük resimler dahil tüm içeriğe uygulanacaktır. Farklı görüntü türlerinin farklı değerlere sahip olması için ek mantık eklenebilir.

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]

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 İstenilen görüntünün mevcut tüm boyutlarını içerecektir. Dokümantasyon ve bu yeni özelliklerin kullanım örnekleri 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, niteliğe dahil edilecek resmin maksimum genişliğini filtrelemesini sağlar srcset ". Kanca wp_calculate_image_srcset »Özellikleri filtreleyecek« srcset »Görüntüler, kancadayken (filtre)« wp_calculate_image_sizes Tema geliştiricisinin özelliği özelleştirmesine izin verir boyutları Tempodaki resim kesme noktalarını daha iyi eşleştirmek için.

"En iyi filtre özelliğini nasıl kullanacağınıza dair bir örnek arıyorsanız" boyutları Bir resmin yeni twentysixteen teması mükemmel bir örnek olacak. Functions.php dosyasında, son iki fonksiyon "" özniteliğini filtreliyor boyutları Temadaki farklı görüntü kesme noktalarına cevap vermek için.

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

WordPress'e güncelleme 4.4, kullanıcıların hemen pencerelerin her boyutuna ve piksel yoğunluğuna göre net ve net görüntüler göstermeye yardımcı olan duyarlı görüntülerle uyumluluktan hemen faydalanacakları anlamına gelir. Bu, sayfaların uzun süre büyük, ağır görüntüler yüklemesine gerek kalmayacağından performansı artıracaktır. Bu, kullanıcılar için otomatik bir işlem olmasına rağmen, tema geliştiricilerin temaları için görüntü boyutlarını ayarlamaları gerekir.

Ç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. [Ücretsiz]

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 adresiniz gösterilmeyecektir. 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üş
17 hisseleri
hisse12
cıvıltı1
Enregistrer4