Loncat ke Konten Utama

Responsives bagaimana gambar dikelola oleh WordPress

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 600.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Sementara adopsi gambar responsif yang berkembang tidak dapat diabaikan, bisa jadi sangat sulit untuk menggunakan fitur di bawah kendala CMS besar seperti WordPress. Meskipun sangat mungkin untuk mendesain fitur dalam tema Anda sendiri, melakukannya adalah pekerjaan yang sulit dan butuh waktu.

Untungnya, dengan peluncuran WordPress 4.4, pengembang dan plugin tema akan memiliki kesempatan untuk menggunakan gambar responsif dalam produk mereka. Sejak awal rilis ini, plugin "Responsif RICG Images" telah digabungkan ditambahkan ke kernel WordPress, yang berarti bahwa dukungan gambar responsif sekarang sebagai fungsi internal default WordPress. Mari kita lihat bagaimana cara kerjanya, dan bagaimana Anda bisa menggunakannya untuk mendapatkan yang terbaik dari situs WordPress Anda.

responsif-image-trac-wordpress

Bagaimana gambar bekerja responsives

Segera setelah Anda beralih ke WordPress 4.4, semua konten dan gambar Anda akan memiliki atribut "srcset" dan " ukuran Yang difilter untuk memastikan bahwa setiap ukuran gambar yang tersedia ada, sambil mempertahankan ukuran gambar yang diminta asli. Penting untuk dicatat bahwa perubahan ukuran khusus akan diabaikan dari atribut " srcset Jika rasio aspek berbeda dari gambar asli yang diminta. Selain itu, dengan memanggil gambar melalui fungsi wp-get-lampiran gambar Ini akan mengembalikan gambar yang responsif juga.

Itu Gambar responsif Merupakan fitur latar belakang, yang berarti bahwa semuanya terjadi secara otomatis setiap kali pengguna mengirim gambar ke WordPress melalui antarmuka pengunduhan media. Ketika sebuah gambar muncul di halaman, itu akan memiliki atribut " srcset "Dan" ukuran Sebagai hasil dari proses latar belakang ini.

Ini berarti bahwa fitur gambar responsif yang baru tidak akan memiliki antarmuka pengguna yang terlihat. Tidak ada opsi untuk beralih, formulir yang harus diisi, atau kotak centang. Yang sedang berkata, pengembang tema harus memodifikasi file mereka " functions.php Agar gambar mereka memiliki ketepatan dengan atribut " ukuran ". Memang, ketika kita berbicara tentang gambar responsif di WordPress, kita berbicara secara khusus tentang atribut " srcset »Dan« ukuran Yang ditemukan di tag gambar.

Sementara WordPress melakukan pekerjaan luar biasa dengan memasukkan semua ukuran yang tersedia ke dalam atribut " srcset Atribut "ukuran" sedikit lebih sulit untuk diprediksi. Memang atributnya ukuran Bertanggung jawab untuk memberi tahu browser bagaimana gambar sesuai dengan dimensi jendela yang tersedia. Karena informasi akan berbeda tergantung pada gaya tema pengguna, yang terbaik yang bisa kami lakukan adalah memberikan nilai default yang masuk akal sebagai berikut:

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

ukuran = "(max-width: {{gambar-width}}) 100vw, {{gambar-width}}"

Atribut default ini " ukuran Melakukan dua hal. Pertama, memastikan bahwa atribut yang valid " ukuran Ada pada gambar, yang baru-baru ini menjadi persyaratan wajib sesuai dengan spesifikasi. Kedua, memastikan bahwa browser tidak menyediakan sumber gambar yang lebih besar dari lebar asli yang diminta. Dalam hal manipulasi CSS, ukuran gambar akan berbeda sesuai dengan lebar jendela, di sisi lain nilai default « ukuran Akan menjadi kurang bermanfaat.

