Bekerja dengan gambar responsif di WordPress

Sampai saat ini, bekerja dengan gambar responsif di WordPress merupakan tantangan nyata. Kecuali jika pengguna bersedia menulis sendiri fungsionalitasnya, mereka kurang beruntung. Pilihan lainnya adalah membeli plugin atau mencari solusi lain, tetapi tidak ada fungsionalitas inti yang dapat dimanfaatkan oleh pengembang. Tema yang dibuat tanpa dukungan untuk gambar responsif seringkali berkinerja lambat, dan kegunaan terkadang tidak stabil di berbagai ukuran layar. Itu bukanlah atribut yang benar-benar diasosiasikan oleh pelanggan dan pengguna dengan fungsionalitas yang baik.

Untungnya, ini semua berubah dengan dirilisnya WordPress 4.4. Sekarang fungsionalitas untuk gambar responsif disertakan langsung di dalam WordPress, memungkinkan pengembang untuk bekerja dengannya dalam tema juga. Ini dicapai dengan mengambil plugin gambar responsif dan menjadikannya bagian dari inti WordPress.

Bagaimana semuanya bekerja?

Jelas, kecuali Anda sudah melakukannya, langkah pertama Anda adalah memperbarui ke WordPress 4.4. Setelah Anda menyelesaikan pembaruan, jika Anda melihat kode sumber situs Anda, Anda akan melihat bahwa gambar di situs Anda sekarang memiliki dua atribut baru: sizes dan srcset . Atribut ini difilter, yang berarti bahwa semua ukuran gambar yang tersedia ada, tetapi dimensinya tetap konsisten dengan gambar aslinya. Atribut srcset tidak akan mengizinkan pemotongan khusus jika rasio aspek tidak sama dengan versi asli gambar. Ini untuk memastikan bahwa kualitas gambar tidak terganggu saat ditampilkan di layar pengguna.

Mendapatkan di bawah tenda dan membuat perubahan

WordPress telah menambahkan gambar responsif sebagai fitur latar belakang, yang berarti prosesnya terjadi secara otomatis. Saat Anda mengunggah gambar menggunakan pengunggah media, atribut diterapkan ke gambar tersebut tanpa campur tangan Anda. Ini juga berguna untuk pengoptimalan gambar.

Karena ini adalah fitur latar belakang, gambar responsif tidak datang dengan antarmuka pengguna – itu terjadi begitu saja. Sebagai pengembang, Anda dapat memodifikasi file functions.php di setiap tema Anda untuk memastikan bahwa gambar Anda diberikan atribut sizes yang akurat. Ingat: Saat Anda ingin merujuk ke gambar responsif, itu berarti atribut tag gambar sizes dan srcset .

Atribut default

Saat Anda mulai bekerja dengan fitur ini, Anda akan melihat bahwa WordPress cukup bagus dalam menemukan semua kemungkinan ukuran dan menambahkannya ke atribut srcset . Sayangnya, masalah dapat ikut bermain dalam hal prediktabilitas atribut sizes . Ini adalah atribut yang digunakan untuk mengomunikasikan lebar gambar ke browser sehingga gambar akan tersedia dan dapat dilihat di layar tampilan mana pun.

Menyiapkan atribut ini sebagai default berfungsi dalam beberapa cara. Yang pertama adalah memaksa atribut sizes untuk diterapkan ke setiap gambar. Ini sangat membantu mengingat sekarang menjadi persyaratan wajib. Yang kedua adalah bahwa itu tidak mengizinkan browser untuk menggunakan sumber gambar yang lebih lebar dari ukuran asli gambar. Kode CSS yang digunakan untuk mengubah ukuran gambar tergantung pada lebar layar tampilan (seperti kueri media) sayangnya dapat membuat default ini menjadi kurang berguna.

Filter kait untuk pengembang tema

Karena atribut default ini hanya berfungsi dengan gambar yang belum dimodifikasi oleh kode CSS, WordPress telah membuat kait filter untuk digunakan oleh pengembang tema. Anda tinggal menyesuaikan atribut sizes untuk semua gambar menggunakan pengait ini. Akibatnya, Anda dapat yakin bahwa atribut sizes yang disajikan akan ideal dalam setiap situasi.

Sebuah peringatan

