Jak sprawić, by obrazy WordPress były responsywne
WordPress to naprawdę potężna platforma. Tworzenie responsywnego motywu i integrowanie go jest całkiem łatwe, gdy znasz podstawy motywu. Z drugiej strony, responsywne obrazy nie są czymś, co WordPress zajmuje po wyjęciu z pudełka. Możesz przejść przez drogę ręcznego generowania każdego rozmiaru obrazu, następnie w edytorze HTML możesz ręcznie wpisać tag obrazu, atrybuty srcset i każdy obraz. Zajmie to nie tylko czas, ale może być problemem dla administratorów, którzy nie znają języka HTML.
Na szczęście istnieje sposób, aby WordPress wykonał wszystkie ciężkie ćwiczenia. Może generować wszystkie rozmiary obrazów z jednego obrazu, a następnie, za pomocą wtyczki, zaimplementować atrybuty obrazu i srcset w dowolnym miejscu, w którym autor zdecyduje się wstawić obraz.
Krok 1: zmodyfikuj functions.php, aby wygenerować więcej rozmiarów obrazu
Za każdym razem, gdy przesyłasz obraz, WordPress zapisuje go w oryginalnym rozmiarze. Automatycznie generuje 3 kopie o zmienionym rozmiarze w tych standardowych rozmiarach (wysokość lub szerokość może zmieniać się w zależności od współczynnika obrazu):
- Miniatura (150 × 150)
- Średni (300 × 300)
- Duży (1024 × 1024)
Jest to naprawdę potężna funkcja, ponieważ można ją dostosować do dowolnego rozmiaru obrazu. Oznacza to, że nie trzeba wykonywać wielu kopii obrazu w różnych rozmiarach. Wystarczy przesłać pojedynczy obraz, a WordPress tworzy kopie o zmienionym rozmiarze.
Odbywa się to poprzez modyfikację pliku functions.php. Aby dodać nowe rozmiary obrazów, musisz dodać połączenia do funkcji add_image_size . Oto przykład, który dodaje cztery nowe rozmiary obrazów:
add_image_size( 'sml_size', 300 );add_image_size( 'mid_size', 600 );add_image_size( 'lrg_size', 1200 );add_image_size( 'sup_size', 2400 );Każde wywołanie funkcji zawiera nazwę (tak, że WordPress może zidentyfikować rozmiar) i szerokość. Nowe rozmiary będą miały szerokość 300, 600, 1200 i 2400 pikseli. Możliwe jest, że dzięki funkcji add_image_size WordPress może również ustawić wysokość lub przyciąć obraz, ale powyższy przykład zachowa oryginalny współczynnik proporcji obrazu. (Więcej dowiesz się o funkcji add_image_size w Kodeks WordPress .)
Powyższy przykład pokazuje tylko cztery nowe rozmiary obrazów, ale możesz dodać więcej lub mniej ... będzie to oparte na Twoim projekcie motywu. Za każdym razem, gdy obraz zostanie przesłany do WordPressa, wygeneruje nowe rozmiary obrazu. Następnym krokiem jest włączenie ich do kodu HTML.
Krok 2: zainstaluj wtyczkę RICG Responsive Images
Aby WordPress mógł wyświetlać wszystkie rozmiary obrazów, należy zainstalować nową wtyczkę: Odpowiedzi RICG podłącz. Po zainstalowaniu i aktywowaniu wszystkie rozmiary obrazów zostaną uwzględnione w tagu obrazu za pomocą atrybutu srcset.
Zazwyczaj, gdy obraz zostanie dodany do strony w WordPress, wyjściowy HTML wygląda następująco:
W atrybucie src znajduje się pojedynczy obraz.
Po zainstalowaniu wtyczki HTML będzie wyglądał następująco:
Wszystkie nowe rozmiary zdjęć zostały dodane za pomocą atrybutu srcset .
Wtyczka zawiera również Picturefill.js , polyfill responsywnego obrazu, który dodaje obsługę zarówno elementu obrazu, jak i nowych atrybutów responsywnych dla elementu img. To, razem z atrybutami srcset teraz zawartymi w tagach graficznych, sprawia, że twoje obrazy są responsywne.
Twoje zdjęcia są teraz responsywne
Teraz obrazy na Twojej stronie będą reagować - przeglądarka wybierze najbardziej odpowiedni obraz do pobrania.
Użytkownicy na urządzeniach z mniejszymi ekranami otrzymają mniejsze obrazy. Twoja strona będzie ładować się szybciej, ponieważ zdjęcia będą pobierane szybciej, będą wymagać mniejszej przepustowości użytkowników. Użytkownicy na urządzeniach z większymi ekranami otrzymają większe obrazy. Nie będą one wyświetlane w pikselach lub o gorszej jakości.
Jest tylko jeden potencjalny problem z tą metodą: będzie działać tylko z obrazami przesłanymi do WordPress po zainstalowaniu wtyczki RICG Responsive Images. Jeśli jest to zupełnie nowa strona internetowa, nad którą pracujesz, może to nie stanowić problemu, jednak jeśli jest to istniejąca strona z istniejącą zawartością, nowe rozmiary obrazów dodane w functions.php nie zostaną wygenerowane. Na szczęście nie trzeba ponownie dodawać wszystkich obrazów - istnieje wtyczka, która może pomóc.
Krok 3: Zainstaluj wtyczkę, aby ponownie wygenerować rozmiary obrazów (opcjonalnie)
The Regeneruj miniatury wtyczka przejdzie przez wszystkie istniejące załączniki obrazu i ponownie wygeneruje nowe rozmiary obrazów na podstawie nowych utworzonych w functions.php - jest to oszczędność czasu rzeczywistego i wymaga tylko kliknięcia pojedynczego przycisku.
Po zainstalowaniu przejdź do Narzędzia -> Regen. Miniatury, a następnie kliknij przycisk "Regeneruj wszystkie miniatury". Pojawi się pasek stanu, a zobaczysz informację o tym, ile zdjęć zostało powiększonych.
Teraz wszystkie istniejące obrazy w Twojej witrynie będą poprawnie wyprowadzane za pomocą tagu obrazu za pośrednictwem atrybutu srcset .
Wyróżnione zdjęcia wykorzystują obraz urządzenia i obraz urządzenia mobilnego przez Shutterstock.