Kandungan
- Pengetahuan diperlukan: PHP dan CSS asas
- Memerlukan: Pemasangan WordPress, penyunting teks pilihan
- Masa projek: 10 minit
Sekiranya anda melanggan versi cetak majalah .net (jika tidak, mengapa tidak !?), anda akan melihat bahawa terbitan bulan ini mempunyai artikel yang sangat baik mengenai "Reka Bentuk Responsif dengan WordPress".
Dalam artikel itu, penulis Jesse Friedman menggariskan banyak teknik yang sangat berguna untuk memanfaatkan, dan mengatasi, fungsi WordPress yang wujud untuk menghasilkan laman web responsif yang benar-benar berkesan. Sekiranya anda berfikir untuk menghasilkan laman web yang responsif dengan WordPress, anda pasti harus mengambil salinan artikelnya. Ia mesti dibaca.
Baru-baru ini membina semula blog peribadi saya di WordPress menggunakan pendekatan responsif dan mudah alih, saya sudah biasa dengan beberapa teknik yang dibahas dalam artikel tersebut. Walau bagaimanapun, satu perkara yang benar-benar menonjol bagi saya adalah pendekatan Jesse untuk membolehkan gambar lancar melalui jQuery.
Masalah dengan WordPress dan "gambar lancar"
Seperti yang saya pasti anda semua maklum 'gambar lancar' - yang menggunakan lebar maksimum: 100% - mengharuskan gambar tidak mempunyai lebar atau tinggi yang tetap agar gambar itu dapat mencapai ukuran bekasnya. Sayangnya, WordPress secara automatik mengira dimensi gambar yang dihasilkan dari pustaka Media dan menambahkan atribut lebar dan tinggi yang sepadan dengan sebarang img> tag.
Ini bagus untuk kelajuan rendering halaman tetapi melemparkan a besar-besaran kunci pas dalam karya untuk membuat susun atur responsif kerana dimensi gambar tidak lagi dibatasi pada ukuran wadahnya.
Itu masalah.
Penyelesaian bukan jQuery
Dalam artikelnya Jesse ’mencadangkan penggunaan jQuery untuk membuang atribut lebar dan tinggi dari semua tag img> di halaman setelah dimuat. Ini tentu berjaya tetapi ketika membina laman web saya, saya tidak menyukai idea untuk bergantung pada JavaScript untuk mencapainya, terutamanya jika terdapat banyak gambar di halaman yang dimaksudkan.
Di sinilah penapis WordPress menyelamatkan.
Codex WordPress mentakrifkan penapis sebagai:
"... menghubungkan yang dilancarkan oleh WordPress untuk mengubah teks dari pelbagai jenis sebelum menambahkannya ke pangkalan data atau menghantarnya ke skrin penyemak imbas."
Ternyata inilah yang kita perlukan. Dengan menyiapkan penapis untuk berjalan pada semua gambar sebagai tindakan terakhir sebelum ditampilkan di halaman, kita dapat menggunakan PHP untuk menghapus atribut lebar dan tinggi sehingga menghindari keperluan manipulasi DOM (berpotensi) mahal melalui JavaScript.
Kodnya
- /**
- * FUNGSI GAMBAR RESPONSIF
- */
- add_filter ('post_thumbnail_html', 'remove_thumbnail_dimensions', 10);
- add_filter ('image_send_to_editor', 'remove_thumbnail_dimensions', 10);
- fungsi remove_thumbnail_dimensions ($ html)
- $ html = preg_replace ('/ (lebar)
Dalam kod di atas, kami menambahkan dua penapis menggunakan fungsi add_filter. Argumen pertama ialah penapis yang ingin kita sambungkan dan yang kedua menentukan fungsi yang ingin kita jalankan semasa penapis dipanggil.
Dalam kod kami, kami menghubungkan dua fungsi yang tidak jelas:
- post_thumbnail_html - gambar diambil dengan post_thumbnail ()
- image_send_to_editor - gambar ditambahkan ke editor
Kami kemudian menggunakan ungkapan biasa untuk menghilangkan atribut lebar dan tinggi dari tag gambar. Sekarang apabila gambar kita dihantar ke penyemak imbas, gambar tersebut dapat menjadi 'lancar' sepenuhnya seperti yang diberitahu oleh Mr Marcotte kepada kita.
Pengakuan
Saya harus mengaku mempunyai idea untuk menggunakan tambah_filter untuk membuang atribut yang saya tidak dapat sepanjang hayat saya mencari penapis WordPress yang betul untuk disambungkan.
Setelah banyak mencari, saya akhirnya menemui posting yang sangat bermanfaat ini di Wordpress Stack Exchange oleh Nathaniel Taintor yang memberikan maklumat mengenai dua saringan yang saya perlukan.
Kaveat
Sejauh yang saya tahu, satu-satunya kelemahan utama pendekatan ini ialah tidak menghilangkan atribut lebar dan tinggi dari semua gambar di laman web anda. Saya mendapati ini menjadi masalah, khasnya dengan gambar Gravatar yang digunakan WordPress dalam komen.
Sekiranya ada yang mempunyai penyelesaian untuk masalah ini, sila tinggalkan komen agar kita semua dapat memperoleh manfaat.
Saya harap ini berguna dan menunjukkan alternatif untuk bergantung pada JavaScript untuk melaksanakan "gambar lancar" di laman web WordPress.
Perkataan: David Smith
Dave Smith adalah pereka bahagian depan yang berpusat di dekat bandar Bath, UK yang indah. Apabila dia tidak mengusahakan projek web baru dan menarik, dia dapat bermain terompet dalam semua kumpulan, dari kumpulan jazz Big Band hingga orkestra Symphony. Anda boleh mengikuti Dave di Twitter sebagai @get_dave.
