5 Tips Untuk Membuat Tema WordPress Retina Ready

Tema WordPress siap untuk retina jika memperhitungkan kepadatan piksel tinggi dari tampilan retina dan menyajikan gambar dengan ukuran yang sesuai untuk tampilan ini. Ada beberapa hal yang perlu dipertimbangkan saat menyiapkan retina tema WordPress: 1. Gunakan gambar beresolusi tinggi. Layar retina memiliki kerapatan piksel 2 atau 3 kali lipat dari layar standar, jadi gambar Anda harus dua atau tiga kali lebih besar agar terlihat tajam di perangkat ini. 2. Gunakan desain yang responsif. Desain responsif akan memastikan bahwa tema Anda terlihat bagus di semua perangkat, termasuk tampilan retina. 3. Gunakan plugin seperti WP Retina 2x. Plugin ini akan secara otomatis menghasilkan versi resolusi tinggi dari gambar Anda dan menyajikannya ke perangkat retina . 4. Optimalkan gambar Anda. Pastikan untuk mengoptimalkan gambar Anda untuk waktu pemuatan yang lebih cepat. 5. Gunakan plugin caching. Plugin caching akan membantu mempercepat pemuatan halaman Anda di semua perangkat, termasuk tampilan retina. Dengan mengikuti tips ini, Anda dapat memastikan bahwa tema WordPress Anda siap untuk retina.

Karena dukungan Retina akan tersedia untuk Tema WordPress kami dalam beberapa minggu mendatang, saya ingin membagikan cara kami membuatnya dengan Anda. Merenovasi tema Anda akan menggandakan ukuran perangkat Retina (dengan dimensi yang sama) dengan merender gambar dua kali ukuran (tetapi dengan dimensi yang sama). Untuk menampilkan gambar 100×200, browser harus mengompresnya hingga 100×400. Gambar background CSS dan Sprite tidak dapat digantikan oleh Retina.js karena tidak menggunakan tag HTML. Ikon dan tombol harus diperbarui agar situs web Anda terlihat tajam dan responsif di layar retina. Dokumentasi untuk Font Awesome sangat bagus, dan ini adalah salah satu pustaka ikon font yang paling kuat. Mayoritas ikon font dipasang hanya dengan mengunggah file dan menambahkan deklarasi @Font-face.

Anda juga dapat menambahkan ikon font keren seperti logo Facebook ke template ini, yang dapat diskalakan dan dapat disesuaikan. Cara paling sederhana untuk membuat favicon retina-ready adalah dengan menggunakan skrip Java sederhana. Cukup buat dokumen Photoshop pada ukuran 32×32, tambahkan gambar Anda, dan simpan sebagai png24 (dengan transparansi) menggunakan Photoshop.

Bagaimana Saya Membuat Gambar Retina-siap?

Untuk membuat gambar retina -siap, Anda perlu membuat versi gambar yang dua kali ukuran aslinya. Ini dapat dilakukan di perangkat lunak pengedit gambar apa pun, seperti Photoshop. Setelah Anda membuat versi gambar yang lebih besar, Anda harus menyimpannya sebagai file terpisah. Saat Anda mengunggah gambar ke situs web Anda, Anda harus menggunakan kode untuk memberi tahu browser agar memuat versi gambar yang lebih besar.

FooGallery dapat diaktifkan di tab Gambar untuk menampilkan gambar yang siap untuk retina. Saat memilih ukuran Retina dan mengklik Terapkan Default ke semua Galeri, gambar yang siap ditampilkan dalam format Retina akan dibuat untuk semua Galeri yang ada. Jika Anda menambahkan galeri baru, secara otomatis akan menghasilkan gambar berukuran retina. Saat gambar FooGallery ditampilkan pada layar normal atau Retina, HTML gambar secara otomatis dioptimalkan untuk ditampilkan sebagai 300*300 piksel. Jika Anda telah mengaktifkan ukuran gambar Retina untuk Galeri Anda, pastikan bahwa setiap gambar yang akan Anda tampilkan di FooGallery cukup besar untuk ditampilkan di perangkat Retina. Misalnya, jika Anda ingin menampilkan gambar 600600 dengan jelas pada perangkat retina dua dimensi, Anda harus mengunggah gambar galeri dengan resolusi 12001.200. Saat Anda mengaktifkan pengaturan retina 2x dan 3x, Anda akan dapat membuat tiga versi ibu jari Anda.

