Retina Hazır WordPress Teması Oluşturmak İçin 5 İpucu

Bir WordPress teması, retina ekranların yüksek piksel yoğunluğunu hesaba katarsa ​​ve bu ekranlar için uygun boyutta görüntüler sunarsa retinaya hazırdır. Bir WordPress teması retinasını hazır hale getirirken göz önünde bulundurulması gereken birkaç şey vardır: 1. Yüksek çözünürlüklü görseller kullanın. Retina ekranlar, standart bir ekranın 2 veya 3 katı piksel yoğunluğuna sahiptir, bu nedenle bu cihazlarda keskin görünmesi için resimlerinizin iki veya üç katı büyüklüğünde olması gerekir. 2. Duyarlı bir tasarım kullanın. Duyarlı bir tasarım, temanızın retina ekranlar dahil tüm cihazlarda iyi görünmesini sağlayacaktır. 3. WP Retina 2x gibi bir eklenti kullanın. Bu eklenti, resimlerinizin yüksek çözünürlüklü versiyonlarını otomatik olarak oluşturacak ve bunları retina cihazlarına sunacaktır. 4. Resimlerinizi optimize edin. Daha hızlı yükleme süreleri için resimlerinizi optimize ettiğinizden emin olun. 5. Bir önbellek eklentisi kullanın. Önbelleğe alma eklentisi, retina ekranlar dahil tüm cihazlarda sayfalarınızın yüklenmesini hızlandırmaya yardımcı olur. Bu ipuçlarını takip ederek, WordPress temanızın retinaya hazır olduğundan emin olabilirsiniz.

Önümüzdeki haftalarda WordPress Temalarımız için Retina desteği sağlanacağı için bunları nasıl oluşturduğumuzu sizlerle paylaşmak istedim. Temanızı yenilemek, görüntüleri iki katı boyutta (ancak aynı boyutlarda) oluşturarak Retina cihazlarının boyutunu (aynı boyutlara sahip) iki katına çıkaracaktır. 100×200'lük bir görüntüyü görüntülemek için tarayıcının onu 100×400'e sıkıştırması gerekir. CSS arka plan resimleri ve Sprite, HTML etiketleri kullanmadıkları için Retina.js ile değiştirilemez. Web sitenizin retina ekranda net ve duyarlı görünmesi için simgeler ve düğmeler güncellenmelidir. Font Awesome için belgeler mükemmeldir ve en sağlam font simgesi kitaplıklarından biridir. Yazı tipi simgelerinin çoğu, yalnızca dosyaları yükleyerek ve @Font-face bildirimini ekleyerek yüklenir.

Ölçeklenebilir ve özelleştirilebilir olan bu şablona Facebook logosu gibi harika yazı tipi simgeleri de ekleyebilirsiniz. Retina için hazır bir site simgesi oluşturmanın en basit yolu, basit bir Java betiği kullanmaktır. 32×32 boyutunda bir Photoshop belgesi oluşturun, görüntünüzü ekleyin ve Photoshop kullanarak png24 (saydamlıklı) olarak kaydedin.

Bir Görüntüyü Retina'ya Nasıl Hazır Yapabilirim?

Bir görüntüyü retinaya hazır hale getirmek için, görüntünün orijinalinin iki katı büyüklüğünde bir sürümünü oluşturmanız gerekir. Bu, Photoshop gibi herhangi bir görüntü düzenleme yazılımında yapılabilir. Resmin daha büyük versiyonunu oluşturduktan sonra, onu ayrı bir dosya olarak kaydetmeniz gerekecektir. Resmi web sitenize yüklediğinizde, tarayıcıya resmin daha büyük sürümünü yüklemesini söylemek için kodu kullanmanız gerekecektir.

FooGallery, retinaya hazır görüntüleri görüntülemek için Görüntüler sekmesinde etkinleştirilebilir. Retina boyutları seçildiğinde ve Varsayılanları Tüm Galerilere Uygula'ya tıklandığında, mevcut tüm Galeriler için Retina formatında görüntülenmeye hazır resimler oluşturulacaktır. Yeni bir galeri eklerseniz, otomatik olarak retina boyutunda görüntüler oluşturacaktır. FooGallery görüntüsü normal veya Retina ekranda görüntülendiğinde, görüntünün HTML'si otomatik olarak 300*300 piksel olarak görüntülenecek şekilde optimize edilir. Galerileriniz için Retina resim boyutlarını etkinleştirdiyseniz, FooGallery'de görüntüleyeceğiniz resimlerin bir Retina cihazında görüntülenecek kadar büyük olduğundan emin olun. Örneğin, 600600'lük bir görüntüyü iki boyutlu retina cihazlarda net bir şekilde görüntülemek istiyorsanız, 12001.200 çözünürlükte galeri görüntülerini yüklemeniz gerekir. 2x ve 3x retina ayarlarını etkinleştirdiğinizde, baş parmağınızın üç versiyonunu oluşturabileceksiniz.