Karena atribut default " ukuran Hanya akan membantu dengan gambar yang tidak rusak oleh CSS, kait filter akan tersedia untuk memungkinkan pengembang tema menyesuaikan atribut ukuran Dari setiap gambar, memastikan atribut yang sempurna ukuran "Disampaikan pada setiap titik pemberhentian.

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Penting untuk dicatat di sini bahwa, jika mungkin, tema Anda tidak harus bergantung pada nilai default atribut " ukuran"Untuk memberikan informasi yang akurat tentang dukungan untuk gambar yang responsif. Memang, atribut default " ukuran Tidak memungkinkan peramban untuk mengubah sumber gambar ketika jendela lebih kecil dari ukuran asli gambar yang diminta. Ini juga tidak akan dapat mengubah sumber jika gambar diubah dengan CSS pada breakpoint, ketika gambar mungkin lebih besar dari ukuran aslinya yang diminta.

Jika Anda adalah pengembang tema atau memiliki akses ke basis kode WordPress, saring gambar dalam tema Anda untuk memberikan ketepatan dengan atribut " ukuran Merupakan salah satu hal terpenting yang dapat Anda lakukan setelah versi baru yang akan segera tersedia. Berikut ini adalah contoh dari kait dalam fungsi " wp_calculate_image_sizes Yang dapat Anda kembangkan agar sesuai dengan tema Anda.

Fungsi adjust_image_sizes_attr ($ ukuran, $ ukuran) {$ ukuran = (max-width: 709px) 85vw (max-width: 909px) 67vw (max-width: 1362px) 62vw, 840px '; kembali $ ukuran; } Add_filter ( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr' 10, 2);

Dalam contoh ini, kait akan berlaku untuk semua konten termasuk gambar tunggal dan gambar kecil. Logika tambahan dapat ditambahkan untuk membuat berbagai jenis gambar memiliki nilai yang berbeda.

kode-sumber-wp-image-responsif

Fungsi baru telah ditambahkan untuk atribut " srcset »Dan« ukuran Dapat ditambahkan ke gambar yang telah ditambahkan ke WordPress melalui Media Manager, selain gambar yang ditambahkan untuk menampilkan konten. Fungsinya wp_get_attachment_image_sizes Akan mengembalikan atribut default " ukuran Yang dapat dimodifikasi oleh filter tema Anda di file " functions.php ". Fungsinya wp_get_attachment_image_srcset akan mengembalikan atribut srcset Yang akan berisi semua ukuran yang tersedia dari gambar yang diminta. Dokumentasi dan contoh penggunaan fitur-fitur baru ini dapat ditemukan direktori referensi pengembang.

Konfigurasi Gambar Responsif untuk tema Anda

Dengan fitur-fitur baru ini datang beberapa tanda kurung baru yang dapat digunakan untuk memberikan tingkat dukungan baru untuk gambar responsif, yang paling sesuai dengan tema Anda. Kaitnya max_srcset_image_width Akan memungkinkan pengembang tema untuk memfilter lebar maksimum gambar untuk dimasukkan dalam atribut srcset ". Kaitnya wp_calculate_image_srcset »Akan menyaring atribut« srcset »Gambar, sementara hook (filter)« wp_calculate_image_sizes Akan memungkinkan pengembang tema untuk menyesuaikan atribut ukuran Untuk lebih cocok dengan breakpoint gambar dalam tema mereka.

Jika Anda mencari contoh tentang cara terbaik untuk memfilter atribut " ukuran Dari sebuah gambar, tema twentysixteen baru akan menjadi contoh sempurna. Dalam file functions.php tema, dua fungsi terakhir memfilter atribut " ukuran Untuk menanggapi breakpoint gambar yang berbeda dalam tema.

filter responsif gambar tutorial WordPress #

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

Memperbarui ke WordPress 4.4 berarti bahwa pengguna akan segera mendapat manfaat dari kompatibilitas dengan gambar responsif, yang akan membantu menampilkan gambar yang jernih dan tajam berdasarkan pada setiap ukuran jendela dan kerapatan piksel. Ini juga akan menghasilkan peningkatan kinerja, karena halaman tidak lagi harus memuat gambar besar dan berat untuk waktu yang lama. Meskipun ini adalah proses otomatis untuk pengguna, pengembang tema perlu menyesuaikan ukuran gambar mereka untuk tema mereka.

Itu saja untuk tutorial ini, saya harap ini akan membantu Anda lebih memahami pentingnya dan konsep gambar responsif di WordPress. Jangan ragu untuk membagikan tutorial ini dengan teman-teman Anda di jejaring sosial favorit Anda.

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
11 saham
saham6
menciak1
Register4