Sadržaj
- Potrebno znanje: Osnovni PHP i CSS
- Zahtijeva: WordPress instalacija, odabrani uređivač teksta
- Vrijeme projekta: 10 minuta
Ako se pretplatite na tiskanu verziju časopisa .net (ako ne, zašto ne !?), vidjet ćete da ovomjesečno izdanje sadrži izvrstan članak o "Responzivnom dizajnu s WordPressom".
U članku autor Jesse Friedman iznosi hrpu doista korisnih tehnika za iskorištavanje i prevladavanje svojstvene WordPress funkcionalnosti kako bi se stvorilo doista učinkovito web mjesto koje reagira. Ako razmišljate o stvaranju responzivne web stranice s WordPressom, svakako biste trebali uzeti kopiju njegovog članka. To se mora pročitati.
Budući da sam nedavno obnovio svoj osobni blog na WordPressu, koristeći responzivni pristup, koji je bio prvi za mobilne uređaje, upoznao sam neke od tehnika obrađenih u članku. Međutim, jedina stavka koja mi se zaista istaknula bio je Jessejev pristup omogućavanju fluidnih slika putem jQueryja.
Problem s WordPressom i "fluidnim slikama"
Kao što sam siguran da svi znate „fluidne slike“ - koje koriste maksimalnu širinu: 100% - zahtijevaju da slike nemaju fiksnu širinu ili visinu kako bi se mogle prilagoditi veličini spremnika. Nažalost, WordPress automatski izračunava dimenzije slika generiranih iz biblioteke medija i dodaje odgovarajuće atribute širine i visine bilo kojim oznakama img>.
Ovo je izvrsno za brzinu prikazivanja stranica, ali baca a masivan ključ u radu kada je u pitanju stvaranje responzivnih izgleda, jer dimenzije slike više nisu ograničene na veličinu njihovog spremnika.
To je problem.
Rješenje koje nije jQuery
U svom članku Jesse ’sugerira upotrebu jQueryja za uklanjanje atributa širine i visine sa svih oznaka img> na stranici nakon što se učita. To sigurno djeluje, ali prilikom izrade moje web stranice nije mi se svidjela ideja da se za postizanje toga oslanjam na JavaScript, pogotovo ako je na dotičnoj stranici bilo puno slika.
Tu su u pomoć priskočili WordPress filtri.
WordPress codex definira filtar kao:
"... udice koje WordPress pokreće za izmjenu teksta različitih vrsta prije nego što ga doda u bazu podataka ili pošalje na zaslon preglednika."
Ispostavilo se da je to upravo ono što nam treba. Postavljanjem filtra koji će se izvoditi na svim slikama kao završnoj radnji prije nego što se prikažu na stranici, pomoću PHP-a možemo ukloniti atribute širine i visine, zaobilazeći tako potrebu za (potencijalno) skupom DOM manipulacijom putem JavaScript-a.
Kod
- /**
- * FUNKCIJE ODGOVORNE SLIKE
- */
- add_filter ('post_thumbnail_html', 'remove_thumbnail_dimensions', 10);
- add_filter ('image_send_to_editor', 'remove_thumbnail_dimensions', 10);
- funkcija remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (širina
U gornji kod dodajemo dva filtra pomoću funkcije add_filter. Prvi argument je filtar na koji se želimo spojiti, a drugi određuje funkciju koju želimo pokrenuti kad se filtar pozove.
U našem kodu spojimo dvije nejasne funkcije:
- post_thumbnail_html - slike preuzete pomoću post_thumbnail ()
- image_send_to_editor - slike dodane u uređivač
Zatim pomoću regularnog izraza uklanjamo atribute širine i visine s oznaka slike. Kad se naše slike pošalju u preglednik, mogu biti u potpunosti "fluidne" baš onako kako nam je rekao gospodin Marcotte.
Ispovijed
Moram priznati da sam imao ideju koristiti dodaj_filter za uklanjanje atributa nisam mogao tijekom cijelog svog života pronaći ispravne WordPress filtre na koje se mogu povezati.
Nakon puno pretraživanja konačno sam naišao na ovaj izuzetno koristan post na Wordpress Stack Exchangeu Nathaniela Taintora koji je pružio informacije o dva potrebna filtra.
Upozorenja
Koliko znam, jedini veći nedostatak ovog pristupa je taj što ne uklanja atribute širine i visine sa svih slika na vašoj web lokaciji. Otkrio sam da je ovo problem, posebno sa slikama Gravatar koje WordPress koristi u komentarima.
Ako netko ima rješenje za ovaj problem, molimo vas da ostavite komentar kako bismo svi mogli imati koristi.
Nadam se da je ovo bilo korisno i da je pokazao alternativu oslanjanju na JavaScript za implementaciju "fluidnih slika" na WordPress web stranice.
Riječi: David Smith
Dave Smith dizajner je sa sjedištem u blizini prekrasnog grada Bath u Velikoj Britaniji. Kad ne radi na novim i uzbudljivim web projektima, svira se na trubi u svemu, od jazz grupa Big Banda do Simfonijskih orkestara. Možete sustići Davea na Twitteru kao @get_dave.
