Przejdź do głównej treści

Responsives jak obrazy są zarządzane przez WordPressa

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 701.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Chociaż nie można zignorować rosnącej popularności responsywnych obrazów, korzystanie z tej funkcji może być bardzo trudne w przypadku ograniczeń dużego CMS, takiego jak WordPress. Chociaż jest całkowicie możliwe samodzielne zaprojektowanie funkcji w swoim motywie, zrobienie tego jest trudnym zadaniem i wymaga czasu.

Na szczęście wraz z uruchomieniem WordPress 4.4 programiści motywów i wtyczek będą mieli możliwość korzystania z responsywnych obrazów w swoich produktach. Od początku tej wersji wtyczka „Responsive Images RICG” została włączona do rdzenia WordPress, co oznacza, że ​​obsługa responsywnych obrazów jest teraz wewnętrzną domyślną funkcją WordPress. Przyjrzyjmy się, jak to działa i jak możesz go wykorzystać, aby jak najlepiej wykorzystać swoją witrynę WordPress.

czuły-image-trac-wordpress

Jak działa responsives zdjęć

Jak tylko zaktualizujesz WordPress do wersji 4.4, wszystkie Twoje treści i obrazy będą miały „srcset” i „ rozmiary Które są filtrowane, aby zapewnić istnienie każdego dostępnego rozmiaru obrazu, przy jednoczesnym zachowaniu rozmiaru oryginalnego żądanego obrazu. Należy pamiętać, że niestandardowe zmiany rozmiaru będą ignorowane w sekcji „ srcset »Jeśli współczynnik proporcji różni się od żądanego oryginalnego obrazu. Ponadto, wywołując obraz za pomocą funkcji „ wp-get-attachment obraz Zwróci również responsywny obraz.

W " Responsywne obrazy Jest funkcją działającą w tle, co oznacza, że ​​wszystko dzieje się automatycznie za każdym razem, gdy użytkownik przesyła obraz do WordPress za pośrednictwem interfejsu przesyłania multimediów. Obraz pojawiający się na stronie będzie miał atrybut „ srcset "A" rozmiary W wyniku tego procesu w tle.

Oznacza to, że nowa funkcjonalność responsywnych obrazów nie będzie miała widocznego interfejsu użytkownika. Nie ma opcji przełączania, formularzy do wypełnienia ani pól wyboru. Biorąc to pod uwagę, twórcy motywów powinni edytować swoje „ functions.php Aby ich obrazy miały precyzję z atrybutem „ rozmiary ”. Rzeczywiście, kiedy mówimy o responsywnych obrazach w WordPress, mówimy konkretnie o atrybutach „ srcset "I" rozmiary Które znajdują się na znaczniku obrazu.

Podczas gdy WordPress wykonuje wyjątkową pracę, wstawiając wszystkie dostępne rozmiary do atrybutu „ srcset ”, Atrybut„ rozmiary ”jest nieco trudniejszy do przewidzenia. Rzeczywiście, atrybut „ rozmiary Odpowiada za poinformowanie przeglądarki, jak ma wyglądać obrazek według dostępnych wymiarów okna. Ponieważ informacje będą się różnić w zależności od stylu motywu użytkownika, najlepsze, co możemy zrobić, to zapewnić rozsądną wartość domyślną w następujący sposób:

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

sizes="(max-width: {{image-width}}) 100vw, {{image-width}}"

Ten domyślny atrybut „ rozmiary Robi dwie rzeczy. Po pierwsze, upewnia się, że prawidłowy atrybut „ rozmiary Znajduje się na obrazku, który niedawno stał się obowiązkowym wymaganiem zgodnie ze specyfikacją. Po drugie, zapewnia, że ​​przeglądarka nie dostarcza źródła obrazu, które jest większe niż oryginalna żądana szerokość. W przypadku manipulacji CSS rozmiar obrazka będzie różny w zależności od szerokości okien, z drugiej strony domyślna wartość " rozmiary Stanie się mniej przydatny.

Ponieważ domyślny atrybut „ rozmiary „Pomoże tylko w przypadku obrazów, które nie zostały zmienione przez CSS, nawiasy filtrów będą dostępne, aby umożliwić twórcom motywów ustawienie„ atrybutu ” rozmiary „Z każdego obrazu, zapewniając doskonałe” rozmiary Dostarczany jest do każdego przystanku.

