Obsah
- Potrebné vedomosti: Základné PHP a CSS
- Vyžaduje sa: Inštalácia WordPress, textový editor podľa výberu
- Čas projektu: 10 minút
Ak sa prihlásite na odber tlačenej verzie časopisu .net (ak nie, prečo nie !?), uvidíte, že tento mesiac vychádza vynikajúci článok o „Responzívnom dizajne s WordPress“.
V článku autor Jesse Friedman načrtáva množstvo skutočne užitočných techník, ako čo najlepšie využiť a prekonať inherentné funkcie WordPress s cieľom vytvoriť skutočne efektívny responzívny web. Ak uvažujete o vytvorení responzívneho webu pomocou WordPress, určite by ste si mali zobrať kópiu jeho článku. Je to nevyhnutné čítanie.
Po nedávnom prebudovaní môjho osobného blogu na WordPress pomocou citlivého prístupu založeného na mobilných zariadeniach som bol oboznámený s niektorými technikami uvedenými v článku. Avšak jedna položka, ktorá pre mňa skutočne vynikla, bol Jesseho prístup k umožňovaniu plynulých obrázkov prostredníctvom jQuery.
Problém s WordPress a „tekutými obrázkami“
Ako som si istý, všetci viete, že „plynulé obrázky“ - ktoré využívajú maximálnu šírku: 100% - vyžadujú, aby obrázky nemali pevnú šírku ani výšku, aby sa mohli zväčšiť na veľkosť svojho kontajnera. WordPress, bohužiaľ, automaticky počíta rozmery obrázkov vygenerovaných z knižnice médií a pridáva zodpovedajúce atribúty šírky a výšky do akýchkoľvek značiek img>.
To je skvelé pre rýchlosť vykresľovania stránky, ale hodí sa masívny kľúč, ktorý sa týka vytvárania responzívnych rozložení, pretože rozmery obrázkov už nie sú obmedzené na veľkosť ich kontajnera.
To je problém.
Riešenie iné ako jQuery
Jesse vo svojom článku navrhuje použiť jQuery na odstránenie atribútov šírky a výšky zo všetkých značiek img> po načítaní stránky. To určite funguje, ale pri vytváraní môjho webu sa mi nepáčila myšlienka spoliehať sa na dosiahnutie tohto cieľa pomocou JavaScriptu, najmä ak na príslušnej stránke bolo veľa obrázkov.
Tu prišli na rad filtre WordPress.
Kodex WordPress definuje filter ako:
„... háčiky, ktoré WordPress uvádza na trh, aby upravili text rôznych typov pred pridaním do databázy alebo pred odoslaním na obrazovku prehliadača.“
Ako sa ukázalo, je to presne to, čo potrebujeme. Nastavením filtra, ktorý sa bude zobrazovať na všetkých obrázkoch ako posledná akcia pred ich vykreslením na stránke, môžeme pomocou PHP odstrániť atribúty šírky a výšky, čím obídeme potrebu (potenciálne) nákladnej manipulácie s DOM pomocou JavaScriptu.
Kód
- /**
- * FUNKCIE REAGUJÚCEHO OBRAZU
- */
- add_filter ('post_thumbnail_html', 'remove_thumbnail_dimensions', 10);
- add_filter ('image_send_to_editor', 'remove_thumbnail_dimensions', 10);
- funkcia remove_thumbnail_dimensions ($ html)
- $ html = preg_replace ('/ (šírka
V kóde vyššie pridávame dva filtre pomocou funkcie add_filter. Prvý argument je filter, do ktorého sa chceme zapojiť, a druhý určuje funkciu, ktorú chceme spustiť, keď sa filter volá.
V našom kóde sa zameriavame na dve nejasné funkcie:
- post_thumbnail_html - obrázky načítané pomocou post_thumbnail ()
- image_send_to_editor - obrázky pridané do editora
Potom sme pomocou regulárneho výrazu odstránili atribúty šírky a výšky zo značiek obrázkov. Keď sa teraz naše obrázky odosielajú do prehliadača, môžu byť úplne „plynulé“, ako nám povedal pán Marcotte.
Spoveď
Musím sa priznať, že som mal myšlienku použitia add_filter na odstránenie atribútov, ktoré som nemohol po celý život nájsť správne filtre WordPress, do ktorých sa môžem zapojiť.
Po dlhom hľadaní som konečne narazil na tento mimoriadne užitočný príspevok na serveri Wordpress Stack Exchange od Nathaniela Taintora, ktorý poskytol informácie o dvoch filtroch, ktoré som potreboval.
Upozornenia
Pokiaľ viem, jedinou hlavnou nevýhodou tohto prístupu je, že neodstráni atribúty šírka a výška zo všetkých obrázkov na vašom webe. Zistil som, že to je problém, najmä s obrázkami Gravatar, ktoré WordPress používa v komentároch.
Ak má niekto riešenie tohto problému, zanechajte prosím komentár, aby sme mohli využiť všetky výhody.
Dúfam, že to bolo užitočné a demonštrovalo alternatívu spoliehania sa na implementáciu „fluidných obrázkov“ na webových stránkach WordPress pomocou JavaScriptu.
Slová: David Smith
Dave Smith je frontendový dizajnér so sídlom v blízkosti krásneho mesta Bath vo Veľkej Británii. Keď nepracuje na nových a vzrušujúcich webových projektoch, nájdete ho na trúbke vo všetkom, od jazzových skupín Big Band až po symfonické orchestre. Davea môžete dohnať na Twitteri ako @get_dave.
