WordPress Görüntüler Duyarlı Nasıl Yapılır
WordPress gerçekten güçlü bir platformdur. Duyarlı bir tema oluşturmak ve bunları entegre etmek, temaların temellerini öğrendikten sonra oldukça kolaydır. Diğer yandan duyarlı görüntüler, WordPress'in kutudan çıkardığı bir şey değil. Her bir görüntü boyutunu manuel olarak oluşturma yoluna gidebilir, sonra HTML editöründe görüntü etiketini, srcset özniteliklerini ve her görüntüyü elle yazabilirsiniz. Bu sadece zaman kazanmakla kalmayacak, HTML-okuryazar olmayan herhangi bir yönetici kullanıcı için bir sorun olabilir.
Neyse ki, WordPress'in tüm ağır kaldırmayı yapmasının bir yolu var. Tek bir görüntü yüklemesinden tüm görüntü boyutlarını oluşturabilir, daha sonra bir eklenti aracılığıyla, yazarın bir resim eklemeyi seçtiği herhangi bir yere resim etiketini ve srcset özniteliklerini uygulayabilirsiniz.
1. Adım: daha fazla resim boyutu oluşturmak için functions.php dosyasını değiştirin
Bir görüntüyü her yüklediğinizde WordPress onu yerel boyutuna kaydeder. Ayrıca, bu standart boyutlarda otomatik olarak yeniden boyutlandırılmış 3 kopya üretir (yükseklik veya genişlik resim oranına göre değişebilir):
- Küçük resim (150 × 150)
- Orta (300 × 300)
- Büyük (1024 × 1024)
Bu, herhangi bir görüntü boyutu yapmak için özelleştirilebildiği için gerçekten güçlü bir özelliktir. Bu, farklı boyutlarda bir görüntünün birden çok kopyasını oluşturmanıza gerek olmadığı anlamına gelir. Sadece tek bir resim yüklüyorsunuz ve WordPress yeniden boyutlandırılan kopyaları oluşturur.
Bu functions.php dosyasını değiştirerek yapılır. Yeni resim boyutları eklemek için, add_image_size işlevine çağrı eklemeniz gerekir. İşte dört yeni görüntü boyutu ekleyen bir örnek:
add_image_size( 'sml_size', 300 );add_image_size( 'mid_size', 600 );add_image_size( 'lrg_size', 1200 );add_image_size( 'sup_size', 2400 );Fonksiyona yapılan her çağrı bir isim (bu yüzden WordPress boyutu belirleyebilir) ve bir genişlik içerir. Yeni boyutlar 300, 600, 1200 & 2400 piksel genişliğinde olacak. Add_image_size işlevinin, WordPress'in de yüksekliğini ayarlamasına veya görüntüyü kırpmasına neden olması mümkündür, ancak yukarıdaki örnek, orijinal görüntü en boy oranını koruyacaktır. ( Add_image_size işlevi hakkında daha fazla bilgi bulunabilir. WordPress Kodeksi .)
Yukarıdaki örnekte, eklenen dört yeni görüntü boyutu gösterilmektedir, ancak daha fazlasını veya daha fazlasını eklemek isteyebilirsiniz… Bu, tema tasarımınıza dayalı olacaktır. Artık bir resim WordPress'e her yüklendiğinde, yeni görüntü boyutlarını üretecektir. Bir sonraki adım, bunları HTML'ye dahil etmektir.
Adım 2: RICG Responsive Images eklentisini yükleyin
WordPress'in tüm görüntü boyutlarını çıkarması için yeni bir eklentinin yüklenmesi gerekir: RICG Duyarlı Görüntüler Eklenti. Yüklendikten ve etkinleştirildikten sonra, tüm resim boyutları, srcset özniteliği aracılığıyla görüntü etiketine eklenecektir.
Genellikle bir görüntü WordPress'te bir sayfaya eklendiğinde, çıktı HTML şöyle görünür:
Src özniteliğinde tek bir görüntü var.
Eklenti yüklendiğinde, HTML şöyle görünecektir:
Tüm yeni görüntü boyutları srcset özniteliği ile eklenmiştir.
Eklenti de içerir Picturefill.js Resim öğesinin ve img öğesinin yeni yanıt öznitelikleri için destek ekleyen duyarlı bir görüntü çok dolgusu. Bu, artık resim etiketine dahil edilen srcset öznitelikleriyle birlikte görüntülerinizi duyarlı kılan şeydir.
Görüntüleriniz artık duyarlı
Artık web sitenizdeki görseller yanıt verecek - tarayıcı indirmek için en uygun resmi seçecektir.
Daha küçük ekranlı cihazlardaki kullanıcılar daha küçük resimler alacaktır. Web siteniz daha hızlı yükleneceğinden, bu görüntüler daha hızlı yüklenecek, kullanıcıların bant genişliğinden daha azına ihtiyaç duyacaklar. Daha büyük ekranlı cihazlardaki kullanıcılar daha büyük görüntülere sahip olacak. Piksellenmiş veya daha az kaliteli görünmeyeceklerdir.
Bu yöntemde sadece bir potansiyel sorun var: RICG Responsive Images eklentisi yüklendikten sonra sadece WordPress'e yüklenen resimlerle çalışacaktır. Çalıştığınız yepyeni bir web sitesi ise bu bir sorun olmayabilir, ancak mevcut içeriğe sahip mevcut bir web sitesi ise, functions.php içinde eklediğiniz yeni görüntü boyutları oluşturulmayacaktır. Neyse ki, tüm görüntüleri yeniden eklemeniz gerekmez - yardımcı olabilecek bir eklenti var.
3. Adım: Görüntü boyutlarını yeniden oluşturmak için eklentiyi yükleyin (isteğe bağlı)
Regenerate Thumbnails Küçük Resimleri Yeniden Oluştur eklenti, mevcut tüm resim eklerinin içinden geçecek ve yeni görüntü boyutlarını functions.php içinde oluşturulan yenilere göre yeniden oluşturacak - gerçek bir zaman tasarrufu ve sadece tek bir düğmenin tıklanmasını gerektirir.
Yüklendikten sonra, Araçlar -> Regen'e gidin. Küçük resimlerin ardından “Tüm Küçük Resimleri Yeniden Oluştur” düğmesine tıklayın. Bir durum çubuğu görünecek ve kaç resmin yeniden boyutlandırıldığıyla ilgili bilgileri göreceksiniz.
Şimdi, web sitenizdeki tüm mevcut resimler, srcset özniteliği aracılığıyla görüntü etiketini kullanarak doğru bir şekilde çıkacaktır .
Öne çıkan görseller cihaz resmi ve mobil cihaz resmi Shutterstock üzerinden.