Yüksek çözünürlüklü bir dünyada yaşıyoruz. Çoğumuz günde sekiz saatten fazla farklı ekran türlerine bakarak geçirdiğimiz için görüntülerin kalitesi ve bu ekranlarda bulunan karakterler çok önemlidir.

Yalnızca birkaç yıldır mevcut olmalarına rağmen, Retina ekranlar geleceğin yoludur. Retina ekranlardaki yüksek piksel yoğunluğu, görüntüleri net ve canlı hale getirir. Güzel, net görüntüleri kim sevmez?

Öğrenmek web sitesi oluştur Retina ekranlarıyla uyumlu olması, herhangi bir web geliştiricisi için önemli bir varlıktır. Ne yazık ki, web sitenizi Retina-Ready ekranlarla kullanıcı dostu hale getirmek için ideal, mükemmel bir çözüm yok.

Bu nedenle, birisinin en eksiksiz çözümü bulmasını beklerken, web sitenizi hazır hale getirmek için mümkün olan en iyi seçeneklerden bazılarına baktık. Bu şekilde, tüm cihazlarda Retina'nın bir şekilde veya başka şekilde göründüğü zaman geldiğinde yoldan çıkmazsınız.

Ama başlamadan önce, bakmak için zaman ayırın Bir WordPress tema nasıl kurulurKaç eklentileri WordPress yüklemeniz gerekir.

O zaman işe başlayalım!

Birden fazla görüntü dosyası oluşturma

Temel bilgilerle başlayalım. Web siteniz için Retina Modu desteği almanın en kolay yolu, farklı çözünürlüklerde birden fazla görüntü varyasyonu oluşturun. Bu, her bir çözünürlük türü (yani 1x) için bu klibin yüksek çözünürlüklü bir versiyonunu (yani 2x) oluşturmanız gerektiği anlamına gelir.

Temel olarak, aynı dosyanın birden çok sürümünü oluşturabilir ve WP Retina 2x gibi bir eklenti veya retina.js gibi bir komut dosyası kullanarak her bir görüntü boyutunun "@ 2x" sürümlerini otomatik olarak oluşturabilir veya "@ 2x" görüntüleri bulabilir ve her cihaza karşılık gelen boyut.

Aynı görüntünün birden çok sürümünü oluşturmanın zaman alıcı bir süreç olabileceği doğrudur. Ne yazık ki, bu görüntüleri sizin için otomatik olarak oluşturan hızlı bir yöntem yoktur. Ancak, resimlerinizi hızlı bir şekilde onarmanıza izin veren birkaç Photoshop eklentisi var.

Eklentiler "gibi Yeniden Onat Retina ekranlar için tasarımlarınızı kolayca optimize etmenize izin veren bir dizi Photoshop eylemidir. Photoshop'un daha eski bir sürümünü kullanıyorsanız (CC öncesi) " Dört Temelde mevcut Photoshop Generator aracının yaptığı her şeyi, ancak Photoshop'un eski sürümleri için yapar.

Ölçeklenebilir Vektör Grafikleri (SVG)

Retina modu ile devam etmenin en kolay yolu, web sitenizde Ölçeklenebilir Vektör Grafikleri (SVG) kullanmaktır. SVG, XML tabanlı bir vektör görüntü formatıdır. Adından da anlaşılacağı gibi, bir SVG görüntüsü ölçeklenebilir, bu da görüntülerin gerektiği kadar (veya çok az) gerilebilirken net ve net olabileceği anlamına gelir. Retina Modunu çok fazla çaba harcamadan uygulamanın hızlı ve kolay bir yolu olabilir.

Ayrıca Oku: Geleneksel PNG ve JPG yerine WebP görüntüleri nasıl sağlanır?

Ancak, SVG'yi WordPress'te kullanmanın iki dezavantajı vardır. Birincisi, bir vektör formatı olduğu için SVG'nin tüm görseller için uygun olmamasıdır. Böylece logolar ve simgeler için SVG'yi kullanabilirsiniz, ancak fotoğraflar gibi dosyalar için kullanamazsınız (web siteniz için yüksek çözünürlüklü görüntüler kullanmak isterseniz bu biraz acı verici olacaktır.). Ancak basit simgeler, animasyonlar veya resimler kullanmak istiyorsanız, SVG dosyaları kesinlikle Retina uyumlu bir web sitesi için bir seçenek olabilir.

