WordPress Özel Görüntü Boyutunu Ekleyin ve Kullanın: Şimdiye Kadarki En İyi Şeylere Kılavuz
Yenileme 4 Nisan 2017: Duyarlı görüntü sisteminin WordPress 4.4+ ‘da nasıl çalıştığını ve özel WordPress görüntülerinin boyutunun bu sistemle nasıl etkileşime girdiğini ayrıntılı olarak ayrıntılı olarak eklemek.
WordPress’teki özel bir görüntünün boyutunu ayarlayabildiğim için çok mutluyum. Bu sistem tarafından açılan güç ve esneklik, abartmak için güzel, yönetilen ve iş performans bir web sitesi oluşturmaktır. Örneğin, yeni wpsout teması iki üstün görüntü boyutuna sahiptir: büyük olan (bu yazının üstünde) ve ana sayfanın ortasındaki küçük olan. Ayrıca, posta gövdemizdeki görüntülerin yaşadıkları alan için çok büyük olmamasını sağlamak için özel bir görüntü boyutu kullanıyoruz.
Bu, görüntünün boyutunun çok fazla karmaşıklığıdır ve WordPress bizim için her şeyi doğrudan kutudan işler. Kendimizin tüm değişen boyutunu ve optimizasyonunu, Photoshop gibi bir şeyde yaparsak, sadece işimizi yiyeceğini düşünün. Resim ulaşılamaz bir lüks olacak. Bu kısa sohbetle, WordPress özel resimlerini nasıl kullanabileceğinize bakalım! Başlamadan önce bir şey daha. WordPress’in gelişimini öğrenmek istiyorsanız, bunun için en iyi yönergeleri yazdık:
WordPress’in gelişimini öğrenmenin en iyi yolu uyan ve bugün koş!
Dedikleri şey bu:
“Bence WordPress’in gelişimini öğrenmek isteyen herkes bu kursu gerektiriyor. Videoyu izlemek açılan bir grup ışık gibi. ” -Jason, bir WordPress geliştiricisi “Denediğim başka bir kurs neredeyse her zaman WordPress’in neden bir şey yaptığını veya her şeyin birlikte nasıl çalıştığını açık bir şekilde açıklamamak. Tüm bunları çalıştırıyor ve her şey net ve anlaşılması kolay bir dilde açıklanıyor. ” -Caroline, WordPress -Out ve şimdi çalışan işçiler
WordPress görüntü boyutu için çok hızlı bir kılavuz bir görüntü her yüklediğinizde, WordPress, her kayıtlı özel görüntü boyutu için boyut olarak değiştirilen görüntünün bir sürümünü üretir.
WordPress sitenize her yüklediğinizde, WordPress, temanız tarafından kaydedilen her özel görüntü boyutu için boyut olarak değiştirilen görüntünün bir sürümünü otomatik olarak üretir (ve alt temayı kullanırsanız ana tema). Görüntü dosyasının bulunduğu WordPress dosya sisteminizde şuna benziyor:
Bu gücü görüyor musun? Yüklediğiniz orijinal görüntüyü koruyorsunuz – bu durumda 1 MB’den fazla, sitede kullanmak için çok büyük. Ancak, oluşturulan, boyut olarak değiştirilen ve siteniz boyunca otomatik olarak kesilen görüntünün aynı sürümünü de kullanabilirsiniz. Görüntü olması gereken alanla eşleşecek ve olması gerekenden daha büyük bir dosya olmayacak ve WordPress her şeyi otomatik olarak işleyecek. Özel bir durum üstün bir resim, eklediği yazıdan “resmi temsilci” olarak belirlediğiniz bir resim. WordPress, site genelinde üstün görüntüler görüntülemek için özel bir yola sahiptir ve diğer görüntülerle aynı boyutta kesme ve değişen boyuttan yararlanabilirsiniz. Her şey çok havalı geliyor, değil mi? Bazı WordPress özel resimlerini kendiniz için nasıl programlayabileceğinize bakalım. “Küçük Resim” ve “Üstün Görüntü”: Ugh, burada kodlamaya girmeden önce, çekmemiz gereken dairesel bir WordPress yolu var. WordPress önceki sürümle uyumlu olduğundan, “Üstün Görüntü” başlar ve genellikle “mini görüntü” olarak adlandırılır. (Bu tür miras sorunu, “Yan Bilan” ve “Widget Alanı” ile ilgili önceki gönderilerimizden tanıdık gelmelidir.) Bu sorun aşağıdaki gibi ortaya çıkar: WordPress set_post_thumbnail_size () işlevi sitenizdeki bir mini görüntünün boyutunu ayarlayın. Bu boyut (varsayılan olarak 150px kare) ayrıca üstün bir görüntü boyutu varsayılandır: Bağlantı olmadan üstün görüntüler – The_Post_thumbnail () – görüntülemek için işlevi çağırırsanız göreceksiniz.
Yani, amacı aslında üstün görüntüler görüntülemek olan kafa karıştırıcı bir işleviniz var, the_post_thumbnail ().Ayrıca, “küçük resim” varsayılanının boyutunu ayarlayan ve sitenizdeki görüntünün boyutunu görüntüleyen gerçekten garip bir işleviniz var, set_post_thumbnail_size ().Benim tavsiyem set_post_thumbnail_size () () ‘ni hiç kullanılmamış olarak bırakmaktır.Benim tavsiyem set_post_thumbnail_size () ‘nin tamamen yalnız olmasına izin vermektir;Kullanmayın.Görüntünün “küçük resim” (150 piksel kare) bir ek gibi sarkmasına izin verin ve bırakın.Bunun yerine, Add_Image_Size () adlı bir işlevi kullanacağız ve Üstün Görüntümüz için hangi görüntünün kullanmak istediğimizi söylemek için bir bağımsız değişkenle_post_thumbnail () çağıracağız.
WordPress Özel Görüntü Boyutu Function.php ekleyin Bu bölümde, WordPress’te üstün resimleri ve görüntü boyutunu işlemek için ana kodu göreceğiz. Aşağıda kullanacağımız örnek kodu; Aktif temanızdan function.php’ye gider: // Surre özellikli görüntüler etkinleştirilir add_theme_support (‘Post-Thumbnails’); // Özel görüntü boyutları ekle add_image_size (‘Featured-Land’, 640, 294, true); // genişlik, yükseklik, mahsul add_image_size (‘özellikli-küçük’, 320, 147, true); // Medya sermayesi add_image_size (‘orta genişlik’, 480) aracılığıyla kullanılmak üzere başka yararlı görüntü boyutları ekleyin; add_image_size (‘orta yükseklik’, 9999, 480); add_image_size (‘Orta-resmi’, 480, 480); // Medya sermayesi add_filter (‘image_size_names_choose’, ‘wspspout_custom_seses’) ekle kullanılmak üzere üç yararlı görüntü boyutunu kaydedin; İşlev wspout_custom_seses ($ boyutları) {return array_merge ($ boyutları, dizi (‘orta genişlik’), ‘orta yükseklik’), ‘orta yükseklik’ ‘=> __ (‘ orta yükseklik ‘),’ orta-steting ‘ => __ (‘orta bir şey’),)); } Koddaki yorumlar, bu yazının geri kalanı gibi ne olduğunu açıklamak için yeterlidir; Ancak burada kodu daha önce anlamanıza yardımcı olacak iki kısa not var: add_image_size () argümanı add_image_size () dört argüman gerektirir:
İsim, dize (zorunlu)
genişlik, tamsayı (isteğe bağlı)
Yükseklik, tamsayılar (isteğe bağlı)
mahsul, bir boolean (isteğe bağlı)
İsim kendini açıklıyor. Genişlik ve yükseklik, piksel cinsinden hedef boyut değerleridir. Aşağıda nasıl çalıştığını (ve mahsulle nasıl çalıştığını) açıklayacağız. wphout_custom_seses () Bu işlev hakkında bilmeniz gereken şey, WordPress’in sermayeye özel görüntü boyutları eklemek için birkaç kaynak plakası kodu gerektirmesidir – yer siteleri kullanıcılar bunları kullanabilir – ve “Ortam Ekle Sütun “Çevre. Image_size_names_choose adlı filtre kancasına bağlanma ve istenen üç görüntü boyutunu kaydeder, tümü wpshout_custom_sines (); Sonuç: Eklenen görüntünün boyutunu kullanarak daha önce the_post_thumbnail () hakkında konuşuyoruz. Her zaman döngüde çağrılır. (Döngünün dışındaysanız, hangi gönderi hakkında konuştuğunuzu belirlemenize izin veren bir get_the_post_thumbnail () fonksiyonu vardır.) Her zaman en az bir argümanla the_post_thumbnail () olarak adlandıracağız: Kullanılacak özel görüntü boyutunun adı . Yukarıda tartışılan 150px x 150px’i “küçük” almak istemediğimiz için, her zaman en az bir argümanla the_post_thumbnail () arayacağız: kullanmak istediğimiz kayıtlı özel görüntü boyutunun adı.
Aşağıdaki gibi görülebilir (bu kod, index.php veya single.php) gibi wordPress sayfa şablonuna dahil edilmiştir: // (hack_posts ()): while (vace_posts ()): the_post ();// Bu herhangi bir şey olabilir;Burada sadece the_title () yayın başlığını istiyormuş gibi yapacağız;// Post’un özel görüntüsü, ‘özellikli-imagage-land’ boyutunda The_Post_thumbnail (‘Özel Imagege-Land’);
// Döngüdeki diğer her şeyle devam et … işte burada! Belirtilen görüntü boyutuna, sayfaya üstün bir gönderme görüntüsü yerleştirdiniz. Burada öğrenecek daha çok şey var, ama başlamak yeterli olacak. The_Post_thumbnail () adresine koyabileceğiniz ek işlevlerin argümanı hakkında daha fazla sorunuz varsa, Codex’i kontrol edin. Sitenizdeki görüntünün boyutunu her değiştirdiğinizde küçük bir resim küçük bir resim yapın. Tüm zamanların en sevdiğim beş WordPress eklentisinden biri, rejenere küçük resimler. Bu, yüklediğiniz her resmin belirttiğiniz görüntünün her boyutu için bir sürüme sahip olduğundan emin olmak için kirli bir iş yapıyor. Sitenizdeki görüntünün boyutunu her değiştirdiğinizde çalışın, yoksa eski görüntü çok komik görünmeye başlayacaktır. Budama Anlama Add_image_size () işlev bağımsız değişkeninin argümanını biraz daha yakın görelim. Dikkat ederseniz, bazı işlev çağrılarının dördüncü argümanı vardır, true olarak ayarlanmıştır ve bazılarının sadece iki veya üçü vardır. Görünüşe göre, bu, görüntünüzün görünümü için çok önemlidir ve WordPress özel görüntüsünün boyutunun olağanüstü gücünün bir parçasıdır. Bu tartışmayı mevcut iki tür ekime bakarak derleyeceğiz: yumuşak bitkiler ve çok yıllıklar. “Yumuşak kuru erik” için daha doğru bir terimi hafifçe budayın, muhtemelen “boyut değiştirir”. “Yumuşak bitkiler” aslında biraz yanlıştır: daha doğru bir terim muhtemelen “boyut değiştirir”.
Bu varsayılan bir WordPress’tir: Add_image_size () (veya SET_POST_THUMBNAIL_SIZE () ‘deki dördüncü işlev bağımsız değişkenini ortadan kaldırarak yumuşak kesimlere ulaşırsınız, eğer kullanmaya karar verirseniz) veya bağımsız değişkeni false olarak ayarlayın. Bunun dışında, yumuşak mahsul hakkında bilinmesi gereken şey, görüntünüzün orantılılığını korumasıdır. Başka bir deyişle, belirttiğiniz boyutlara göre tüm görüntüleri görmenin boyutunu değiştirir, ancak görüntünün şeklini değiştirmez veya en ufak bir şekilde kesmez. Bu, yazılarınızda ve gövdelerinizde kullanmak istediğiniz görüntünün boyutu için akıllı bir varsayılan olarak yumuşak mahsul yapar. İyi bir nokta olarak, yumuşak kesim iki yoldan biriyle çalışabilir: belirli bir veya iki boyutla. Belirli bir boyutla bu, yukarıdaki orta genişlikli orta yükseklik görüntü boyutunun koduna uygundur. Yumuşak bir şekilde keser ve sadece bir boyut belirlerseniz (genişlik veya yükseklik artı “9999” Genişlik için), boyut boyutuyla orantılı olarak büyüyen görüntüler elde edersiniz. Bu nedenle, genişlik için 300’ü belirlerseniz, görüntünüz 300 piksel genişliğinde olacak ve yükseklik ne olursa olsun orantılı bir görüntü yapar. Yukarıdaki orta-tırnak görüntüsünün boyutu koduna göre belirli bir iki boyut ile. Yumuşak bir şekilde keser ve genişliği ve yüksekliği belirlerseniz, bir boyut hedefe dokunana kadar orantılı olarak büyüyecek ve orada duracaktır. Dolayısıyla, 300 piksel ve 100px yüksekliğinde genişliği belirlerseniz, uzun görüntü 300 piksel x 80px’de durur ve yükseklik görüntüsü, örneğin 60px x 100px’de durur. Aşağıdaki üç görüntü, yukarıda kaydettiğimiz üç boyutta yumuşak kesme görüntüsü için yumuşak kesim sonuçlarını göstermektedir. Büyütmek için tıklayın
Bu çok yıllık tesis, yukarıdaki öne çıkan arazi ve öne çıkan özelliklerin boyutu koduna uygundur. Temel olarak, sert mahsul, belirlenen tasarıma bir şey keser. Add_image_size () (veya set_post_thumbnail_size ()) dördüncü parametresini true olarak ayarlayarak zor bir hasat elde edersiniz.
Büyütmek için tıklayın
Basılı görüntünün artık aynı şekle sahip olmadığını unutmayın-tüm içerik-IT değerlendirmesini içermiyor. Sabit, genellikle sitenizin düzeninde belirtilen alana uygun olması gereken üstün görüntüler için en kullanışlıdır. Deneyimlerime göre, sert mahremalar, genellikle sitenizin düzeninde belirtilen alana uygun olması gereken üstün görüntüler için en yararlı olanlardır. Bunun için başka kullanımlar da var, ama burada çok faydalı. Gönderinize ekleyeceğiniz sert kasap görüntüleri yapmak istemeyebilirsiniz (istediğiniz sürece, tüm resimleriniz bir tasarım kararı olarak kare olur), çünkü içerik yayınlamak genellikle daha sorunsuz ve yüksek sesle düzenlenir. -Gropping hasar görüntü bilgileri. Orijinal görüntü istenen budama boyutundan daha küçükse ne olur? Çok küçük boyutlar sadece orijinal boyutunu koruyacaktır. İyi soru! Genel olarak, yüklediğiniz görüntü istenen boyutları karşılamak için çok küçükse, çok küçük boyutlar orijinal boyut olarak kalacaktır. Görüntüyü 500px x 400 piksel olarak kestiğinizi varsayalım, ancak orijinal görüntünün kendisi aslında 300px x 200px. Yalnızca tam boyutlu bir versiyonu geri alacaksınız. Yumuşak Crop Görüntünüz ilk boyut hedefine ulaştığında yumuşak çırpmanın durduğunu unutmayın. Bu nedenle, yumuşak kesik modda kesilmemenin tek yolu, görüntünüzün her iki boyutta çok küçük olması, önceki paragraftaki örnek gibi. 500 piksel x 400 piksel olarak yumuşak kırpma yaparsanız ve görüntünüz 1000 piksel x 200px ise, bu başarısızlık değildir;
Sadece aradığınız 500px x 100px resmini geri alacaksınız.Ancak çok yıllıklar, sert bir şekilde, bir görüntünün bir boyutta yeterince geniş, ancak başka bir boyutta çok küçük olması çok mümkündür.500 piksel x 400 piksel ve orijinal 1000 piksel x 200px’e kadar sert bir şekilde kırpıyorsanız, 500 piksel x 200px’i ölçen bir görüntü alacaksınız.Sadece orijinal görüntüye benzeyecek, soldan ve sağdan% 50 (500 piksel) kesilmiş.En önemlisi, beklediğiniz 5 x 4 boyutlarında olmayacak, ancak 5 x 2. Konteyner için üstün görüntüler aniden çok küçük (ve/veya şekil yanlıştır).Bu yüzden sahip olduğunuz en büyük şeyi yükleyin – acil bir durumda, fotoğrafları Photoshop gibi bir şeyde karşılamak için görüntüleri bile büyütebilirsiniz; Ancak bunun görüntü kalitesini azaltacağını lütfen unutmayın. Doğru görüntü boyutunu ayarlayın Sayfaya çok büyük olan görüntüleri yerleştirmek istemiyoruz, bu nedenle görüntünün boyutunu ve dosya boyutunu sınırlama konusunda pratik olmamız gereken yer burası. Tamam, şimdi WordPress görüntü boyutunu nasıl ayarlayacağımızı biliyoruz. Şimdi hangi görüntü boyutunu ayarlamalıyız? Add_image_size () add_image_size () önceki yazımız Commonense Image Siming’den hatırlayabilirsiniz! Bu nedenle, yapılacak en büyük hammaddeye sahip olmak en iyisidir, çünkü istediğiniz çeşitli boyut ve dosya boyutlarına indirebilirsiniz. Ancak, neyin açık olduğunu belirtmek için, siteyi yavaşlatacağı için sayfaya çok büyük görüntüler yerleştirmek istemiyoruz. Yani, görüntünün boyutunu ve dosya boyutunu sınırlama konusunda pratik olmamız gereken yer burası. Neyse ki, bu zor değil: sağduyulu görüntü boyutlandırmasında olduğu gibi, kılavuz şu görüntünün boyutunu ayarlamaktır: herhangi bir cihazdaki herhangi bir sitenin görünümü altında doğru bir şekilde ölçülecek kadar büyük.
Bundan daha büyük yok. Uygulamada, bu, sitenizi yalnızca cihazın farklı genişliğinde görmek anlamına gelir. Bir görüntü tüm sütunun tamamını doldurmalısa, en geniş sütun nedir? Siteniz, örneğin iPad’deki bir sütunun düzenine sigara içildiğinde 800 piksel olabilir. Sütunu doldurması gereken çok sayıda görüntünüz varsa, 800 piksel görüntünün boyutunu veya biraz daha geniş kaydetmeniz gerekir. 14 megapiksel iMac ekranında tam geniş bir arka plan görüntüsü düşünmeye başlarsanız bu karmaşık olabilir. (Ayrıca, bana retina ekranı hakkında başlamayın.) Ancak çoğu görüntü (ve sitelerin çoğu) için basit kalır, görüntünün sayfada farklı bir genişliğe sahip nerede olduğunu görün ve bu boyutun boyutunu yapın ve daha büyük değil. WordPress Duyarlı Görüntü ve WordPress görüntüsünün boyutundaki büyük bir WordPress özel görüntü artışının boyutuyla nasıl etkileşime girdikleri 2015’in sonunda WordPress 4.4: Duyarlı Görüntü ile. Bu, “yapmanız” gerekmeyen bir arka plan özelliğidir
Bundan zevk alacak her şey, bu yüzden çoğu durumda, en iyisi mutlu hissetmektir çünkü diğer insanlar bunu zaten bizim için biliyor. Ancak WordPress görüntü boyutu sistemleriyle nasıl etkileşime girdiğini anlamak güzel. İyi duyarlı bir görüntü nedir? Duyarlı görüntüler, farklı bir genişliğe sahip bir tarayıcı penceresine farklı görüntü boyutları sunarak dar cihazlardaki kullanıcılar için web sitelerini hızlandırır. Duyarlı görüntüler, basit problemlerden ortaya çıkan web kurallarıdır: dar bir cihaz geniş bir görüntü sundu. 480 piksel genişliğe sahip bir cep telefonu kullanıyorsanız, neden iki veya daha geniş olan görüntüleri (örneğin, üstün gönderi resimleri) yüklemelisiniz? Boyutların iki katı büyük olan görüntü, dosya boyutu açısından dört kat daha büyüktür. Mobil cihaz, boyutunu cihaz tarafından işlenebilecek genişliğe değiştirmek için büyük görüntüler içerdiğinde, sayfanın yüklenmesini yavaşlatır – özellikle nispeten yavaş ve kararsız bir bağlantıya sahip cep telefonundaki belada. Öte yandan, internetteki her görüntüyü daraltılmış bir cep telefonunun genişliğiyle sınırlayamayız. İhtiyacımız olan şey, cihazın genişliğine bağlı olarak farklı bir cihaza farklı bir görüntü boyutu sunmaktır. Duyarlı görüntü ile kastedilen şey budur. Duyarlı görüntünüz bir gün tarayıcı kodu muayeneninizi bir gün açabilir ve tarafından korkulabilir: <div class = "hizalama büyüklük-büyük wp-image-12558" src = "https: // i0 .wp .com/wspout.com/wp-content/uploads/2014/12/wordpress_srcset_example_one.png? yeniden boyut = 1024%2C687 & ssl = 1 "Alt =" WordPress Duyarlı Görüntüler Örnek "
Genişlik = “538” yükseklik = “361”> Bu, WordPress’e duyarlı görüntüler için bir işaretlemedir. Nasıl çalıştığını anlamak için bu örneği bileşenlerin bölümlerine ayıralım. Sınıf, Alt ve Genişlik: Değişmedi
Sadece duyarlı çizimlerde bir şey değil. Bu işaretleme parçası, WordPress’e duyarlı bir görüntü olsun ya da olmasın, sınıfı, ALT etiketlerini ve (neredeyse tamamen eskimiş) genişliğini ve (neredeyse tamamen eski) sert kodlanmış değerlerin genişliğini ve yüksekliğini belirlemek için bir wordPress yoludur. SRC: Şimdi bu yedek tanıdık görünmelidir, çünkü yanıt vermeyen görüntünün böyle çalışması budur: Görüntünün bulunabileceği bir URL olan bir SRC (“Kaynak”) özniteliği var. Duyarlı görüntüler için SRC, bir tarayıcı için bir görüntü işlevi nasıl yapılır (HI IE!) Duyarlı görüntüleri desteklemeyen bir geri dönüştür. Yani SRC’de olan şey, IE’de (ve kullanıcılar tarafından Siteyi ziyaret etmek için kullanılabilecek diğer modası geçmiş tarayıcılarda, IE dışındaki tüm ortak tarayıcıların duyarlı resimleri desteklemesine rağmen) sunulmasıdır. SRCSET: Bu farklı görüntü kaynakları koleksiyonu yenidir ve ana makine duyarlıdır. SRCSET, genişliğe bağlı olarak tarayıcı tarafından alınacak SRC (“Kaynak Koleksiyonu”) özniteliklerinin listesini tanımlar. SRCSET seçeneğinin ilkine bakalım: https://i0.wp.com/wspout.com/wp-content/uploads/2014/12/wordpress_srcset_example_one.png?ersize=1024%2C687&ssl=1 1024w bu aslında oluşur Boşluklarla ayrılmış iki parça:
https://i0.wp.com/wspout.com/wp-content/uploads/2014/12/wordpress_srcset_example_one.png?erize=1024%2C687&ssl=1: Bu, resim bağlantısı, kendisi, şeydir, Resmi görmek için tarayıcı (deneyin!). Bu görüntü bağlantısı size komik görünüyorsa, bunun nedeni resmi sunmak için cdn (içerik dağıtım ağı) kullanmasıdır. Kendi site bağlantınız https://mysite.com/media/ vb. Bu resmin uygulanacağı hedefin genişliğini belirleyen şey budur: başka bir deyişle, 1024W “Bu görüntü kaynağı 1024 piksel veya daha dar genişlik için geçerlidir.”
Ama “genişlik için geçerli” ne anlama geliyor? 1024px tarayıcının genel genişliğine atıfta bulunur mu? Bu bundan biraz daha karmaşık ve boyutların girdiği yer burası. Boyutlar: SRCSET Boyutlarından hangi görüntünün duyarlı görüntülerin önemli bir bileşeni olarak SRCSET ile işbirliği yaptığını gösterirken dikte kuralları. Boyutlar, tarayıcının tek tek incelenecek geniş ifadelerinin bir koleksiyonudur ve her bir ifade, tarayıcının geniş ifadesi doğruysa, takip edilmesi gereken kurallarla eşleştirilir. (Endişelenmeyin, sonraki birkaç paragraf bunu açıklığa kavuşturacaktır.) Duyarlı görüntü niteliklerimiz aşağıdaki gibi okunur: İngilizce okun, bu iki kurala uyacaktır:
“Tarayıcı genişliği 1.000 pikselse veya daha dar ise, tarayıcının genişliği en az% 100 olan SRCSET’in en küçük görüntüsünü kullanın.”
“Değilse, minimum 1.000 piksel genişliğe sahip en küçük görüntüyü kullanın.”
Böylece boyutlar, ilkden son genişlik ifadesine sırayla gider ve doğru ilk ifadede durur. WPSHOUT durumunda, boyutlarda yalnızca iki kural vardır: tarayıcının genişliği 1000 piksel veya daha dar ise geçerli olan biri (bu durumda 100VW geniş veya daha fazla genişliği olan SRCSET’in en küçük görüntüsü kullanılacaktır). ve her zaman geçerli olan biri (bu durumda 1000 piksel veya daha geniş olan en küçük SRCSET’in resim kullanılacaktır). WP_Calculate_Image_SISES ile boyutlardaki kuralları not olarak belirleyin, boyut boyutları, geçici bir durdurma noktası olarak yaklaşık 1000 piksel merkezli iki wpsot kuralının, WordPress’e duyarlı görüntüler için varsayılan olduğu için varsayılandır, çünkü wpsot’ta daha akıllı kuralları belirlemek için asla uğraşırız. Diğer bazı temalar, özellikle yirmi on altı gibi “resmi” temalar, daha akıllı ve daha özel boyutlarda değer temalarını belirlemek için WP_Calculate_Image_Sizes adlı bir WordPress filtre kancası kullanır. Yirmi on altı, boyutların özellikleri aşağıdaki gibi okunur: SRCSET ve Boyutları daha derin anlamak istiyorsanız, burada ve başka yerlerde iyi açıklanırlar. Ve Smashing Magazine, duyarlı WordPress görüntüleri için geniş bir ifade, kesme noktası ve kendi kurallarınızı ayarlamak için wp_calculate_image_eses nasıl kullanılacağını iyi açıkladı. WordPress Duyarlı Görüntünün, WordPress Duyarlı Görüntü Sisteminin özel görüntüsünün boyutu ile nasıl etkileşime girdiği, özel bir görüntü boyutuyla oldukça basit ve sağlıklı etkileşime girer. Uzun zamandır oldukça gergindim çünkü kendi özel görüntü boyutumu bir şekilde “kırık” yaptım
, yavaşlayın veya WordPress’e duyarlı görüntünün boyutunu etkiler (ki bu iyi anlamıyorum). Bu iki sistemin oldukça basit ve sağlıklı etkileşime girdiğini bildirmekten mutluluk duyuyorum: orijinal görüntü gibi aynı en boy oranına (geniş oran) yaptığınız her özel görüntü boyutu yalnızca SRCSET’e eklenecektir.
Orijinal görüntünün farklı bir en boy oranı ile yaptığınız her özel görüntü boyutu, WordPress’e duyarlı görüntü sistemi tarafından göz ardı edilecektir.
Nasıl çalıştığını göstermek için, yirmi on altı çocukların teması olan tema üzerine iki ekran görüntüsü alıyorum ve Boyut Kuralları. Bu, çocuk temasında herhangi bir özel görüntü boyutu yapmadan önce ilk ekran görüntüsüdür:
Büyütmek için tıklayın
Daha sonra Function.PhP çocuk temaları aşağıdaki kodu kullanarak iki özel görüntü boyutu yaptım: add_image_size (‘büyük boyutlu-soft-cop’, 1600, 1200, false); add_image_size (‘dev büyüklükte-crop’, 2000, 1500, true); Ardından, görüntüyü yeniden inceliyorum ve aşağıdaki ekran görüntülerini alıyorum:
Büyütmek için tıklayın
