Zawartość
- Potrzebna wiedza: Podstawowy PHP i CSS
- Wymaga: Instalacja WordPress, wybrany edytor tekstu
- Czas projektu: 10 minut
Jeśli zapiszesz się na drukowaną wersję magazynu .net (jeśli nie, to dlaczego nie !?), zobaczysz, że w tym miesiącu pojawił się doskonały artykuł na temat „Responsive Design with WordPress”.
W artykule autor Jesse Friedman przedstawia zestaw naprawdę przydatnych technik maksymalnego wykorzystania i przezwyciężania nieodłącznej funkcjonalności WordPress w celu stworzenia naprawdę skutecznej, responsywnej strony internetowej. Jeśli myślisz o stworzeniu responsywnej witryny za pomocą WordPressa, zdecydowanie powinieneś pobrać kopię jego artykułu. To lektura obowiązkowa.
Niedawno przebudowałem mój osobisty blog na WordPress przy użyciu responsywnego podejścia mobilnego, znałem niektóre techniki omówione w artykule. Jednak jedyną rzeczą, która naprawdę mnie wyróżniała, było podejście Jessego do tworzenia płynnych obrazów za pośrednictwem jQuery.
Problem z WordPressem i „płynnymi obrazami”
Jestem pewien, że wszyscy zdajecie sobie sprawę z „płynnych obrazów” - które wykorzystują maksymalną szerokość: 100% - wymagają, aby obrazy nie miały stałej szerokości ani wysokości, aby można je było skalować do rozmiaru pojemnika. Niestety, WordPress automatycznie oblicza wymiary obrazów wygenerowanych z biblioteki Media i dodaje odpowiednie atrybuty szerokości i wysokości do wszystkich tagów img>.
Jest to świetne rozwiązanie dla szybkości renderowania stron, ale generuje plik masywny spanner w pracach nad tworzeniem responsywnych układów, ponieważ wymiary obrazu nie są już ograniczone do rozmiaru ich kontenera.
To jest problem.
Rozwiązanie inne niż jQuery
W swoim artykule Jesse sugeruje użycie jQuery do usunięcia atrybutów width i height ze wszystkich tagów img> na stronie po jej załadowaniu. To z pewnością działa, ale podczas tworzenia mojej witryny nie podobał mi się pomysł polegania na JavaScript, aby to osiągnąć, zwłaszcza jeśli na danej stronie było dużo obrazów.
Tutaj z pomocą przyszły filtry WordPress.
Kodeks WordPress definiuje filtr jako:
„… Haczyki uruchamiane przez WordPress w celu zmodyfikowania tekstu różnego typu przed dodaniem go do bazy danych lub wysłaniem go na ekran przeglądarki”.
Okazuje się, że właśnie tego potrzebujemy. Ustawiając filtr, który będzie działał na wszystkich obrazach jako ostatnią czynność, zanim zostaną wyrenderowane na stronie, możemy użyć PHP do usunięcia atrybutów szerokości i wysokości, omijając w ten sposób potrzebę (potencjalnie) kosztownej manipulacji DOM przez JavaScript.
Kod
- /**
- * RESPONSYWNE FUNKCJE OBRAZU
- */
- add_filter („post_thumbnail_html”, „remove_thumbnail_dimensions”, 10);
- add_filter (’image_send_to_editor’, ’remove_thumbnail_dimensions’, 10);
- funkcja remove_thumbnail_dimensions ($ html)
- $ html = preg_replace (’/ (width
W powyższym kodzie dodajemy dwa filtry za pomocą funkcji add_filter. Pierwszy argument to filtr, do którego chcemy się podłączyć, a drugi określa funkcję, którą chcemy uruchomić po wywołaniu filtru.
W naszym kodzie łączymy się z dwiema niejasnymi funkcjami:
- post_thumbnail_html - obrazy pobrane z post_thumbnail ()
- image_send_to_editor - zdjęcia dodane do edytora
Następnie używamy wyrażenia regularnego, aby usunąć zarówno atrybuty szerokości, jak i wysokości z tagów obrazu. Teraz, kiedy nasze obrazy są przesyłane do przeglądarki, mogą być w pełni „płynne”, tak jak powiedział nam pan Marcotte.
Spowiedź
Muszę przyznać, że wpadłem na pomysł użycia add_filter aby usunąć atrybuty, których nie mogłem za całe życie zlokalizować właściwych filtrów WordPress, do których mógłbym się podłączyć.
Po wielu poszukiwaniach w końcu trafiłem na ten niezwykle pomocny post Nathaniela Taintora w Wordpress Stack Exchange, który dostarczył informacji o dwóch potrzebnych mi filtrach.
Ostrzeżenia
O ile wiem, jedyną poważną wadą tego podejścia jest to, że nie usuwa ono atrybutów szerokości i wysokości ze wszystkich obrazów w Twojej witrynie. Uważam, że jest to problem, szczególnie w przypadku obrazów Gravatar, których WordPress używa w komentarzach.
Jeśli ktoś ma rozwiązanie tego problemu, zostaw komentarz, abyśmy wszyscy mogli skorzystać.
Mam nadzieję, że było to przydatne i stanowiło alternatywę dla polegania na JavaScript w celu zaimplementowania „płynnych obrazów” w witrynach WordPress.
Słowa: David Smith
Dave Smith jest projektantem front-endu mieszkającym w pobliżu pięknego miasta Bath w Wielkiej Brytanii. Kiedy nie pracuje nad nowymi i ekscytującymi projektami internetowymi, można go spotkać na trąbce we wszystkim, od big bandów jazzowych po orkiestry symfoniczne. Możesz spotkać się z Dave'em na Twitterze jako @get_dave.
