Vsebina
- Potrebno znanje: Osnovni PHP in CSS
- Zahteva: Namestitev WordPress, izbrani urejevalnik besedil
- Čas projekta: 10 minut
Če se naročite na tiskano različico revije .net (če ne, zakaj pa ne !?), boste videli, da je v mesečni številki odličen članek o »Odzivnem oblikovanju z WordPressom«.
V članku avtor Jesse Friedman opisuje kup resnično uporabnih tehnik za čim večje izkoriščanje in premagovanje vgrajene funkcionalnosti WordPress, da se ustvari resnično učinkovito odzivno spletno mesto. Če razmišljate o izdelavi odzivnega spletnega mesta z WordPressom, morate vsekakor vzeti kopijo njegovega članka. To je obvezno branje.
Potem ko sem pred kratkim obnovil svoj osebni spletni dnevnik na WordPressu z uporabo odzivnega pristopa, ki je bil prvi za mobilne naprave, sem poznal nekatere tehnike, zajete v članku. Vendar mi je resnično izstopal Jessejev pristop k omogočanju tekočih slik prek jQueryja.
Težava z WordPressom in "tekočimi slikami"
Ker sem prepričan, da vsi poznate 'tekoče slike' - ki uporabljajo največjo širino: 100% - zahtevajo, da slike nimajo fiksne širine ali višine, da se lahko prilagodijo velikosti vsebnika. Na žalost WordPress samodejno izračuna dimenzije slik, ustvarjenih iz medijske knjižnice, in doda ustrezne atribute širine in višine katerim koli oznakam img>.
To je super za hitrost upodabljanja strani, vendar vrže a zelo veliko pri ustvarjanju odzivnih postavitev, saj dimenzije slike niso več omejene na velikost vsebnika.
To je težava.
Rešitev, ki ni jQuery
V svojem članku Jesse ’predlaga uporabo jQuery za odstranitev atributov širine in višine iz vseh oznak img> na strani, ko se naloži. To zagotovo deluje, toda pri izdelavi mojega spletnega mesta mi ni bila všeč ideja, da bi se pri tem zanašal na JavaScript, še posebej, če je bilo na zadevni strani veliko slik.
Tu so na pomoč prišli filtri WordPress.
Kodeks WordPress definira filter kot:
"... kljuke, ki jih WordPress zažene, da spremeni besedilo različnih vrst, preden ga doda v bazo podatkov ali pošlje na zaslon brskalnika."
Izkazalo se je, da je to točno tisto, kar potrebujemo. Z nastavitvijo filtra za izvajanje vseh slik kot končnega dejanja, preden so upodobljene na strani, lahko s pomočjo PHP odstranimo atribute širine in višine, s čimer se izognemo potrebi po (potencialno) dragih manipulacijah z DOM s pomočjo JavaScript.
Koda
- /**
- * ODZIVNE FUNKCIJE 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
V zgornjo kodo dodajamo dva filtra s funkcijo add_filter. Prvi argument je filter, na katerega se želimo priključiti, drugi pa določa funkcijo, ki jo želimo zagnati, ko je filter poklican.
V naši kodi se povežemo z dvema nejasnima funkcijama:
- post_thumbnail_html - slike, pridobljene z post_thumbnail ()
- image_send_to_editor - slike, dodane v urejevalnik
Nato z regularnim izrazom odstranimo atribute širine in višine s slikovnih oznak. Zdaj, ko so naše slike poslane v brskalnik, so lahko popolnoma "tekoče", tako kot nam je dejal gospod Marcotte.
Izpoved
Moram priznati, da sem imel idejo o uporabi dodaj_filter odstraniti atribute, ki jih v življenju nisem mogel najti, najdem ustrezne filtre WordPress, na katere se lahko vključim.
Po dolgem iskanju sem končno naletel na to izjemno koristno objavo na Wordpress Stack Exchange avtorja Nathaniela Taintorja, ki je vseboval informacije o dveh filtrih, ki sem jih potreboval.
Opozorila
Kolikor vem, je edina večja pomanjkljivost tega pristopa ta, da ne odstrani atributov širine in višine z vseh slik na vašem spletnem mestu. Ugotovil sem, da gre za težavo, zlasti pri slikah Gravatar, ki jih WordPress uporablja v komentarjih.
Če ima kdo rešitev za to težavo, pustite komentar, da bomo lahko koristili vsem.
Upam, da je bilo to koristno in je pokazalo alternativo zanašanju na JavaScript za izvajanje "tekočih slik" na spletnih mestih WordPress.
Besede: David Smith
Dave Smith je zunanji oblikovalec s sedežem v bližini čudovitega mesta Bath v Veliki Britaniji. Ko ne dela na novih in vznemirljivih spletnih projektih, ga lahko najdemo na trobenti v vseh delih, od jazz skupin Big Banda do simfoničnih orkestrov. Daveja lahko na Twitterju dohitete kot @get_dave.