Membuat Situs Web Anda Siap untuk Retina

Saat melihat situs web yang siap untuk retina, gambar ditampilkan pada resolusi yang lebih tinggi daripada pada tampilan definisi standar pada perangkat definisi tinggi. Resolusi yang lebih tinggi ini memungkinkan penyajian gambar yang lebih detail, sehingga lebih mudah dipahami dan dilihat.
Jika Anda ingin menggunakan perangkat lunak retina-ready untuk situs web Anda, disarankan agar Anda menggunakan Scalable Vector Graphics (SVG) sebanyak mungkin. Format grafik ini berbasis XML dan memiliki gambar berkualitas tinggi. Untuk melihat gambar SVG, file XML atau ponsel yang menampilkan file tersebut dapat diakses melalui browser Internet.
Disarankan agar Anda menggunakan gambar yang siap untuk retina sebelum menggunakannya. Anda dapat melakukannya dengan menggunakan gambar 1920x1920 piksel, yang dikenal sebagai "2x." Karena gambar akan tetap berada di situs web dengan lebar 640 piksel, Anda meningkatkan kerapatan piksel dengan menggunakan gambar berukuran dua kali lipat.
Jika Anda menggunakan gambar yang belum siap untuk retina, optimalkan untuk ditampilkan di retina. Ini dapat dicapai dengan menggunakan gambar beresolusi 4x, juga dikenal sebagai “resolusi 4x”. Meskipun grafik berukuran lebar 1024 piksel, grafik akan tetap muncul di situs Anda karena ukurannya empat kali lipat.

Apa itu Tema WordPress Retina-ready?

Tema WordPress retina-ready adalah tema yang telah dirancang untuk bekerja dengan perangkat yang memiliki layar retina resolusi tinggi. Artinya tema akan terlihat tajam dan jelas di perangkat seperti iPhone dan iPad. Tema siap retina menjadi semakin populer karena semakin banyak orang yang menggunakan perangkat retina.

Silakan temukan daftar di bawah ini jika Anda mencari tema WordPress yang responsif atau retina-ready . Tema-tema ini, secara keseluruhan, mudah digunakan, terlihat bagus di desktop, tablet, dan ponsel cerdas, dan tidak memerlukan banyak usaha dari Anda. Anda dapat menggunakan pembuat halaman apa pun yang Anda inginkan untuk membuat tata letak apa pun yang Anda inginkan dengannya. Inovado, tema WordPress yang siap untuk retina, hadir dengan sejumlah besar opsi penyesuaian yang kuat. Tema WordPress premium lainnya adalah Superhero, yang dirancang untuk pengusaha dan pemula. Tema WordPress ini siap retina dan responsif, berkat sistem grid yang bersih. Wiz, tema serbaguna, dapat digunakan oleh bisnis dari semua ukuran, startup, dan organisasi kecil.

Penyesuai tema mempermudah penyiapan dan penyesuaian Pembuat Pin – Tema Blog WordPress Responsif . Tema WordPress ini memiliki konten HTML5 / CSS3 dan didasarkan pada Twitter Bootstrap. Ini siap untuk retina, kompatibel lintas-browser, dan sepenuhnya responsif. The Prothoma – Business WordPress Theme dapat digunakan oleh berbagai bisnis, termasuk agensi digital dan bisnis. Pin Auto Spa adalah tema WordPress yang merinci otomatis. Tema WordPress retina-ready ini sangat ideal untuk bisnis cuci mobil, bengkel mobil, dan bengkel mekanik, serta layanan mobil. Legatus adalah pilihan ideal untuk blog, majalah online, surat kabar online, dan publikasi lainnya karena menyediakan desain yang responsif.