Sebelum melanjutkan, mari luangkan waktu sebentar untuk menyatakan bahwa opsi atribut default bukanlah cara terbaik untuk menyediakan fungsionalitas gambar responsif yang baik. Bahkan, Anda harus bekerja untuk menghindari pembuatan tema yang mengandalkan default ini. Alasan untuk ini adalah bahwa atribut default mencegah browser memodifikasi sumber gambar ketika area tampilan tidak sebesar ukuran gambar asli. Browser juga tidak dapat mengubah sumber jika telah di-tweak oleh CSS dan diperlukan gambar yang lebih besar.

Pemfilteran gambar

Sebagai pengembang tema, Anda dapat menggunakan pemfilteran pada gambar Anda untuk menarik atribut sizes yang akurat. Ini dapat dicapai dengan menggunakan pengait untuk fungsi WordPress, wp_calculate_image_sizes . Anda dapat menggunakan fungsi ini agar berfungsi dengan tema Anda saat ini. Anda dapat membuat perubahan yang menerapkan atribut sizes berbeda ke berbagai jenis gambar.

Fungsi baru yang hadir dengan rilis ini sekarang memungkinkan sizes dan atribut srcset diterapkan ke semua gambar yang telah Anda tambahkan menggunakan pengunggah media WordPress. Ini juga memungkinkan Anda untuk menambahkan atribut ke gambar di posting Anda. Lihatlah wp_get_attachment_image_sizes . Ini mengembalikan atribut sizes yang dapat Anda tangkap dan ubah melalui filter di file functions.php untuk tema Anda. Demikian juga, wp_get_attachment_image_srcset melakukan hal yang sama, hanya untuk atribut srcset .

Gambar responsif dan tema khusus Anda

Fungsi baru yang hadir dengan rilis terbaru ini disertai dengan banyak kait yang dapat Anda gunakan untuk memberikan dukungan efektif untuk gambar responsif dalam tema Anda. Kait tersebut antara lain sebagai berikut:

Wp_calculate_image_sizes – Pengait yang dapat digunakan pengembang tema untuk menyesuaikan atribut sizes agar berfungsi dengan titik putus yang ada dalam tema mereka.

Max_srcset_image_width – Pengait yang dapat digunakan oleh pengembang tema untuk memfilter menurut lebar maksimum gambar yang ada di atribut srcset .

W_calculate_image_srcset – Pengait yang memberi pengembang kemampuan untuk memfilter menurut atribut srcset .

Pelajari lebih lanjut tentang dukungan gambar responsif

Manual pengembang WordPress dapat memberikan lebih banyak panduan dalam hal menggunakan kait ini secara efektif. Penelitian yang perlu Anda lakukan akan bervariasi tergantung pada tingkat kenyamanan Anda dalam melakukan penyesuaian di belakang layar semacam ini. Jika Anda adalah pengembang tema yang mengejar ini hanya sebagai hobi, Anda dapat memilih untuk melakukan sedikit eksperimen. Di sisi lain, jika Anda adalah pengembang tema karir, Anda mungkin ingin menginvestasikan waktu dan sumber daya yang diperlukan untuk benar-benar menguasai pembaruan ini.

Manfaat memperbarui

Jika Anda belum memperbarui WordPress (atau jika host WordPress terkelola Anda belum memperbarui untuk Anda), pengguna Anda akan mendapat manfaat dari beberapa keuntungan besar saat Anda melakukannya. Dukungan gambar responsif dapat meningkatkan kinerja halaman karena halamannya tidak akan membuang waktu untuk menurunkan gambar yang terlalu besar. Pengguna juga akan melihat peningkatan yang sangat mengesankan dalam kualitas gambar. Mereka tidak akan melihat 'pembuatan sosis' yang masuk ke dalam segala hal. Sebaliknya, mereka hanya akan melihat bahwa itu bekerja dengan baik.

Sebagai pengembang, Anda harus menyesuaikan atribut sizes di setiap file functions.php untuk semua tema Anda. Namun, setelah Anda melakukan upaya awal ini, segalanya menjadi lebih mudah. Setelah Anda mengatasi kurva belajar, Anda akan menemukan bahwa bekerja dengan fungsi baru ini datang secara alami.

Mungkin perlu beberapa penelitian dan latihan untuk memahami fungsi baru ini, dan untuk mendapatkan dukungan gambar responsif agar berfungsi untuk tema khusus Anda. Namun, jika Anda bersedia untuk menggali manual pengembang dan mencari tahu, klien Anda akan benar-benar menghargai peningkatan kinerja dan fungsionalitas. Ini sudah lama datang, dan pengembang tema berpengalaman dan mereka yang ditugaskan untuk memelihara tema khusus sangat senang dengan pembaruan ini.