Loncat ke Konten Utama

Responsives bagaimana gambar dikelola oleh WordPress

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.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 terus berkembang tidak dapat diabaikan, sangat sulit untuk menggunakan fungsionalitas di bawah batasan CMS besar seperti WordPress. Meskipun sangat mungkin untuk mendesain fitur dalam tema Anda sendiri, melakukannya adalah usaha yang sulit dan membutuhkan waktu.

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

responsif-image-trac-wordpress

Bagaimana gambar bekerja responsives

Segera setelah Anda meningkatkan ke WordPress 4.4, semua konten dan gambar Anda akan memiliki 'srcset' dan ' ukuran Yang difilter untuk memastikan bahwa setiap ukuran gambar yang tersedia ada, dengan tetap mempertahankan ukuran gambar asli yang diminta. Penting untuk diperhatikan bahwa pengubahan ukuran khusus akan diabaikan dari " 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 di latar belakang, artinya segala sesuatu terjadi secara otomatis setiap kali pengguna mengunggah gambar ke WordPress melalui antarmuka unggahan media. Saat gambar muncul di halaman, itu akan memiliki atribut " srcset "Dan" ukuran Sebagai hasil dari proses latar belakang ini.

Artinya, fungsionalitas baru gambar responsif tidak akan memiliki antarmuka pengguna yang terlihat. Tidak ada opsi untuk beralih, formulir untuk diisi, atau kotak centang. Karena itu, pengembang tema harus mengedit " functions.php Agar gambar mereka memiliki ketepatan dengan atribut " ukuran ". Memang, ketika kami berbicara tentang gambar responsif di WordPress, kami 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, atribut " ukuran Bertanggung jawab untuk memberi tahu browser bagaimana gambar tersebut sesuai dengan dimensi jendela yang tersedia. Karena informasinya akan berbeda bergantung pada gaya tema pengguna, hal terbaik yang dapat kami lakukan adalah menyediakan 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]

sizes="(max-width: {{image-width}}) 100vw, {{image-width}}"

Atribut default ini " ukuran Melakukan dua hal. Pertama, ini memastikan bahwa atribut yang valid " ukuran Ada pada gambar, yang belakangan menjadi kebutuhan wajib sesuai spesifikasinya. Kedua, memastikan bahwa browser tidak menyediakan sumber gambar yang lebih besar dari lebar asli yang diminta. Jika terjadi manipulasi CSS, ukuran gambar akan berbeda tergantung pada lebar jendela, namun nilai defaultnya " ukuran Akan menjadi kurang bermanfaat.

Karena atribut default " ukuran "Hanya akan membantu dengan gambar yang tidak diubah oleh CSS, tanda kurung filter akan tersedia untuk memungkinkan pengembang tema menyetel" atribut " ukuran "Dari setiap gambar, memastikan itu sempurna" ukuran Dikirim ke setiap titik perhentian.

Penting untuk diperhatikan di sini bahwa, jika memungkinkan, tema Anda tidak boleh bergantung pada nilai default dari atribut " ukuran"Untuk memberikan informasi yang akurat tentang dukungan gambar responsif." Memang, atribut default " ukuran »Tidak mengizinkan browser untuk mengubah sumber gambar saat jendela lebih kecil dari ukuran asli gambar yang diminta. Ini juga tidak akan dapat mengubah sumber jika gambar diedit dengan CSS pada breakpoint, ketika gambar mungkin lebih besar dari ukuran asli 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 Adalah salah satu hal terpenting yang dapat Anda lakukan setelah versi baru segera hadir. Berikut ini adalah contoh hook di " wp_calculate_image_sizes Yang dapat Anda kembangkan agar sesuai dengan tema Anda.

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]

function adjust_image_sizes_attr( $sizes, $size ) {
   $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';
   return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr', 10 , 2 );

Dalam contoh ini, tanda centang akan berlaku untuk semua konten termasuk gambar dan thumbnail unggulan. Logika tambahan dapat ditambahkan untuk memastikan bahwa jenis gambar yang berbeda 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 bagaimana menggunakan fungsi-fungsi 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 disertakan dalam" srcset ". Kaitnya wp_calculate_image_srcset »Akan menyaring atribut« srcset »Gambar, sementara hook (filter)« wp_calculate_image_sizes "Akan memungkinkan pengembang tema untuk menyesuaikan" ukuran Untuk lebih mencocokkan breakpoint gambar dalam temanya.

Jika Anda mencari contoh cara terbaik memfilter " ukuran Dari sebuah gambar, tema dua puluh enam belas yang baru akan menjadi contoh yang sempurna. Di file functions.php dari tema ini, dua fungsi terakhir memfilter atribut " ukuran Untuk menanggapi breakpoint gambar yang berbeda dalam tema.

filter responsif gambar tutorial WordPress #

Memperbarui ke WordPress 4.4 berarti pengguna akan segera mendapatkan keuntungan dari kompatibilitas gambar yang responsif, yang akan mendorong tampilan gambar yang tajam dan jelas di setiap ukuran jendela dan kepadatan piksel. Ini juga akan menghasilkan peningkatan kinerja, karena laman tidak lagi harus memuat gambar yang besar dan berat untuk waktu yang lama. Meskipun ini adalah proses otomatis bagi pengguna, pengembang tema perlu menyesuaikan ukuran gambar mereka untuk tema mereka.

Buat Toko Online Anda dengan mudah

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

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