Aktifkan Gambar Retina Untuk Situs Web yang Jelas

Klik pada tab "Tampilan" setelah menginstal plugin di panel admin WordPress. Opsi " Gambar Retina " terletak di bagian "WP Retina 2x" halaman. Untuk mengaktifkan gambar retina, buka tombol "Aktifkan".

Bagaimana Saya Menambahkan Gambar Retina ke WordPress?

Menambahkan gambar retina ke WordPress adalah proses dua langkah: pertama, Anda perlu menambahkan gambar beresolusi lebih tinggi ke perpustakaan media Anda, dan kemudian Anda perlu menambahkan baris kode ke file functions.php tema Anda. Untuk menambahkan gambar beresolusi lebih tinggi ke perpustakaan media Anda, cukup unggah salinan gambar Anda yang berukuran dua kali ukuran gambar normal Anda. Misalnya, jika gambar normal Anda berukuran 400x300px, gambar retina Anda harus berukuran 800x600px. Setelah Anda memiliki gambar retina di perpustakaan media Anda, Anda perlu menambahkan baris kode ke file functions.php tema Anda. Baris kode ini akan memberitahu WordPress untuk menyajikan gambar retina ke perangkat retina: add_filter( 'wp_get_attachment_image_src', 'retina_support_src' ); function retina_support_src( $image ) { $image[0] = str_replace( '.jpg', '@2x.jpg', $image[0] ); kembali $gambar; } Dengan kode ini, WordPress akan secara otomatis menayangkan gambar retina ke perangkat retina mana pun yang mengunjungi situs Anda.

Gambar Retina WordPress

Dengan asumsi Anda menginginkan tip tentang cara membuat gambar retina untuk WordPress: Saat membuat gambar untuk situs web WordPress Anda, pastikan untuk membuat versi yang dua kali lebih besar dari gambar standar Anda. Misalnya, jika gambar standar Anda memiliki lebar 400px, buat gambar retina dengan lebar 800px. Beri nama gambar Anda sesuai dengan namanya, lalu tambahkan “@2x” ke nama file gambar retina. Jadi, jika gambar standar Anda bernama "logo.jpg", gambar retina Anda akan diberi nama "[email protected]". Pastikan untuk mengompres gambar retina Anda agar tidak memperlambat situs web Anda. Itu dia! Dengan mengikuti tip sederhana ini, Anda dapat memastikan bahwa gambar Anda terlihat bagus di semua perangkat, termasuk perangkat retina.

Jika Anda tidak menerapkan gambar Retina, situs web Anda akan lebih lambat untuk semua pengguna. Area piksel sama seperti pada gambar standar, menghasilkan gambar yang lebih tajam dan cerah. Saat perangkat modern non-Apple menampilkan gambar @2x, perangkat akan memperlakukannya sebagai gambar yang lebih besar. Gambar retina dihasilkan menggunakan WP Retina 2X, yang merupakan generator gambar Retina yang paling banyak digunakan untuk situs WordPress. Layanan ini juga menyediakan gambar biasa untuk pengguna tanpa layar Retina. Bagaimana Anda tahu jika gambar tersedia di layar khusus jika Anda tidak memiliki perangkat Apple untuk mengujinya? Alat pengembangan Chrome dapat membantu Anda melakukannya.

Grafik Vektor Scalable – Cara Terbaik Membuat Gambar Retina Untuk Situs Web Anda.

Gambar retina WordPress adalah gambar beresolusi tinggi yang dapat dilihat di monitor 4K, laptop Windows 10, atau tablet. Anda dapat dengan mudah membuat gambar retina situs web Anda dengan menggunakan Scalable Vector Graphics (SVG) bila memungkinkan. Dalam hal mengoptimalkan gambar untuk tampilan retina, Anda dapat memaksimalkannya dengan menggunakan gambar dengan lebar 1920x130 piksel yang telah dioptimalkan.