Tarkib
- Bilim kerakAsosiy PHP va CSS
- Talab qiladi: WordPress o'rnatish, tanlangan matn muharriri
- Loyiha vaqti: 10 daqiqa
Agar siz .net jurnalining bosma versiyasiga obuna bo'lsangiz (agar yo'q bo'lsa, nima uchun !?), siz ushbu oyning sonida "WordPress bilan javob beradigan dizayn" mavzusida ajoyib maqola borligini ko'rgansiz.
Maqolada muallif Jessi Fridman haqiqatan ham ta'sirchan veb-sayt yaratish uchun WordPress funktsiyalaridan maksimal darajada foydalanish va uni engish uchun juda foydali texnikaning yukini ta'kidlaydi. Agar siz WordPress bilan javob beradigan sayt ishlab chiqarishni o'ylayotgan bo'lsangiz, albatta uning maqolasining nusxasini olishingiz kerak. Bu o'qish kerak.
Yaqinda WordPress-dagi shaxsiy blogimni sezgir, mobil aloqa usulidan foydalangan holda qayta tiklab, maqolada keltirilgan ba'zi texnikalar bilan tanishdim. Biroq, men uchun haqiqatan ham ajralib turadigan narsa, Jessining jQuery orqali suyuq tasvirlarni yoqish yondashuvi edi.
WordPress va "suyuq tasvirlar" bilan bog'liq muammo
Ishonchim komilki, siz maksimal darajada kenglikdan foydalanadigan "suyuq tasvirlar" ni 100% bilasiz - ularning konteynerlari kattaligiga qadar o'lchamlari uchun rasmlarning aniq kengligi yoki balandligi bo'lmasligi kerak. Afsuski, WordPress avtomatik ravishda Media kutubxonasidan hosil bo'lgan rasmlarning o'lchamlarini hisoblab chiqadi va har qanday img> teglariga mos keladigan kenglik va balandlik atributlarini qo'shadi.
Bu sahifani ko'rsatish tezligi uchun juda yaxshi, lekin a ni tashlaydi katta Tasvir o'lchamlari endi ularning konteynerining o'lchamlari bilan cheklanmaganligi sababli, sezgir maketlarni yaratish haqida gap ketganda, ishdagi kalit.
Bu muammo.
JQuery bo'lmagan echim
Jessi 'o'z maqolasida jQuery-dan foydalangan holda, kenglik va balandlik atributlarini yuklangandan so'ng sahifadagi barcha img> teglaridan olib tashlashni taklif qiladi. Bu, albatta, ishlaydi, lekin saytimni yaratishda, men bunga erishish uchun JavaScript-ga ishonish g'oyasini yoqtirmadim, ayniqsa, ushbu sahifada juda ko'p rasm bo'lsa.
Bu erda WordPress filtrlari yordamga kelgan.
WordPress kodeksi filtrni quyidagicha belgilaydi:
"... WordPress ma'lumotlar bazasiga qo'shishdan yoki uni brauzer ekraniga yuborishdan oldin har xil turdagi matnlarni o'zgartirish uchun ishga tushiradi."
Ma'lum bo'lishicha, aynan shu narsa bizga kerak. Barcha rasmlarda sahifada ko'rsatilishidan oldin yakuniy amal sifatida ishlash uchun filtr o'rnatib, biz PHP yordamida kenglik va balandlik atributlarini olib tashlashimiz mumkin, shu bilan JavaScript orqali (potentsial) qimmat DOM manipulyatsiyasini chetlab o'tamiz.
Kod
- /**
- * JAVOBLI IMGIYaT FUNKSIYALARI
- */
- add_filter ('post_thumbnail_html', 'remove_thumbnail_dimensions', 10);
- add_filter ('image_send_to_editor', 'remove_thumbnail_dimensions', 10);
- remove_thumbnail_dimensions funktsiyasi ($ html)
- $ html = preg_replace (’/ (kenglik
Yuqoridagi kodda biz add_filter funktsiyasidan foydalangan holda ikkita filtr qo'shamiz. Birinchi argument - biz ulamoqchi bo'lgan filtr, ikkinchisi esa filtr chaqirilganda biz bajaradigan funktsiyani belgilaydi.
Bizning kodimizda biz ikkita tushunarsiz funktsiyaga ulanamiz:
- post_thumbnail_html - bilan olingan rasmlar post_thumbnail ()
- image_send_to_editor - muharrirga qo'shilgan rasmlar
Keyinchalik rasm teglaridan kenglik va balandlik atributlarini olib tashlash uchun odatiy ifodadan foydalanamiz. Endi bizning rasmlarimiz brauzerga yuborilganda, ular xuddi janob Markott aytganidek to'liq "suyuq" bo'lishi mumkin.
E'tirof
Men foydalanish fikri borligini tan olishim kerak add_filter atributlarni olib tashlash uchun men hayotim davomida to'g'ri WordPress filtrlarini topa olmadim.
Ko'p qidirgandan so'ng, nihoyat Nataniel Taintor tomonidan Wordpress Stack Exchange-da menga kerak bo'lgan ikkita filtr haqida ma'lumot bergan ushbu juda foydali xabarga duch keldim.
Ogohlantirishlar
Bilishimcha, ushbu yondashuvning yagona muhim kamchiliklari shundaki, u sizning saytingizdagi barcha rasmlardan kenglik va balandlik atributlarini olib tashlamaydi. Men buni WordPress-ning sharhlarda ishlatadigan Gravatar rasmlari bilan aniq bir muammo deb bildim.
Agar kimdir ushbu muammoni hal qiladigan bo'lsa, iltimos, sharh qoldiring, shunda hammamiz foyda ko'rishimiz mumkin.
Umid qilamanki, bu foydali bo'ldi va WordPress veb-saytlarida "suyuq rasmlarni" amalga oshirish uchun JavaScript-ga ishonishning alternativasini namoyish etdi.
So'zlar: Devid Smit
Deyv Smit - Buyuk Britaniyaning Bath shahrining go'zal shahri yaqinida joylashgan old dizayner. U yangi va qiziqarli veb-loyihalarda ishlamayotganida, uni Big Band jaz guruhlaridan tortib Simfonik orkestrlariga qadar karnay-surnay chalib topish mumkin. Deyvni Twitter-da @get_dave sifatida bilib olishingiz mumkin.
