Sisu
- Vaja on teadmisi: Basic PHP ja CSS
- Vajab: WordPressi install, valitud tekstiredaktor
- Projekti aeg: 10 minutit
Kui tellite ajakirja .net trükiversiooni (kui ei, siis miks mitte !?), olete näinud, et selle kuu väljaandes on suurepärane artikkel teemal "Reageeriv disain WordPressiga".
Artiklis kirjeldab autor Jesse Friedman hulga tõeliselt kasulikke tehnikaid WordPressi funktsionaalsuse maksimaalseks kasutamiseks ja ületamiseks, et luua tõeliselt tõhus reageeriv veebisait. Kui kavatsete WordPressiga luua tundliku saidi, peaksite kindlasti võtma kätte tema artikli koopia. See on kohustuslik lugemine.
Olles hiljuti oma isikliku ajaveebi WordPressis ümberehitatud, kasutades tundlikku ja esmalt mobiilset lähenemist, olin tuttav mõne artiklis käsitletud tehnikaga. Kuid üks asi, mis minu jaoks tõesti silma paistis, oli Jesse lähenemine vedelate piltide võimaldamisele jQuery kaudu.
WordPressi ja "sujuvate piltide" probleem
Kuna ma olen kindel, et olete kõik teadlikud, et vedelad pildid - mis kasutavad maksimaalset laiust: 100% - nõuavad, et piltidel ei oleks fikseeritud laiust ega kõrgust, et neid saaks mahutada vastavalt mahuti suurusele. Kahjuks arvutab WordPress automaatselt meediumiteegist loodud piltide mõõtmed ja lisab kõikidele img> siltidele vastavad laiuse ja kõrguse atribuudid.
See sobib suurepäraselt lehe renderdamise kiiruse jaoks, kuid viskab a massiline reageerivate küljenduste loomisel, kuna pildi mõõtmed ei ole enam piiratud nende mahuti suurusega.
See on probleem.
Mitte-jQuery lahendus
Oma artiklis soovitab Jesse ’kasutada jQuery-d, et eemaldada lehe kõikilt img> siltidelt laiuse ja kõrguse atribuudid, kui see on laaditud. See kindlasti töötab, kuid oma saidi ehitamisel ei meeldinud mulle mõte selle saavutamiseks JavaScripti toetuda, eriti kui kõnealusel lehel oli palju pilte.
Siin tulid appi WordPressi filtrid.
WordPressi koodeks määratleb filtri järgmiselt:
"... konksud, mille WordPress käivitab, et muuta erinevat tüüpi teksti enne selle andmebaasi lisamist või brauseriekraanile saatmist."
Nagu selgub, vajame just seda. Seadistades filtri, mis töötab enne viimast toimingut kõikidel piltidel, enne kui need lehel renderdatakse, saame PHP abil eemaldada laiuse ja kõrguse atribuudid, vältides seeläbi JavaScripti kaudu (potentsiaalselt) kalli DOM-i manipuleerimise vajadust.
Kood
- /**
- * VASTUSPILDI FUNKTSIOONID
- */
- add_filter (’post_thumbnail_html’, ’remove_thumbnail_dimensions’, 10);
- add_filter (’image_send_to_editor’, ’remove_thumbnail_dimensions’, 10);
- funktsioon remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (laius
Ülalolevas koodis lisame funktsiooni add_filter abil kaks filtrit. Esimene argument on filter, kuhu soovime haakuda, ja teine määrab funktsiooni, mida soovime filtri kutsumisel käivitada.
Meie koodis ühendame kaks ebaselget funktsiooni:
- post_thumbnail_html - pildid, mis on hangitud post_thumbnail ()
- pilt_saada_toimetajale - redaktorile lisatud pildid
Seejärel kasutasime regulaaravaldist nii laiuse kui ka kõrguse atribuutide eemaldamiseks pildimärgenditest. Nüüd, kui meie pildid saadetakse brauserisse, võivad need olla täiesti vedelad, nagu hr Marcotte meile ütles.
Ülestunnistus
Pean tunnistama, et mul on olnud idee kasutada add_filter Atribuutide eemaldamiseks ei suutnud ma kogu elu leida õigeid WordPressi filtreid, kuhu ühendada.
Pärast palju otsinguid jõudsin lõpuks Nathaniel Taintori selle väga kasuliku postituseni Wordpress Stack Exchange'is, mis andis teavet kahe vajaliku filtri kohta.
Hoiatused
Niipalju kui ma tean, on selle lähenemise ainus suur puudus see, et see ei eemalda teie saidi kõigilt piltidelt laiuse ja kõrguse atribuute. Leidsin, et see on probleem, täpsemalt Gravatari piltide puhul, mida WordPress kommentaarides kasutab.
Kui kellelgi on sellele probleemile lahendus, palun jätke kommentaar, et saaksime kõik sellest kasu saada.
Loodan, et see on olnud kasulik ja tõestanud alternatiivi JavaScripti toetumisele WordPressi veebisaitide "sujuvate piltide" juurutamiseks.
Sõnad: David Smith
Dave Smith on esiotsa disainer, kes asub Suurbritannias kauni Bathi linna lähedal. Kui ta ei tegele uute ja põnevate veebiprojektidega, võib teda leida trompetimängus kõigis alates Big Bandi džässirühmadest kuni sümfooniaorkestriteni. Dave'ile saate järele jõuda Twitteris kui @get_dave.
