Efni.
- Þekkingar þörf: Grunn PHP og CSS
- Krefst: WordPress uppsetning, textaritill að eigin vali
- Verkefnatími: 10 mínútur
Ef þú gerist áskrifandi að prentútgáfunni af .net tímaritinu (ef ekki, af hverju ekki !?), muntu hafa séð að í tölublaði þessa mánaðar er framúrskarandi grein um „Móttækilega hönnun með WordPress“.
Í greininni ritar höfundurinn Jesse Friedman mikið af gagnlegum aðferðum til að nýta og vinna bug á innbyggðum WordPress virkni til að framleiða virkilega móttækilega vefsíðu. Ef þú ert að hugsa um að framleiða móttækilega síðu með WordPress ættirðu örugglega að taka afrit af grein hans. Það er skyldulesning.
Eftir að hafa endurbyggt persónulega bloggið mitt á WordPress með móttækilegri, hreyfanlegri fyrstu aðferð þekkti ég nokkrar af þeim aðferðum sem fjallað er um í greininni. Eitt atriðið sem virkilega stóð upp úr hjá mér var aðferð Jesse til að gera fljótandi myndir kleift með jQuery.
Vandamálið með WordPress og „fljótandi myndir“
Eins og ég er viss um að þér eru allir meðvitaðir um „vökvamyndir“ - sem nota hámarksbreidd: 100% - krefjast þess að myndir hafi enga fasta breidd eða hæð til að þær geti minnkað að stærð ílátsins. Því miður reiknar WordPress sjálfkrafa stærð mynda sem myndast úr fjölmiðlasafninu og bætir samsvarandi eiginleikum breiddar og hæðar við öll img> merki.
Þetta er frábært fyrir flutningshraða síðna en það kastar a gegnheill skiptilykill í vinnslu þegar kemur að því að búa til móttækilegar uppsetningar þar sem myndvíddir eru ekki lengur bundnar við stærð íláts þeirra.
Það er vandamál.
Lausnin sem ekki er jQuery
Í grein sinni leggur Jesse ’til að nota jQuery til að fjarlægja breidd og hæðareiginleika úr öllum img> merkjum á síðunni þegar hún hefur hlaðist. Þetta virkar vissulega en þegar ég byggði síðuna mína líkaði mér ekki sú hugmynd að treysta á JavaScript til að ná þessu, sérstaklega ef mikið var af myndum á viðkomandi síðu.
Þetta var þar sem WordPress síur komu til bjargar.
WordPress codex skilgreinir síu sem:
„... krókar sem WordPress hleypir af stokkunum til að breyta texta af ýmsum gerðum áður en honum er bætt í gagnagrunninn eða hann sendur á vafrans skjá.“
Eins og það kemur í ljós er þetta nákvæmlega það sem við þurfum. Með því að setja upp síu til að keyra á allar myndir sem lokaaðgerð áður en þær eru birtar á síðunni getum við notað PHP til að fjarlægja eiginleika breiddar og hæðar og þar með sniðgengið þörfina fyrir (hugsanlega) dýra DOM meðferð með JavaScript.
Kóðinn
- /**
- * SVARPMYNDISFUNKTIONER
- */
- add_filter (‘post_thumbnail_html’, ’remove_thumbnail_dimensions’, 10);
- add_filter (’image_send_to_editor’, ’remove_thumbnail_dimensions’, 10);
- virka remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (breidd
Í kóðanum hér að ofan bætum við við tveimur síum með því að nota add_filter aðgerðina. Fyrri rökin eru sían sem við viljum tengja við og önnur tilgreinir aðgerðina sem við viljum keyra þegar sían er kölluð til.
Í kóðanum okkar tengjum við tvær óskýrar aðgerðir:
- post_thumbnail_html - myndir sóttar með smámynd ()
- mynd_senda_til ritstjóra - myndum bætt við ritstjórann
Við notum síðan venjulegt segð til að fjarlægja bæði breidd og hæðareiginleika úr myndamerkjunum. Nú þegar myndirnar okkar eru sendar í vafrann geta þær verið „fljótar“ alveg eins og Marcotte sagði okkur að þær ættu að gera.
Játning
Ég verð að játa að hafa haft hugmyndina um að nota bæta við_filter til að fjarlægja eiginleika sem ég gat ekki um ævina fundið réttu WordPress síurnar til að tengjast.
Eftir mikla leit rakst ég loksins á þessa afar gagnlegu færslu á Wordpress Stack Exchange eftir Nathaniel Taintor sem veitti upplýsingarnar um þær tvær síur sem ég þurfti.
Fyrirvarar
Eftir því sem ég best veit er eini gallinn við þessa nálgun að hún fjarlægir ekki eiginleika breiddar og hæðar frá öllum myndum á síðunni þinni. Mér fannst þetta vera vandamál, sérstaklega með Gravatar myndirnar sem WordPress notar í athugasemdum.
Ef einhver hefur lausn á þessu máli, vinsamlegast skiljið eftir athugasemd svo við getum öll haft gagn.
Ég vona að þetta hafi verið gagnlegt og sýnt fram á valkost við að treysta á JavaScript til að innleiða „fljótandi myndir“ á WordPress vefsíðum.
Orð: David Smith
Dave Smith er framhönnuður með aðsetur nálægt fallegu borginni Bath í Bretlandi. Þegar hann er ekki að vinna að nýjum og spennandi vefverkefnum má finna hann á trompet í allt frá Big Band djasshópum til sinfóníuhljómsveita. Þú getur náð í Dave á Twitter sem @get_dave.
