Jak zmienić rozmiar obrazu wyróżnionego w WordPress: Kompletny przewodnik techniczny

Wyróżnione obrazy — zwane również miniaturami wpisów — są główną wizualną kotwicą każdej witryny WordPress. Pojawiają się na listach wpisów, stronach archiwów, podglądach w mediach społecznościowych i kanałach RSS, co sprawia, że ich wymiary mają bezpośredni wpływ na spójność układu i postrzeganą jakość projektu. Zmiana rozmiaru wyróżnionego obrazu w WordPress oznacza albo przedefiniowanie wymiarów w pikselach rejestrowanych przez WordPress podczas przesyłania, aktualizację sposobu, w jaki motyw żąda tych wymiarów podczas renderowania, albo jedno i drugie — a nieuwzględnienie obu stron jest najczęstszą przyczyną nieprawidłowego wyświetlania zmienionych obrazów na stronie.

Ten przewodnik omawia wszystkie dostępne metody, od ustawień panelu bez kodu po bezpośrednią personalizację PHP, z precyzyjnym kontekstem technicznym dla każdego podejścia.

Zrozumienie sposobu obsługi rozmiarów obrazów przez WordPress

Zanim zmienisz jakiekolwiek ustawienie, musisz zrozumieć proces przetwarzania. Gdy przesyłasz obraz, WordPress nie zapisuje jednego pliku — generuje wiele plików pochodnych na podstawie zarejestrowanych definicji rozmiarów. Te definicje są przechowywane w bazie danych i rejestrowane przez rdzeń WordPress, aktywny motyw lub zainstalowane wtyczki.

Trzy rozmiary domyślnie rejestrowane przez WordPress to:

• Miniatura — zazwyczaj 150x150 px, domyślnie przycinana
• Średni — do 300x300 px, skalowany proporcjonalnie
• Duży — do 1024x1024 px, skalowany proporcjonalnie

Twój motyw rejestruje dodatkowe rozmiary za pomocą add_image_size(). Gdy szablon wywołuje the_post_thumbnail('large'), WordPress wyszukuje plik wygenerowany dla tego zarejestrowanego rozmiaru podczas przesyłania. To jest kluczowy punkt architektoniczny: zmiana definicji rozmiaru nie powoduje retroaktywnego przeskalowania już przesłanych obrazów. Po każdej zmianie rozmiaru musisz ponownie wygenerować miniatury.

Metoda 1: Dostosowanie rozmiaru wyróżnionego obrazu za pomocą ustawień mediów WordPress

To właściwy punkt wyjścia dla witryn, w których motyw używa jednego z trzech podstawowych rozmiarów do wyświetlania wyróżnionych obrazów.

Krok 1: Zaktualizuj ustawienia mediów

Przejdź do Ustawienia > Media w panelu WordPress. Zobaczysz trzy grupy rozmiarów. Zidentyfikuj, którego rozmiaru używa Twój motyw dla wyróżnionych obrazów — sprawdź dokumentację motywu lub przejrzyj wyrenderowany HTML, aby potwierdzić klasę CSS (np. wp-image-* obok size-large).

Dostosuj pola szerokości i wysokości dla odpowiedniego rozmiaru. Ustawienie któregokolwiek wymiaru na 0 powoduje, że WordPress skaluje proporcjonalnie względem drugiej osi zamiast przycinać.

Kliknij Zapisz zmiany.

Krok 2: Ponownie wygeneruj istniejące miniatury

Nowe przesyłane pliki będą natychmiast używać zaktualizowanych wymiarów. W przypadku obrazów już znajdujących się w bibliotece mediów musisz ponownie wygenerować pliki pochodne. Najbardziej niezawodnym narzędziem do tego jest wtyczka Regenerate Thumbnails autorstwa Alexa Millsa.

Po zainstalowaniu i aktywowaniu przejdź do Narzędzia > Regen. Thumbnails i kliknij Regenerate All Thumbnails. W przypadku dużych bibliotek jest to operacja wymagająca dużych zasobów — uruchamiaj ją w godzinach niskiego ruchu, a jeśli korzystasz z planu VPS Hosting, rozważ tymczasowe zwiększenie max_execution_time i memory_limit PHP w php.ini, aby zapobiec przekroczeniu limitu czasu.

