Praca z responsywnymi obrazami w WordPress

Do niedawna praca z responsywnymi obrazami w WordPressie była prawdziwym wyzwaniem. O ile użytkownicy nie chcieli sami napisać funkcjonalności, mieli pecha. Inną opcją był zakup wtyczki lub znalezienie innego obejścia, ale nie było dostępnych podstawowych funkcji, z których mogliby skorzystać programiści. Motywy utworzone bez obsługi responsywnych obrazów często działały wolno, a użyteczność była czasami niestabilna na różnych rozmiarach ekranu. To nie są dokładnie atrybuty, które klienci i użytkownicy kojarzą z dobrą funkcjonalnością.

Na szczęście wszystko się zmieniło wraz z wydaniem WordPress 4.4. Teraz funkcjonalność responsywnych obrazów jest zawarta bezpośrednio w WordPress, umożliwiając programistom pracę z nimi również w motywach. Udało się to osiągnąć dzięki wtyczce responsywnej grafiki i uczynieniu jej częścią rdzenia WordPress.

Jak to wszystko działa

Oczywiście, o ile jeszcze tego nie zrobiłeś, pierwszym krokiem jest aktualizacja do WordPress 4.4. Po zakończeniu aktualizacji, jeśli przejrzysz kod źródłowy swojej witryny, zauważysz, że obrazy na Twojej witrynie mają teraz dwa nowe atrybuty: srcset sizes Te atrybuty są filtrowane, co oznacza, że ​​wszystkie dostępne rozmiary obrazu są obecne, ale wymiary pozostają zgodne z oryginalnym obrazem. Atrybut srcset nie pozwala na niestandardowe przycinanie w przypadkach, gdy proporcje nie są takie same jak w oryginalnej wersji obrazu. Ma to na celu zapewnienie, że jakość obrazu nie zostanie pogorszona, gdy jest wyświetlany na ekranie użytkownika.

Wchodzenie pod maskę i wprowadzanie zmian

WordPress dodał responsywne obrazy jako funkcję tła, co oznacza, że ​​proces odbywa się automatycznie. Gdy przesyłasz obraz za pomocą programu do przesyłania multimediów, atrybuty są do nich stosowane bez żadnej interwencji z Twojej strony. Jest to również przydatne do optymalizacji obrazu.

Ponieważ jest to funkcja tła, responsywne obrazy nie są dostarczane z interfejsem użytkownika – po prostu się zdarzają. Jako programista możesz zmodyfikować plik functions.php w każdym ze swoich motywów, aby mieć pewność, że Twoje obrazy otrzymają dokładny atrybut sizes . Pamiętaj: jeśli chcesz odwoływać się do elastycznych obrazów, oznacza to atrybuty tagów obrazu, takie jak srcset sizes

Atrybuty domyślne

Gdy zaczniesz pracować z tą funkcją, zauważysz, że WordPress jest całkiem dobry w znajdowaniu wszystkich możliwych rozmiarów i dodawaniu ich do atrybutu srcset . Niestety, mogą pojawić się problemy, jeśli chodzi o przewidywalność atrybutu sizes . Jest to atrybut używany do przekazywania przeglądarkom szerokości obrazu, dzięki czemu obrazy będą dostępne i widoczne na dowolnym ekranie.

Ustawienie tego atrybutu jako domyślnego działa na kilka sposobów. Po pierwsze, sizes zastosowanie atrybutu size do każdego obrazu. Jest to pomocne, biorąc pod uwagę, że jest to obecnie obowiązkowy wymóg. Po drugie, nie pozwala przeglądarkom na używanie źródła obrazu szerszego niż oryginalny rozmiar obrazu. Kod CSS, który jest używany do dostosowywania rozmiaru obrazu w zależności od szerokości ekranu (takiego jak zapytania o media), może niestety sprawić, że ta wartość domyślna będzie znacznie mniej przydatna.

Filtruj haki dla twórców motywów

Ponieważ ten domyślny atrybut działa tylko z obrazami, które nie zostały zmodyfikowane przez kod CSS, WordPress utworzył haki filtrów, z których mogą korzystać twórcy motywów. Po prostu dostosuj atrybut sizes dla wszystkich obrazów za pomocą tego haka. Dzięki temu możesz mieć pewność, że podany atrybut sizes będzie idealny w każdej sytuacji.

Zastrzeżenie

