W artykule:
Czy chcesz utworzyć dodatkowe rozmiary obrazów w WordPress?
Domyślnie WordPress automatycznie tworzy kilka kopii przesyłanych obrazów w różnych rozmiarach. Dodatkowo motywy i wtyczki WordPress mogą również tworzyć własne rozmiary obrazów.
W tym artykule pokażemy, jak łatwo tworzyć dodatkowe rozmiary obrazów w WordPress i używać ich w swojej witrynie.
Po co tworzyć dodatkowe rozmiary obrazów w WordPress?
Zwykle wszystkie popularne motywy i wtyczki WordPress bardzo dobrze radzą sobie z rozmiarami obrazów. Na przykład twój motyw WordPress może tworzyć dodatkowe rozmiary do wykorzystania jako miniatury na stronach archiwalnych.
Czasami jednak te rozmiary obrazów mogą nie pasować do Twoich własnych wymagań. Możesz użyć innego rozmiaru obrazu w motywie podrzędnym lub układzie siatki postów.
Możesz to zrobić, tworząc dodatkowe rozmiary obrazów w WordPress, a następnie wywołując te rozmiary, gdy ich potrzebujesz.
Mając to na uwadze, przyjrzyjmy się, jak tworzyć dodatkowe rozmiary obrazów w WordPress.
Rejestrowanie dodatkowych rozmiarów obrazów dla Twojego motywu
Większość motywów WordPress, w tym wszystkie najlepsze motywy WordPress, obsługuje domyślnie funkcję miniatur postów (wyróżniony obraz).
Jeśli jednak tworzysz niestandardowy motyw WordPress, musisz dodać obsługę miniatur postów, dodając następujący kod do funkcji motywu.plik php.
add_theme_support ('post-thumbnails' );
Po włączeniu obsługi miniatur postów można teraz korzystać z funkcji rejestrowania dodatkowych rozmiarów obrazów za pomocą funkcji add_image_size ().
Funkcja add_image_size jest używana w następującym formacie:
add_image_size ('nazwa-rozmiaru', szerokość, wysokość, tryb kadrowania );
Przykładowy kod może wyglądać następująco:
add_image_size ('sidebar-thumb', 120, 120, true); / / tryb przycinania twardego
add_image_size ('homepage-thumb', 220, 180); / / tryb miękkiego kadrowania
add_image_size ('singlepost-thumb', 590, 9999); / / tryb nieograniczonej wysokości
Teraz, jeśli zauważysz, określiliśmy trzy różne rodzaje rozmiarów obrazów. Każdy z nich ma różne tryby, takie jak przycinanie twarde, przycinanie miękkie i nieograniczona wysokość.
Omówmy każdy przykład i jak możesz go wykorzystać we własnych projektach.
1. Tryb Przycinania Twardego
Jak można zauważyć, jest „prawdziwa” wartość dodana po wysokości. To mówi WordPress, aby przyciąć obraz dokładnie do rozmiaru, który zdefiniowaliśmy (w tym przypadku 120 x 120px).
Metoda ta jest stosowana w celu zapewnienia, że wszystko jest dokładnie proporcjonalne. Ta funkcja automatycznie przycina obraz z boków lub z góry i dołu, w zależności od rozmiaru.
2. Tryb Miękkiego Kadrowania
Domyślnie włączony jest tryb miękkiego kadrowania, dlatego nie widzisz żadnej dodatkowej wartości dodanej po wysokości. Ta metoda zmienia proporcjonalnie Rozmiar obrazu bez zniekształcania go. Więc możesz nie uzyskać wymiarów, które chciałeś. Zwykle pasuje do wymiaru szerokości, A wysokości są różne w zależności od proporcji każdego obrazu. Przykładowy wyświetlacz wyglądałby tak:
Tryb Nieograniczonej Wysokości
Są chwile, kiedy masz bardzo długie obrazy, które chcesz wykorzystać w swoim projekcie, ale chcesz upewnić się, że szerokość jest ograniczona. Na przykład obrazy infografiki są zwykle bardzo długie i zwykle szersze niż szerokość treści.
Ten tryb pozwala określić szerokość, która nie złamie projektu, pozostawiając wysokość nieograniczoną.
Wyświetlanie dodatkowych rozmiarów obrazów w szablonie WordPress
Teraz, gdy dodałeś funkcjonalność dla pożądanych rozmiarów obrazów, przyjrzyj się wyświetlaniu ich w swoim szablonie WordPress. Otwórz plik motywu, w którym chcesz wyświetlić obraz i wklej następujący kod:
<?php the_post_thumbnail( 'your-specified-image-size');?>
Uwaga: Ten bit kodu musi być wklejony wewnątrz pętli post.
To wszystko, co naprawdę musisz zrobić, aby wyświetlić dodatkowe rozmiary obrazów w swoim motywie WordPress. Prawdopodobnie powinieneś owinąć go stylizacją, która pasuje do Twoich potrzeb.
Regeneracja Dodatkowych Rozmiarów Obrazów
Jeśli nie robisz tego na zupełnie nowej stronie, prawdopodobnie będziesz musiał zregenerować miniatury.
Funkcja add_image_size () generuje rozmiary tylko od momentu dodania do motywu. Oznacza to, że wszelkie obrazy postów, które zostały dodane przed włączeniem tej funkcji, nie będą miały nowych rozmiarów.
Aby to naprawić, musisz ponownie wygenerować nowy Rozmiar obrazu dla starszych obrazów. Jest to łatwe dzięki wtyczce o nazwie Regenerate Thumbnails. Po zainstalowaniu i aktywacji wtyczki w menu zostanie dodana nowa opcja: Narzędzia ” Regeneracja Miniaturek
Zobaczysz opcję regeneracji miniatur dla wszystkich obrazów lub tylko polecanych obrazów. Zalecamy regenerację wszystkich obrazów, aby uniknąć nieoczekiwanych zachowań lub uszkodzonych obrazów.
Aby uzyskać więcej informacji, zobacz nasz artykuł o tym, jak łatwo zregenerować nowe rozmiary obrazów w WordPress.
Włączanie dodatkowych rozmiarów obrazów dla treści postu
Nawet jeśli włączyłeś rozmiary obrazów w swoim motywie, użycie jest ograniczone tylko do Twojego motywu, co nie ma sensu.
Wszystkie rozmiary obrazów są generowane niezależnie od tego, dlaczego więc nie udostępnić go autorowi postu do wykorzystania w treści postu.
Możesz to zrobić, dodając następujący kod do pliku funkcji motywu.
function wpb_custom_image_sizes ($size_names ) {
$new_sizes = array(
'homepage-thumb' = > 'Homepage Thumbmail',
'singlepost-thumb' = > 'Infographic Single Post'
);
return array_merge ($size_names, $new_sizes);
}
add_filter ('image_size_names_choose', 'wpb_custom_image_sizes' );
Nie zapomnij zapisać zmian po dodaniu kodu.
Możesz teraz przesłać obraz do posta lub strony WordPress. W Ustawieniach bloku obrazów zobaczysz niestandardowe rozmiary obrazów w opcji „Rozmiar obrazu”.
Ty i inni autorzy pracujący nad Twoją witryną mogą teraz wybrać te opcje rozmiaru podczas dodawania obrazów do postów i stron.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak tworzyć dodatkowe rozmiary obrazów w WordPress. Możesz również zobaczyć nasz artykuł na temat najlepszych wtyczek do kompresji obrazu dla WordPress i naszego przewodnika wydajności WordPress, aby poprawić szybkość witryny.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
