Tartalom
- Szükség van tudásra: Basic PHP és CSS
- Igényel: WordPress telepítés, a kívánt szövegszerkesztő
- Projekt idő: 10 perc
Ha feliratkozik a .net magazin nyomtatott változatára (ha nem, akkor miért ne !?), akkor láthatja, hogy ebben a hónapban megjelent számunk kiváló cikket tartalmaz az „Reagens tervezés WordPress-rel” címmel.
A cikkben Jesse Friedman író rengeteg valóban hasznos technikát vázol fel a WordPress-funkciók maximális kihasználása és leküzdése érdekében, hogy valóban hatékony reagálóképes weboldalt hozzanak létre. Ha egy reszponzív webhely létrehozására gondol a WordPress segítségével, akkor mindenképpen vegyen fel egy cikkét. Kötelező olvasmány.
Miután a közelmúltban átépítettem a személyes blogomat a WordPress-en, egy adaptív, mobil-első megközelítéssel, ismertem a cikkben szereplő néhány technikát. Azonban az egyetlen elem, ami igazán kiemelkedett számomra, Jesse megközelítése volt a folyékony képek lehetővé tétele a jQuery segítségével.
A WordPress és a „folyékony képek” problémája
Mivel biztos vagyok benne, hogy mindannyian tisztában vagytok a „folyékony képekkel” - amelyek maximális szélességet használnak: 100% - megkövetelik, hogy a képek ne legyenek rögzített szélességűek vagy magasságúak ahhoz, hogy a tárolójuk méretéhez méretezhetők legyenek. Sajnos a WordPress automatikusan kiszámítja a Média könyvtárból létrehozott képek méreteit, és minden img> címkéhez hozzáadja a megfelelő szélesség és magasság attribútumokat.
Ez nagyszerű az oldalmegjelenítési sebességnél, de a tömeges csavarkulcs a munkákban, amikor adaptív elrendezéseket kell létrehozni, mivel a képméretek már nem korlátozódnak a tárolójuk méretére.
Az egy probléma.
A nem jQuery megoldás
Cikkében Jesse ’a jQuery használatát javasolja a szélesség és magasság attribútumok eltávolításához az oldal összes img> címkéjéből, miután betöltötte. Ez minden bizonnyal működik, de a webhelyem felépítésekor nem tetszett az ötlet, hogy a JavaScriptre támaszkodjak ennek elérése érdekében, különösen, ha sok kép volt a kérdéses oldalon.
Itt jöttek a WordPress szűrők a segítségre.
A WordPress-kódex egy szűrőt definiál:
"... horgok, amelyeket a WordPress elindít a különféle típusú szövegek módosítása előtt, mielőtt hozzáadná az adatbázishoz vagy elküldené a böngésző képernyőjére."
Mint kiderült, pontosan erre van szükségünk. Ha olyan szűrőt állítunk be, amely az összes képen végső műveletként fut, mielőtt azokat megjelenítenék az oldalon, a PHP segítségével eltávolíthatjuk a szélesség és a magasság attribútumokat, ezáltal kijátszva a (potenciálisan) drága DOM manipuláció szükségességét a JavaScript segítségével.
A kód
- /**
- * VÁLASZKÉP FUNKCIÓK
- */
- add_filter (’post_thumbnail_html’, ’remove_thumbnail_dimensions’, 10);
- add_filter (’image_send_to_editor’, ’remove_thumbnail_dimensions’, 10);
- function remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (szélesség
A fenti kódban két szűrőt adunk hozzá az add_filter függvény segítségével. Az első argumentum a szűrő, amelybe bekapcsolni szeretnénk, a második pedig azt a funkciót határozza meg, amelyet a szűrő meghívásakor futtatni szeretnénk.
Kódunkban két homályos funkciót kapcsolunk össze:
- post_thumbnail_html - képek a post_thumbnail ()
- image_send_to_editor - képek hozzáadva a szerkesztőhöz
Ezután egy reguláris kifejezéssel eltávolítjuk a szélesség és a magasság attribútumokat a képcímkékről. Most, amikor képeinket elküldjük a böngészőbe, teljesen „folyékonyak” lehetnek, ahogy Marcotte úr mondta nekünk.
Vallomás
Be kell vallanom, hogy volt ötletem használni add_filter Azon attribútumok eltávolításához, amelyeket életemig nem tudtam megtalálni a megfelelő WordPress szűrőket, amelyekbe bekapcsolódhat.
Sok keresgélés után végül Nathaniel Taintor erre a rendkívül hasznos bejegyzésére bukkantam a Wordpress Stack Exchange-en, amely információkat szolgáltatott a két szükséges szűrőről.
Figyelmeztetések
Ha jól tudom, ennek a megközelítésnek az egyetlen fő hátránya, hogy nem távolítja el a szélesség és a magasság attribútumokat a webhely összes képéről. Ezt problémának találtam, konkrétan a WordPress által a megjegyzésekben használt Gravatar-képekkel.
Ha valakinek van megoldása erre a kérdésre, kérjük, hagyjon megjegyzést, hogy mindannyian profitálhassunk.
Remélem, hogy ez hasznos volt, és alternatívát mutatott be a JavaScript használatára támaszkodva a „folyékony képek” megvalósításához a WordPress webhelyein.
Szavak: David Smith
Dave Smith elülső tervező székhelye a gyönyörű város, Bath, Egyesült Királyság közelében. Amikor nem új és izgalmas webes projekteken dolgozik, megtalálható a trombitás játék a Big Band jazzcsoportoktól a Szimfonikus zenekarokig. Dave-t utolérheti a Twitteren @get_dave néven.
