Përmbajtje
- Njohuritë e nevojshme: Basic PHP dhe CSS
- Kërkon: Instalim WordPress, redaktues teksti i zgjedhur
- Koha e projektit: 10 minuta
Nëse pajtoheni në versionin e shtypur të revistës .net (nëse jo, pse jo !?), do të keni parë që numri i këtij muaji përmban një artikull të shkëlqyeshëm mbi "Dizajni i përgjegjshëm me WordPress".
Në artikull, autori Jesse Friedman përshkruan një ngarkesë teknikash vërtet të dobishme për të shfrytëzuar maksimalisht dhe kapërcyer funksionalitetin e qenësishëm të WordPress-it, në mënyrë që të prodhojë një faqe në internet me të vërtetë të efektshme të përgjegjshme. Nëse po mendoni të prodhoni një sit të përgjegjshëm me WordPress duhet patjetër të merrni një kopje të artikullit të tij. Ashtë një lexim i domosdoshëm.
Pasi kam rindërtuar blogun tim personal në WordPress duke përdorur një qasje të përgjegjshme, të lëvizshme, unë isha njohur me disa nga teknikat e përfshira në artikull. Sidoqoftë, i vetmi artikull që ra në sy për mua ishte qasja e Jesse për të mundësuar imazhe fluide përmes jQuery.
Problemi me WordPress dhe "imazhe fluide"
Siç jam i sigurt që të gjithë jeni të vetëdijshëm për 'imazhet fluide' - të cilat përdorin gjerësinë maksimale: 100% - kërkojnë që imazhet të mos kenë gjerësi ose lartësi fikse në mënyrë që të mund të shkallëzohen në madhësinë e kontejnerit të tyre. Për fat të keq, WordPress automatikisht llogarit dimensionet e imazheve të krijuara nga biblioteka e Mediave dhe shton atributet përkatëse të gjerësisë dhe lartësisë në çdo imazh> etiketat.
Kjo është e shkëlqyeshme për shpejtësinë e pasqyrimit të faqes, por hedh një masiv boshllëk në punë kur bëhet fjalë për krijimin e paraqitjeve të përgjegjshme pasi dimensionet e imazhit nuk kufizohen më në madhësinë e kontejnerit të tyre.
Ky është një problem.
Zgjidhja jo-jQuery
Në artikullin e tij Jesse ’sugjeron përdorimin e jQuery për të hequr atributet e gjerësisë dhe lartësisë nga të gjitha etiketat img> në faqe pasi të jetë ngarkuar. Kjo sigurisht funksionon por kur ndërtova faqen time nuk më pëlqeu ideja e mbështetjes te JavaScript për ta arritur këtë, veçanërisht nëse kishte shumë imazhe në faqen në fjalë.
Kjo është ajo ku filtrat WordPress erdhën në ndihmë.
Kodeksi WordPress përcakton një filtër si:
"... grepa që WordPress lëshon për të modifikuar tekstin e llojeve të ndryshme para se ta shtoni atë në bazën e të dhënave ose ta dërgoni në ekranin e shfletuesit."
Siç rezulton kjo është pikërisht ajo që na duhet. Duke vendosur një filtër për të ekzekutuar të gjitha imazhet si veprimin përfundimtar para se ato të jepen në faqe, ne mund të përdorim PHP për të hequr atributet e gjerësisë dhe lartësisë duke anashkaluar kështu nevojën për manipulim (potencialisht) të shtrenjtë me DOM përmes JavaScript.
Kodi
- /**
- * FUNKSIONET E IMAZHIT PPRGJEGJS
- */
- add_filter ('post_thumbnail_html', 'remove_thumbnail_dimensions', 10);
- add_filter ('image_send_to_editor', 'remove_thumbnail_dimensions', 10);
- funksioni remove_thumbnail_dimensions ($ html)
- $ html = preg_replace ('/ (gjerësia
Në kodin e mësipërm po shtojmë dy filtra duke përdorur funksionin add_filter. Argumenti i parë është filtri në të cilin duam të fiksohemi dhe i dyti specifikon funksionin që duam të ekzekutojmë kur thirret filtri.
Në kodin tonë ne lidhemi në dy funksione të errëta:
- post_thumbnail_html - imazhet e marra me post_thumbnail ()
- image_send_to_editori - imazhe të shtuara në redaktor
Ne pastaj përdorim një shprehje të rregullt për të hequr atributet e gjerësisë dhe lartësisë nga etiketat e imazheve. Tani kur imazhet tona dërgohen në shfletues ato mund të jenë plotësisht 'fluide' ashtu si z. Marcotte na tha që duhet.
Një rrëfim
Më duhet të rrëfej se kisha idenë e përdorimit shtoni_filtër për të hequr atributet që nuk munda për jetën time të gjeja filtrat e saktë WordPress për t'u futur.
Pas shumë kërkimesh, më në fund hasa në këtë post jashtëzakonisht të dobishëm në Wordpress Stack Exchange nga Nathaniel Taintor i cili siguroi informacionin në lidhje me dy filtrat që më duheshin.
Caveats
Me sa di unë e vetmja tërheqje kryesore në këtë qasje është se ajo nuk heq atributet e gjerësisë dhe lartësisë nga të gjitha imazhet në faqen tuaj. Kam gjetur se kjo është një çështje, posaçërisht me imazhet Gravatar që përdor WordPress në komente.
Nëse dikush ka një zgjidhje për këtë çështje, ju lutemi lini një koment në mënyrë që të gjithë të mund të përfitojmë.
Shpresoj se kjo ka qenë e dobishme dhe demonstruar një alternativë për t'u mbështetur në JavaScript për të zbatuar "imazhe të rrjedhshme" në faqet e internetit të WordPress.
Fjalët: David Smith
Dave Smith është dizajner i përparmë me qendër pranë qytetit të bukur të Bath, Britani të Madhe. Kur ai nuk është duke punuar në projekte të reja dhe emocionuese në internet ai mund të gjendet duke luajtur borisë në gjithçka, nga grupet e xhazit Big Band në orkestrat Symphony. Ju mund ta arrini Dave në Twitter si @get_dave.