SVG'yi WordPress'te kullanmanın ikinci dezavantajı, güvenlik endişeleri nedeniyle WordPress ile resmi olarak uyumlu bir format olmamasıdır. Bir SVG dosyası esasen bir XML dosyası olduğundan, bu dosyayı açar XML dosya biçimiyle ilişkili tüm bilinen güvenlik açıklarızorlayıcı analiz, XML External Entity Attacks (XEE), XML Denial of Service Attack (XDoS) saldırıları vb.

Ancak, web siteniz için SVG desteğini etkinleştirmenin, SVG dosyalarınızı güvenli hale getirmenin bir yolu vardır.

WordPress'te SVG güvenli bir şekilde nasıl etkinleştirilir

Güvenli SVG web sitenizde SVG dosya desteğini güvenli bir şekilde etkinleştirmenize izin veren bir eklentidir. Bu eklenti, web sitenizi etkileyen olası XML güvenlik açıklarını önlemek için SVG dosyalarınızın temizlenmesini sağlar.

Tehlikeli ve potansiyel olarak web siteniz için zararlı olduğundan, MIME türünün SVG'den WordPress medya kitaplığına yüklemeye izin vermesine izin veren eklentilerden uzak durun. Dolayısıyla, SVG formatını WordPress'te kullanmak gerçekten cazipse, bunu güvenli bir şekilde yaptığınızdan ve gördüğünüz ilk SVG eklentisini indirmediğinizden emin olun.

Blogumuzu okuyarak blogunuza daha fazla dönüşüm sağlayın Blogunuza daha fazla ziyaretçi oluşturmak 15 içerik türleri

WordPress'te Retina uyumluluğunu entegre eden bazı eklentiler

Retina Modu ile uyumlu bir web sitesi kurmaya çalışırken hayatınızı çok daha kolay hale getirebilecek birkaç komut dosyası ve eklenti vardır. Ancak, daha önce de belirtildiği gibi, mevcut eklentilerin ve komut dosyalarının çoğu, resimlerinizi yalnızca yüksek çözünürlüklü ekranlar için yüksek çözünürlüklü resimlerle değiştirin. Bir SVG gibi esnemezler: yine de farklı çözünürlüklerde birden çok görüntü oluşturmanız gerekir.

1 - retina.js

retina.js yüksek çözünürlüklü görüntüleri sunmak için en çok kullanılan komut dosyalarından biridir. Bu, Retina ekranlı cihazlara yüksek çözünürlüklü görüntülerin sunulmasını kolaylaştıran açık kaynaklı bir komut dosyasıdır.

Komut dosyası, bu görüntünün sunucuda yüksek çözünürlüklü bir sürümünün olup olmadığını görmek için sayfadaki her görüntüyü kontrol eder. Yüksek çözünürlüklü bir varyant varsa, komut dosyası standart çözünürlüğü yüksek çözünürlüklü görüntü ile değiştirir. Bu, web sitenizde Retina ekranlar için görüntü sunmanın en yaygın yollarından biridir.

Ayrıca bakınız: GIF, Emojiler veya Memes: WordPress web siteleri için iyi bir fikir mi?

2 - Yoğun

Retina.js ile benzer şekilde, Yoğun görüntüleri piksel oranı biçiminde sunmanın kolay bir yolunu sunan bir jQuery eklentisidir. Komut dosyası, gerektiğinde Retina modu uyumlu görüntüler olarak hizmet verecek "img" etiketlerini hedefleyen başlatmanın $ .fn.dense () yöntemini çağırır.

Bu nedenle, tüm görüntüleri tıpkı retina.js betiği gibi ilgili yüksek çözünürlüklü sürümüyle değiştirir.

3 - WP Retina 2x

İkincisi, büyülü bir Retina görüntü oluşturucuya benzetilebilir.