Częsty błąd: Jeśli Twój motyw rejestruje własny niestandardowy rozmiar z tą samą etykietą co podstawowy rozmiar, panel ustawień mediów nie będzie na niego wpływał. Wywołanie add_image_size() motywu ma pierwszeństwo.

Metoda 2: Użycie narzędzia Customizer WordPress lub panelu opcji motywu

Wiele komercyjnych motywów udostępnia kontrolki rozmiaru obrazu bez konieczności wprowadzania zmian w kodzie.

Krok 1: Sprawdź narzędzie Customizer

Przejdź do Wygląd > Dostosuj. Poszukaj sekcji oznaczonych jako Opcje motywu, Ustawienia bloga, Układ lub Ustawienia wpisów. Niektóre motywy mają tutaj dedykowaną sekcję Wyróżniony obraz.

Jeśli kontrolki istnieją, dostosuj szerokość i wysokość, a następnie kliknij Opublikuj. Motyw zaktualizuje swoją zarejestrowaną definicję rozmiaru i w niektórych implementacjach automatycznie ponownie wygeneruje odpowiednie obrazy.

Krok 2: Sprawdź dedykowany panel opcji motywu

Motywy premium zbudowane na frameworkach takich jak Redux lub Kirki często mają samodzielną pozycję menu Opcje motywu lub Panel motywu na pasku bocznym panelu. Szukaj podsekcji o nazwach Ustawienia obrazów, Miniatury wpisów lub Układ archiwum.

Dostosuj wartości, zapisz, a następnie ręcznie ponownie wygeneruj miniatury za pomocą metody wtyczki opisanej powyżej, ponieważ większość paneli motywów nie uruchamia automatycznie ponownego generowania.

Metoda 3: Definiowanie niestandardowych rozmiarów obrazów w functions.php

Jest to technicznie poprawna metoda dla programistów i wszystkich, którzy potrzebują precyzyjnej kontroli nad wymiarami, zachowaniem przycinania i nazewnictwem rozmiarów. Jest to również jedyna metoda pozwalająca rejestrować rozmiary, które nie kolidują z domyślnymi ustawieniami rdzenia.

Krok 1: Zarejestruj niestandardowy rozmiar

Edytuj plik functions.php motywu podrzędnego. Nigdy nie edytuj bezpośrednio plików motywu nadrzędnego — aktualizacje nadpiszą Twoje zmiany. Jeśli nie masz motywu podrzędnego, utwórz go przed kontynuowaniem.

Dodaj następujący kod wewnątrz funkcji z hookiem:

function mytheme_custom_image_sizes() {
    add_theme_support( 'post-thumbnails' );
    add_image_size( 'featured-hero', 1200, 600, true );
    add_image_size( 'featured-card', 400, 300, true );
}
add_action( 'after_setup_theme', 'mytheme_custom_image_sizes' );

Opis parametrów dla add_image_size():

• Argument 1 — uchwyt rozmiaru (ciąg znaków), używany podczas wywoływania obrazu w szablonach
• Argument 2 — szerokość w pikselach
• Argument 3 — wysokość w pikselach
• Argument 4 — tryb przycinania: true dla twardego przycięcia do dokładnych wymiarów; false dla skalowania proporcjonalnego; tablica jak array( 'left', 'top' ) dla przycinania pozycyjnego

Przypadek brzegowy: Przekazanie true jako argumentu przycinania domyślnie stosuje przycinanie do środka. Jeśli Twoje wyróżnione obrazy mają obiekty konsekwentnie poza centrum (np. fotografia portretowa), użyj tablicy pozycyjnej — array( 'center', 'top' ) — aby zapobiec obcinaniu głów.

Krok 2: Wywołaj niestandardowy rozmiar w plikach szablonów

Znajdź plik szablonu odpowiedzialny za renderowanie wyróżnionego obrazu. Typowymi kandydatami są single.php, archive.php, content.php lub template-parts/content-single.php. Wyszukaj the_post_thumbnail, aby znaleźć dokładne wywołanie.

Zastąp istniejący argument rozmiaru:

// Before
the_post_thumbnail( 'large' );

// After
the_post_thumbnail( 'featured-hero' );

Aby uzyskać większą kontrolę nad znacznikami wyjściowymi, użyj get_the_post_thumbnail() z niestandardowymi atrybutami:

echo get_the_post_thumbnail(
    get_the_ID(),
    'featured-hero',
    array(
        'class' => 'hero-image lazyload',
        'alt'   => get_the_title(),
        'loading' => 'lazy',
    )
);

