Isi
- Pengetahuan dibutuhkan: PHP dan CSS Dasar
- Membutuhkan: Pemasangan WordPress, editor teks pilihan
- Waktu proyek: 10 menit
Jika Anda berlangganan versi cetak majalah .net (jika tidak, mengapa tidak !?), Anda akan melihat bahwa edisi bulan ini menampilkan artikel yang sangat bagus tentang “Desain Responsif dengan WordPress”.
Dalam artikel tersebut, penulis Jesse Friedman menguraikan banyak teknik yang sangat berguna untuk memanfaatkan, dan mengatasi, fungsionalitas WordPress yang melekat untuk menghasilkan situs web responsif yang benar-benar efektif. Jika Anda berpikir untuk membuat situs responsif dengan WordPress, Anda pasti harus mengambil salinan artikelnya. Ini harus dibaca.
Setelah baru-baru ini membangun kembali blog pribadi saya di WordPress menggunakan pendekatan responsif, yang mengutamakan seluler, saya terbiasa dengan beberapa teknik yang dibahas dalam artikel. Namun, satu item yang sangat menonjol bagi saya adalah pendekatan Jesse untuk mengaktifkan gambar yang berubah-ubah melalui jQuery.
Masalah dengan WordPress dan "gambar yang berubah-ubah"
Karena saya yakin Anda semua tahu 'gambar yang berubah-ubah' - yang menggunakan lebar maksimal: 100% - mengharuskan gambar tidak memiliki lebar atau tinggi tetap agar dapat diskalakan ke ukuran penampungnya. Sayangnya, WordPress secara otomatis menghitung dimensi gambar yang dihasilkan dari perpustakaan Media dan menambahkan atribut lebar dan tinggi yang sesuai ke setiap tag img>.
Ini bagus untuk kecepatan rendering halaman tetapi itu melempar masif kunci pas dalam proses pembuatan tata letak responsif karena dimensi gambar tidak lagi dibatasi oleh ukuran penampungnya.
Itu masalahnya.
Solusi non-jQuery
Dalam artikelnya, Jesse menyarankan penggunaan jQuery untuk menghapus atribut lebar dan tinggi dari semua tag img> di halaman setelah dimuat. Ini pasti berhasil, tetapi ketika membangun situs saya, saya tidak suka ide mengandalkan JavaScript untuk mencapai hal ini, terutama jika ada banyak gambar di halaman yang dipermasalahkan.
Di sinilah filter WordPress membantu.
Codex WordPress mendefinisikan filter sebagai:
“... kait yang diluncurkan WordPress untuk mengubah teks dari berbagai jenis sebelum menambahkannya ke database atau mengirimkannya ke layar browser.”
Ternyata inilah yang kita butuhkan. Dengan menyiapkan filter untuk dijalankan pada semua gambar sebagai tindakan terakhir sebelum ditampilkan di halaman, kita dapat menggunakan PHP untuk menghapus atribut lebar dan tinggi sehingga menghindari kebutuhan manipulasi DOM (yang berpotensi) mahal melalui JavaScript.
Kode
- /**
- * FUNGSI GAMBAR RESPONSIF
- */
- add_filter (’post_thumbnail_html’, ’remove_thumbnail_dimensions’, 10);
- add_filter (’image_send_to_editor’, ’remove_thumbnail_dimensions’, 10);
- function remove_thumbnail_dimensions ($ html)
- $ html = preg_replace ('/ (lebar
Pada kode di atas kami menambahkan dua filter menggunakan fungsi add_filter. Argumen pertama adalah filter yang ingin kita hubungkan dan yang kedua menentukan fungsi yang ingin kita jalankan saat filter dipanggil.
Dalam kode kami, kami menghubungkan ke dua fungsi yang tidak jelas:
- post_thumbnail_html - gambar diambil dengan post_thumbnail ()
- image_send_to_editor - gambar ditambahkan ke editor
Kami kemudian menggunakan ekspresi reguler untuk menghapus atribut lebar dan tinggi dari tag gambar. Sekarang, saat gambar kami dikirim ke browser, gambar tersebut dapat sepenuhnya 'mengalir' seperti yang dikatakan Tuan Marcotte kepada kami.
Pengakuan
Saya harus mengaku memiliki ide untuk menggunakan add_filter untuk menghapus atribut Saya tidak bisa seumur hidup saya menemukan filter WordPress yang benar untuk dihubungkan.
Setelah banyak mencari, saya akhirnya menemukan posting yang sangat membantu ini di Wordpress Stack Exchange oleh Nathaniel Taintor yang memberikan informasi tentang dua filter yang saya butuhkan.
Peringatan
Sejauh yang saya tahu, satu-satunya kelemahan utama dari pendekatan ini adalah pendekatan ini tidak menghapus atribut lebar dan tinggi dari semua gambar di situs Anda. Saya menemukan ini menjadi masalah, khususnya dengan gambar Gravatar yang digunakan WordPress dalam komentar.
Jika ada yang memiliki solusi untuk masalah ini, silakan tinggalkan komentar sehingga kita semua bisa mendapatkan keuntungan.
Saya harap ini berguna dan mendemonstrasikan alternatif untuk mengandalkan JavaScript untuk mengimplementasikan "gambar yang berubah-ubah" di situs WordPress.
Kata: David Smith
Dave Smith adalah desainer front end yang berbasis di dekat kota Bath yang indah, Inggris. Saat dia tidak mengerjakan proyek web yang baru dan menarik, dia dapat ditemukan memainkan terompet dalam segala hal mulai dari grup jazz Big Band hingga orkestra Symphony. Anda dapat menghubungi Dave di Twitter sebagai @get_dave.