Web Sitenizi Retinaya Hazır Hale Getirme

Retinaya hazır bir web sitesini görüntülerken, görüntü, yüksek çözünürlüklü bir cihazdaki standart tanımlı bir ekranda olduğundan daha yüksek bir çözünürlükte görüntülenir. Bu daha yüksek çözünürlük, görüntünün daha ayrıntılı bir şekilde sunulmasını sağlayarak, anlaşılmasını ve görülmesini kolaylaştırır.
Web siteniz için retinaya hazır yazılım kullanmayı düşünüyorsanız, mümkün olduğunca Ölçeklenebilir Vektör Grafikleri (SVG) kullanmanız önerilir. Bu grafik biçimi XML tabanlıdır ve yüksek kaliteli görüntülere sahiptir. SVG görüntülerini görüntülemek için, XML dosyalarına veya bu dosyaları gösteren cep telefonlarına İnternet tarayıcıları aracılığıyla erişilebilir.
Kullanmadan önce retinaya hazır bir görüntü kullanmanız önerilir. Bunu, “2x” olarak bilinen 1920×1920 piksellik bir görüntü kullanarak başarabilirsiniz. Görsel web sitesinde 640 piksel genişliğinde kalacağı için, iki katı boyutta bir görsel kullanarak pikselin yoğunluğunu artırıyorsunuz.
Retina için hazır olmayan bir görüntü kullanıyorsanız, onu retinada görüntülenmek üzere optimize edin. Bu, "4x çözünürlük" olarak da bilinen 4x çözünürlüklü bir görüntü kullanılarak gerçekleştirilebilir. Grafiğin 1024 piksel genişliğindeki boyutuna rağmen, boyutunun dört katı olduğu için sitenizde görünmeye devam edecektir.

Retina için hazır WordPress Teması Nedir?

Retinaya hazır WordPress teması, yüksek çözünürlüklü retina ekrana sahip cihazlarla çalışmak üzere tasarlanmış bir temadır. Bu, temanın iPhone ve iPad gibi cihazlarda keskin ve net görüneceği anlamına gelir. Gittikçe daha fazla insan retina cihazlarını kullandıkça, retinaya hazır temalar giderek daha popüler hale geliyor.

Duyarlı veya retinaya hazır WordPress temaları arıyorsanız lütfen aşağıdaki listeyi bulun. Genel olarak bu temaların kullanımı kolaydır, masaüstünde, tabletlerde ve akıllı telefonlarda iyi görünür ve sizin için fazla çaba gerektirmez. Onlarla istediğiniz herhangi bir düzeni oluşturmak için istediğiniz herhangi bir sayfa oluşturucuyu kullanabilirsiniz. Retina için hazır bir WordPress teması olan Inovado, çok sayıda güçlü özelleştirme seçeneğiyle birlikte gelir. Bir başka premium WordPress teması, girişimciler ve yeni başlayanlar için tasarlanmış Superhero'dur. Bu WordPress teması, temiz bir ızgara sistemi sayesinde retinaya hazır ve duyarlı. Çok yönlü bir tema olan Wiz, her büyüklükteki işletme, yeni başlayanlar ve küçük kuruluşlar tarafından kullanılabilir.

Tema özelleştirici, Pin Oluşturucu – Duyarlı WordPress Blog Teması'nı kurmayı ve özelleştirmeyi kolaylaştırır. Bu WordPress Teması, HTML5 / CSS3 içeriğine sahiptir ve Twitter Bootstrap'a dayanmaktadır. Retinaya hazır, tarayıcılar arası uyumlu ve tamamen duyarlı. Prothoma – Business WordPress Teması, dijital ajanslar ve işletmeler de dahil olmak üzere çeşitli işletmeler tarafından kullanılabilir. Pin Auto Spa, otomatik detaylandırma WordPress temasıdır. Bu retinaya hazır WordPress teması, araba yıkama işletmeleri, oto tamir ve mekanik atölyelerinin yanı sıra araba hizmetleri için idealdir. Legatus, duyarlı tasarım sağladığı için bloglar, çevrimiçi dergiler, çevrimiçi gazeteler ve diğer yayınlar için ideal bir seçimdir.