Zanim przejdziemy dalej, poświęćmy chwilę na stwierdzenie, że opcja atrybutów domyślnych nie jest najlepszym sposobem zapewnienia dobrej responsywnej funkcjonalności obrazu. W rzeczywistości powinieneś starać się unikać tworzenia motywów, które opierają się na tej wartości domyślnej. Powodem tego jest to, że domyślny atrybut uniemożliwia przeglądarkom modyfikowanie źródła obrazu, gdy obszar wyświetlania nie jest tak duży, jak rozmiar oryginalnego obrazu. Przeglądarki nie mogą również modyfikować źródła, jeśli zostało ono zmodyfikowane przez CSS i potrzebny jest większy obraz.

Filtrowanie obrazu

Jako programista motywów możesz użyć filtrowania w swoich obrazach, aby uzyskać dokładny atrybut sizes . Można to osiągnąć za pomocą haka dla funkcji WordPress, wp_calculate_image_sizes . Możesz użyć tej funkcji, aby działała z Twoim aktualnym motywem. Możesz wprowadzić zmiany, które stosują różne atrybuty sizes do różnych typów obrazów.

Nowe funkcje dostępne w tej wersji umożliwiają teraz zastosowanie sizes i atrybutów srcset do wszystkich obrazów dodanych za pomocą narzędzia do przesyłania multimediów WordPress. Pozwala także dodawać atrybuty do zdjęć w swoich postach. Spójrz na wp_get_attachment_image_sizes . Zwraca to sizes size, który możesz przechwycić i zmienić za pomocą filtra w pliku functions.php dla twojego motywu. Podobnie, wp_get_attachment_image_srcset robi to samo, tylko dla atrybutu srcset .

Responsywne obrazy i niestandardowy motyw

Nowym funkcjom, które pojawiły się w tej najnowszej wersji, towarzyszy wiele haczyków, których możesz użyć, aby zapewnić skuteczną obsługę responsywnych obrazów w swoim motywie. Te haki obejmują:

Wp_calculate_image_sizes — hak, którego deweloperzy motywów mogą używać do dostosowywania sizes size do pracy z punktami przerwania, które są obecne w ich motywie.

Max_srcset_image_width — hak, którego programista motywu będzie mógł użyć do filtrowania według maksymalnej szerokości obrazów znajdujących się w atrybucie srcset .

W_calculate_image_srcset – Hook, który daje programistom możliwość filtrowania według atrybutów srcset .

Dowiedz się więcej o obsłudze responsywnych obrazów

Podręcznik programisty WordPressa może dostarczyć więcej wskazówek, jeśli chodzi o efektywne korzystanie z tych haków. Badania, które musisz wykonać, będą się różnić w zależności od poziomu komfortu podczas dokonywania tego rodzaju zakulisowych korekt. Jeśli jesteś twórcą motywów, który zajmuje się tym wyłącznie hobby, możesz trochę poeksperymentować. Z drugiej strony, jeśli jesteś programistą zajmującym się tematyką kariery, możesz chcieć zainwestować czas i zasoby wymagane do prawdziwego opanowania tej aktualizacji.

Korzyści z aktualizacji

Jeśli jeszcze nie zaktualizowałeś WordPressa (lub jeśli Twój zarządzany host WordPress nie zaktualizował jeszcze dla Ciebie), Twoi użytkownicy skorzystają z kilku wspaniałych korzyści, gdy to zrobisz. Obsługa elastycznych obrazów może poprawić wydajność strony, ponieważ ich strony nie będą tracić czasu na ściąganie zbyt dużych obrazów. Użytkownicy zauważą również bardzo imponującą poprawę jakości zdjęć. Nie zobaczą „robienia kiełbasy”, które obejmuje wszystko. Zamiast tego po prostu zobaczą, że to działa ładnie.

Jako programista będziesz musiał dostosować atrybut size w każdym z sizes functions.php dla wszystkich swoich motywów. Jednak po tym początkowym wysiłku wszystko staje się znacznie łatwiejsze. Po uporaniu się z krzywą uczenia się przekonasz się, że praca z tą nową funkcją przychodzi całkiem naturalnie.

Opanowanie tej nowej funkcji i uzyskanie responsywnej obsługi obrazów, która będzie działać z niestandardowymi motywami, może wymagać trochę badań i praktyki. Jeśli jednak zechcesz pogrzebać w podręczniku programisty i dowiedzieć się czegoś, Twoi klienci naprawdę docenią poprawę wydajności i funkcjonalności. Nadchodziło to od dawna, a doświadczeni twórcy motywów i ci, którzy mają za zadanie utrzymywać niestandardowe motywy, są słusznie podekscytowani tą aktualizacją.