WP Retina 2x Yüksek DPI cihazların gerektirdiği görüntü dosyalarını oluşturan ve bunları buna göre ziyaretçilerinize görüntüleyen bir eklentidir. Önceki iki komut dosyasından farklı olarak, bir ilk görüntüden farklı çözünürlükte görüntüler oluşturur. Dolayısıyla, farklı çözünürlüklerde farklı görüntüleri manuel olarak oluşturmaktan pek memnun değilseniz, bu seçenek tam size göre.

Bu eğitim için hepsi bu, umarım resimlerinizi Retina Ready görüntüsüne dönüştürmenize izin verir.

Ayrıca bazı premium WordPress eklentilerini keşfedin  

diğer kullanabilirsiniz WordPress eklentileri modern bir görünüm vermek ve blogunuzun veya web sitenizin kullanımını optimize etmek için.

Size, bu konuda yardımcı olacak bazı premium WordPress eklentileri sunuyoruz.

1. Bir Fantezi WordPress Yazar Listesi

Adından da anlaşılacağı gibi eklenti Süslü WordPress Yazar Listesi web siteniz için yazarların listesini bir widget'ta görüntüler. Basit bir kullanıcı arayüzüne sahiptir. herhangi bir yazarın bilgilerini göster kenar çubuğunda. Tek yapmanız gereken yazar widget'ını kenar çubuğuna sürüklemek ve eklenti işi yapacak.

Süslü bir wordpress yazar listesi wordpress eklentisi

Başlıca özellikleri diğerleri arasında: olasılık blog yazarlarını görüntülemek yeni ziyaretçileri çekmek için eğlenceli bir şekilde, kenar çubuğunda veya sayfada bir yazar listesini görüntüleme yeteneği, bir yarışma başlat blogunuzun yazarları arasında, duyarlı bir düzen, kısa kod desteği ve çok daha fazlası.

İndir | gösteriWeb hosting

2. Kolay İçindekiler

Ce WordPress Plugin kullanıcı dostu, gönderilerinize, sayfalarınıza ve özel gönderi türlerinize bir içindekiler tablosu eklemenize olanak tanır. Başlıcaları olmak üzere birçok özelliği vardır:

içindekiler tablosunun otomatik yönetimi, etiket desteği Rankin Math eklenti desteği, Gutenberg gibi birkaç sayfa düzenleyiciyle uyumluluk, Divi, Elementor, WPBakeri Sayfa Oluşturucu ve diğerleri, yayınlarınızın hangi sayfalarda görüntülenmesini istediğinizi seçme imkanı, içindekiler tablosunun belirli sayfalara otomatik olarak eklenmesi ve diğerleri.

Bu bir WordPress Plugin İçindekiler tablosunu görüntülemek için ihtiyaç duyacağınız her şeye sahip ücretsiz bir yazılımdır, bu nedenle ilk tercihiniz olarak onu seçmekten çekinmeyin.

Indir | gösteriWeb hosting

3. WooCommerce Gelişmiş Toplu Düzenle

Ürün kataloğunuzu düzenli olarak düzenliyor musunuz? İster 100 ürününüz, ister 10.000 ürününüz olsun, bu WordPress Plugin premium benim naçizane fikrimce “Olması gereken”: (Aklıma ilk gelen kelime bu).

Sadece birkaç dolar için, eklenti WooCommerce Gelişmiş toplu düzenleme hayatı kolaylaştıracak ve size zaman kazandıracak. Tereddüt yok, bomba.

Indir gösteri | Web hosting

Önerilen Kaynaklar

Web sitenizi oluşturmanıza ve yönetmenize yardımcı olacak diğer önerilen kaynaklar hakkında bilgi edinin.

Sonuç

Buraya ! Bu eğitim için bu kadar, umarım web siteniz için Retina'ya Hazır görüntüler oluşturmanıza izin verir. Çekinme En sevdiğiniz sosyal ağlarda arkadaşlarınızla paylaşın

Ancak, ayrıca kaynaklarımız, İnternet sitesi oluşturma projelerinizi gerçekleştirmek için daha fazla öğeye ihtiyacınız varsa, WordPress blog oluşturma.

Öneriniz veya yorumunuz varsa, bunları bölümümüzde bırakın. Yorumlar.

... 

Pinterest It pin