Znaczenie responsywnych obrazów w WordPress Core

Popularność responsywnych obrazów rośnie i jest to coś, czego nikt nie może zignorować. Jednak korzystanie z tych samych funkcji w popularnym systemie CMS, takim jak WordPress, może być trudnym doświadczeniem. Zadanie może być czasochłonne, mimo że użytkownicy mogą samodzielnie napisać funkcję w obrębie motywu. Ale sytuacja zmieniła się radykalnie od czasu wprowadzenia WordPress 4.4, co znacznie ułatwiło programistom i administratorom osadzanie responsywnych funkcji obrazu w ich motywach.

Główną atrakcją jest dostępność wtyczki Responsive Images w rdzeniu WordPress. Oznacza to, że użytkownicy mogą teraz cieszyć się obecnością responsywnej obsługi obrazów, która jest domyślną funkcją w WordPress. Przyjrzyjmy się bliżej, jak ta funkcja faktycznie działa i jak można z niej ostrożnie korzystać, aby wykorzystać potencjał witryny WordPress.

Funkcjonowanie funkcji

Wszystkie treści i zdjęcia będą się składać z srcset i rozmiarach atrybuty po zaktualizowaniu do WordPress 4.4. Ma to głównie na celu zapewnienie dostępności każdego rozmiaru obrazu, tak aby zachować rzeczywisty żądany wymiar obrazu. W przypadkach, w których proporcje różnią się w porównaniu z oryginalnym żądanym obrazem, niestandardowe kadry zostaną pominięte w atrybucie srcset . Jednocześnie responsywny obraz zostanie zwrócony, gdy obraz zostanie wywołany za pomocą funkcji wp-get-attachment-image.

Responsywne obrazy działają jako funkcja tła w WordPress 4.4 ze względu na swoją automatyczną funkcjonalność, która występuje za każdym razem, gdy obraz jest przesyłany do WordPressa za pomocą programu do przesyłania multimediów. Ten automatyczny proces wyniki tło w srcset i rozmiarach atrybuty są wyświetlane, gdy obraz wyświetlany na stronie. Oznacza to, że w nowej funkcji responsywnych obrazów nie ma widocznych interfejsów. Żadna z opcji, takich jak obecność formularzy do celów wypełniania lub pól do celów sprawdzania i opcji do celów przełączania, nie jest dostępna z powodu braku widocznych interfejsów.

Twórcy motywów będą musieli upewnić się, że w obrazach są dostępne dokładne atrybuty rozmiarów, edytując plik functions.php motywu. Ważne jest, aby wziąć pod uwagę to, bo srcset rozmiary i cechy obecne w tagu obrazu jest to, co faktycznie reprezentuje reagujących obrazy w WordPressie. Najtrudniejszym do przewidzenia jest atrybut size, mimo że WordPress dobrze sobie radzi, jeśli chodzi o uwzględnienie wszystkich dostępnych rozmiarów w atrybucie srcset . Obowiązkiem atrybutu size jest wyjaśnienie przeglądarce, jak szeroki byłby obraz w każdym dostępnym oknie roboczym. Jednak wyniki mogą się różnić w zależności od stylizacji dostępnej w motywie użytkownika, zapewniając rozsądną wartość domyślną, a mianowicie „sizes=” (maksymalna szerokość: {{image-width}}) 100 vw, {{image-width}}”

Dzięki atrybutowi size użytkownicy mogą osiągnąć szczególnie dwie rzeczy. Po pierwsze, zapewnia dostępność prawidłowego atrybutu rozmiaru w obrazie, co stało się obecnie warunkiem wstępnym w odniesieniu do specyfikacji. Po drugie, zapobiega dostarczaniu przez przeglądarkę źródła obrazu, które jest bardziej w porównaniu z oryginalną szerokością, której zażądano. Jednak korzyści z atrybutu default size stają się mniejsze, gdy jakikolwiek CSS manipuluje rozmiarem obrazu przy zupełnie innych szerokościach okien ekranu.

Twórcy motywów mogą dostosować atrybut rozmiaru odpowiadający każdemu obrazowi za pomocą zaczepów filtrów, aby zapewnić dostarczanie idealnego atrybutu rozmiaru podczas każdego punktu przerwania. Dlatego pożądane jest, aby motyw nie opierał się na atrybucie rozmiarów domyślnych, jeśli chodzi o oferowanie dokładnej obsługi responsywnych obrazów. Głównym powodem jest fakt, że przeglądarki nie mogą modyfikować ani zmieniać źródła obrazu za pomocą atrybutu rozmiaru domyślnego w przypadkach, w których rozmiar widocznego obszaru jest mniejszy w porównaniu z oryginalnym żądanym rozmiarem obrazu. Jeśli jednak obraz został już zmieniony za pomocą CSS w punkcie przerwania, nie można również zmienić źródła.

Jeśli jesteś osobą mającą dostęp do bazy kodów WordPress lub jesteś twórcą motywów, większą koniecznością jest filtrowanie obrazów w motywach, aby zapewnić dokładne atrybuty rozmiarów . To powinny być najważniejsze rzeczy do zrobienia po wydaniu nowej wersji.

Konfiguracja responsywnych obrazów dla twojego motywu

Wprowadzono wiele nowych haczyków wraz z nowymi funkcjami, których można użyć do zapewnienia poziomu responsywnej obsługi obrazów, które są dostosowane do Twojego motywu. Maksymalna szerokość obrazu, który musi być uwzględniony w atrybucie srcset, może zostać przefiltrowana przez programistę motywu za pomocą haka max_srcset_image_width. Atrybuty srcset obrazu mogą być filtrowane przez zahaczenie do wp_calculate_image_srcset natomiast atrybut rozmiary mogą być dostosowywane przez dewelopera motywu, tak aby dopasować je do punktów przerwania grafik w temacie za pomocą filtrowania wp_calculate_image_sizes.

Obrazy treści można filtrować za pomocą wp_calculate_image_sizes, podczas gdy miniatury postów / polecane obrazy można filtrować za pomocą funkcji wp_get_attachment_image_attributes. Potrzeba dwóch różnych funkcji jest wymagana, ponieważ motyw zmienia się w zależności od sposobu, w jaki polecane obrazy są wyświetlane w różnych punktach przerwania, i jest zupełnie inny w porównaniu ze sposobem, w jaki obrazy treści są wyświetlane w tych samych okolicznościach. W ten sposób WordPress 4.4 oferuje twórcom motywów ulepszone możliwości filtrowania obrazów na różne sposoby, a tym samym jest tak szczegółowe, jak to tylko możliwe.

Wszystko to podkreśla natychmiastowe korzyści, jakie użytkownicy i twórcy motywów będą mogli osiągnąć dzięki responsywnej obsłudze obrazów dzięki aktualizacji WordPress 4.4. Umożliwia także twórcom motywów dołączanie obrazów, które są wyraźne i wyraźne, niezależnie od rozmiaru widocznego obszaru i gęstości pikseli, a tym samym poprawiają wydajność witryny, ponieważ strony internetowe mogą uniknąć dodatkowego czasu potrzebnego na załadowanie większych obrazów. Mimo że jest to automatyczna procedura dla użytkowników, twórcy motywów są odpowiedzialni za dostosowanie atrybutu rozmiaru obrazu, spędzając czas w pliku functions.php w motywie. Co więcej, należy pamiętać, że tworzenie i łączenie wtyczki Responsive Images to bardziej praca zespołowa.