Net Bir Web Sitesi İçin Retina Görüntülerini Etkinleştirin

Eklentiyi WordPress yönetici panelinde kurduktan sonra “Görünüm” sekmesine tıklayın. Sayfanın “WP Retina 2x” bölümünde bir “ Retina Görüntüleri ” seçeneği bulunur. Retina görüntülerini etkinleştirmek için “Etkinleştir” düğmesine gidin.

WordPress'e Retina Resmini Nasıl Eklerim?

WordPress'e bir retina görüntüsü eklemek iki adımlı bir işlemdir: önce medya kitaplığınıza daha yüksek çözünürlüklü bir görüntü eklemeniz ve ardından temanızın function.php dosyasına bir kod satırı eklemeniz gerekir. Medya kitaplığınıza daha yüksek çözünürlüklü bir resim eklemek için, resminizin normal resminizin iki katı büyüklüğünde bir kopyasını yüklemeniz yeterlidir. Örneğin normal görüntünüz 400x300px ise, retina görüntünüz 800x600px olmalıdır. Medya kitaplığınızda retina görüntünüz olduğunda, temanızın functions.php dosyasına bir kod satırı eklemeniz gerekir. Bu kod satırı, WordPress'e retina görüntüsünü retina cihazlarına sunmasını söyleyecektir: add_filter( 'wp_get_attachment_image_src', 'retina_support_src' ); function retina_support_src( $image ) { $image[0] = str_replace( '.jpg', '@2x.jpg', $image[0] ); $resmi döndür; } Bu kod yerinde olduğunda, WordPress sitenizi ziyaret eden herhangi bir retina cihazına retina görüntüsünü otomatik olarak sunacaktır.

WordPress Retina Görüntüleri

WordPress için retina görüntülerinin nasıl oluşturulacağına dair ipuçları istediğinizi varsayarsak: WordPress web siteniz için görüntüler oluştururken, standart görüntülerinizden iki kat daha büyük sürümler oluşturduğunuzdan emin olun. Örneğin, standart görüntünüz 400 piksel genişliğindeyse, 800 piksel genişliğinde bir retina görüntüsü oluşturun. Görüntülerinizi oldukları gibi adlandırın ve ardından retina görüntü dosyası adına “@2x” ekleyin. Bu nedenle, standart görüntünüz “logo.jpg” olarak adlandırılmışsa, retina görüntünüz “[e-posta korumalı]” olarak adlandırılacaktır. Web sitenizi yavaşlatmamaları için retina resimlerinizi sıkıştırdığınızdan emin olun. Bu kadar! Bu basit ipuçlarını takip ederek, görüntülerinizin retina cihazları da dahil olmak üzere tüm cihazlarda harika görünmesini sağlayabilirsiniz.

Retina görsellerini uygulamazsanız, web siteniz tüm kullanıcılar için daha yavaş olacaktır. Piksellerin alanı standart bir görüntüdekiyle aynıdır, bu da daha keskin ve daha parlak görüntüler sağlar. Apple olmayan modern bir cihaz @2x görüntüsünü görüntülediğinde, onu daha büyük bir görüntü olarak değerlendirir. Retina görüntüleri, WordPress siteleri için en yaygın olarak kullanılan Retina görüntü oluşturucu olan WP Retina 2X kullanılarak oluşturulur. Hizmet ayrıca Retina ekranı olmayan kullanıcılar için düzenli görüntüler sağlar. Test etmek için bir Apple cihazınız yoksa, özel bir ekranda bir görüntünün mevcut olup olmadığını nasıl anlarsınız? Chrome geliştirme araçları bunu yapmanıza yardımcı olabilir.

Ölçeklenebilir Vektör Grafikleri – Web Siteniz İçin Retina Görüntüleri Oluşturmanın En İyi Yolu.

WordPress retina görüntüsü , 4K monitörde, Windows 10 dizüstü bilgisayarda veya tablette görülebilen yüksek çözünürlüklü bir görüntüdür. Mümkün olduğunda Ölçeklenebilir Vektör Grafiklerini (SVG) kullanarak web sitenizin retina görüntüsünü kolayca oluşturabilirsiniz. Görüntüleri retina ekranlar için optimize etmeye gelince, optimize edilmiş 1920×130 piksel genişliğinde bir görüntü kullanarak bunları maksimuma çıkarabilirsiniz.