Obsah
- Potřebné znalosti: Základní PHP a CSS
- Vyžaduje: Instalace WordPress, textový editor dle výběru
- Čas projektu: 10 minut
Pokud se přihlásíte k odběru tištěné verze časopisu .net (pokud ne, proč ne !?), uvidíte, že tento měsíc vychází vynikající článek o „Responzivním designu s WordPress“.
V článku autor Jesse Friedman nastiňuje spoustu opravdu užitečných technik, jak co nejlépe využít a překonat inherentní funkce WordPress, aby vznikl skutečně efektivní responzivní web. Pokud uvažujete o vytvoření responzivního webu pomocí WordPress, měli byste si určitě vyzvednout kopii jeho článku. Je to povinné čtení.
Když jsem nedávno přestavěl svůj osobní blog na WordPress pomocí citlivého přístupu založeného na mobilních zařízeních, byl jsem obeznámen s některými technikami popsanými v článku. Jedinou položkou, která pro mě opravdu vynikla, byl Jesseho přístup k umožnění plynulých obrázků pomocí jQuery.
Problém s WordPress a „plynulými obrázky“
Jak jsem si jistý, všichni víte, že „plynulé obrázky“ - které využívají maximální šířku: 100% - vyžadují, aby obrázky neměly pevnou šířku ani výšku, aby se mohly přizpůsobit velikosti svého kontejneru. WordPress bohužel automaticky vypočítá rozměry obrázků generovaných z knihovny médií a přidá odpovídající atributy šířky a výšky do všech značek img>.
To je skvělé pro rychlost vykreslování stránky, ale hodí to masivní klíč v pracích, pokud jde o vytváření responzivních rozvržení, protože rozměry obrázků již nejsou omezeny velikostí jejich kontejneru.
To je problém.
Řešení jiné než jQuery
Jesse ve svém článku navrhuje použít jQuery k odstranění atributů width a height ze všech značek img> na stránce, jakmile se načte. To rozhodně funguje, ale při vytváření mého webu se mi nelíbila myšlenka spoléhat se na to, že toho dosáhnu pomocí JavaScriptu, zvláště pokud na dotyčné stránce bylo hodně obrázků.
Tady přišly na pomoc filtry WordPress.
Kodex WordPress definuje filtr jako:
"... háčky, které WordPress spouští, aby upravily text různých typů před přidáním do databáze nebo odesláním na obrazovku prohlížeče."
Jak se ukázalo, je to přesně to, co potřebujeme. Nastavením filtru, který se bude spouštět na všech obrázcích jako závěrečná akce před jejich vykreslením na stránce, můžeme pomocí PHP odstranit atributy šířky a výšky, čímž obejdeme potřebu (potenciálně) nákladné manipulace DOM pomocí JavaScriptu.
Kód
- /**
- * FUNKCE ODPOVĚDNÉHO OBRAZU
- */
- add_filter ('post_thumbnail_html', 'remove_thumbnail_dimensions', 10);
- add_filter ('image_send_to_editor', 'remove_thumbnail_dimensions', 10);
- funkce remove_thumbnail_dimensions ($ html)
- $ html = preg_replace ('/ (šířka
V kódu výše přidáváme dva filtry pomocí funkce add_filter. První argument je filtr, do kterého se chceme připojit, a druhý určuje funkci, kterou chceme spustit při volání filtru.
V našem kódu se zapojíme do dvou obskurních funkcí:
- post_thumbnail_html - obrázky načtené pomocí post_thumbnail ()
- image_send_to_editor - obrázky přidané do editoru
Potom pomocí regulárního výrazu odebereme ze značek obrázků atributy šířky i výšky. Nyní, když jsou naše obrázky odeslány do prohlížeče, mohou být plně „plynulé“, jak nám řekl pan Marcotte.
Vyznání
Musím se přiznat, že jsem měl představu o použití add_filter Chcete-li odstranit atributy, které jsem nemohl po celý život najít správné filtry WordPress, do kterých se můžete připojit.
Po spoustě hledání jsem konečně narazil na tento nesmírně užitečný příspěvek na Wordpress Stack Exchange od Nathaniela Taintora, který poskytl informace o dvou filtrech, které jsem potřeboval.
Upozornění
Pokud vím, jedinou hlavní nevýhodou tohoto přístupu je, že neodstraňuje atributy šířky a výšky ze všech obrázků na vašem webu. Zjistil jsem, že jde o problém, konkrétně s obrázky Gravatar, které WordPress používá v komentářích.
Pokud má někdo řešení tohoto problému, zanechte prosím komentář, abychom mohli mít prospěch všichni.
Doufám, že to bylo užitečné a demonstrovalo to alternativu k tomu, že se při implementaci „fluidních obrázků“ na webech WordPress spoléháte na JavaScript.
Slova: David Smith
Dave Smith je přední designér se sídlem v blízkosti krásného města Bath ve Velké Británii. Když nepracuje na nových a vzrušujících webových projektech, lze ho najít hrát na trumpetu ve všem, od jazzových skupin Big Bandu až po symfonická orchestry. Davea můžete dohnat na Twitteru jako @get_dave.
