TimThumb idź do domu! Jak obsługiwać obrazki w WordPress w 2026?
PL

TimThumb idź do domu! Jak obsługiwać obrazki w WordPress w 2026?

5.00 /5 - (25 głosów )
Spis treści

Jeśli jesteś weteranem WordPressa, na pewno pamiętasz TimThumb. Był to mały skrypt PHP, który w okolicach 2010 roku znajdował się w niemal każdym “płatnym motywie”. Pozwalał na łatwe przycinanie i skalowanie obrazków w locie.

W 2011 roku odkryto w nim krytyczną lukę (Zero-Day), która pozwoliła hakerom przejąć miliony stron. To był koniec ery “prostych skryptów”.

Dziś, w 2026 roku, WordPress ma potężny silnik obsługi mediów. Jeśli nadal widzisz timthumb.php w swoim motywie – usuń go natychmiast. W tym poradniku pokażę Ci, jak robić to profesjonalnie.

Dlaczego TimThumb był zły?

TimThumb działał “w locie”: brał obrazek z URL-a, przetwarzał go i zapisywał w cache. Problemy:

  1. Bezpieczeństwo: Pozwalał na zdalne wykonanie kodu (RCE), jeśli nie był idealnie skonfigurowany.
  2. Wydajność: Obciążał serwer PHP przy każdym nowym żądaniu obrazka.
  3. Brak integracji: Nie widział biblioteki mediów WordPressa.

Metoda 1: Natywne Rozmiary (add_image_size)

WordPress od lat posiada funkcję add_image_size(). Pozwala ona zdefiniować formaty, które system wygeneruje automatycznie podczas wgrywania pliku.

W pliku functions.php:

function wppoland_setup_theme() {
    // Włącz obsługę obrazka wyróżniającego
    add_theme_support( 'post-thumbnails' );

    // Standardowe rozmiary (przycinanie miękkie - zachowuje proporcje)
    add_image_size( 'blog-list', 800, 400 ); 

    // Hard Crop (przycinanie twarde - ucina nadmiar)
    // WordPress wykadruje dokładnie środek obrazka
    add_image_size( 'team-member', 300, 300, true ); 
    
    // Crop z pozycjonowaniem (np. od góry, od lewej)
    add_image_size( 'hero-banner', 1920, 600, ['center', 'top'] );
}
add_action( 'after_setup_theme', 'wppoland_setup_theme' );

W pliku szablonu (np. single.php):

if ( has_post_thumbnail() ) {
    the_post_thumbnail( 'hero-banner', ['class' => 'img-fluid'] );
}

Zaleta: Obrazki są generowane raz (podczas uploadu). Serwowane są jako gotowe pliki statyczne. Zero obciążenia PHP przy wyświetlaniu.

Metoda 2: Generowanie w locie (On-the-fly)

Natywne rozmiary mają wadę: jeśli zmienisz motyw, musisz regenerować miniatury (np. wtyczką Regenerate Thumbnails), co przy 100GB bibliotece trwa wieki.

W 2026 roku serwery są szybkie, a CDN-y tanie. Często używamy podejścia hybrydowego lub zewnętrznych usług.

Rozwiązanie: Serwerowe (ImageMagick / GD)

Jeśli potrzebujesz specyficznego rozmiaru tylko w jednym miejscu, możesz użyć funkcji wp_get_attachment_image_src(), ale ona tylko pobiera istniejący rozmiar.

W nowoczesnym developmentcie często korzystamy z CDN-ów, które robią to najlepiej.

Rozwiązanie: Cloudflare / CDN

Zamiast męczyć serwer PHP, użyj parametrów w URL.

<img src="https://twojastrona.pl/wp-content/uploads/obraz.jpg?width=400&height=300&format=avif">

Większość hostingu WordPress w 2026 (Kinsta, WP Engine, Cloudways) oferuje to w standardzie. Nie potrzebujesz skryptu PHP na swoim serwerze!

Metoda 3: Atrybut srcset i sizes

WordPress automatycznie generuje atrybut srcset dla twoich obrazków, pozwalając przeglądarce wybrać odpowiedni rozmiar dla urządzenia (telefon vs desktop 4K).

<!-- WordPress generuje to automatycznie: -->
<img src="obraz-800x400.jpg" 
     srcset="obraz-300x150.jpg 300w, 
             obraz-800x400.jpg 800w, 
             obraz-1024x512.jpg 1024w"
     sizes="(max-width: 600px) 100vw, 800px">

Twoim zadaniem jako developera jest tylko poprawne zdefiniowanie sizes za pomocą filtra wp_calculate_image_sizes.

Optymalizacja: WebP i AVIF

W 2026 roku JPG i PNG to przeżytek dla zdjęć. WordPress natywnie obsługuje WebP (od wersji 5.8) i AVIF (od wersji 6.5).

Nie potrzebujesz wtyczek. Po prostu wgraj plik AVIF, a WordPress go obsłuży. Lub użyj wtyczki (np. Performance Lab), aby automatycznie konwertować stare JPG na AVIF podczas uploadu.

Pozbądź się TimThumb (Clean Up)

Jeśli odziedziczyłeś stary projekt:

  1. Skanuj: Przukaj katalog wp-content w poszukiwaniu timthumb.php lub thumb.php.
  2. Usuń: Skasuj plik.
  3. Napraw: Znajdź w kodzie miejsca, gdzie był wywoływany: 
    // STARY KOD (ZŁY)
<img src="<?php echo get_template_directory_uri(); ?>/timthumb.php?src=..." />

// ZAMIEŃ NA (DOBRY)
<?php the_post_thumbnail( 'moj-rozmiar' ); ?>
  4. Regeneruj: Zainstaluj WP-CLI i uruchom wp media regenerate.

Podsumowanie

Historia TimThumb to lekcja pokory. Wygoda (skalowanie w locie) nie może stać ponad bezpieczeństwem. W 2026 roku mamy natywne add_image_size(), responsywne srcset i CDN-y przetwarzające obrazy w chmurze. Nie ma żadnego powodu, by wracać do rozwiązań sprzed 15 lat.