Krok 3: Udostępnienie niestandardowego rozmiaru do wyboru w przesyłaniu mediów (opcjonalnie)

Domyślnie niestandardowe rozmiary zarejestrowane za pomocą add_image_size() nie pojawiają się w menu rozwijanym rozmiaru w przesyłaniu mediów WordPress. Aby udostępnić je do użytku redakcyjnego, dodaj ten filtr:

function mytheme_add_image_sizes_to_selector( $sizes ) {
    return array_merge( $sizes, array(
        'featured-hero' => __( 'Featured Hero (1200x600)', 'mytheme' ),
        'featured-card' => __( 'Featured Card (400x300)', 'mytheme' ),
    ) );
}
add_filter( 'image_size_names_choose', 'mytheme_add_image_sizes_to_selector' );

Krok 4: Ponownie wygeneruj miniatury

Uruchom wtyczkę Regenerate Thumbnails zgodnie z opisem w Metodzie 1. Dla wszystkich wcześniej przesłanych obrazów zostaną wygenerowane nowe pliki pochodne o nowych wymiarach.

Metoda 4: Dostosowanie rozmiaru wyróżnionego obrazu w kreatorze stron

Kreatory stron takie jak Elementor, Divi i Bricks Builder abstrahują warstwę szablonów, więc edycje plików szablonów mogą nie mieć zastosowania. Każdy kreator ma własne kontrolki rozmiaru obrazu.

Elementor

1. Otwórz stronę lub wpis w Elementorze.
2. Wybierz widget Wyróżniony obraz lub widget Wpisy wyświetlający miniaturę.
3. W lewym panelu znajdź Rozmiar obrazu na karcie Treść.
4. Wybierz zarejestrowany rozmiar z listy rozwijanej lub wybierz Niestandardowy, aby wprowadzić wymiary w pikselach.
5. Kliknij Aktualizuj.

Uwaga techniczna: Gdy wybierzesz „Niestandardowy” w Elementorze, nie rejestruje to nowego rozmiaru obrazu WordPress — używa JavaScript do zmiany rozmiaru obrazu po stronie klienta lub żąda obrazu w pełnym rozmiarze i skaluje go za pomocą CSS. Zwiększa to wagę strony. Zawsze preferuj zarejestrowany rozmiar WordPress zamiast niestandardowego wymiaru Elementora na stronach, gdzie wydajność jest priorytetem.

Divi

W module Blog lub module Wyróżniony obraz wpisu Divi opcja Rozmiar obrazu w sekcji Zaawansowane kontroluje, który zarejestrowany rozmiar WordPress jest żądany. Divi ma również własne ustawienia rozmiaru obrazu w Divi > Opcje motywu > Ogólne > Rozmiary miniatur, które rejestrują dodatkowe pliki pochodne.

Metoda 5: Użycie wtyczki do niestandardowych rozmiarów obrazów bez kodu

Jeśli edytowanie PHP nie wchodzi w grę, te wtyczki replikują funkcjonalność add_image_size() poprzez interfejs użytkownika:

Simple Image Sizes jest najbardziej bezpośrednim zamiennikiem add_image_size(). Po zainstalowaniu przejdź do Ustawienia > Media — wtyczka dodaje sekcję niestandardowych rozmiarów poniżej domyślnych ustawień rdzenia. Zdefiniuj swój rozmiar, zapisz i użyj wbudowanego mechanizmu ponownego generowania wtyczki, aby go zastosować.

Porównanie: Wszystkie metody w skrócie

Wydajność i kwestie optymalizacji obrazów

Rejestrowanie zbyt wielu rozmiarów obrazów jest często pomijanym problemem po stronie serwera. Każdy zarejestrowany rozmiar generuje nowy plik podczas przesyłania. Witryna z 15 zarejestrowanymi rozmiarami i 2000 obrazami w bibliotece mediów może mieć nawet 30 000 plików graficznych na dysku. Na hostingu współdzielonym wypełnia to limity; na każdym serwerze zwiększa rozmiary kopii zapasowych.

Regularnie przeprowadzaj audyt zarejestrowanych rozmiarów. Użyj tego fragmentu kodu w tymczasowej wtyczce lub functions.php, aby wyświetlić listę wszystkich zarejestrowanych rozmiarów:

add_action( 'wp_loaded', function() {
    if ( current_user_can( 'manage_options' ) && isset( $_GET['show_image_sizes'] ) ) {
        echo '<pre>';
        print_r( wp_get_registered_image_subsizes() );
        echo '</pre>';
        exit;
    }
} );

Odwiedź https://yoursite.com/?show_image_sizes=1 będąc zalogowanym jako administrator, aby zobaczyć pełną listę.

Dodatkowe praktyki wydajnościowe:

• Używaj formatu WebP. WordPress 5.8+ konwertuje przesyłane obrazy do WebP, jeśli biblioteka GD lub Imagick Twojego serwera to obsługuje. Sprawdź obsługę w Narzędzia > Stan witryny.
• Wdrożenie leniwego ładowania. WordPress domyślnie dodaje loading="lazy" do obrazów poniżej widocznego obszaru od wersji 5.5. Upewnij się, że Twoje niestandardowe wywołania the_post_thumbnail() zachowują ten atrybut.
• Kompresuj przed przesłaniem. Narzędzia takie jak ShortPixel lub Imagify integrują się bezpośrednio z potokiem mediów WordPress i automatycznie kompresują pliki pochodne. TinyPNG sprawdza się dobrze do ręcznej kompresji przed przesłaniem.
• Używaj CDN. Jeśli Twoja witryna obsługuje globalną publiczność, odciążenie dostarczania obrazów do CDN zmniejsza opóźnienia niezależnie od liczby zarejestrowanych rozmiarów.

W przypadku witryn z dużym obciążeniem obrazami — portfolio fotograficzne, serwisy informacyjne, sklepy WooCommerce — VPS z cPanel daje Ci kontrolę na poziomie serwera, umożliwiając dostosowanie limitów pamięci PHP, bezpośrednią konfigurację Imagick i zarządzanie limitami dysku, czego środowiska współdzielone nie mogą zaoferować.

Responsywne obrazy i atrybut srcset

WordPress automatycznie generuje atrybuty srcset i sizes dla obrazów w treści, pobierając dane ze wszystkich zarejestrowanych rozmiarów obrazów. Oznacza to, że każdy zarejestrowany rozmiar przyczynia się do zdolności przeglądarki do wyboru najbardziej odpowiedniej rozdzielczości dla obszaru roboczego i współczynnika pikseli urządzenia użytkownika.

Gdy wywołujesz the_post_thumbnail(), WordPress generuje znaczniki podobne do:

<img src="hero-1200x600.jpg"
     srcset="hero-400x300.jpg 400w, hero-800x400.jpg 800w, hero-1200x600.jpg 1200w"
     sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
     alt="Post Title"
     loading="lazy">

Atrybut sizes informuje przeglądarkę, jak szeroki będzie obraz przy różnych szerokościach obszaru roboczego. WordPress generuje domyślną wartość sizes, ale często jest ona niedokładna w przypadku złożonych układów. Nadpisz ją za pomocą filtra wp_calculate_image_sizes lub przekazując niestandardowy atrybut sizes w tablicy $attr funkcji get_the_post_thumbnail().

SSL, domena i kontekst hostingu

Jeśli migrujesz witrynę WordPress na nową domenę lub przełączasz się z HTTP na HTTPS po uzyskaniu certyfikatu SSL, adresy URL obrazów przechowywane w metadanych wpisów (odwołania _thumbnail_id) są powiązane z ID załącznika i nie są zależne od zmian domeny. Jednak adresy URL obrazów zakodowane na stałe w treści wpisów lub opcjach motywu będą wymagały aktualizacji za pomocą operacji wyszukiwania i zamiany przy użyciu WP-CLI:

wp search-replace 'http://olddomain.com' 'https://newdomain.com' --skip-columns=guid

Jeśli konfigurujesz nową instalację WordPress od podstaw, rejestracja domeny przez Rejestrację domen i połączenie jej z prawidłowo skonfigurowanym środowiskiem hostingowym zapewnia, że ścieżki przesyłania mediów i reguły przepisywania .htaccess są poprawne od samego początku, co pozwala uniknąć błędnych wzorców URL obrazów, które są żmudne do debugowania po fakcie.

Lista kontrolna decyzji technicznych

Użyj tej macierzy, aby wybrać właściwe podejście dla swojej sytuacji:

• Musisz zmienić podstawowy rozmiar (miniatura/średni/duży) i nie edytujesz kodu — użyj Ustawienia > Media, a następnie ponownie wygeneruj miniatury.
• Twój motyw premium ma panel opcji motywu — najpierw sprawdź tam, zanim dotkniesz jakichkolwiek plików.
• Potrzebujesz rozmiaru z dokładnymi wymiarami w pikselach i twardym przycinaniem — użyj add_image_size() w pliku functions.php motywu podrzędnego.
• Twoje zdjęcia wymagają przycinania poza centrum — przekaż tablicę pozycyjną jako czwarty argument do add_image_size().
• Używasz Elementora lub Divi — użyj natywnej kontrolki rozmiaru obrazu kreatora, ale preferuj zarejestrowane rozmiary WordPress zamiast „Niestandardowego” dla wydajności.
• Nie możesz edytować PHP i potrzebujesz niestandardowego rozmiaru — zainstaluj Simple Image Sizes, zdefiniuj rozmiar, ponownie wygeneruj.
• Masz dużą bibliotekę mediów — użyj Regenerate Thumbnails Advanced, który umożliwia selektywne ponowne generowanie według nazwy rozmiaru, aby uniknąć zbędnego przetwarzania.
• Wydajność jest priorytetem — przeprowadź audyt zarejestrowanych rozmiarów, włącz WebP, wdrożyj CDN i upewnij się, że leniwe ładowanie jest aktywne.
• Korzystasz z hostingu współdzielonego i napotykasz błędy pamięci lub przekroczenia limitu czasu podczas ponownego generowania — rozważ migrację do planu VPS Hosting, gdzie limity PHP są konfigurowalne.

FAQ

Dlaczego moje wyróżnione obrazy nadal wyświetlają stary rozmiar po zmianie ustawień mediów?

WordPress generuje pochodne obrazów podczas przesyłania. Zmiana definicji rozmiaru w Ustawienia > Media wpływa tylko na nowe przesyłane pliki. Musisz uruchomić narzędzie do ponownego generowania miniatur — takie jak wtyczka Regenerate Thumbnails — aby zmienić rozmiar plików już znajdujących się w bibliotece mediów.

Jaka jest różnica między add_image_size() z true a false jako parametrem przycinania?

Przekazanie true zmusza WordPress do przycięcia obrazu do dokładnie określonej szerokości i wysokości, domyślnie wyśrodkowanego. Przekazanie false skaluje obraz proporcjonalnie tak, aby żaden wymiar nie przekraczał podanych wartości, co oznacza, że rzeczywiste wymiary wyjściowe mogą być mniejsze niż określone, jeśli oryginalny współczynnik proporcji jest inny.

Czy rejestrowanie wielu niestandardowych rozmiarów obrazów spowolni moją witrynę?

Nie podczas renderowania — WordPress serwuje wstępnie wygenerowane pliki. Koszt wydajnościowy pojawia się podczas przesyłania, gdy Imagick lub GD musi wygenerować jeden plik pochodny dla każdego zarejestrowanego rozmiaru. Witryny z wieloma rozmiarami i dużą liczbą przesyłanych plików mogą doświadczać wolnych odpowiedzi podczas przesyłania i znacznego wzrostu zużycia dysku.

Czy mogę usunąć rozmiary obrazów, których już nie potrzebuję?

Tak. Użyj remove_image_size( 'size-name' ) w swoim functions.php, aby zatrzymać generowanie rozmiaru dla nowych przesyłanych plików. Istniejące pliki dla tego rozmiaru pozostają na dysku do momentu ręcznego usunięcia. Polecenie WP-CLI wp media regenerate --only-missing może pomóc w porządkowaniu, generując tylko brakujące rozmiary bez ponownego tworzenia wszystkich plików pochodnych.

Czy zmiana rozmiaru wyróżnionego obrazu wpływa na sposób wyświetlania obrazów podczas udostępniania w mediach społecznościowych?

Nie bezpośrednio. Platformy społecznościowe takie jak Facebook i Twitter odczytują metatagi Open Graph (og:image), aby określić, który obraz wyświetlić. Tagi te są zazwyczaj ustawiane przez wtyczkę SEO, taką jak Yoast SEO lub Rank Math, która rejestruje własny rozmiar obrazu (zazwyczaj 1200x630) specjalnie do udostępniania w mediach społecznościowych. Zmiana rozmiaru wyróżnionego obrazu motywu nie zmienia obrazu Open Graph, chyba że Twoja wtyczka SEO jest skonfigurowana do używania tego samego uchwytu rozmiaru.