Należy tutaj zauważyć, że jeśli to możliwe, Twój motyw nie powinien opierać się na domyślnej wartości atrybutu „ rozmiary„Aby zapewnić dokładne informacje na temat responsywnej obsługi obrazów”. Rzeczywiście, domyślny atrybut „ rozmiary »Nie pozwala przeglądarce na zmianę źródła obrazu, gdy okno jest mniejsze niż oryginalny rozmiar żądanego obrazu. Nie będzie również w stanie zmienić źródła, jeśli obraz jest edytowany za pomocą CSS w punkcie przerwania, gdy obraz może być większy niż żądany rozmiar oryginalny.

Jeśli jesteś programistą motywów lub masz dostęp do bazy kodu WordPress, odfiltruj obrazy w kompozycji, aby zapewnić precyzję dzięki atrybutowi „ rozmiary To jedna z najważniejszych rzeczy, które możesz zrobić, gdy wkrótce pojawi się nowa wersja. Poniżej znajduje się przykład haka w „ wp_calculate_image_sizes Które możesz opracować, aby pasowały do ​​Twojego tematu.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

function adjust_image_sizes_attr( $sizes, $size ) {
   $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';
   return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr', 10 , 2 );

W tym przykładzie znacznik wyboru będzie dotyczył wszystkich treści, w tym wyróżnionych obrazów i miniatur. Można dodać dodatkową logikę, aby zapewnić, że różne typy obrazów mają różne wartości.

Kod-source-wp-image-czuły

Dodano nowe funkcje dla atrybutu „ srcset "I" rozmiary Można dodać do obrazu, który został dodany do WordPress za pośrednictwem Media Managera, oprócz obrazów dodanych w celu wyświetlenia zawartości. Funkcja wp_get_attachment_image_sizes Zwróci domyślny atrybut „ rozmiary Które można zmodyfikować za pomocą filtra motywu w pliku „ functions.php ”. Funkcja wp_get_attachment_image_srcset zwróci atrybut srcset »Który będzie zawierał wszystkie dostępne rozmiary żądanego obrazu. Można znaleźć dokumentację i przykłady użycia tych nowych funkcji katalog referencyjny programistów.

Konfiguracja responsywnych obrazów dla Twojego motywu

Dzięki nowym funkcjom pojawiło się kilka nowych nawiasów, których można użyć, aby zapewnić nowy poziom obsługi responsywnych obrazów, który najlepiej pasuje do Twojego motywu. Hak max_srcset_image_width „Pozwoli twórcy motywu na filtrowanie maksymalnej szerokości obrazu, który ma być uwzględniony w” srcset ”. Hak wp_calculate_image_srcset »Filtruje atrybuty« srcset »Obrazy, podczas gdy haczyk (filtr)« wp_calculate_image_sizes „Pozwoli twórcy motywu dostosować” rozmiary Aby lepiej dopasować punkty przerwania obrazu w ich motywie.

Jeśli szukasz przykładu, jak najlepiej filtrować atrybut „ rozmiary Obraz, nowy motyw dwudziestu szesnastu będzie doskonałym przykładem. W pliku functions.php tego motywu dwie ostatnie funkcje filtrują atrybut „ rozmiary Reagowanie na różne punkty przerwania obrazu w kompozycji.

responsywne filtry image Samouczek WordPress #

Aktualizacja do WordPress 4.4 oznacza, że ​​użytkownicy natychmiast skorzystają z responsywnej kompatybilności obrazu, która będzie promować wyświetlanie ostrych, wyraźnych obrazów przy każdym rozmiarze okna i gęstości pikseli. Spowoduje to również wzrost wydajności, ponieważ strony nie będą już musiały ładować dużych, ciężkich obrazów przez długi czas. Chociaż jest to automatyczny proces dla użytkowników, twórcy kompozycji będą musieli dostosować rozmiary obrazów do swoich motywów.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

To wszystko w tym samouczku, mam nadzieję, że pomoże ci lepiej zrozumieć znaczenie i koncepcję responsywnych obrazów w WordPress. Udostępnij ten samouczek znajomym w swoich ulubionych sieciach społecznościowych.

 

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
11 akcji
udział6
ćwierkanie1
Enregistrer4